Update app.py

app.py

@@ -112,19 +112,7 @@ def filter_menu(preference):
 
     return html_content
 
-# Function to handle Proceed to Checkout and show the order summary on the same page
-def show_order_summary(cart):
-    total_cost = sum(item['totalCost'] for item in cart)
-    order_summary = "<h2>Your Final Order</h2>"
-    order_summary += "<ul>"
-    for item in cart:
-        order_summary += f"""
-            <li>{item['name']} (x{item['quantity']}) - ${item['totalCost']}</li>
-        """
-    order_summary += f"</ul><h3>Total Bill: ${total_cost}</h3>"
-    return order_summary
-
-# Function to create Modal Window for Menu Item Details
+# Create Modal Window HTML
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -158,14 +146,12 @@ def create_modal_window():
     """
     return modal_html
 
-# JavaScript for Modal and Cart Management
+# JavaScript for Modal and Cart
 def modal_js():
     modal_script = """
     <script>
         let cart = [];
         let totalCartCost = 0;
-        
-        // Open Item Modal
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
@@ -180,15 +166,11 @@ def modal_js():
             document.getElementById('modal-price').innerText = price;
             document.getElementById('quantity').value = 1;
             document.getElementById('special-instructions').value = '';
-            resetAddOns();
+            resetAddOns();  // Reset add-ons when opening the modal
         }
-        
-        // Close the Modal
         function closeModal() {
             document.getElementById('modal').style.display = 'none';
         }
-        
-        // Add Item to Cart
         function addToCart() {
             const name = document.getElementById('modal-name').innerText;
             const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -198,25 +180,21 @@ def modal_js():
             const extras = selectedAddOns.map(extra => ({
                 name: extra.value,
                 price: parseFloat(extra.getAttribute('data-price')),
-                quantity: 1
+                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;
+            totalCartCost += totalCost;  // Update the total cost of the cart
             updateCartButton();
-            updateCartTotalCost();
+            updateCartTotalCost();  // Update total cost displayed
             closeModal();
         }
-
-        // Update Cart Button
         function updateCartButton() {
             const cartButton = document.getElementById('cart-button');
             cartButton.innerText = `View Cart (${cart.length} items)`;
         }
-
-        // View Cart Modal
         function openCartModal() {
             const cartModal = document.getElementById('cart-modal');
             const cartItemsContainer = document.getElementById('cart-items');
@@ -236,70 +214,48 @@ def modal_js():
             });
             cartModal.style.display = 'block';
         }
-
-        // Close Cart Modal
         function closeCartModal() {
             document.getElementById('cart-modal').style.display = 'none';
         }
-
-        // Remove Item from Cart
         function removeFromCart(index) {
-            totalCartCost -= cart[index].totalCost;
+            totalCartCost -= cart[index].totalCost;  // Deduct the cost of the removed item from total cost
             cart.splice(index, 1);
             updateCartButton();
-            updateCartTotalCost();
+            updateCartTotalCost();  // Update total cost displayed
             openCartModal();
         }
-
-        // Update Cart Item
         function updateCartItem(index, type, value) {
             if (type === 'item') {
                 cart[index].quantity = parseInt(value);
             } else if (type === 'extra') {
-                cart[index].extras[0].quantity = parseInt(value);
+                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();
+            updateCartTotalCost();  // Update total cost displayed
         }
-
-        // Update Total Cart Cost
         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)}`;
         }
-
-        // Proceed to Checkout and Show Summary in the Same Page
-        function proceedToCheckout() {
-            const orderSummary = `
-                <div>
-                    <h2>Your Final Order</h2>
-                    <ul>
-                        ${cart.map(item => `
-                            <li>${item.name} (x${item.quantity}) - $${item.totalCost}</li>
-                        `).join('')}
-                    </ul>
-                    <h3>Total Bill: $${totalCartCost.toFixed(2)}</h3>
-                </div>
-            `;
-            document.getElementById('order-summary').innerHTML = orderSummary;
-        }
-
-        // 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);
+        function submitOrder() {
+            const orderDetails = cart.map(item => `${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}`).join('<br>');
+            const totalCost = cart.reduce((total, item) => total + item.totalCost, 0).toFixed(2);
+            document.getElementById('order-summary').innerHTML = orderDetails;
+            document.getElementById('total-bill').innerText = `$${totalCost}`;
         }
     </script>
     """
     return modal_script
 
+
 # Gradio App
 with gr.Blocks() as app:
+    # Login and Signup pages
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
@@ -326,10 +282,9 @@ 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></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='submitOrder()'>Submit Order</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
-            gr.HTML("<div id='order-summary'></div>")
 
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")