Update app.py

app.py

@@ -63,7 +63,6 @@ modal_and_cart_js = """
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
-
         // Reset spice levels and extras
         const spiceLevelInputs = document.querySelectorAll('input[name="spice-level"]');
         spiceLevelInputs.forEach(input => input.checked = false);
@@ -114,25 +113,24 @@ modal_and_cart_js = """
         updateCartDisplay();
     }
 
-    function finalizeOrder() {
+    function showSummary() {
         if (cart.length === 0) {
-            alert("Your cart is empty. Please add items before finalizing.");
+            alert("Your cart is empty. Please add items before viewing the summary.");
             return;
         }
         finalized = true;
-        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
+        let summaryHTML = "<h3>Order Summary:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
             const extras = item.extras.join(', ');
-            finalOrderHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+            summaryHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
         });
-        finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        document.getElementById('final-order').innerHTML = finalOrderHTML;
+        summaryHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        document.getElementById('summary-container').innerHTML = summaryHTML;
         document.getElementById('menu-container').style.display = 'none';
         document.getElementById('cart-container').style.display = 'none';
-        document.getElementById('finalize-container').style.display = 'none';
-        document.getElementById('final-order-container').style.display = 'block';
+        document.getElementById('summary-container').style.display = 'block';
     }
 </script>
 """
@@ -161,27 +159,25 @@ def app():
             # Floating cart display
             cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
-        # Finalize order button
-        finalize_container = gr.Group(visible=True, elem_id="finalize-container")
-        with finalize_container:
-            finalize_button = gr.Button("Finalize Order")
+        # Summary 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")
 
-        # Final order display container
-        final_order_container = gr.Group(visible=False, elem_id="final-order-container")
-        with final_order_container:
-            final_order_output = gr.HTML(value="", elem_id="final-order")
+        # Finalize order button click event
+        finalize_button.click(lambda: "", inputs=[], outputs=[], _js="showSummary")
 
         # 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: "Finalizing order...", inputs=[], outputs=[])
-
         # Layout
         gr.Row([menu_container])
         gr.Row([cart_container])
-        gr.Row([finalize_container])
-        gr.Row([final_order_container])
+        gr.Row([finalize_button])
+        gr.Row([summary_container])
         gr.HTML(modal_and_cart_js)
 
     return demo