Ux improvement/client tags

src/components/Chat/Chats.jsx

@@ -26,34 +26,13 @@ function Chats({ filter, userUuid, userRole, idToken }) {
 
   useChatsWebSocket(userUuid, setWebSocket, setNotification)
 
-  console.log("At the beginning dispatch", dispatch)
-
   useEffect(() => {
     setIsLoading(true);
     fetchInitialChats().then(() => {
       setIsLoading(false);
     });
   }, [userUuid]);
 
-  /*DEBUG*/
-  useEffect(() => {
-    console.log("isLoading", isLoading)
-  }, [isLoading]);
-
-  useEffect(() => {
-    console.log("chats", chats)
-  }, [chats]);
-
-  useEffect(() => {
-    console.log("dispatch", dispatch)
-  }, [dispatch]);
-
-  useEffect(() => {
-    console.log("userUUID", userUuid)
-  }, [userUuid]);
-  /*END DEBUG*/
-
-
   const handleFireClick = () => {
     selectChat([]);
     markDispatch(!dispatch);

src/components/Profile/EditProfile/ClientTagsModal.jsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from 'react';
+import { FaTag } from 'react-icons/fa';
+import { FaChevronDown } from "react-icons/fa";
+
+const ClientTagsModal = ({ onClientTypeChange, clientTypeInitial }) => {
+
+    console.log('clientTypeInitial al inicio', clientTypeInitial);
+    const [isVisible, setIsVisible] = useState(false);
+    const [selectedCheck, setSelectedCheck] = useState(clientTypeInitial || []);
+    const optionTags = [
+        { label: 'Comprador frecuente', value: 'comprador_frecuente' },
+        { label: 'Nuevo cliente', value: 'nuevo_cliente' },
+        { label: 'Cliente VIP', value: 'cliente_vip' },
+        { label: 'Carrito abandonado', value: 'carrito_abandonado' },
+        { label: 'Interesado en promociones', value: 'interesado_promociones' },
+        { label: 'Cliente insatisfecho', value: 'cliente_insatisfecho' },
+        { label: 'Consulta sobre producto específico', value: 'consulta_producto' },
+        { label: 'Consulta sobre envío', value: 'consulta_envio' },
+        { label: 'Consulta sobre devolución', value: 'consulta_devolucion' },
+        { label: 'Recomendación de productos', value: 'recomendacion_productos' },
+        { label: 'Registro a newsletter', value: 'registro_newsletter' },
+        { label: 'Consulta sobre métodos de pago', value: 'consulta_metodos_pago' },
+        { label: 'Potencial cliente', value: 'potencial_cliente' },
+        { label: 'Cliente de redes sociales', value: 'cliente_redes_sociales' },
+        { label: 'Cliente referido', value: 'cliente_referido' },
+        { label: 'Interés en categorías específicas', value: 'interes_categorias' },
+        { label: 'Feedback positivo', value: 'feedback_positivo' },
+        { label: 'Feedback negativo', value: 'feedback_negativo' },
+        { label: 'Solicitante de información adicional', value: 'solicitante_info' },
+        { label: 'Clientes con historial de devoluciones', value: 'clientes_devoluciones' }
+    ];
+
+    useEffect(() => {
+        onClientTypeChange(selectedCheck);
+    }, [selectedCheck]);
+
+    const controlChecked = (index) => {
+        const tag = optionTags[index];
+        const isChecked = selectedCheck.some((item) => item.value === tag.value);
+
+        if (isChecked) {
+            setSelectedCheck((prevSelectedCheck) =>
+                prevSelectedCheck.filter((item) => item.value !== tag.value)
+            );
+        } else {
+            setSelectedCheck((prevSelectedCheck) => [...prevSelectedCheck, tag]);
+        }
+    }
+
+    console.log('selectedCheck', selectedCheck);
+
+
+    const toggleVisibility = () => {
+        setIsVisible(!isVisible);
+    };
+
+
+    return (
+        <div className="mt-2 w-full rounded-md shadow-lg bg-backgroundSecondary ring-1 ring-black ring-opacity-5 ">
+            <div className="flex items-center justify-between p-2 px-3 relative rounded-md shadow-lg bg-backgroundSecondary ring-1 ring-black ring-opacity-5">
+                <label className="block text-textPrimary leading-tight text-md mr-2">
+                    Etiquetas para tipo de cliente
+                </label>
+                <div
+                    className="absolute inset-y-0 right-2 flex items-center px-2 text-textPrimary cursor-pointer"
+                    onClick={toggleVisibility}>
+                    <FaChevronDown />
+                </div>
+            </div>
+            {isVisible && (
+                <div
+                    className='p-3 flex flex-col space-y-2 max-h-[200px] overflow-y-scroll cursor-pointer text-sm' role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    {optionTags.map((tag, index) => (
+                        <label
+                            key={index}
+                            htmlFor={`tagChecked_${index}`}
+                            className={`block w-full px-4 py-1 text-sm text-textPrimary transition-colors duration-300 ease-in-out rounded flex justify-between hover:bg-lightBlue ${selectedCheck.some((item) => item.value === tag.value)? 'bg-lightBlue': ''}`}
+                        >
+                            <div className="flex items-center space-x-2" >
+                                <FaTag className="h-3 w-3" />
+                                <span>{tag.label}</span>
+                            </div>
+                            <input
+                                type="checkbox"
+                                className="h-5 w-5 text-textPrimary bg-white checked:bg-red-500 rounded focus:ring-0 focus:outline-none" id={`tagChecked_${index}`}
+                                onChange={() => controlChecked(index)}
+                                checked={selectedCheck.some((item) => item.value === tag.value)} 
+                            />
+                        </label>
+                    ))}
+                </div>
+            )}
+        </div>
+
+    )
+}
+
+export default ClientTagsModal

src/components/Profile/EditProfileModal.jsx

@@ -3,17 +3,19 @@ import React, { useEffect, useState } from "react";
 import { IoMdCloseCircleOutline } from "react-icons/io";
 import { FaChevronDown } from "react-icons/fa";
 import { useChat } from "../../logic/ChatContext";
+import ClientTagsModal from "./EditProfile/ClientTagsModal";
 
 const EditProfileModal = ({ isOpen, onClose, onSubmit, data, agent_id }) => {
-  
-  const { selectChat, selectedChat } = useChat();  
+
+  const { selectChat, selectedChat } = useChat();
   const [formData, setFormData] = useState({
-    name: "",
-    address: "",
-    email: "",
-    msg: selectedChat.msg,
-    client_type: "",
-    user_number: "",
+    name: data.name || "",
+    address: data.address || "",
+    email: data.email || "",
+    msg: selectedChat.msg || "",
+    client_type: data.client_type || [],
+    user_number: data.user_number || "",
+    agent_id: agent_id,
   });
 
   const handleChange = (e) => {
@@ -23,14 +25,21 @@ const EditProfileModal = ({ isOpen, onClose, onSubmit, data, agent_id }) => {
     });
   };
 
+  const handleClientTypeChange = (selectedCheck) => {
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      client_type: selectedCheck,
+    }));
+  };
+
   formData.agent_id = agent_id
