diff --git a/src/views/Conversations/Components/CustomerProfile.jsx b/src/views/Conversations/Components/CustomerProfile.jsx index 091e13b..2ce3089 100644 --- a/src/views/Conversations/Components/CustomerProfile.jsx +++ b/src/views/Conversations/Components/CustomerProfile.jsx @@ -27,8 +27,8 @@ const CustomerProfile = (({ customer }) => { const { quotes, contact, last_contact, ...order } = orderInfo; return ( -
- + {}} optionType='button' buttonStyle={'solid'} />}> diff --git a/src/views/Conversations/Components/InputBox.jsx b/src/views/Conversations/Components/InputBox.jsx index 0ce2e2a..cd5e8ca 100644 --- a/src/views/Conversations/Components/InputBox.jsx +++ b/src/views/Conversations/Components/InputBox.jsx @@ -4,14 +4,14 @@ import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd'; import { useConversationContext } from '@/stores/Conversations/ConversationContext'; import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils'; -import { v4 as uuid } from "uuid"; +import { v4 as uuid } from 'uuid'; import { whatsappTemplatesParamMapped } from '@/lib/msgUtils'; -const InputBox = (({ onSend }) => { +const InputBox = ({ onSend }) => { const { currentConversation, templates } = useConversationContext(); const [textContent, setTextContent] = useState(''); - const talkabled = ! isEmpty( currentConversation.sn); + const talkabled = !isEmpty(currentConversation.sn); const handleSendText = () => { if (typeof onSend === 'function' && textContent.trim() !== '') { @@ -32,7 +32,7 @@ const InputBox = (({ onSend }) => { const handleSendTemplate = (fromTemplate) => { console.log(fromTemplate, 'fromTemplate'); if (typeof onSend === 'function') { - const _conversation = {...cloneDeep(currentConversation), }; + const _conversation = { ...cloneDeep(currentConversation) }; const msgObj = { type: 'whatsappTemplate', to: currentConversation.whatsapp_phone_number, @@ -45,22 +45,24 @@ const InputBox = (({ onSend }) => { name: fromTemplate.name, language: { code: fromTemplate.language }, ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0 - ? { components: [ - { - 'type': 'body', - 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })) - // [ - // { - // 'type': 'text', - // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) , - // }, - // { // debug: - // 'type': 'text', - // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) , - // }, - // ], - }, - ], } + ? { + components: [ + { + 'type': 'body', + 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })), + // [ + // { + // 'type': 'text', + // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) , + // }, + // { // debug: + // 'type': 'text', + // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) , + // }, + // ], + }, + ], + } : {}), }, template_origin: fromTemplate, @@ -84,13 +86,19 @@ const InputBox = (({ onSend }) => { itemLayout='horizontal' dataSource={templates} renderItem={(item, index) => ( - handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={}> - Send - , - ]}> - + + + <>{item.components.header?.[0]?.text || item.name} + + + } + description={item.components.body?.[0]?.text} + /> )} /> @@ -99,12 +107,13 @@ const InputBox = (({ onSend }) => { trigger='click' open={openTemplates} onOpenChange={handleOpenChange}> - {/* */}
); -}); +}; export default InputBox; diff --git a/tailwind.config.js b/tailwind.config.js index 19b431b..acc44fb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,15 +1,20 @@ /** @type {import('tailwindcss').Config} */ +import colors from 'tailwindcss/colors' + export default { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: 'media', theme: { colors: { - 'whatsapp': '#25D366', - 'whatsapp-dark': '#075E54', - 'whatsapp-second': '#128c7e', - 'whatsapp-gossip': '#dcf8c6', - 'whatsapp-bg': '#ece5dd', - 'whatsappme': '#ccd5ae', + ...colors, + 'whatsapp': { + DEFAULT: '#25D366', + dark: '#075E54', + second: '#128c7e', + gossip: '#dcf8c6', + bg: '#ece5dd', + me: '#ccd5ae', + }, }, extend: { // gridTemplateColumns: { @@ -19,6 +24,7 @@ export default { }, plugins: [], corePlugins: { - preflight: false + preflight: false, + divideColor: true, } };