Update app.py

app.py

@@ -76,6 +76,7 @@ def load_add_ons_from_salesforce():
 # Function to filter menu items
 def filter_menu(preference):
     menu_data = load_menu_from_salesforce()
+
     filtered_data = {}
     for item in menu_data:
         if "Section__c" not in item or "Veg_NonVeg__c" not in item:
@@ -111,7 +112,22 @@ def filter_menu(preference):
 
     return html_content
 
-# Function to create modal window for cart and add-ons
+# Function to generate final order
+def submit_cart():
+    final_order_html = "<h3>Final Order:</h3><ul>"
+    total_bill = 0
+    for item in cart:
+        total_bill += item['totalCost']
+        extras = ", ".join([f"{extra['name']} (+${extra['price'] * extra['quantity']})" for extra in item['extras']])
+        final_order_html += f"""
+        <li>
+            {item['name']} (x{item['quantity']}) - ${item['totalCost']:.2f}
+            <br>Extras: {extras if extras else "None"}
+            <br>Special Instructions: {item['instructions'] if item['instructions'] else "None"}
+        </li>
+        """
+    final_order_html += f"</ul><p><strong>Total Bill: ${total_bill:.2f}</strong></p>"
+    return final_order_html
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -145,7 +161,8 @@ def create_modal_window():
     """
     return modal_html
 
-# JavaScript for modal and cart functionality
+
+# JavaScript for Modal and Cart
 def modal_js():
     modal_script = """
     <script>
@@ -165,6 +182,7 @@ def modal_js():
             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';
@@ -174,27 +192,71 @@ def modal_js():
             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 totalCost = price * quantity;
-            cart.push({ name, quantity, instructions, totalCost });
-            totalCartCost += totalCost;
+            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 submitCart() {
-            if (cart.length === 0) {
-                alert("Cart is empty. Please add items!");
-                return;
-            }
-            let summary = "<h3>Order Summary</h3><ul>";
-            cart.forEach(item => {
-                summary += `<li>${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}</li>`;
+        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>
+                `;
             });
-            summary += `</ul><h3>Total: $${totalCartCost.toFixed(2)}</h3>`;
-            document.getElementById('cart-summary').innerHTML = summary;
+            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)}`;
         }
     </script>
     """
@@ -205,16 +267,14 @@ with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
-    # Login Page
     with gr.Row(visible=True) as login_page:
         with gr.Column():
             login_email = gr.Textbox(label="Email")
             login_password = gr.Textbox(label="Password", type="password")
             login_button = gr.Button("Login")
-            signup_redirect = gr.Button("Go to Signup")
+            signup_button = gr.Button("Go to Signup")
             login_output = gr.Textbox(label="Status")
 
-    # Signup Page
     with gr.Row(visible=False) as signup_page:
         with gr.Column():
             signup_name = gr.Textbox(label="Name")
@@ -225,39 +285,22 @@ with gr.Blocks() as app:
             login_redirect = gr.Button("Go to Login")
             signup_output = gr.Textbox(label="Status")
 
-    # Menu Page
     with gr.Row(visible=False) as menu_page:
         with gr.Column():
-            preference = gr.Radio(["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
+            preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
-            gr.HTML(create_modal_window())
+            gr.HTML("<div id='cart-button' onclick='openCartModal()'>View Cart</div>")
+            gr.HTML("<div id='cart-modal' style='display: none;'>")
+            gr.HTML("<div id='cart-items'></div>")
+            gr.HTML("<button onclick='submitCart()'>Proceed to Checkout</button>")
+            gr.HTML("</div>")
             gr.HTML(modal_js())
-            gr.HTML("<div id='cart-summary'></div>")
 
-    # Navigation and Functionality
     login_button.click(
-        lambda email, password: (gr.update(visible=False), gr.update(visible=True), filter_menu("All"), "Login successful!")
-        if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), login(email, password)[0]),
-        [login_email, login_password],
-        [login_page, menu_page, menu_output, login_output]
-    )
-
-    submit_signup.click(
-        lambda name, email, phone, password: (signup(name, email, phone, password), gr.update(visible=False), gr.update(visible=True)),
-        [signup_name, signup_email, signup_phone, signup_password],
-        [signup_output, signup_page, login_page]
-    )
-
-    signup_redirect.click(
-        lambda: (gr.update(visible=False), gr.update(visible=True)),
-        [],
-        [login_page, signup_page]
-    )
-
-    login_redirect.click(
-        lambda: (gr.update(visible=True), gr.update(visible=False)),
-        [],
-        [login_page, signup_page]
+        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]
     )
+    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
 app.launch()