+
   useEffect(() => {
     setFormData(data);
   }, [data]);
-
+  
   if (!isOpen) return null;
 
-
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center" style={{ zIndex: 9999 }}>
       <div className="bg-backgroundSecondary rounded-lg shadow-lg w-2/6" style={{ zIndex: 9999 }}>
@@ -78,27 +87,11 @@ const EditProfileModal = ({ isOpen, onClose, onSubmit, data, agent_id }) => {
               className="shadow appearance-none border rounded w-full py-2 px-3 text-textPrimary leading-tight focus:outline-none focus:shadow-outline"
             />
           </div>
-          <div className="mb-4">
-            <label className="block text-textPrimary text-sm font-bold mb-2 mr-2">
-              Tipo de cliente
-            </label>
-            <div className="relative">
-            <select
-              name="client_type"
-              className="block w-full p-2 mb-6 text-sm border rounded-lg focus:ring-contrastColor focus:border-contrastColor bg-backgroundSecondary text-textPrimary placeholder-textPrimary appearance-none shadow focus:outline-none focus:shadow-outline"
-              onChange={handleChange}
-              value={formData.client_type}
-            >
-              <option value={selectedChat.msg}>{selectedChat.msg}</option>
-              <option value="No deseado">No deseado</option>
-              <option value="Comprador">Comprador</option>
-              <option value="Visto">Visto</option>
-              <option value="VIP">VIP</option>
-            </select>
-            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-textPrimary">
-              <FaChevronDown />
-            </div>
-            </div>
+          <div className="mb-4 h-auto">
+            <ClientTagsModal
+              onClientTypeChange={handleClientTypeChange}
+              clientTypeInitial = {formData.client_type || []}
+            />
           </div>
           <div className="mb-4">
             <label className="block text-textPrimary text-sm font-bold mb-2">

src/components/Templates/SingleProductTemplate.jsx

@@ -57,7 +57,7 @@ function SingleProductTemplate({ onFormChange, clean }) {
             </div>
             <div className="mb-4">
                 <label className="block text-textPrimary text-sm font-bold mb-2 mr-2">
-                    Sopify ID:
+                    Shopify ID:
                 </label>
                 <input
                     name="shopify_ids"