From f5e35a0876816a4e5ddffe435cf4f8579c4fdc7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?luisa=20casta=C3=B1o?= Date: Tue, 16 Jul 2024 11:30:36 -0500 Subject: [PATCH 01/14] [create] ClientTags component --- .../Profile/EditProfile/ClientTagsModal.jsx | 40 +++++++++++++++++ src/components/Profile/EditProfileModal.jsx | 44 ++++++++++--------- 2 files changed, 63 insertions(+), 21 deletions(-) create mode 100644 src/components/Profile/EditProfile/ClientTagsModal.jsx diff --git a/src/components/Profile/EditProfile/ClientTagsModal.jsx b/src/components/Profile/EditProfile/ClientTagsModal.jsx new file mode 100644 index 0000000..33e73aa --- /dev/null +++ b/src/components/Profile/EditProfile/ClientTagsModal.jsx @@ -0,0 +1,40 @@ +import { FaTag } from 'react-icons/fa'; + +const ClientTagsModal = () => { + const optionTags = [ + { label: 'Comprador frecuente', icon: FaTag, color: '#FF7F50' }, // Coral + { label: 'Nuevo cliente', icon: FaTag, color: '#6495ED' }, // Cornflower Blue + { label: 'Cliente VIP', icon: FaTag, color: '#FFD700' }, // Gold + { label: 'Carrito abandonado', icon: FaTag, color: '#DC143C' }, // Crimson + { label: 'Interesado en promociones', icon: FaTag, color: '#32CD32' }, // Lime Green + { label: 'Cliente insatisfecho', icon: FaTag, color: '#FF4500' }, // Orange Red + { label: 'Consulta sobre producto específico', icon: FaTag, color: '#1E90FF' }, // Dodger Blue + { label: 'Consulta sobre envío', icon: FaTag, color: '#8A2BE2' }, // Blue Violet + { label: 'Consulta sobre devolución', icon: FaTag, color: '#FF6347' }, // Tomato + { label: 'Recomendación de productos', icon: FaTag, color: '#3CB371' }, // Medium Sea Green + { label: 'Registro a newsletter', icon: FaTag, color: '#4682B4' }, // Steel Blue + { label: 'Consulta sobre métodos de pago', icon: FaTag, color: '#DAA520' }, // Golden Rod + { label: 'Potencial cliente', icon: FaTag, color: '#20B2AA' }, // Light Sea Green + { label: 'Cliente de redes sociales', icon: FaTag, color: '#FF69B4' }, // Hot Pink + { label: 'Cliente referido', icon: FaTag, color: '#87CEEB' }, // Sky Blue + { label: 'Interés en categorías específicas', icon: FaTag, color: '#BA55D3' }, // Medium Orchid + { label: 'Feedback positivo', icon: FaTag, color: '#7FFF00' }, // Chartreuse + { label: 'Feedback negativo', icon: FaTag, color: '#B22222' }, // Fire Brick + { label: 'Solicitante de información adicional', icon: FaTag, color: '#00CED1' }, // Dark Turquoise + { label: 'Clientes con historial de devoluciones', icon: FaTag, color: '#9400D3' } // Dark Violet + ]; + return ( +
+
+ {optionTags.map((tag, index) => ( +
+ + {tag.label} +
+ ))} +
+
+ ) +} + +export default ClientTagsModal \ No newline at end of file diff --git a/src/components/Profile/EditProfileModal.jsx b/src/components/Profile/EditProfileModal.jsx index 5785398..d8aa178 100644 --- a/src/components/Profile/EditProfileModal.jsx +++ b/src/components/Profile/EditProfileModal.jsx @@ -3,10 +3,11 @@ 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: "", @@ -15,14 +16,14 @@ const EditProfileModal = ({ isOpen, onClose, onSubmit, data, agent_id }) => { client_type: "", user_number: "", }); - + const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value, }); }; - + formData.agent_id = agent_id useEffect(() => { setFormData(data); @@ -79,26 +80,27 @@ const EditProfileModal = ({ isOpen, onClose, onSubmit, data, agent_id }) => { />
-
*/}