Update static/script.js

static/script.js

@@ -1,7 +1,8 @@
 let conversation = [
-    { role: 'bot', message: "Hi there! I'm Chat Bot! May I know your name?" }
+    { role: 'bot', message: "Hi there! I'm TioNat Assistant! May I know your name?" }
 ];
 let userName = ''; // To store the user's name
+let isSubmitting = false; // Flag to prevent multiple submissions
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -34,6 +35,32 @@ function sendMessage() {
     }
 }
 
+// Add Enter key event listener for the input field
+document.addEventListener('DOMContentLoaded', () => {
+    const userInput = document.getElementById('userInput');
+    const clearButton = document.getElementById('clearButton');
+    if (userInput) {
+        userInput.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        });
+    }
+    if (clearButton) {
+        clearButton.addEventListener('click', clearChat);
+    }
+});
+
+function clearChat() {
+    const chatMessages = document.getElementById('chatMessages');
+    chatMessages.innerHTML = '<div class="bot-message">Hi there! I\'m TioNat Assistant! May I know your name?</div>';
+    conversation = [{ role: 'bot', message: "Hi there! I'm TioNat Assistant! May I know your name?" }];
+    userName = '';
+    document.getElementById('userInput').value = '';
+    isSubmitting = false; // Reset submission flag on chat clear
+}
+
 function displayForm() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -56,20 +83,69 @@ function displayForm() {
             <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>
+            <button id="submitButton" onclick="submitForm()">Submit</button>
         </div>
     `;
     chatMessages.appendChild(formDiv);
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+function resetForm() {
+    const mobileNumber = document.getElementById('mobileNumber');
+    const email = document.getElementById('email');
+    const issueDescription = document.getElementById('issueDescription');
+    const submitButton = document.getElementById('submitButton');
+
+    if (mobileNumber) mobileNumber.value = '';
+    if (email) email.value = '';
+    if (issueDescription) issueDescription.value = '';
+    if (submitButton) submitButton.disabled = false;
+    isSubmitting = false; // Reset the flag after form reset
+    console.log('Form reset after 4 seconds');
+}
+
 function submitForm() {
+    if (isSubmitting) {
+        console.log('Submission already in progress, ignoring additional click');
+        return;
+    }
+
+    const submitButton = document.getElementById('submitButton');
+    if (!submitButton) {
+        console.error('Submit button not found!');
+        return;
+    }
+
+    // Disable the button and set the flag
+    isSubmitting = true;
+    submitButton.disabled = true;
+    console.log('Submit button clicked, starting submission process');
+
     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.');
+    // Validate mobile number (must be 10 digits)
+    const mobileRegex = /^\d{10}$/;
+    if (!mobileNumber || !mobileRegex.test(mobileNumber)) {
+        addMessage('bot', 'Please enter a valid 10-digit mobile number.');
+        isSubmitting = false;
+        submitButton.disabled = false;
+        console.log('Validation failed: Invalid mobile number');
+        return;
+    }
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        addMessage('bot', 'Please enter a valid email address.');
+        isSubmitting = false;
+        submitButton.disabled = false;
+        console.log('Validation failed: Invalid email');
+        return;
+    }
+    if (!issueDescription) {
+        addMessage('bot', 'Please describe your issue.');
+        isSubmitting = false;
+        submitButton.disabled = false;
+        console.log('Validation failed: Issue description missing');
         return;
     }
 
@@ -80,6 +156,8 @@ function submitForm() {
         issueDescription: issueDescription
     };
 
+    console.log('Sending form data to server:', formData);
+
     fetch('/submit-case', {
         method: 'POST',
         headers: {
@@ -87,17 +165,29 @@ function submitForm() {
         },
         body: JSON.stringify(formData),
     })
-    .then(response => response.json())
+    .then(response => {
+        console.log('Received response from server:', response);
+        return response.json();
+    })
     .then(data => {
+        console.log('Parsed response data:', data);
         if (data.success) {
             addMessage('bot', 'Thank you! Your case has been submitted. Our service agent will get back to you soon.');
+            // Reset the form after 4 seconds
+            setTimeout(() => {
+                resetForm();
+            }, 4000);
         } else {
             addMessage('bot', 'There was an error submitting your case. Please try again later.');
+            isSubmitting = false;
+            submitButton.disabled = false;
         }
     })
     .catch(error => {
         console.error('Error submitting form:', error);
         addMessage('bot', 'There was an error submitting your case. Please try again later.');
+        isSubmitting = false;
+        submitButton.disabled = false;
     });
 }
 
@@ -128,51 +218,120 @@ function displayOptions(options) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
-function handleResponse(userInput) {
-    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
-    let botResponse = '';
-    let options = [];
-
-    // 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 = [
+function displayCategories() {
+    const categories = [
+        { text: 'About TioNat and Account Setup', class: 'blue', questions: [
             { 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 payment methods do you accept?', class: 'blue' }
+        ]},
+        { text: 'Nutritional Supplements', class: 'blue', questions: [
             { 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: 'Do you offer products for specific health conditions?', class: 'blue' }
+        ]},
+        { text: 'Health Care Products', class: 'blue', questions: [
             { 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: 'What ingredients do you use in your skincare products?', class: 'blue' }
+        ]},
+        { text: 'Personal Care and Skincare', class: 'blue', questions: [
             { 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: 'Do you offer free shipping?', class: 'blue' }
+        ]},
+        { text: 'Returns and Customer Support', class: 'blue', questions: [
             { 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: 'How do I reset my password?', class: 'blue' } // Moved here
+        ]},
+        { text: 'Security and Account Management', class: 'blue', questions: [
             { 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' },
-            { text: 'Other', class: 'green' }
-        ];
-    } else if (lastMessage.includes('what is tionat?')) {
+            { text: 'How do I report a product issue?', class: 'blue' }
+        ]},
+        { text: 'Other', class: 'green' }
+    ];
+
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for categories!');
+        return;
+    }
+
+    categories.forEach(category => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'bot-message';
+        const button = document.createElement('button');
+        button.textContent = category.text;
+        button.className = `option-button ${category.class}`;
+
+        button.onclick = () => {
+            addMessage('user', category.text);
+            conversation.push({ role: 'user', message: category.text });
+            if (category.text === 'Other') {
+                addMessage('bot', "Please provide more details about your query so our service agent can assist you.");
+                displayForm();
+            } else {
+                displayOptions(category.questions);
+            }
+        };
+
+        messageDiv.appendChild(button);
+        chatMessages.appendChild(messageDiv);
+    });
+
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function handleResponse(userInput) {
+    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+    let botResponse = '';
+
+    // 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;
+        botResponse = `Nice to meet you, ${userInput}! 😊 Please select a category to explore common questions or choose 'Other' to submit a custom query.`;
+        addMessage('bot', botResponse);
+        displayCategories();
+        return;
+    }
+
+    // Handle category selection and FAQ responses
+    if (lastMessage.includes('about tionat and account setup')) {
+        return; // Questions are already displayed via displayOptions
+    } else if (lastMessage.includes('nutritional supplements')) {
+        return;
+    } else if (lastMessage.includes('health care products')) {
+        return;
+    } else if (lastMessage.includes('personal care and skincare')) {
+        return;
+    } else if (lastMessage.includes('returns and customer support')) {
+        return;
+    } else if (lastMessage.includes('security and account management')) {
+        return;
+    } else if (lastMessage.includes('other')) {
+        addMessage('bot', "Please provide more details about your query so our service agent can assist you.");
+        displayForm();
+        return;
+    }
+
+    // Handle FAQ responses
+    if (lastMessage.includes('what is tionat?')) {
         botResponse = 'TioNat is an e-commerce platform offering a wide range of products in Nutritional Care, Health Care, and Personal Care categories. We aim to improve the quality of life with top-notch, reliable, and scientifically-backed products.';
     } else if (lastMessage.includes('how do i create an account on tionat?')) {
-        botResponse = 'To create an account on TioNat, simply click on the "Sign Up" button on the top-right corner of our website. Enter your name, email address, and a password. Once registered, you can start shopping!';
+        botResponse = 'To create an account on TioNat, simply click on the "Sign Up" button on the top-right corner of our website. Enter your name, email address, and a password. Once registered, you can start shopping!'; 
     } else if (lastMessage.includes('how can i track my order?')) {
         botResponse = 'After placing your order, you will receive a tracking number via email. You can also track your order from your TioNat account under the "Order History" section.';
     } else if (lastMessage.includes('do you ship internationally?')) {
@@ -209,7 +368,7 @@ function handleResponse(userInput) {
         botResponse = 'Orders typically take 3-7 business days to process and ship, depending on your location. You can check your tracking number for more accurate delivery details.';
     } else if (lastMessage.includes('do you offer free shipping?')) {
         botResponse = 'Yes, we offer free shipping on orders above a certain amount. Check the shipping details at checkout to confirm eligibility.';
-    } else if (lastMessage.includes('how do I return a product?')) {
+    } else if (lastMessage.includes('how do i return a product?')) {
         botResponse = 'If you are not satisfied with your purchase, you can return most products within 30 days. Please visit our Returns & Exchange page for detailed instructions.';
     } else if (lastMessage.includes('how can i contact customer service?')) {
         botResponse = 'You can reach our customer service team via email at support@tionat.com or call us at +1-800-123-4567. We\'re here to assist you with any queries.';
@@ -227,57 +386,14 @@ function handleResponse(userInput) {
         botResponse = 'Yes! After purchasing a product, you can leave a review directly on the product page. We value your feedback and it helps other customers make informed decisions.';
     } else if (lastMessage.includes('how do i report a product issue?')) {
         botResponse = 'If you receive a defective or damaged product, please contact our customer service immediately for assistance with returns or exchanges.';
-    } else if (lastMessage.includes('other')) {
-        botResponse = "Please provide more details about your query so our service agent can assist you.";
-        addMessage('bot', botResponse);
-        displayForm();
-        return; // Stop further processing since we're showing the form
     } else {
-        // Instead of showing the form, guide the user to select "Other"
-        botResponse = "I'm sorry, I don't understand your query. Please select the 'Other' option to proceed.";
+        botResponse = "I'm sorry, I don't understand your query. Please select a category to explore common questions or choose 'Other' to submit a custom query.";
         addMessage('bot', botResponse);
-        
-        // Redisplay the FAQ options if they aren't already visible
-        if (conversation.length > 2 && !document.querySelector('.option-button')) {
-            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' },
-                { text: 'Other', class: 'green' }
-            ];
-            displayOptions(options);
+        if (!document.querySelector('.option-button')) {
+            displayCategories();
         }
-        return; // Stop further processing
+        return;
     }
 
     addMessage('bot', botResponse);
-    if (options.length > 0) {
-        displayOptions(options);
-    }
-}
+}