Update app.py

app.py

@@ -64,19 +64,9 @@ def load_menu_from_salesforce():
     except Exception as e:
         return []
 
-# Function to load add-ons data
-def load_add_ons_from_salesforce():
-    try:
-        query = "SELECT Name, Price__c FROM Add_Ons__c"
-        result = sf.query(query)
-        return result['records']
-    except Exception as e:
-        return []
-
 # 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:
@@ -112,46 +102,13 @@ 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>
-        """
-
-    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
+# JavaScript for Modal and Cart Functionality
 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';
@@ -166,104 +123,44 @@ 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';
         }
+
         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
+            const extrasCost = 0;  // For simplicity, no extras are added here
+            const totalCost = price * quantity + extrasCost;
+
+            cart.push({ name, quantity, instructions, totalCost });
+            totalCartCost += totalCost;
+
             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
+
+        function submitCart() {
+            if (cart.length === 0) {
+                alert("Cart is empty. Please add items!");
+                return;
             }
-            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() {
-            // Displaying the final order details
-            const finalOrderContainer = document.getElementById('final-order');
-            finalOrderContainer.innerHTML = "";
-            cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => `${extra.name} x${extra.quantity} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
-                finalOrderContainer.innerHTML += `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
-                        <h3>${item.name}</h3>
-                        <p>Quantity: ${item.quantity}</p>
-                        <p>Extras: ${extrasList || 'None'}</p>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
-                    </div>
-                `;
+
+            let summary = "<h3>Order Summary</h3><ul>";
+            cart.forEach(item => {
+                summary += `<li>${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}</li>`;
             });
-            finalOrderContainer.innerHTML += `<h3>Total Order Cost: $${totalCartCost.toFixed(2)}</h3>`;
-        }
-        // 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
+            summary += `</ul><h3>Total: $${totalCartCost.toFixed(2)}</h3>`;
+            document.getElementById('cart-summary').innerHTML = summary;
         }
     </script>
     """
@@ -279,7 +176,7 @@ with gr.Blocks() as app:
             login_email = gr.Textbox(label="Email")
             login_password = gr.Textbox(label="Password", type="password")
             login_button = gr.Button("Login")
-            signup_button = gr.Button("Go to Signup")
+            signup_redirect = gr.Button("Go to Signup")
             login_output = gr.Textbox(label="Status")
 
     with gr.Row(visible=False) as signup_page:
@@ -294,24 +191,46 @@ with gr.Blocks() as app:
 
     with gr.Row(visible=False) as menu_page:
         with gr.Column():
-            preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
+            preference = gr.Radio(["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(create_modal_window())
-            gr.HTML(modal_js())
-
-    with gr.Row(visible=False) as final_order_page:
-        with gr.Column():
-            gr.HTML("<h2 style='text-align: center;'>Final Order</h2>")
-            final_order = gr.HTML()
-            gr.HTML("<button onclick='proceedToCheckout()'>Place Your Order</button>")
+            submit_cart_button = gr.Button("Submit Cart", elem_id="cart-button")
+            cart_summary = gr.HTML(elem_id="cart-summary")
 
+    # Login Button Click
     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), filter_menu("All"), "Login successful!")
+        if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), "Invalid email or password."),
+        [login_email, login_password],
+        [login_page, menu_page, menu_output, login_output]
+    )
+
+    # Signup Button Click
+    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
+    signup_redirect.click(
+        lambda: (gr.update(visible=False), gr.update(visible=True)),
+        [],
+        [login_page, signup_page]
+    )
+
+    # Login Redirect
+    login_redirect.click(
+        lambda: (gr.update(visible=True), gr.update(visible=False)),
+        [],
+        [login_page, signup_page]
+    )
+
+    # Submit Cart Button
+    submit_cart_button.click(
+        None,
+        [],
+        [cart_summary],
+        _js="submitCart()"
     )
-    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
 app.launch()