Update static/script.js

static/script.js

@@ -1,12 +1,86 @@
+// TioNat Chatbot Full JavaScript Code with Category-wise FAQ Display
+
 let conversation = [
     { role: 'bot', message: "Hi there! I'm TioNat Assistant! May I know your name?" }
 ];
 let userName = '';
 let isSubmitting = false;
 
+const faqCategories = [
+    {
+        name: 'About TioNat and Account Setup',
+        color: 'blue',
+        questions: [
+            "What is TioNat?",
+            "How do I create an account on TioNat?",
+            "How can I track my order?",
+            "Do you ship internationally?",
+            "What payment methods do you accept?"
+        ]
+    },
+    {
+        name: 'Nutritional Supplements',
+        color: 'purple',
+        questions: [
+            "What is the best supplement for boosting immunity?",
+            "Are your nutritional supplements vegan-friendly?",
+            "How do I know which supplement is right for me?",
+            "Are there any side effects of using your supplements?",
+            "Do you offer products for specific health conditions?"
+        ]
+    },
+    {
+        name: 'Health Care Products',
+        color: 'teal',
+        questions: [
+            "How do I use your health care products?",
+            "Do your products come with a money-back guarantee?",
+            "Are your health care products FDA-approved?",
+            "Are your personal care products cruelty-free?",
+            "What ingredients do you use in your skincare products?"
+        ]
+    },
+    {
+        name: 'Personal Care and Skincare',
+        color: 'orange',
+        questions: [
+            "Can I use your personal care products for sensitive skin?",
+            "How do I find the right skincare routine?",
+            "Can I modify or cancel my order after placing it?",
+            "How long does it take to receive my order?",
+            "Do you offer free shipping?"
+        ]
+    },
+    {
+        name: 'Returns and Customer Support',
+        color: 'red',
+        questions: [
+            "How do I return a product?",
+            "How can I contact customer service?",
+            "Can I track my return?",
+            "How can I get a product recommendation?",
+            "How do I reset my password?"
+        ]
+    },
+    {
+        name: 'Security and Account Management',
+        color: 'green',
+        questions: [
+            "Is my payment information secure?",
+            "How do I update my account information?",
+            "Can I leave a review for a product?",
+            "How do I report a product issue?"
+        ]
+    },
+    {
+        name: 'Other',
+        color: 'gray',
+        questions: []
+    }
+];
+
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) return;
     const messageDiv = document.createElement('div');
     messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
     messageDiv.textContent = message;
@@ -19,24 +93,20 @@ function sendMessage() {
     const message = userInput.value.trim();
     if (message) {
         addMessage('user', message);
-        conversation.push({ role: 'user', message: message });
+        conversation.push({ role: 'user', message });
         userInput.value = '';
         setTimeout(() => handleResponse(message), 500);
     }
 }
 
 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);
