Update app.py

app.py

@@ -1,5 +1,5 @@
-import gradio as gr
 import bcrypt
+import gradio as gr
 from simple_salesforce import Salesforce
 
 # Salesforce Connection
@@ -152,7 +152,6 @@ def modal_js():
     <script>
         let cart = [];
         let totalCartCost = 0;
-
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
@@ -169,11 +168,9 @@ def modal_js():
             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('$', ''));
@@ -187,7 +184,6 @@ def modal_js():
             }));
             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
@@ -195,12 +191,10 @@ def modal_js():
             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');
@@ -220,11 +214,9 @@ def modal_js():
             });
             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);
@@ -232,7 +224,6 @@ def modal_js():
             updateCartTotalCost();  // Update total cost displayed
             openCartModal();
         }
-
         function updateCartItem(index, type, value) {
             if (type === 'item') {
                 cart[index].quantity = parseInt(value);
@@ -246,50 +237,41 @@ def modal_js():
             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() {
-            // Trigger the final order page and send the cart data
-            const finalOrderPage = document.getElementById('final-order-section');
-            const cartPage = document.getElementById('cart-section');
-            cartPage.style.display = 'none';
-            finalOrderPage.style.display = 'block';
-
-            // Show the cart details on the final order page
-            const finalOrderItems = document.getElementById('final-order-items');
-            const finalOrderTotal = document.getElementById('final-order-total');
-            let itemsHtml = '';
-            let totalBill = 0;
+            // Display checkout summary
+            let checkoutSummary = "<h1>Checkout Summary</h1>";
             cart.forEach(item => {
-                itemsHtml += `<p>${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}</p>`;
-                totalBill += item.totalCost;
+                checkoutSummary += `
+                    <h3>${item.name}</h3>
+                    <p>Quantity: ${item.quantity}</p>
+                    <p>Extras: ${item.extras.map(extra => `${extra.name} x${extra.quantity}`).join(', ')}</p>
+                    <p>Special Instructions: ${item.instructions}</p>
+                    <p>Total: $${item.totalCost.toFixed(2)}</p>
+                `;
             });
-            finalOrderItems.innerHTML = itemsHtml;
-            finalOrderTotal.innerHTML = `Total Bill: $${totalBill.toFixed(2)}`;
+            checkoutSummary += `<p><strong>Total Cart Cost: $${totalCartCost.toFixed(2)}</strong></p>`;
+            document.getElementById('checkout-summary').innerHTML = checkoutSummary;
+            document.getElementById('cart-modal').style.display = 'none';
+            document.getElementById('checkout-page').style.display = 'block';
         }
-
         function goBackToMenu() {
-            const finalOrderPage = document.getElementById('final-order-section');
-            const cartPage = document.getElementById('cart-section');
-            finalOrderPage.style.display = 'none';
-            cartPage.style.display = 'block';
+            document.getElementById('menu-page').style.display = 'block';
+            document.getElementById('cart-modal').style.display = 'none';
         }
     </script>
     """
     return modal_script
 
-
 # Gradio App
 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")
@@ -298,7 +280,6 @@ with gr.Blocks() as app:
             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")
@@ -309,31 +290,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(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 onclick='goBackToMenu()' style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;'>Back</button><button onclick='proceedToCheckout()' style='background: #28a745; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;'>Submit</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
-    # Final Order Page
-    with gr.Row(visible=False) as final_order_page:
+    with gr.Row(visible=False) as checkout_page:
         with gr.Column():
-            gr.HTML("<h1>Your Final Order</h1>")
-            final_order_items = gr.HTML()
-            final_order_total = gr.HTML()
-            back_to_menu_button = gr.Button("Go Back to Menu")
-            back_to_menu_button.click(goBackToMenu, inputs=[], outputs=[final_order_page, menu_page])
+            gr.HTML("<div id='checkout-summary'></div>")
 
     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]
     )
-
-    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
-
-app.launch()
+    preference.change(lambda pref: filter_menu