Update app.py

app.py

@@ -1,159 +1,51 @@
-import gradio as gr
-import bcrypt
-from simple_salesforce import Salesforce
-
-# Salesforce Connection (use your credentials)
-sf = Salesforce(username='[email protected]', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')
-
-# Function to Hash Password
-def hash_password(password):
-    return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
-
-# Function to Verify Password
-def verify_password(plain_password, hashed_password):
-    return bcrypt.checkpw(plain_password.encode('utf-8'), hashed_password.encode('utf-8'))
-
-# Signup function
-def signup(name, email, phone, password):
-    try:
-        email = email.strip()
-        query = f"SELECT Id FROM Customer_Login__c WHERE Email__c = '{email}'"
-        result = sf.query(query)
-
-        if len(result['records']) > 0:
-            return "Email already exists! Please use a different email."
-
-        hashed_password = hash_password(password)
-
-        sf.Customer_Login__c.create({
-            'Name': name.strip(),
-            'Email__c': email,
-            'Phone_Number__c': phone.strip(),
-            'Password__c': hashed_password
-        })
-        return "Signup successful! You can now login."
-    except Exception as e:
-        return f"Error during signup: {str(e)}"
-
-# Login function
-def login(email, password):
-    try:
-        email = email.strip()
-        query = f"SELECT Name, Password__c FROM Customer_Login__c WHERE Email__c = '{email}'"
-        result = sf.query(query)
-
-        if len(result['records']) == 0:
-            return "Invalid email or password.", None
-
-        user = result['records'][0]
-        stored_password = user['Password__c']
-
-        if verify_password(password.strip(), stored_password):
-            return "Login successful!", user['Name']
-        else:
-            return "Invalid email or password.", None
-    except Exception as e:
-        return f"Error during login: {str(e)}", None
-
-# Function to load menu data
-def load_menu_from_salesforce():
-    try:
-        query = "SELECT Name, Price__c, Description__c, Image1__c, Image2__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
-        result = sf.query(query)
-        return result['records']
-    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 based on preference
-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:
-            continue
-
-        if item["Section__c"] not in filtered_data:
-            filtered_data[item["Section__c"]] = []
-
-        if preference == "All" or (preference == "Veg" and item["Veg_NonVeg__c"] in ["Veg", "Both"]) or (preference == "Non-Veg" and item["Veg_NonVeg__c"] in ["Non veg", "Both"]):
-            filtered_data[item["Section__c"].strip()].append(item)
-
-    html_content = '<div style="padding: 0 10px; max-width: 1200px; margin: auto;">'
-    for section, items in filtered_data.items():
-        html_content += f"<h2 style='text-align: center; margin-top: 5px;'>{section}</h2>"
-        html_content += '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; justify-content: center; margin-top: 10px;">'
-        for item in items:
-            html_content += f"""
-            <div style="border: 1px solid #ddd; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; height: 350px;">
-                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;" 
-                onclick="openModal('{item['Name']}', '{item.get('Image2__c', '')}', '{item['Description__c']}', '${item['Price__c']}')">
-                <div style="padding: 10px;">
-                    <h3 style='font-size: 1.2em; text-align: center;'>{item['Name']}</h3>
-                    <p style='font-size: 1.1em; color: green; text-align: center;'>${item['Price__c']}</p>
-                    <p style='font-size: 0.9em; text-align: justify; margin: 5px;'>{item['Description__c']}</p>
-                </div>
+# Updated Cart Modal HTML
+def create_cart_modal():
+    cart_modal_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>
-            """
-        html_content += '</div>'
-    html_content += '</div>'
-
-    if not any(filtered_data.values()):
-        return "<p>No items match your filter.</p>"
-
-    return html_content
-
-# Function to generate 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>
+            <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>
+            <button style="background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;" onclick="submitOrder()">Submit Order</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
+    return cart_modal_html
+
+# Final Order Page HTML
+def create_final_order_page():
+    final_order_html = """
+    <div id="final-order-page" style="display: none; padding: 20px; max-width: 1200px; margin: auto;">
+        <h1>Final Order</h1>
+        <div id="final-order-items"></div>
+        <p id="final-order-total-cost" style="font-size: 1.2em; font-weight: bold;">Total Order Cost: $0.00</p>
+        <button onclick="confirmOrder()" style="background-color: #28a745; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Confirm Order</button>
+    </div>
+    """
+    return final_order_html
 
-# JavaScript for Modal and Cart functionality
+# Updated JavaScript for Submit Order
 def modal_js():
     modal_script = """
     <script>
         let cart = [];
         let totalCartCost = 0;
-
-        // Add item to cart
+        function openModal(name, image2, description, price) {
+            const modal = document.getElementById('modal');
+            modal.style.display = 'block';
+            document.getElementById('modal-image').src = image2;
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-price').innerText = price;
+            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('$', ''));
@@ -163,114 +55,75 @@ def modal_js():
             const extras = selectedAddOns.map(extra => ({
                 name: extra.value,
                 price: parseFloat(extra.getAttribute('data-price')),
-                quantity: 1  // Default quantity for add-ons is 1
+                quantity: 1
             }));
             const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
             const totalCost = (price * quantity) + extrasCost;
-
-            // Add item to cart
             cart.push({ name, price, quantity, extras, instructions, totalCost });
             totalCartCost += totalCost;
             updateCartButton();
             updateCartTotalCost();
             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(', ');
+                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
                 cartItemsContainer.innerHTML += `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
                         <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>Quantity: ${item.quantity}</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>
+                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                     </div>
                 `;
             });
+            document.getElementById('cart-total-cost').innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
             cartModal.style.display = 'block';
         }
-
         function closeCartModal() {
             document.getElementById('cart-modal').style.display = 'none';
         }
-
-        function removeFromCart(index) {
-            totalCartCost -= cart[index].totalCost;
-            cart.splice(index, 1);
-            updateCartButton();
-            updateCartTotalCost();
-            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);
-            }
-            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();
-        }
-
-        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() {
-            let checkoutSummary = "<h1>Checkout Summary</h1>";
-            cart.forEach(item => {
-                checkoutSummary += `
-                    <h3>${item.name}</h3>
-                    <p>Quantity: ${item.quantity}</p>
-                    <p>Extras: ${item.extras.map(extra => `${extra.name} x${extra.quantity}`).join(', ')}</p>
-                    <p>Special Instructions: ${item.instructions}</p>
-                    <p>Total: $${item.totalCost.toFixed(2)}</p>
+        function submitOrder() {
+            const finalOrderPage = document.getElementById('final-order-page');
+            const finalOrderItemsContainer = document.getElementById('final-order-items');
+            finalOrderItemsContainer.innerHTML = "";
+            cart.forEach((item) => {
+                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
+                finalOrderItemsContainer.innerHTML += `
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
+                        <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>
                 `;
             });
-            checkoutSummary += `<p><strong>Total Cart Cost: $${totalCartCost.toFixed(2)}</strong></p>`;
-            document.getElementById('checkout-summary').innerHTML = checkoutSummary;
+            document.getElementById('final-order-total-cost').innerText = `Total Order Cost: $${totalCartCost.toFixed(2)}`;
+            finalOrderPage.style.display = 'block';
             document.getElementById('cart-modal').style.display = 'none';
-            document.getElementById('checkout-page').style.display = 'block';
-
-            // Clear cart after submission
+        }
+        function confirmOrder() {
+            alert("Order confirmed! Thank you for your purchase.");
             cart = [];
             totalCartCost = 0;
             updateCartButton();
             updateCartTotalCost();
-        }
-
-        function goBackToMenu() {
-            document.getElementById('menu-page').style.display = 'block';
-            document.getElementById('cart-modal').style.display = 'none';
-        }
-
-        function resetAddOns() {
-            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
-            checkboxes.forEach(checkbox => checkbox.checked = false);
+            document.getElementById('final-order-page').style.display = 'none';
         }
     </script>
-
-
-
     """
     return modal_script
+
+# Gradio App
 with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
@@ -297,20 +150,19 @@ with gr.Blocks() as app:
         with gr.Column():
             preference = gr.Radio(choices=["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 onclick='goBackToMenu()' style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;'>Back</button><button onclick='proceedToCheckout()' style='background: #28a745; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;'>Submit</button></div></div>")
+            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;' 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><button style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='submitOrder()'>Submit Order</button></div></div>")
+
+            # Add Final Order Page
+            gr.HTML(create_final_order_page())
+
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
-    with gr.Row(visible=False) as checkout_page:
-        with gr.Column():
-            gr.HTML("<div id='checkout-summary'></div>")
-
     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]
     )
-    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
 app.launch()