function MainComponent() { const [activeSection, setActiveSection] = React.useState("Branding & Design"); const [selectedServices, setSelectedServices] = React.useState([]); const [totalPrice, setTotalPrice] = React.useState(0); const [customServices, setCustomServices] = React.useState([]); const [rfqName, setRfqName] = React.useState(""); const [rfqDate, setRfqDate] = React.useState(""); const [newCustomService, setNewCustomService] = React.useState(""); const serviceData = { "Branding & Design": [ { name: "Concept Creation", price: 10000 }, { name: "Theme Design", price: 7500 }, { name: "Visual Design", price: 7500 }, { name: "Subvisual Design", price: 5000 }, { name: "Logo Creation", price: 3000 }, { name: "Invitation Design", price: 2000 }, { name: "E-Invitation HTML", price: 2250 }, { name: "Emailer Design", price: 2250 }, { name: "Emailer HTML", price: 2500 } ], "Branding & Design Adaptation": [ { name: "Concept Adaptation", price: 7000 }, { name: "Visual Design Adaptation", price: 5250 }, { name: "Subvisual Design Adaptation", price: 3500 }, { name: "Theme Design Adaptation", price: 5250 }, { name: "Logo Design Adaptation", price: 2100 }, { name: "Invitation Design Adaptation", price: 1400 }, { name: "E-Invitation HTML Adaptation", price: 1575 }, { name: "Emailer Design Adaptation", price: 1575 }, { name: "Emailer HTML Adaptation", price: 1750 } ], "Presentation Design": [ { name: "PPT Template Design (Back-Cover, Inside)", price: 4000 }, { name: "Content Design & Extra Slide Implementation", price: 750, description: "750 AED (per slide)" }, { name: "PPT Template Design Adaptation", price: 2800 }, { name: "Content Design Adaptation", price: 525, description: "525 AED (per slide)" } ], "E-Detail Aids": [ { name: "E-Detail Aids (Design only) - 1-10 slides", price: 600, description: "600 AED/slide" }, { name: "E-Detail Aids (Design only) - 10-30 slides", price: 450, description: "450 AED/slide" }, { name: "E-Detail Aids (Design only) - 30+ slides", price: 300, description: "300 AED/slide" }, { name: "E-Detail Aids (Design Adaptation only) - 1-10 slides", price: 420, description: "420 AED/slide" }, { name: "E-Detail Aids (Design Adaptation only) - 10-30 slides", price: 315, description: "315 AED/slide" }, { name: "E-Detail Aids (Design Adaptation only) - 30+ slides", price: 210, description: "210 AED/slide" }, { name: "E-Detail Aids (HTML/Coding/Mapping)", price: 600, description: "600 AED per slide" }, { name: "Detail Aid Veeva Upload Per File Upload", price: 6500, description: "5,000-8,000 AED" } ], "Collaterals Design": [ { name: "Drop Card Design", price: 1250 }, { name: "Flyer Design", price: 1250 }, { name: "Folder Design", price: 800 }, { name: "Pop-Up Design", price: 2500 }, { name: "Roll-Up Design", price: 1000 }, { name: "Animated GIF Design", price: 1500 }, { name: "Block Note/Note Pad Design", price: 500 }, { name: "Coaster Design", price: 350 }, { name: "Water Label Design", price: 350 }, { name: "Table Center Piece Design", price: 1000 }, { name: "Name Tag Design", price: 500 }, { name: "Kit Package/Box Design", price: 3000 }, { name: "Backdrop Design", price: 3000 }, { name: "Tunnel Design (Exc Content)", price: 3500 }, { name: "Registration Desk Design", price: 1500 }, { name: "Entrance Gate Design", price: 1000 }, { name: "iPad/TV Stand Design", price: 350 }, { name: "Direction Sign Design", price: 750 }, { name: "Photo Booth Design", price: 1500 }, { name: "Side Backdrop/Banner Design", price: 1000 }, { name: "Podium Design", price: 250 }, { name: "Posters Design", price: 1000 } ], "Collaterals Design Adaptation": [ { name: "Drop Card Design Adaptation", price: 875 }, { name: "Flyer Design Adaptation", price: 875 }, { name: "Folder Design Adaptation", price: 560 }, { name: "Pop-Up Design Adaptation", price: 1750 }, { name: "Roll-Up Design Adaptation", price: 700 }, { name: "Animated GIF Design Adaptation", price: 1050 }, { name: "Block Note/Note Pad Design Adaptation", price: 350 }, { name: "Coaster Design Adaptation", price: 245 }, { name: "Water Label Design Adaptation", price: 245 }, { name: "Table CenterPiece Design Adaptation", price: 700 }, { name: "Name Tag Design Adaptation", price: 350 }, { name: "Kit Package/Box Design Adaptation", price: 2100 }, { name: "Backdrop Design Adaptation", price: 2100 }, { name: "Tunnel Design Adaptation (Exc Content)", price: 2450 }, { name: "Registration Desk Design Adaptation", price: 1050 }, { name: "Entrance Gate Design Adaptation", price: 700 }, { name: "iPad/TV Stand Design Adaptation", price: 245 }, { name: "Direction Sign Design Adaptation", price: 525 }, { name: "Photo Booth Design Adaptation", price: 1050 }, { name: "Side Backdrop/Banner Design Adaptation", price: 700 }, { name: "Podium Design Adaptation", price: 175 }, { name: "Posters Design Adaptation", price: 700 } ] }; const handleSectionClick = (sectionName)=>{ setActiveSection(sectionName); }; const handleServiceSelection = (service, price)=>{ const isServiceSelected = selectedServices.some((selectedService)=>selectedService.service === service); if (isServiceSelected) { const updatedServices = selectedServices.map((selectedService)=>{ if (selectedService.service === service) { return { ...selectedService, quantity: selectedService.quantity + 1 }; } return selectedService; }); const updatedPrice = totalPrice + price; setSelectedServices(updatedServices); setTotalPrice(updatedPrice); } else { const updatedServices = [ ...selectedServices, { service, price, quantity: 1 } ]; const updatedPrice = totalPrice + price; setSelectedServices(updatedServices); setTotalPrice(updatedPrice); } }; const handleRemoveService = (service)=>{ const serviceToRemove = selectedServices.find((selectedService)=>selectedService.service === service); if (serviceToRemove) { const updatedServices = selectedServices.filter((selectedService)=>selectedService.service !== service); const updatedPrice = totalPrice - serviceToRemove.price * serviceToRemove.quantity; setSelectedServices(updatedServices); setTotalPrice(updatedPrice); } }; const handleRequestQuotation = ()=>{ const selectedServicesString = selectedServices.map((service)=>`${service.service} (Quantity: ${service.quantity})`).join(", "); const customServicesString = customServices.join(", "); const emailBody = `Dear Michael Ragheb, Request for Quotation: ${rfqName} Date: ${rfqDate} Please provide a formal quotation for the following services: ${selectedServicesString} ${customServicesString ? `\nCustom Services: ${customServicesString}` : ""} Total Price: ${totalPrice} AED Thank you, [Your Name]`; const emailSubject = "Request for Formal Quotation"; const emailAddress = "Michael.ragheb@dynamics-eg.com"; const mailtoLink = `mailto:${emailAddress}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`; window.open(mailtoLink); }; const handleCustomServiceChange = (e)=>{ setNewCustomService(e.target.value); }; const handleAddCustomService = ()=>{ if (newCustomService.trim() !== "") { setCustomServices([ ...customServices, newCustomService.trim() ]); setNewCustomService(""); } }; const handleRfqNameChange = (e)=>{ setRfqName(e.target.value); }; const handleRfqDateChange = (e)=>{ setRfqDate(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 bg-[#f8f9fa] rounded-lg shadow", __source: { fileName: "", lineNumber: 211, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#343a40] mb-4 text-center", __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }, "Service Rate"), /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center mb-4 flex-wrap", __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }, Object.keys(serviceData).map((section, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `cursor-pointer p-2 rounded ${activeSection === section ? "bg-blue-500 text-white" : "bg-transparent text-[#6c757d]"} font-bold transition-colors duration-300 m-1 hover:bg-blue-700`, onClick: ()=>handleSectionClick(section), __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, section))), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, serviceData[activeSection].map((service, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center mb-2 p-2 rounded shadow cursor-pointer transition-colors duration-300 hover:bg-[#f8f9fa]", onClick: ()=>handleServiceSelection(service.name, service.price), __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, service.name), service.description && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 226, columnNumber: 37 }, __self: this }, " - ", service.description), /*#__PURE__*/ React.createElement("span", { className: "ml-auto", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, service.price, " AED")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 231, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 232, columnNumber: 9 }, __self: this }, "Selected Services"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, selectedServices.map((service, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center mb-2 p-2 rounded shadow", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, service.service), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white rounded p-1 mx-2", onClick: ()=>handleServiceSelection(service.service, service.price), __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, service.quantity), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white rounded p-1 mx-2", onClick: ()=>handleRemoveService(service.service), __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "-")), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, service.price * service.quantity, " AED")))), /*#__PURE__*/ React.createElement("p", { className: "font-bold text-right text-xl text-green-500", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, "Total Price: ", totalPrice, " AED")), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse mt-4 shadow", __source: { fileName: "", lineNumber: 254, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-blue-500 text-white", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "Service"), /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, "Price"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white", __source: { fileName: "", lineNumber: 262, columnNumber: 9 }, __self: this }, selectedServices.map((service, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, service.service), /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, service.quantity), /*#__PURE__*/ React.createElement("td", { className: "p-2 border border-[#dee2e6]", __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }, service.price * service.quantity, " AED"))))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white rounded p-2 mt-4 hover:bg-blue-700 transition-colors duration-300", onClick: handleRequestQuotation, __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, "Request Quotation"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 276, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-[#ced4da] rounded mb-2", placeholder: "Add Custom Service", value: newCustomService, onChange: handleCustomServiceChange, __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white rounded p-2 w-full hover:bg-green-700 transition-colors duration-300", onClick: handleAddCustomService, __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, "Add Custom Service")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 mt-4", __source: { fileName: "", lineNumber: 283, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-[#ced4da] rounded mb-2", placeholder: "RFQ Name", value: rfqName, onChange: handleRfqNameChange, __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", className: "w-full p-2 border border-[#ced4da] rounded mb-2", value: rfqDate, onChange: handleRfqDateChange, __source: { fileName: "", lineNumber: 285, columnNumber: 9 }, __self: this }))); }