+    document.getElementById('userInput').addEventListener('keydown', event => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            sendMessage();
+        }
+    });
+    document.getElementById('clearButton').addEventListener('click', clearChat);
 });
 
 function clearChat() {
@@ -48,10 +118,60 @@ function clearChat() {
     isSubmitting = false;
 }
 
+function displayCategories() {
+    const chatMessages = document.getElementById('chatMessages');
+    faqCategories.forEach(category => {
+        const div = document.createElement('div');
+        div.className = 'bot-message';
+        const btn = document.createElement('button');
+        btn.textContent = category.name;
+        btn.className = `option-button ${category.color}`;
+        btn.onclick = () => {
+            addMessage('user', category.name);
+            if (category.name === 'Other') {
+                addMessage('bot', "Please describe your query below:");
+                displayForm();
+            } else {
+                displayFAQQuestions(category);
+            }
+        };
+        div.appendChild(btn);
+        chatMessages.appendChild(div);
+    });
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function displayFAQQuestions(category) {
+    const chatMessages = document.getElementById('chatMessages');
+    category.questions.forEach(q => {
+        const div = document.createElement('div');
+        div.className = 'bot-message';
+        const btn = document.createElement('button');
+        btn.textContent = q;
+        btn.className = `option-button ${category.color}`;
+        btn.onclick = () => {
+            addMessage('user', q);
+            setTimeout(() => handleResponse(q), 500);
+        };
+        div.appendChild(btn);
+        chatMessages.appendChild(div);
+    });
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function handleResponse(userInput) {
+    if (conversation.length === 2 && conversation[0].message.includes("your name")) {
+        userName = userInput;
+        addMessage('bot', `Nice to meet you, ${userInput}! 😊 Please select a category below.`);
+        displayCategories();
+        return;
+    }
+    addMessage('bot', "Thank you for your question! Our support agent will get back to you shortly.");
+}
+
 function displayForm() {
     const chatMessages = document.getElementById('chatMessages');
     if (chatMessages.querySelector('.registration-form')) return;
-
     const formDiv = document.createElement('div');
     formDiv.className = 'bot-message';
     formDiv.innerHTML = `
@@ -70,26 +190,17 @@ function displayForm() {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
-function resetForm() {
-    document.getElementById('mobileNumber').value = '';
-    document.getElementById('email').value = '';
-    document.getElementById('issueDescription').value = '';
-    document.getElementById('submitButton').disabled = false;
-    isSubmitting = false;
-}
-
 function submitForm() {
     if (isSubmitting) return;
-
     const submitButton = document.getElementById('submitButton');
     isSubmitting = true;
     submitButton.disabled = true;
 
-    const mobileNumber = document.getElementById('mobileNumber').value.trim();
+    const mobile = document.getElementById('mobileNumber').value.trim();
     const email = document.getElementById('email').value.trim();
-    const issueDescription = document.getElementById('issueDescription').value.trim();
+    const issue = document.getElementById('issueDescription').value.trim();
 
-    if (!/^\d{10}$/.test(mobileNumber)) {
+    if (!/^[0-9]{10}$/.test(mobile)) {
         addMessage('bot', 'Please enter a valid 10-digit mobile number.');
         resetForm();
         return;
@@ -99,18 +210,13 @@ function submitForm() {
         resetForm();
         return;
     }
-    if (!issueDescription) {
+    if (!issue) {
         addMessage('bot', 'Please describe your issue.');
         resetForm();
         return;
     }
 
-    const formData = {
-        name: userName,
-        mobileNumber,
-        email,
-        issueDescription
-    };
+    const formData = { name: userName, mobile, email, issue };
 
     fetch('/submit-case', {
         method: 'POST',
@@ -120,191 +226,23 @@ function submitForm() {
     .then(res => res.json())
     .then(data => {
         if (data.success) {
-            addMessage('bot', 'Thank you! Your case has been submitted. Our service agent will get back to you soon.');
+            addMessage('bot', 'Your case has been submitted. Our agent will contact you soon.');
             setTimeout(resetForm, 4000);
         } else {
-            addMessage('bot', 'There was an error submitting your case. Please try again later.');
+            addMessage('bot', 'Error submitting form. Try again later.');
             resetForm();
         }
     })
     .catch(() => {
-        addMessage('bot', 'There was an error submitting your case. Please try again later.');
+        addMessage('bot', 'Error submitting form. Try again later.');
         resetForm();
     });
 }
 
-function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
-    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 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: '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: '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: '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: '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: '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' }
-    ];
-
-    const chatMessages = document.getElementById('chatMessages');
-    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) {
-    if (conversation.length === 2 && conversation[0].message.includes("your name")) {
-        userName = userInput;
-        addMessage('bot', `Nice to meet you, ${userInput}! 😊 Please select a category to explore common questions or choose 'Other' to submit a custom query.`);
-        displayCategories();
-        return;
-    }
-
-    const lower = userInput.toLowerCase();
-    let botResponse = "";
-
-    if (lower.includes("what is tionat")) {
-        botResponse = "TioNat is an e-commerce platform offering Nutritional, Health Care, and Personal Care products.";
-    } else if (lower.includes("create an account")) {
-        botResponse = "Click 'Sign Up' on the top-right of our homepage to register.";
-    } else if (lower.includes("track my order")) {
-        botResponse = "You can track your order under 'Order History' in your TioNat account.";
-    } else if (lower.includes("ship internationally")) {
-        botResponse = "Yes, we ship to select countries. Check at checkout.";
-    } else if (lower.includes("payment methods")) {
-        botResponse = "We accept cards, PayPal, net banking, and COD (where available).";
-    } else if (lower.includes("boosting immunity")) {
-        botResponse = "Try our Vitamin C, Zinc, and Echinacea supplements.";
-    } else if (lower.includes("vegan-friendly")) {
-        botResponse = "Yes, many of our supplements are vegan-friendly. Check product labels.";
-    } else if (lower.includes("which supplement is right")) {
-        botResponse = "Consult a doctor or view our product guides.";
-    } else if (lower.includes("side effects")) {
-        botResponse = "Please read the label or consult your doctor before use.";
-    } else if (lower.includes("specific health conditions")) {
-        botResponse = "Yes! We have products for joint pain, digestion, heart health, etc.";
-    } else if (lower.includes("how do i use your health care products")) {
-        botResponse = "Usage instructions are on the package and product page.";
-    } else if (lower.includes("money-back guarantee")) {
-        botResponse = "Yes, within 30 days. See our Return Policy.";
-    } else if (lower.includes("fda-approved")) {
-        botResponse = "Check each product’s details for FDA approval.";
-    } else if (lower.includes("cruelty-free")) {
-        botResponse = "Yes! All personal care items are cruelty-free.";
-    } else if (lower.includes("ingredients")) {
-        botResponse = "We use high-quality natural oils, vitamins, and extracts.";
-    } else if (lower.includes("sensitive skin")) {
-        botResponse = "Yes, we have products for sensitive skin.";
-    } else if (lower.includes("skincare routine")) {
-        botResponse = "Start with cleanse–tone–moisturize. Contact us for guidance.";
-    } else if (lower.includes("cancel my order")) {
-        botResponse = "Contact us within 24 hrs to modify/cancel.";
-    } else if (lower.includes("receive my order")) {
-        botResponse = "3–7 business days depending on location.";
-    } else if (lower.includes("free shipping")) {
-        botResponse = "Yes, on orders above a minimum amount.";
-    } else if (lower.includes("return a product")) {
-        botResponse = "Return within 30 days via our Return Center.";
-    } else if (lower.includes("contact customer service")) {
-        botResponse = "Email support@tionat.com or call +1-800-123-4567.";
-    } else if (lower.includes("track my return")) {
-        botResponse = "Yes. You’ll get a tracking ID after initiating return.";
-    } else if (lower.includes("product recommendation")) {
-        botResponse = "Use our guides or ask us directly!";
-    } else if (lower.includes("reset my password")) {
-        botResponse = "Click ‘Forgot Password’ on the login page.";
-    } else if (lower.includes("payment information secure")) {
-        botResponse = "Yes, we use SSL encryption and secure gateways.";
-    } else if (lower.includes("update my account")) {
-        botResponse = "Login > Account Settings to update your info.";
-    } else if (lower.includes("leave a review")) {
-        botResponse = "Yes! Go to the product page after purchase.";
-    } else if (lower.includes("report a product issue")) {
-        botResponse = "Contact support immediately with product details.";
-    } else {
-        botResponse = "I'm sorry, I don't understand. Please choose a category or click 'Other'.";
-    }
-
-    addMessage('bot', botResponse);
+function resetForm() {
+    document.getElementById('mobileNumber').value = '';
+    document.getElementById('email').value = '';
+    document.getElementById('issueDescription').value = '';
+    document.getElementById('submitButton').disabled = false;
+    isSubmitting = false;
 }