{product.name}

{product.fullDescription}

Ingredients

{ingredient}

Benefits

{benefit}

\n );\n}\n\nfunction App() {\n const [products, setProducts] = useState([]);\n const [companyInfo, setCompanyInfo] = useState(null);\n const [recommendations, setRecommendations] = useState([]);\n const [cart, setCart] = useState([]);\n const [chatMessages, setChatMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [selectedProduct, setSelectedProduct] = useState(null);\n const chatEndRef = useRef(null);\n\n useEffect(() => {\n fetchProducts();\n fetchCompanyInfo();\n fetchRecommendations();\n fetchChatMessages();\n }, []);\n\n const fetchProducts = async () => {\n try {\n const response = await fetch('/products');\n const data = await response.json();\n setProducts(data);\n } catch (error) {\n console.error('Failed to fetch products', error);\n }\n };\n\n const fetchCompanyInfo = async () => {\n try {\n const response = await fetch('/company-info');\n const data = await response.json();\n setCompanyInfo(data);\n } catch (error) {\n console.error('Failed to fetch company info', error);\n }\n };\n\n const fetchRecommendations = async () => {\n try {\n const response = await fetch('/recommendations');\n const data = await response.json();\n setRecommendations(data);\n } catch (error) {\n console.error('Failed to fetch recommendations', error);\n }\n };\n\n const fetchChatMessages = async () => {\n try {\n const response = await fetch('/chat-messages');\n const data = await response.json();\n setChatMessages(data);\n } catch (error) {\n console.error('Failed to fetch chat messages', error);\n }\n };\n\n const addToCart = (product: Product) => {\n const existingItem = cart.find(item => item.id === product.id);\n if (existingItem) {\n setCart(cart.map(item => \n item.id === product.id \n ? {...item, quantity: item.quantity + 1} \n : item\n ));\n } else {\n setCart([...cart, {...product, quantity: 1}]);\n }\n };\n\n const removeFromCart = (productId: number) => {\n setCart(cart.filter(item => item.id !== productId));\n };\n\n const updateCartQuantity = (productId: number, newQuantity: number) => {\n if (newQuantity < 1) {\n removeFromCart(productId);\n } else {\n setCart(cart.map(item => \n item.id === productId \n ? {...item, quantity: newQuantity} \n : item\n ));\n }\n };\n\n const sendChatMessage = async () => {\n if (!newMessage.trim()) return;\n\n try {\n await fetch('/send-chat', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n sender: 'Customer', \n message: newMessage,\n timestamp: new Date().toISOString()\n })\n });\n setNewMessage('');\n fetchChatMessages();\n } catch (error) {\n console.error('Failed to send chat message', error);\n }\n };\n\n return (\n

\n {selectedProduct && (\n setSelectedProduct(null)} \n />\n )}\n \n

\n {companyInfo && (\n

{companyInfo.name}

\n )}\n \n

