Update app.py

app.py

@@ -52,7 +52,6 @@ modal_and_cart_js = """
         "Extra Fried Onion 4oz": 2
     };
     let finalized = false;
-
     function openModal(name, image, description, price) {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
@@ -71,11 +70,9 @@ modal_and_cart_js = """
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
-
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }
-
     function addToCart() {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
@@ -95,7 +92,6 @@ modal_and_cart_js = """
         updateCartDisplay();
         closeModal();
     }
-
     function updateCartDisplay() {
         let totalBill = 0;
         let cartHTML = "<h3>Your Cart:</h3><ul>";
@@ -107,29 +103,28 @@ modal_and_cart_js = """
         cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
         document.getElementById('floating-cart').innerHTML = cartHTML;
     }
-
     function removeItem(index) {
         cart.splice(index, 1);
         updateCartDisplay();
     }
-
-    function showSummary() {
+    function finalizeOrder() {
         if (cart.length === 0) {
-            alert("Your cart is empty. Please add items before viewing the summary.");
+            alert("Your cart is empty. Please add items before finalizing.");
             return;
         }
         finalized = true;
-        let summaryHTML = "<h3>Order Summary:</h3><ul>";
+        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
             const extras = item.extras.join(', ');
-            summaryHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+            finalOrderHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
         });
-        summaryHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        document.getElementById('summary-container').innerHTML = summaryHTML;
+        finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        document.getElementById('summary-output').innerHTML = finalOrderHTML;
         document.getElementById('menu-container').style.display = 'none';
         document.getElementById('cart-container').style.display = 'none';
+        document.getElementById('finalize-container').style.display = 'none';
         document.getElementById('summary-container').style.display = 'block';
     }
 </script>
@@ -159,24 +154,26 @@ def app():
             # Floating cart display
             cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
-        # Summary container
+        # Finalize order button
+        finalize_container = gr.Group(visible=True, elem_id="finalize-container")
+        with finalize_container:
+            finalize_button = gr.Button("Finalize Order")
+
+        # Summary display container
         summary_container = gr.Group(visible=False, elem_id="summary-container")
         with summary_container:
-            summary_output = gr.HTML(value="", elem_id="summary-container")
-
-        # Finalize Order Button
-        finalize_button = gr.Button("View Summary")
-
-        # Finalize order button click event
-        finalize_button.click(lambda: "", inputs=[], outputs=[], _js="showSummary")
+            summary_output = gr.HTML(value="", elem_id="summary-output")
 
         # Update menu dynamically based on preference
         selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
+        # Finalize order button click event
+        finalize_button.click(lambda: "Order finalized!", inputs=[], outputs=[])
+
         # Layout
         gr.Row([menu_container])
         gr.Row([cart_container])
-        gr.Row([finalize_button])
+        gr.Row([finalize_container])
         gr.Row([summary_container])
         gr.HTML(modal_and_cart_js)