Update app.py

app.py

@@ -95,8 +95,7 @@ def filter_menu(preference):
         for item in items:
             html_content += f"""
             <div style="border: 1px solid #ddd; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; height: 350px;">
-                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;" 
-                onclick="openModal('{item['Name']}', '{item.get('Image2__c', '')}', '{item['Description__c']}', '${item['Price__c']}')">
+                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;">
                 <div style="padding: 10px;">
                     <h3 style='font-size: 1.2em; text-align: center;'>{item['Name']}</h3>
                     <p style='font-size: 1.1em; color: green; text-align: center;'>${item['Price__c']}</p>
@@ -112,152 +111,37 @@ def filter_menu(preference):
 
     return html_content
 
-# Create Modal Window HTML
-def create_modal_window():
-    add_ons = load_add_ons_from_salesforce()
-    add_ons_html = ""
-    for add_on in add_ons:
-        add_ons_html += f"""
-        <label>
-            <input type="checkbox" name="biryani-extra" value="{add_on['Name']}" data-price="{add_on['Price__c']}" />
-            {add_on['Name']} + ${add_on['Price__c']}
-        </label>
-        <br>
+# Generate final order summary
+def generate_order_summary(cart):
+    if not cart:
+        return "<p>Your cart is empty.</p>"
+
+    summary_html = "<h2>Order Summary</h2>"
+    total_cost = 0
+
+    for item in cart:
+        item_cost = item['price'] * item['quantity']
+        add_ons_summary = "<ul>" + "".join([f"<li>{addon['name']} x {addon['quantity']} (+${addon['price'] * addon['quantity']:.2f})</li>" for addon in item['extras']]) + "</ul>"
+        total_item_cost = item_cost + sum(addon['price'] * addon['quantity'] for addon in item['extras'])
+        summary_html += f"""
+        <div style='margin-bottom: 20px;'>
+            <h3>{item['name']}</h3>
+            <p>Quantity: {item['quantity']}</p>
+            <p>Special Instructions: {item['instructions'] or 'None'}</p>
+            <p>Add-ons:</p>
+            {add_ons_summary}
+            <p>Total Cost for this Item: ${total_item_cost:.2f}</p>
+        </div>
         """
+        total_cost += total_item_cost
 
-    modal_html = f"""
-    <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
-        <div style="text-align: right;">
-            <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
-        </div>
-        <img id="modal-image" style="width: 100%; height: 300px; border-radius: 8px; margin-bottom: 20px;" />
-        <h2 id="modal-name"></h2>
-        <p id="modal-description"></p>
-        <p id="modal-price"></p>
-        <label for="biryani-extras"><strong>Add-ons :</strong></label>
-        <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
-            {add_ons_html}
-        </div>
-        <label for="quantity">Quantity:</label>
-        <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
-        <textarea id="special-instructions" placeholder="Add your special instructions here..." style="width: 100%; height: 60px;"></textarea>
-        <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
-    </div>
-    """
-    return modal_html
-
-# JavaScript for Modal and Cart
-def modal_js():
-    modal_script = """
-    <script>
-        let cart = [];
-        let totalCartCost = 0;
-        function openModal(name, image2, description, price) {
-            const modal = document.getElementById('modal');
-            modal.style.display = 'block';
-            modal.style.position = 'fixed';
-            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
-            modal.style.top = ${event.clientY}px;
-            modal.style.left = '50%';
-            modal.style.transform = 'translate(-50%, -50%)';
-            document.getElementById('modal-image').src = image2;
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-description').innerText = description;
-            document.getElementById('modal-price').innerText = price;
-            document.getElementById('quantity').value = 1;
-            document.getElementById('special-instructions').value = '';
-            resetAddOns();  // Reset add-ons when opening the modal
-        }
-        function closeModal() {
-            document.getElementById('modal').style.display = 'none';
-        }
-        function addToCart() {
-            const name = document.getElementById('modal-name').innerText;
-            const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-            const quantity = parseInt(document.getElementById('quantity').value) || 1;
-            const instructions = document.getElementById('special-instructions').value;
-            const selectedAddOns = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked'));
-            const extras = selectedAddOns.map(extra => ({
-                name: extra.value,
-                price: parseFloat(extra.getAttribute('data-price')),
-                quantity: 1  // Default quantity for add-ons is 1
-            }));
-            const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
-            const totalCost = (price * quantity) + extrasCost;
-            // Add the item to the cart with its specific add-ons
-            cart.push({ name, price, quantity, extras, instructions, totalCost });
-            totalCartCost += totalCost;  // Update the total cost of the cart
-            updateCartButton();
-            updateCartTotalCost();  // Update total cost displayed
-            closeModal();
-        }
-        function updateCartButton() {
-            const cartButton = document.getElementById('cart-button');
-            cartButton.innerText = View Cart (${cart.length} items);
-        }
-        function openCartModal() {
-            const cartModal = document.getElementById('cart-modal');
-            const cartItemsContainer = document.getElementById('cart-items');
-            cartItemsContainer.innerHTML = "";
-            cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => ${extra.name} x<input type="number" value="${extra.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'extra', this.value)" /> (+$${(extra.price * extra.quantity).toFixed(2)})).join(', ');
-                cartItemsContainer.innerHTML += 
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
-                        <h3>${item.name}</h3>
-                        <p>Quantity: <input type="number" value="${item.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'item', this.value)" /></p>
-                        <p>Extras: ${extrasList || 'None'}</p>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $<span id="item-${index}-total">${item.totalCost.toFixed(2)}</span></p>
-                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
-                    </div>
-                ;
-            });
-            cartModal.style.display = 'block';
-        }
-        function closeCartModal() {
-            document.getElementById('cart-modal').style.display = 'none';
-        }
-        function removeFromCart(index) {
-            totalCartCost -= cart[index].totalCost;  // Deduct the cost of the removed item from total cost
-            cart.splice(index, 1);
-            updateCartButton();
-            updateCartTotalCost();  // Update total cost displayed
-            openCartModal();
-        }
-        function updateCartItem(index, type, value) {
-            if (type === 'item') {
-                cart[index].quantity = parseInt(value);
-            } else if (type === 'extra') {
-                cart[index].extras[0].quantity = parseInt(value); // Assuming one add-on for simplicity
-            }
-            const item = cart[index];
-            const price = item.price;
-            const extrasCost = item.extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
-            item.totalCost = (price * item.quantity) + extrasCost;
-            document.getElementById(item-${index}-total).innerText = item.totalCost.toFixed(2);
-            updateCartTotalCost();  // Update total cost displayed
-        }
-        function updateCartTotalCost() {
-            const totalCostElement = document.getElementById('cart-total-cost');
-            totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
-            totalCostElement.innerText = Total Cart Cost: $${totalCartCost.toFixed(2)};
-        }
-        function proceedToCheckout() {
-            alert("Proceeding to checkout...");
-        }
-        // Reset all selected add-ons when opening a new item modal
-        function resetAddOns() {
-            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
-            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
-        }
-    </script>
-    """
-    return modal_script
-
-# Updated Gradio App
-with gr.Blocks() as app:
-    cart_data = gr.State([])  # State to hold cart data
+    summary_html += f"<h3>Total Cart Cost: ${total_cost:.2f}</h3>"
+    return summary_html
+
+# Gradio App
+cart = []
 
