Update static/script.js

static/script.js

@@ -4,6 +4,7 @@ let conversation = [
 let selectedIngredients = [];
 let selectedMenuItem = null;
 let cart = [];
+let userName = ''; // To store the user's name
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -36,6 +37,96 @@ function sendMessage() {
     }
 }
 
+function displayForm() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for form!');
+        return;
+    }
+
+    const formDiv = document.createElement('div');
+    formDiv.className = 'bot-message';
+    formDiv.innerHTML = `
+        <p>Please register here with these details. Our service agent will get back to you soon.</p>
+        <div class="registration-form">
+            <label for="mobileNumber">Mobile Number:</label>
+            <input type="text" id="mobileNumber" placeholder="Enter your mobile number" /><br/>
+            <label for="email">Email:</label>
+            <input type="email" id="email" placeholder="Enter your email" /><br/>
+            <label for="issueDescription">Issue Description:</label>
+            <textarea id="issueDescription" placeholder="Describe your issue"></textarea><br/>
+            <button onclick="submitForm()">Submit</button>
+        </div>
+    `;
+    chatMessages.appendChild(formDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function submitForm() {
+    const mobileNumber = document.getElementById('mobileNumber').value.trim();
+    const email = document.getElementById('email').value.trim();
+    const issueDescription = document.getElementById('issueDescription').value.trim();
+
+    if (!mobileNumber || !email || !issueDescription) {
+        addMessage('bot', 'Please fill in all fields before submitting.');
+        return;
+    }
+
+    const formData = {
+        name: userName,
+        mobileNumber: mobileNumber,
+        email: email,
+        issueDescription: issueDescription
+    };
+
+    fetch('/submit-case', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            addMessage('bot', 'Thank you! Your case has been submitted. Our service agent will get back to you soon.');
+        } else {
+            addMessage('bot', 'There was an error submitting your case. Please try again later.');
+        }
+    })
+    .catch(error => {
+        console.error('Error submitting form:', error);
+        addMessage('bot', 'There was an error submitting your case. Please try again later.');
+    });
+}
+
+function displayOptions(options) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
+        return;
+    }
+
+    options.forEach(opt => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'bot-message';
+        const button = document.createElement('button');
+        button.textContent = opt.text;
+        button.className = `option-button ${opt.class}`;
+
+        button.onclick = () => {
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            setTimeout(() => handleResponse(opt.text), 500);
+        };
+
+        messageDiv.appendChild(button);
+        chatMessages.appendChild(messageDiv);
+    });
+
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
 function handleResponse(userInput) {
     const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
     let botResponse = '';
@@ -43,6 +134,7 @@ function handleResponse(userInput) {
 
     // Handle name input (first user response after bot's greeting)
     if (conversation.length === 2 && conversation[0].role === 'bot' && conversation[0].message.includes('May I know your name?')) {
+        userName = userInput; // Store the user's name
         botResponse = `Nice to meet you, ${userInput}! 😊 How can I assist you today?`;
         options = [
             { text: 'What is TioNat?', class: 'blue' },
@@ -135,73 +227,13 @@ function handleResponse(userInput) {
         botResponse = 'If you receive a defective or damaged product, please contact our customer service immediately for assistance with returns or exchanges.';
     } else {
         // Fallback for unrecognized input
-        botResponse = "Sorry, I didn't understand that. Could you please clarify or choose an option?";
-        if (conversation.length === 2) {
-            options = [
-                { text: 'What is TioNat?', class: 'blue' },
-                { text: 'How do I create an account on TioNat?', class: 'blue' },
-                { text: 'How can I track my order?', class: 'blue' },
-                { text: 'Do you ship internationally?', class: 'blue' },
-                { text: 'What payment methods do you accept?', class: 'blue' },
-                { text: 'What is the best supplement for boosting immunity?', class: 'blue' },
-                { text: 'Are your nutritional supplements vegan-friendly?', class: 'blue' },
-                { text: 'How do I know which supplement is right for me?', class: 'blue' },
-                { text: 'Are there any side effects of using your supplements?', class: 'blue' },
-                { text: 'Do you offer products for specific health conditions?', class: 'blue' },
-                { text: 'How do I use your health care products?', class: 'blue' },
-                { text: 'Do your products come with a money-back guarantee?', class: 'blue' },
-                { text: 'Are your health care products FDA-approved?', class: 'blue' },
-                { text: 'Are your personal care products cruelty-free?', class: 'blue' },
-                { text: 'What ingredients do you use in your skincare products?', class: 'blue' },
-                { text: 'Can I use your personal care products for sensitive skin?', class: 'blue' },
-                { text: 'How do I find the right skincare routine?', class: 'blue' },
-                { text: 'Can I modify or cancel my order after placing it?', class: 'blue' },
-                { text: 'How long does it take to receive my order?', class: 'blue' },
-                { text: 'Do you offer free shipping?', class: 'blue' },
-                { text: 'How do I return a product?', class: 'blue' },
-                { text: 'How can I contact customer service?', class: 'blue' },
-                { text: 'Can I track my return?', class: 'blue' },
-                { text: 'How can I get a product recommendation?', class: 'blue' },
-                { text: 'How do I reset my password?', class: 'blue' },
-                { text: 'Is my payment information secure?', class: 'blue' },
-                { text: 'How do I update my account information?', class: 'blue' },
-                { text: 'Can I leave a review for a product?', class: 'blue' },
-                { text: 'How do I report a product issue?', class: 'blue' }
-            ];
-        }
+        botResponse = "Sorry, I didn't understand that. Let's register your query so our service agent can assist you.";
+        addMessage('bot', botResponse);
+        displayForm();
+        return; // Stop further processing since we're showing the form
     }
 
     addMessage('bot', botResponse);
     if (options.length > 0) {
         displayOptions(options);
     }
-}
-function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for options!');
-        return;
-    }
-
-    // Display each option as a bot message in the chat
-    options.forEach(opt => {
-        const messageDiv = document.createElement('div');
-        messageDiv.className = 'bot-message'; // This makes the options look like bot messages
-        const button = document.createElement('button');
-        button.textContent = opt.text;
-        button.className = `option-button ${opt.class}`;
-
-        // When an option is clicked, treat it as a user response and trigger the appropriate handler
-        button.onclick = () => {
-            addMessage('user', opt.text);
-            conversation.push({ role: 'user', message: opt.text });
-            setTimeout(() => handleResponse(opt.text), 500);
-        };
-
-        messageDiv.appendChild(button);
-        chatMessages.appendChild(messageDiv); // Append the button inside a bot message container
-    });
-
-    // Scroll to the bottom of the chat container
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}