Update app.py

app.py

@@ -113,7 +113,7 @@ modal_and_cart_js = """
             return;
         }
         finalized = true;
-        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
+        let finalOrderHTML = "<h3>Final Order Summary:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
@@ -121,7 +121,7 @@ modal_and_cart_js = """
             finalOrderHTML += `<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('summary-output').innerHTML = finalOrderHTML;
+        document.getElementById('summary-page').innerHTML = finalOrderHTML;
         document.getElementById('menu-container').style.display = 'none';
         document.getElementById('cart-container').style.display = 'none';
         document.getElementById('finalize-container').style.display = 'none';
@@ -159,16 +159,16 @@ def app():
         with finalize_container:
             finalize_button = gr.Button("Finalize Order")
 
-        # Summary display container
+        # Summary page container
         summary_container = gr.Group(visible=False, elem_id="summary-container")
         with summary_container:
-            summary_output = gr.HTML(value="", elem_id="summary-output")
+            summary_output = gr.HTML(value="", elem_id="summary-page")
 
         # 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=[])
+        finalize_button.click(lambda: "Order finalized!", inputs=[], outputs=[], _js="finalizeOrder")
 
         # Layout
         gr.Row([menu_container])