+with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
@@ -284,45 +168,59 @@ with gr.Blocks() as app:
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
             gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button><button id='final-submit' style='background: #28a745; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;'>Final Submit</button></div></div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
             gr.HTML(create_modal_window())
-            gr.HTML(modal_js())
-
-    # New Page to Display Final Cart Details
-    with gr.Row(visible=False) as final_page:
-        cart_details = gr.HTML()
-        back_to_menu = gr.Button("Back to Menu")
-
-    # Show Final Page with Cart Details
-    def show_final_page(cart):
-        if not cart:
-            return gr.update(visible=False), "Your cart is empty!"
-        details = "<h2>Your Order Summary:</h2><ul>"
-        for item in cart:
-            details += f"<li>{item['quantity']} x {item['name']} (${item['price']} each)"
-            if item['extras']:
-                details += f"<br>Add-ons: {', '.join([extra['name'] for extra in item['extras']])}</li>"
-            details += "</li>"
-        details += f"</ul><p><strong>Total Cost: ${sum(item['totalCost'] for item in cart):.2f}</strong></p>"
-        return gr.update(visible=True), details
-
-    # Button Click Handlers
+
     login_button.click(
-        lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")
-        if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), gr.update(), "Invalid email or password."),
-        [login_email, login_password], [login_page, menu_page, menu_output, login_output]
+        lambda email, password: (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(value=filter_menu("All")),
+            "Login successful!"
+        ) if login(email, password)[0] == "Login successful!" else (
+            gr.update(),
+            gr.update(),
+            gr.update(),
+            "Invalid email or password."
+        ),
+        [login_email, login_password],
+        [login_page, menu_page, menu_output, login_output]
+    )
+
+    signup_button.click(
+        lambda: (gr.update(visible=False), gr.update(visible=True)),
+        inputs=[],
+        outputs=[login_page, signup_page]
     )
-    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
-    gr.HTML(modal_js())
-
-    # Final Submit Button
-    menu_page.children[-1].click(
-        lambda cart: (gr.update(visible=False), gr.update(visible=True, value=show_final_page(cart)[1])),
-        [cart_data],
-        [menu_page, final_page, cart_details]
+
+    login_redirect.click(
+        lambda: (gr.update(visible=True), gr.update(visible=False)),
+        inputs=[],
+        outputs=[login_page, signup_page]
+    )
+
+    submit_signup.click(
+        lambda name, email, phone, password: signup(name, email, phone, password),
+        [signup_name, signup_email, signup_phone, signup_password],
+        signup_output
+    )
+
+    preference.change(
+        lambda pref: filter_menu(pref),
+        [preference],
+        menu_output
     )
 
-    # Back to Menu Button
-    back_to_menu.click(lambda: (gr.update(visible=True), gr.update(visible=False)), None, [menu_page, final_page])
+    submit_order = gr.Button("Submit Order")
+    order_summary = gr.HTML(visible=False)
+
+    submit_order.click(
+        lambda: gr.update(visible=True, value=generate_order_summary(cart)),
+        inputs=[],
+        outputs=[order_summary]
+    )
+
+    with gr.Row():
+        gr.HTML(value="", visible=False).style(name="order-summary")
 
 app.launch()