\n {products.map(product => (\n

setSelectedProduct(product)}\n />\n

{product.name}

{product.description}

Price: ${product.price.toFixed(2)}

\n \n \n

Recommendations

\n {recommendations\n .filter(rec => rec.productId === product.id)\n .map((rec, index) => (\n

{rec.customerName} says: {rec.recommendationText}

\n ))}\n

\n\n

🛒 Cart

\n {cart.map((item) => (\n

\n {item.name}\n

\n \n {item.quantity}\n \n

\n ${(item.price * item.quantity).toFixed(2)}\n \n

\n ))}\n

Total: ${cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2)}

\n \n

\n\n {companyInfo && (\n

About {companyInfo.name}

{companyInfo.about}

\n \n

Contact Us

Email: {companyInfo.contactEmail}

Customer Service

Representative: {companyInfo.customerService.name}

Phone: {companyInfo.customerService.phone}

Email: {companyInfo.customerService.email}

\n \n {companyInfo.socialMedia && (\n

\n {companyInfo.socialMedia.facebook && (\n Facebook\n )}\n {companyInfo.socialMedia.instagram && (\n Instagram\n )}\n {companyInfo.socialMedia.twitter && (\n Twitter\n )}\n

\n )}\n

\n\n

\n {chatMessages.map((msg, index) => (\n

\n {msg.sender}: {msg.message}\n

\n ))}\n

\n setNewMessage(e.target.value)}\n placeholder=\"Type your message...\"\n onKeyPress={(e) => e.key === 'Enter' && sendChatMessage()}\n />\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"soapStoreTemplate\";\n const SCHEMA_VERSION = 3;\n\n // Initialize tables with extended schema\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_products_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT,\n full_description TEXT,\n ingredients TEXT,\n benefits TEXT,\n price REAL NOT NULL,\n image_url TEXT,\n additional_images TEXT\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_company_info_${SCHEMA_VERSION} (\n name TEXT,\n logo_url TEXT,\n about TEXT,\n contact_email TEXT,\n customer_service_name TEXT,\n customer_service_phone TEXT,\n customer_service_email TEXT,\n social_media_facebook TEXT,\n social_media_instagram TEXT,\n social_media_twitter TEXT\n )\n `);\n\n // Seed initial products if not exists\n const productsCount = await sqlite.execute(`SELECT COUNT(*) as count FROM ${KEY}_products_${SCHEMA_VERSION}`);\n if (productsCount.rows[0].count === 0) {\n await sqlite.execute(`\n INSERT INTO ${KEY}_products_${SCHEMA_VERSION} \n (name, description, full_description, ingredients, benefits, price, image_url, additional_images) VALUES\n (\n 'Lavender Dream', \n 'Calming lavender soap', \n 'Our signature Lavender Dream soap is crafted with pure lavender essential oils and organic ingredients to provide a deeply relaxing and moisturizing bathing experience.',\n 'Lavender Essential Oil,Olive Oil,Coconut Oil,Shea Butter,Distilled Water',\n 'Calms Anxiety,Moisturizes Skin,Natural Fragrance,Promotes Relaxation',\n 8.99, \n 'https://maxm-imggenurl.web.val.run/lavender-soap',\n 'https://maxm-imggenurl.web.val.run/lavender-soap-detail1,https://maxm-imggenurl.web.val.run/lavender-soap-detail2'\n ),\n (\n 'Citrus Burst', \n 'Refreshing citrus soap', \n 'Energize your senses with our Citrus Burst soap, packed with invigorating citrus extracts that cleanse, brighten, and revitalize your skin.',\n 'Orange Peel Extract,Lemon Essential Oil,Glycerin,Coconut Oil,Almond Oil',\n 'Brightens Skin,Boosts Energy,Natural Cleansing,Vitamin C Infusion',\n 7.50, \n 'https://maxm-imggenurl.web.val.run/citrus-soap',\n 'https://maxm-imggenurl.web.val.run/citrus-soap-detail1,https://maxm-imggenurl.web.val.run/citrus-soap-detail2'\n ),\n (\n 'Honey Milk', \n 'Moisturizing honey soap', \n 'Indulge in the luxurious Honey Milk soap, combining the nourishing properties of raw honey and creamy milk for soft, supple, and radiant skin.',\n 'Raw Honey,Goat Milk,Beeswax,Almond Oil,Vitamin E',\n 'Deep Hydration,Anti-Aging,Skin Softening,Natural Glow',\n 9.25, \n 'https://maxm-imggenurl.web.val.run/honey-soap',\n 'https://maxm-imggenurl.web.val.run/honey-soap-detail1,https://maxm-imggenurl.web.val.run/honey-soap-detail2'\n )\n `);\n }\n\n // Seed company info if not exists\n const companyInfoCount = await sqlite.execute(`SELECT COUNT(*) as count FROM ${KEY}_company_info_${SCHEMA_VERSION}`);\n if (companyInfoCount.rows[0].count === 0) {\n await sqlite.execute(`\n INSERT INTO ${KEY}_company_info_${SCHEMA_VERSION} \n (name, logo_url, about, contact_email, \n customer_service_name, customer_service_phone, customer_service_email,\n social_media_facebook, social_media_instagram, social_media_twitter) \n VALUES (\n 'Pure Essence Soap Co.', \n 'https://maxm-imggenurl.web.val.run/pure-essence-logo',\n 'Pure Essence Soap Co. is dedicated to creating handcrafted, natural soaps that nourish your skin and delight your senses. Our commitment to organic ingredients, sustainable practices, and artisanal craftsmanship sets us apart in the world of skincare.',\n 'contact@pureessencesoap.com',\n 'Emily Rodriguez',\n '+1 (555) 123-4567',\n 'support@pureessencesoap.com',\n 'https://facebook.com/pureessencesoap',\n 'https://instagram.com/pureessencesoap',\n 'https://twitter.com/pureessencesoap'\n )\n `);\n }\n\n // Route handling for company info\n if (request.method === 'GET' && new URL(request.url).pathname === '/company-info') {\n const companyInfo = await sqlite.execute(`SELECT * FROM ${KEY}_company_info_${SCHEMA_VERSION}`);\n const formattedInfo = companyInfo.rows[0] ? {\n name: companyInfo.rows[0].name,\n logoUrl: companyInfo.rows[0].logo_url,\n about: companyInfo.rows[0].about,\n contactEmail: companyInfo.rows[0].contact_email,\n customerService: {\n name: companyInfo.rows[0].customer_service_name,\n phone: companyInfo.rows[0].customer_service_phone,\n email: companyInfo.rows[0].customer_service_email\n },\n socialMedia: {\n facebook: companyInfo.rows[0].social_media_facebook,\n instagram: companyInfo.rows[0].social_media_instagram,\n twitter: companyInfo.rows[0].social_media_twitter\n }\n } : null;\n return new Response(JSON.stringify(formattedInfo), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Existing route handlers remain the same...\n // (Previous route handlers for products, recommendations, chat, etc. remain unchanged)\n\n return new Response(`\n \n \n Pure Essence Soap Co.\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\n/* Previous CSS remains the same, with additions: */\n.company-header {\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n}\n.company-logo {\n width: 100px;\n height: 100px;\n margin-right: 20px;\n border-radius: 50%;\n}\n.company-info {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n margin-top: 20px;\n}\n.contact-info {\n margin-top: 15px;\n}\n.social-media {\n display: flex;\n gap: 15px;\n margin-top: 10px;\n}\n.product-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n.product-modal-content {\n background: white;\n padding: 30px;\n border-radius: 10px;\n width: 80%;\n max-width: 1000px;\n max-height: 80%;\n overflow-y: auto;\n display: flex;\n position: relative;\n}\n.close-modal {\n position: absolute;\n top: 10px;\n right: 10px;\n background: red;\n color: white;\n border: none;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n cursor: pointer;\n}\n.product-modal-images {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n.product-modal-images .main-image {\n width: 100%;\n height: 400px;\n object-fit: cover;\n margin-bottom: 15px;\n}\n.additional-images {\n display: flex;\n gap: 10px;\n}\n.additional-images img {\n width: 100px;\n height: 100px;\n object-fit: cover;\n cursor: pointer;\n}\n.product-modal-details {\n flex: 1;\n padding-left: 30px;\n}\n.full-description {\n margin-bottom: 20px;\n}\n.product-details ul {\n padding-left: 20px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/NathChrisTiwi/soapStoreTemplate/code/main.tsx","extension","actionData","errors"]