function ContactList({ label, name, value, onChange }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col gap-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-semibold", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, label), /*#__PURE__*/ React.createElement("input", { type: "text", name: name, className: "w-full border-2 border-gray-300 p-2 rounded-md", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function ContactListStory() { const handleChange = (event)=>{ console.log(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ContactList, { label: "Armoni Davis", name: "rep_manager_name_armoni", value: "2812210720", onChange: handleChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ContactList, { label: "Danny Chavez", name: "rep_manager_name_danny", value: "8325777581", onChange: handleChange, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function InternetServiceComparison({ name, value, onChange, options }) { return /*#__PURE__*/ React.createElement("select", { name: name, value: value, onChange: onChange, className: "w-full border-2 border-gray-300 p-2 rounded-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: option.value, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, option.label))); } function InternetServiceComparisonStory() { const options = [ { value: 'spectrum', label: 'Spectrum' }, { value: 'att', label: 'AT&T' }, { value: 'xfinity', label: 'Xfinity' }, { value: 'other', label: 'Other Internet Service' } ]; const [installationDetails, setInstallationDetails] = React.useState({ internet_provider: '' }); const handleChange = (e)=>{ setInstallationDetails({ ...installationDetails, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InternetServiceComparison, { name: "internet_provider", value: installationDetails.internet_provider, onChange: handleChange, options: options, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function WirelessChangeoutTracker({ jobTypes, selectedType, onChange }) { return /*#__PURE__*/ React.createElement("select", { name: "job_type", className: "w-full border-2 border-gray-300 p-2 rounded-md", value: selectedType, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, jobTypes.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, type))); } function WirelessChangeoutTrackerStory() { const [selectedType, setSelectedType] = React.useState(""); const handleChange = (event)=>{ setSelectedType(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WirelessChangeoutTracker, { jobTypes: [ "Wireless", "Changeout-Wireless", "Changeout-Hardwired", "Trimout", "Takeover", "Retro" ], selectedType: selectedType, onChange: handleChange, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const [installationDetails, setInstallationDetails] = React.useState({ one_or_two_story: "", job_type: "", square_footage: "", internet_provider: "", equipment_camera_locations: "", activate_existing_equipment: "", customer_present_during_install: "", rep_manager_name: "", rep_manager_phone: "" }); const handleChange = (e)=>{ setInstallationDetails({ ...installationDetails, [e.target.name]: e.target.value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); const summary = ` Installation Details: 1 or 2 Story Building: ${installationDetails.one_or_two_story} Job Type: ${installationDetails.job_type} Square Footage: ${installationDetails.square_footage} Internet Provider: ${installationDetails.internet_provider} Equipment/Camera Locations: ${installationDetails.equipment_camera_locations} Activate any existing equipment: ${installationDetails.activate_existing_equipment} Customer present during full installation: ${installationDetails.customer_present_during_install} Rep & Manager name: ${installationDetails.rep_manager_name} Rep & Manager phone number: ${installationDetails.rep_manager_phone} `; const saveOption = window.confirm("Would you like to save these details to a file?"); if (saveOption) { const blob = new Blob([ summary ], { type: "text/plain;charset=utf-8" }); const href = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = href; link.download = "installation_details.txt"; document.body.appendChild(link); link.click(); document.body.removeChild(link); alert("Details saved to installation_details.txt."); } else { alert(summary); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Installation Details Form"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "one_or_two_story", className: "block mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "1 or 2 Story Building:"), /*#__PURE__*/ React.createElement("select", { name: "one_or_two_story", className: "w-full border-2 border-gray-300 p-2 rounded-md", value: installationDetails.one_or_two_story, onChange: handleChange, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "1 Story"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "2 Story"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "job_type", className: "block mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Job Type:"), /*#__PURE__*/ React.createElement(WirelessChangeoutTracker, { jobTypes: [ "Wireless", "Changeout-Wireless", "Changeout-Hardwired", "Trimout", "Takeover", "Retro" ], selectedType: installationDetails.job_type, onChange: handleChange, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "square_footage", className: "block mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Square Footage:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "square_footage", className: "w-full border-2 border-gray-300 p-2 rounded-md", value: installationDetails.square_footage, onChange: handleChange, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "internet_provider", className: "block mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Internet Provider:"), /*#__PURE__*/ React.createElement(InternetServiceComparison, { name: "internet_provider", value: installationDetails.internet_provider, onChange: handleChange, options: [ { value: '', label: 'Select' }, { value: 'spectrum', label: 'Spectrum' }, { value: 'att', label: 'AT&T' }, { value: 'xfinity', label: 'Xfinity' }, { value: 'other', label: 'Other Internet Service' } ], __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "equipment_camera_locations", className: "block mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Equipment/Camera Locations:"), /*#__PURE__*/ React.createElement("textarea", { name: "equipment_camera_locations", className: "w-full border-2 border-gray-300 p-2 rounded-md", rows: "3", value: installationDetails.equipment_camera_locations, onChange: handleChange, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activate_existing_equipment", className: "block mb-2", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Activate any existing equipment:"), /*#__PURE__*/ React.createElement("select", { name: "activate_existing_equipment", className: "w-full border-2 border-gray-300 p-2 rounded-md", value: installationDetails.activate_existing_equipment, onChange: handleChange, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "yes", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("option", { value: "no", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "No"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customer_present_during_install", className: "block mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Customer present during full installation:"), /*#__PURE__*/ React.createElement("select", { name: "customer_present_during_install", className: "w-full border-2 border-gray-300 p-2 rounded-md", value: installationDetails.customer_present_during_install, onChange: handleChange, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "yes", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("option", { value: "no", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "No"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rep_manager_phone", className: "block mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Rep & Manager name and phone number:"), /*#__PURE__*/ React.createElement(ContactList, { label: "", name: "rep_manager_phone", value: installationDetails.rep_manager_phone, onChange: handleChange, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "Submit"))); }