function MainComponent() { const [equipmentType, setEquipmentType] = React.useState('EP'); const [discountCode, setDiscountCode] = React.useState(''); const [activationFee, setActivationFee] = React.useState('0'); const [results, setResults] = React.useState([]); const applyDiscount = ()=>{ let equipmentCost = getEquipmentCost(equipmentType); const monitoringCost = 34.99; let discount = 0; switch(discountCode.toUpperCase()){ case "10OFF": discount = 0.1; break; case "20OFF": discount = 0.2; break; case "40OFF": discount = 0.4; break; case "BM-28": discount = 0.5; break; case "SENIORMANAGER": if (equipmentType === "USSP") { equipmentCost = 2610; } discount = 0.4; break; case "SPECIAL1": discount = 0.15; break; case "SPECIAL2": discount = 0.25; break; case "SPECIAL3": discount = 0.35; break; default: setResults([ ...results, { invalidCode: true } ]); return; } const discountedCost = equipmentCost * (1 - discount); const totalCost = discountedCost + parseInt(activationFee); const totalMonthlyPayment = totalCost / 36 + monitoringCost; setResults([ ...results, { equipmentType, discountCode: discountCode.toUpperCase(), activationFee, monthlyPayment: totalMonthlyPayment.toFixed(2) } ]); }; const getEquipmentCost = (type)=>{ switch(type){ case "EP": return 850; case "CP": return 1278; case "SSP": return 1586; case "USSP": return 2610; default: return 0; } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#34495e] m-auto p-5 rounded-lg shadow-lg w-full max-w-[800px] mt-[50px] mb-[50px]", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-arial text-white text-2xl", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Allied Home Security Discounts"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "equipmentType", className: "font-arial text-white block mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Select equipment type:"), /*#__PURE__*/ React.createElement("select", { id: "equipmentType", name: "equipmentType", className: "mb-4 p-2 rounded border bg-white", value: equipmentType, onChange: (e)=>setEquipmentType(e.target.value), __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "EP", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "EP"), /*#__PURE__*/ React.createElement("option", { value: "CP", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "CP"), /*#__PURE__*/ React.createElement("option", { value: "SSP", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "SSP"), /*#__PURE__*/ React.createElement("option", { value: "USSP", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "USSP"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "discountCode", className: "font-arial text-white block mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Enter discount code:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "discountCode", name: "discountCode", placeholder: "Enter discount code", className: "mb-4 p-2 w-full rounded border", value: discountCode, onChange: (e)=>setDiscountCode(e.target.value), __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activationFee", className: "font-arial text-white block mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Activation fee:"), /*#__PURE__*/ React.createElement("select", { id: "activationFee", name: "activationFee", className: "mb-4 p-2 rounded border bg-white", value: activationFee, onChange: (e)=>setActivationFee(e.target.value), __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "0", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "0"), /*#__PURE__*/ React.createElement("option", { value: "69", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "69"), /*#__PURE__*/ React.createElement("option", { value: "99", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "99"), /*#__PURE__*/ React.createElement("option", { value: "199", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "199"), /*#__PURE__*/ React.createElement("option", { value: "299", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "299"), /*#__PURE__*/ React.createElement("option", { value: "399", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "399"), /*#__PURE__*/ React.createElement("option", { value: "499", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "499"))), /*#__PURE__*/ React.createElement("button", { onClick: applyDiscount, className: "font-arial text-white bg-blue-500 hover:bg-blue-700 px-4 py-2 rounded mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, "Apply"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse mb-[20px]", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#2c3e50]", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Equipment Package"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Discount Code"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Activation Fee"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "36 Monthly Payment"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, results.map((result, index)=>result.invalidCode ? /*#__PURE__*/ React.createElement("tr", { key: index, className: "last:bd-none", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { colSpan: "4", className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Invalid discount code. Please try again.")) : /*#__PURE__*/ React.createElement("tr", { key: index, className: "last:bd-none", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, result.equipmentType), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, result.discountCode), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, `$${result.activationFee}`), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300 text-left font-arial text-white", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, `$${result.monthlyPayment}`)))))); }