Update app.py

app.py

@@ -112,23 +112,19 @@ def filter_menu(preference):
 
     return html_content
 
-# Function to finalize order
-def finalize_order(cart):
+# Function to handle Proceed to Checkout
+def proceed_to_checkout(cart):
     total_cost = sum(item['totalCost'] for item in cart)
-    order_details = ''
+    order_summary = "<h2>Your Final Order</h2>"
+    order_summary += "<ul>"
     for item in cart:
-        order_details += f"""
-        <div>
-            <h3>{item['name']} (x{item['quantity']})</h3>
-            <p>Add-ons: {', '.join([extra['name'] for extra in item['extras']]) if item['extras'] else 'None'}</p>
-            <p>Special Instructions: {item['instructions']}</p>
-            <p>Cost: ${item['totalCost']}</p>
-        </div>
+        order_summary += f"""
+            <li>{item['name']} (x{item['quantity']}) - ${item['totalCost']}</li>
         """
-    order_details += f"<h2>Total Cart Cost: ${total_cost}</h2>"
-    return order_details
+    order_summary += f"</ul><h3>Total Bill: ${total_cost}</h3>"
+    return order_summary
 
-# Create Modal Window HTML
+# Function to create Modal Window
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -160,7 +156,7 @@ def create_modal_window():
         <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 
+    return modal_html
 
 # JavaScript for Modal and Cart
 def modal_js():
@@ -187,65 +183,85 @@ def modal_js():
         function closeModal() {
             document.getElementById('modal').style.display = 'none';
         }
-        function resetAddOns() {
-            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
-            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
-        }
         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 extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked'))
-                .map(checkbox => ({ name: checkbox.value, price: parseFloat(checkbox.getAttribute('data-price')) }));
-
-            const specialInstructions = document.getElementById('special-instructions').value;
-
-            const item = {
-                name,
-                quantity,
-                extras,
-                instructions: specialInstructions,
-                totalCost: (price + extras.reduce((acc, extra) => acc + extra.price, 0)) * quantity
-            };
-
-            cart.push(item);
-            totalCartCost += item.totalCost;
-
-            updateCart();
+            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 updateCart() {
-            let cartItemsHtml = '';
-            cart.forEach(item => {
-                cartItemsHtml += `<div><h3>${item.name} (x${item.quantity})</h3>
-                                    <p>Special Instructions: ${item.instructions}</p>
-                                    <p>Add-ons: ${item.extras.map(extra => extra.name).join(', ')}</p>
-                                    <p>Cost: $${item.totalCost}</p></div>`;
-            });
-            document.getElementById('cart-items').innerHTML = cartItemsHtml;
-            document.getElementById('cart-total-cost').innerText = 'Total Cart Cost: $' + totalCartCost.toFixed(2);
+        function updateCartButton() {
+            const cartButton = document.getElementById('cart-button');
+            cartButton.innerText = `View Cart (${cart.length} items)`;
         }
-
         function openCartModal() {
-            document.getElementById('cart-modal').style.display = 'block';
+            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 proceedToCheckout() {
-            alert('Proceeding to Checkout!');
+        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();
         }
-        // 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
+        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() {
+            const finalOrder = window.open('', '_blank');
+            finalOrder.document.write('${proceed_to_checkout(cart)}');
         }
     </script>
     """
     return modal_script
+
 # Gradio App
 with gr.Blocks() as app:
     with gr.Row():
@@ -285,4 +301,4 @@ with gr.Blocks() as app:
     )
     preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
-app.launch()
+app.launch()