Merge branch 'feat/contacts-redesign' into feat/compose-new-conversation
This commit is contained in:
Sivin Varghese
@@ -35,13 +35,13 @@ const onClickViewDetails = async () => {
|
||||
<Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">{{
|
||||
name
|
||||
}}</span>
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ name }}
|
||||
</span>
|
||||
<template v-if="additionalAttributes?.companyName">
|
||||
<span class="text-sm text-n-slate-11">{{
|
||||
t('CONTACTS_LAYOUT.CARD.OF')
|
||||
}}</span>
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('CONTACTS_LAYOUT.CARD.OF') }}
|
||||
</span>
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ additionalAttributes.companyName }}
|
||||
</span>
|
||||
@@ -50,9 +50,9 @@ const onClickViewDetails = async () => {
|
||||
<div class="flex items-center gap-3">
|
||||
<span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
|
||||
<div v-if="email" class="w-px h-3 bg-n-slate-6" />
|
||||
<span v-if="phoneNumber" class="text-sm text-n-slate-11">{{
|
||||
phoneNumber
|
||||
}}</span>
|
||||
<span v-if="phoneNumber" class="text-sm text-n-slate-11">
|
||||
{{ phoneNumber }}
|
||||
</span>
|
||||
<div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
|
||||
<Button
|
||||
:label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
|
||||
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import ContactsCard from '../ContactsCard.vue';
|
||||
import contacts from './fixtures';
|
||||
|
||||
const expandedCardId = ref(null);
|
||||
|
||||
const toggleExpanded = id => {
|
||||
expandedCardId.value = expandedCardId.value === id ? null : id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Contacts/ContactsCard"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default with expandable function">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="contacts[0]"
|
||||
:is-expanded="expandedCardId === contacts[0].id"
|
||||
@toggle="toggleExpanded(contacts[0].id)"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="With Company Name and without phone number">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="{ ...contacts[1], phoneNumber: '' }"
|
||||
:is-expanded="false"
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Expanded State">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="contacts[2]"
|
||||
is-expanded
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Without Email and Phone">
|
||||
<div class="flex flex-col p-4">
|
||||
<ContactsCard
|
||||
v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
|
||||
:is-expanded="false"
|
||||
@toggle="() => {}"
|
||||
@update-contact="() => {}"
|
||||
@show-contact="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,149 @@
|
||||
export default [
|
||||
{
|
||||
additionalAttributes: {
|
||||
socialProfiles: {},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'johndoe@chatwoot.com',
|
||||
id: 370,
|
||||
name: 'John Doe',
|
||||
phoneNumber: '+918634322418',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1731608270,
|
||||
createdAt: 1731586271,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'kerala',
|
||||
country: 'India',
|
||||
description: 'Curious about the web. ',
|
||||
companyName: 'Chatwoot',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: 'abozler',
|
||||
twitter: 'ozler',
|
||||
facebook: 'abozler',
|
||||
linkedin: 'abozler',
|
||||
instagram: 'ozler',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ozler@chatwoot.com',
|
||||
id: 29,
|
||||
name: 'Abraham Ozlers',
|
||||
phoneNumber: '+246232222222',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
|
||||
customAttributes: {
|
||||
dateContact: '2024-02-01T00:00:00.000Z',
|
||||
linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
|
||||
listContact: 'Not spam',
|
||||
numberContact: '12',
|
||||
},
|
||||
lastActivityAt: 1712127410,
|
||||
createdAt: 1712127389,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: 'Kerala',
|
||||
country: 'India',
|
||||
description:
|
||||
"I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
|
||||
companyName: 'Chatwoot',
|
||||
countryCode: 'IN',
|
||||
socialProfiles: {
|
||||
github: 'cmathersonj',
|
||||
twitter: 'cmather',
|
||||
facebook: 'cmathersonj',
|
||||
linkedin: 'cmathersonj',
|
||||
instagram: 'cmathersonjs',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'cmathersonj@va.test',
|
||||
id: 22,
|
||||
name: 'Candice Matherson',
|
||||
phoneNumber: '+917474774742',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
|
||||
customAttributes: {
|
||||
dateContact: '2024-11-12T03:23:06.963Z',
|
||||
linkContact: 'https://sd.sd',
|
||||
textContact: 'hey',
|
||||
numberContact: '12',
|
||||
checkboxContact: true,
|
||||
},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: '',
|
||||
country: '',
|
||||
description: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
instagram: '',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ofolkardi@taobao.test',
|
||||
id: 21,
|
||||
name: 'Ophelia Folkard',
|
||||
phoneNumber: '',
|
||||
identifier: null,
|
||||
thumbnail:
|
||||
'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
socialProfiles: {},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'wcasteloth@exblog.jp',
|
||||
id: 20,
|
||||
name: 'Willy Castelot',
|
||||
phoneNumber: '+919384',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123233,
|
||||
createdAt: 1712123233,
|
||||
},
|
||||
{
|
||||
additionalAttributes: {
|
||||
city: '',
|
||||
country: '',
|
||||
description: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
instagram: '',
|
||||
},
|
||||
},
|
||||
availabilityStatus: null,
|
||||
email: 'ederingtong@printfriendly.test',
|
||||
id: 19,
|
||||
name: 'Elisabeth Derington',
|
||||
phoneNumber: '',
|
||||
identifier: null,
|
||||
thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
|
||||
customAttributes: {},
|
||||
lastActivityAt: 1712123232,
|
||||
createdAt: 1712123232,
|
||||
},
|
||||
];
|
||||
@@ -33,11 +33,11 @@ const FORM_CONFIG = {
|
||||
FIRST_NAME: { field: 'firstName' },
|
||||
LAST_NAME: { field: 'lastName' },
|
||||
EMAIL_ADDRESS: { field: 'email' },
|
||||
PHONE_NUMBER: { field: 'phone_number' },
|
||||
CITY: { field: 'additional_attributes.city' },
|
||||
COUNTRY: { field: 'additional_attributes.country' },
|
||||
BIO: { field: 'additional_attributes.description' },
|
||||
COMPANY_NAME: { field: 'additional_attributes.company_name' },
|
||||
PHONE_NUMBER: { field: 'phoneNumber' },
|
||||
CITY: { field: 'additionalAttributes.city' },
|
||||
COUNTRY: { field: 'additionalAttributes.country' },
|
||||
BIO: { field: 'additionalAttributes.description' },
|
||||
COMPANY_NAME: { field: 'additionalAttributes.companyName' },
|
||||
};
|
||||
|
||||
const SOCIAL_CONFIG = {
|
||||
@@ -54,14 +54,14 @@ const defaultState = {
|
||||
email: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
phone_number: '',
|
||||
additional_attributes: {
|
||||
phoneNumber: '',
|
||||
additionalAttributes: {
|
||||
description: '',
|
||||
company_name: '',
|
||||
country_code: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
country: '',
|
||||
city: '',
|
||||
social_profiles: {
|
||||
socialProfiles: {
|
||||
facebook: '',
|
||||
github: '',
|
||||
instagram: '',
|
||||
@@ -75,44 +75,48 @@ const state = reactive({ ...defaultState });
|
||||
|
||||
const validationRules = {
|
||||
firstName: { required, minLength: minLength(2) },
|
||||
email: { required, email },
|
||||
email: { email },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const updateState = () => {
|
||||
if (props.isNewContact) return; // Added to prevent state update for new contact form
|
||||
const prepareStateBasedOnProps = () => {
|
||||
if (props.isNewContact) {
|
||||
return; // Added to prevent state update for new contact form
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
name = '',
|
||||
email: emailAddress,
|
||||
phoneNumber,
|
||||
additionalAttributes = {},
|
||||
} = props.contactData || {};
|
||||
|
||||
const [firstName = '', lastName = ''] = name.split(' ');
|
||||
const {
|
||||
description,
|
||||
companyName,
|
||||
countryCode,
|
||||
country,
|
||||
city,
|
||||
socialProfiles = {},
|
||||
} = additionalAttributes || {};
|
||||
|
||||
Object.assign(state, {
|
||||
id,
|
||||
name,
|
||||
firstName,
|
||||
lastName,
|
||||
email: emailAddress,
|
||||
phoneNumber,
|
||||
additionalAttributes: {
|
||||
description,
|
||||
companyName,
|
||||
countryCode,
|
||||
country,
|
||||
city,
|
||||
socialProfiles = {},
|
||||
} = {},
|
||||
} = props.contactData || {};
|
||||
|
||||
const [firstName = '', lastName = ''] = name.split(' ');
|
||||
|
||||
Object.assign(state, {
|
||||
id,
|
||||
name,
|
||||
firstName,
|
||||
lastName,
|
||||
email: emailAddress,
|
||||
phone_number: phoneNumber,
|
||||
additional_attributes: {
|
||||
description,
|
||||
company_name: companyName,
|
||||
country_code: countryCode,
|
||||
country,
|
||||
city,
|
||||
social_profiles: socialProfiles,
|
||||
socialProfiles,
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -147,38 +151,39 @@ const getValidationKey = key => {
|
||||
return FORM_CONFIG[key]?.field;
|
||||
};
|
||||
|
||||
// Creates a computed property for form field binding based on FORM_CONFIG
|
||||
// Creates a computed property for two-way form field binding
|
||||
const getFormBinding = key => {
|
||||
// Get field path from config
|
||||
// Example: FORM_CONFIG.name = { field: 'contact.name' }
|
||||
const field = FORM_CONFIG[key]?.field;
|
||||
if (!field) return null;
|
||||
|
||||
return computed({
|
||||
// Get value from state
|
||||
// Example 1 (nested): field = 'contact.name' returns state.contact.name = "John Doe"
|
||||
// Example 2 (root): field = 'email' returns state.email = "john@example.com"
|
||||
get: () => {
|
||||
// Handle firstName/lastName fields
|
||||
if (field === 'firstName' || field === 'lastName') {
|
||||
return state[field]?.toString() || '';
|
||||
}
|
||||
|
||||
// Handle nested vs non-nested fields
|
||||
const [base, nested] = field.split('.');
|
||||
// Example: 'email' → state.email
|
||||
// Example: 'additionalAttributes.city' → state.additionalAttributes.city
|
||||
return (nested ? state[base][nested] : state[base])?.toString() || '';
|
||||
},
|
||||
|
||||
// Set value in state and emit update
|
||||
// Example 1 (nested): field = 'contact.name', value = "Jane Doe" → state.contact.name = "Jane Doe"
|
||||
// Example 2 (root): field = 'email', value = "jane@example.com" → state.email = "jane@example.com"
|
||||
set: async value => {
|
||||
// Handle name fields specially to maintain the combined 'name' field
|
||||
if (field === 'firstName' || field === 'lastName') {
|
||||
state[field] = value;
|
||||
// Combine first and last name into the name field
|
||||
// Example: firstName="John", lastName="Doe" → name="John Doe"
|
||||
state.name = `${state.firstName} ${state.lastName}`.trim();
|
||||
} else {
|
||||
// Handle nested vs non-nested fields
|
||||
const [base, nested] = field.split('.');
|
||||
if (nested) {
|
||||
// Example: additionalAttributes.city = "New York"
|
||||
state[base][nested] = value;
|
||||
} else {
|
||||
// Example: email = "test@example.com"
|
||||
state[base] = value;
|
||||
}
|
||||
}
|
||||
@@ -192,7 +197,16 @@ const getFormBinding = key => {
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => props.contactData, updateState, { immediate: true, deep: true });
|
||||
const getMessageType = key => {
|
||||
return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
|
||||
? 'error'
|
||||
: 'info';
|
||||
};
|
||||
|
||||
watch(() => props.contactData, prepareStateBasedOnProps, {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
});
|
||||
|
||||
// Expose state to parent component for avatar upload
|
||||
defineExpose({
|
||||
@@ -210,7 +224,7 @@ defineExpose({
|
||||
<template v-for="item in editDetailsForm" :key="item.key">
|
||||
<ComboBox
|
||||
v-if="item.key === 'COUNTRY'"
|
||||
v-model="state.additional_attributes.country"
|
||||
v-model="state.additionalAttributes.country"
|
||||
:options="countryOptions"
|
||||
:placeholder="item.placeholder"
|
||||
class="[&>div>button]:h-8"
|
||||
@@ -232,12 +246,7 @@ defineExpose({
|
||||
v-else
|
||||
v-model="getFormBinding(item.key).value"
|
||||
:placeholder="item.placeholder"
|
||||
:message-type="
|
||||
isValidationField(item.key) &&
|
||||
v$[getValidationKey(item.key)]?.$error
|
||||
? 'error'
|
||||
: 'info'
|
||||
"
|
||||
:message-type="getMessageType(item.key)"
|
||||
:custom-input-class="`h-8 !pt-1 !pb-1 ${
|
||||
!isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
|
||||
}`"
|
||||
@@ -274,9 +283,7 @@ defineExpose({
|
||||
/>
|
||||
<input
|
||||
v-model="
|
||||
state.additional_attributes.social_profiles[
|
||||
item.key.toLowerCase()
|
||||
]
|
||||
state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
|
||||
"
|
||||
class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
|
||||
:placeholder="item.placeholder"
|
||||
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
import ContactsForm from '../ContactsForm.vue';
|
||||
import contactData from './fixtures';
|
||||
|
||||
const handleUpdate = updatedData => {
|
||||
console.log('Form updated:', updatedData);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Components/Contacts/ContactsForm"
|
||||
:layout="{ type: 'grid', width: '600px' }"
|
||||
>
|
||||
<Variant title="Default without border">
|
||||
<div class="p-6 border rounded-lg border-n-strong">
|
||||
<ContactsForm :contact-data="contactData" @update="handleUpdate" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Details View with border">
|
||||
<div class="p-6 border rounded-lg border-n-strong">
|
||||
<ContactsForm
|
||||
:contact-data="contactData"
|
||||
is-details-view
|
||||
@update="handleUpdate"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Minimal Data">
|
||||
<div class="p-6 border rounded-lg border-n-strong">
|
||||
<ContactsForm
|
||||
:contact-data="{
|
||||
id: 21,
|
||||
name: 'Ophelia Folkard',
|
||||
email: 'ofolkardi@taobao.test',
|
||||
phoneNumber: '',
|
||||
additionalAttributes: {
|
||||
city: '',
|
||||
country: '',
|
||||
description: '',
|
||||
companyName: '',
|
||||
countryCode: '',
|
||||
socialProfiles: {
|
||||
github: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
instagram: '',
|
||||
},
|
||||
},
|
||||
}"
|
||||
@update="handleUpdate"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="With All Social Profiles">
|
||||
<div class="p-6 border rounded-lg border-n-strong">
|
||||
<ContactsForm
|
||||
:contact-data="{
|
||||
...contactData,
|
||||
additionalAttributes: {
|
||||
...contactData.additionalAttributes,
|
||||
socialProfiles: {
|
||||
github: 'cmathersonj',
|
||||
twitter: 'cmather',
|
||||
facebook: 'cmathersonj',
|
||||
linkedin: 'cmathersonj',
|
||||
instagram: 'cmathersonjs',
|
||||
},
|
||||
},
|
||||
}"
|
||||
@update="handleUpdate"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
export default {
|
||||
id: 370,
|
||||
name: 'John Doe',
|
||||
email: 'johndoe@chatwoot.com',
|
||||
phoneNumber: '+918634322418',
|
||||
additionalAttributes: {
|
||||
city: 'Kerala',
|
||||
country: 'India',
|
||||
description: 'Curious about the web.',
|
||||
companyName: 'Chatwoot',
|
||||
countryCode: 'IN',
|
||||
socialProfiles: {
|
||||
github: 'johndoe',
|
||||
twitter: 'johndoe',
|
||||
facebook: 'johndoe',
|
||||
linkedin: 'johndoe',
|
||||
instagram: 'johndoe',
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -37,8 +37,6 @@ const ROUTE_MAPPINGS = {
|
||||
};
|
||||
|
||||
const onClickViewDetails = async id => {
|
||||
await store.dispatch('contacts/show', { id });
|
||||
|
||||
const dynamicRouteName =
|
||||
ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
import { useChannelIcon } from './provider';
|
||||
import Icon from 'next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
inbox: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const channelIcon = useChannelIcon(props.inbox);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Icon :icon="channelIcon" />
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
export function useChannelIcon(inbox) {
|
||||
const channelTypeIconMap = {
|
||||
'Channel::Api': 'i-ri-cloudy-fill',
|
||||
'Channel::Email': 'i-ri-mail-fill',
|
||||
'Channel::FacebookPage': 'i-ri-messenger-fill',
|
||||
'Channel::Line': 'i-ri-line-fill',
|
||||
'Channel::Sms': 'i-ri-chat-1-fill',
|
||||
'Channel::Telegram': 'i-ri-telegram-fill',
|
||||
'Channel::TwilioSms': 'i-ri-chat-1-fill',
|
||||
'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
|
||||
'Channel::WebWidget': 'i-ri-global-fill',
|
||||
'Channel::Whatsapp': 'i-ri-whatsapp-fill',
|
||||
};
|
||||
|
||||
const providerIconMap = {
|
||||
microsoft: 'i-ri-microsoft-fill',
|
||||
google: 'i-ri-google-fill',
|
||||
};
|
||||
|
||||
const channelIcon = computed(() => {
|
||||
const type = inbox.channel_type;
|
||||
let icon = channelTypeIconMap[type];
|
||||
|
||||
if (type === 'Channel::Email' && inbox.provider) {
|
||||
if (Object.keys(providerIconMap).includes(inbox.provider)) {
|
||||
icon = providerIconMap[inbox.provider];
|
||||
}
|
||||
}
|
||||
|
||||
return icon ?? 'i-ri-global-fill';
|
||||
});
|
||||
|
||||
return channelIcon;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useChannelIcon } from '../provider';
|
||||
|
||||
describe('useChannelIcon', () => {
|
||||
it('returns correct icon for API channel', () => {
|
||||
const inbox = { channel_type: 'Channel::Api' };
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-cloudy-fill');
|
||||
});
|
||||
|
||||
it('returns correct icon for Facebook channel', () => {
|
||||
const inbox = { channel_type: 'Channel::FacebookPage' };
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-messenger-fill');
|
||||
});
|
||||
|
||||
it('returns correct icon for WhatsApp channel', () => {
|
||||
const inbox = { channel_type: 'Channel::Whatsapp' };
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-whatsapp-fill');
|
||||
});
|
||||
|
||||
describe('Email channel', () => {
|
||||
it('returns mail icon for generic email channel', () => {
|
||||
const inbox = { channel_type: 'Channel::Email' };
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-mail-fill');
|
||||
});
|
||||
|
||||
it('returns Microsoft icon for Microsoft email provider', () => {
|
||||
const inbox = {
|
||||
channel_type: 'Channel::Email',
|
||||
provider: 'microsoft',
|
||||
};
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-microsoft-fill');
|
||||
});
|
||||
|
||||
it('returns Google icon for Google email provider', () => {
|
||||
const inbox = {
|
||||
channel_type: 'Channel::Email',
|
||||
provider: 'google',
|
||||
};
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-google-fill');
|
||||
});
|
||||
});
|
||||
|
||||
it('returns default icon for unknown channel type', () => {
|
||||
const inbox = { channel_type: 'Channel::Unknown' };
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-global-fill');
|
||||
});
|
||||
|
||||
it('returns default icon when channel type is undefined', () => {
|
||||
const inbox = {};
|
||||
const { value: icon } = useChannelIcon(inbox);
|
||||
expect(icon).toBe('i-ri-global-fill');
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import Icon from 'next/icon/Icon.vue';
|
||||
import ChannelIcon from 'next/icon/ChannelIcon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
@@ -17,37 +18,6 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const channelTypeIconMap = {
|
||||
'Channel::Api': 'i-ri-cloudy-fill',
|
||||
'Channel::Email': 'i-ri-mail-fill',
|
||||
'Channel::FacebookPage': 'i-ri-messenger-fill',
|
||||
'Channel::Line': 'i-ri-line-fill',
|
||||
'Channel::Sms': 'i-ri-chat-1-fill',
|
||||
'Channel::Telegram': 'i-ri-telegram-fill',
|
||||
'Channel::TwilioSms': 'i-ri-chat-1-fill',
|
||||
'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
|
||||
'Channel::WebWidget': 'i-ri-global-fill',
|
||||
'Channel::Whatsapp': 'i-ri-whatsapp-fill',
|
||||
};
|
||||
|
||||
const providerIconMap = {
|
||||
microsoft: 'i-ri-microsoft-fill',
|
||||
google: 'i-ri-google-fill',
|
||||
};
|
||||
|
||||
const channelIcon = computed(() => {
|
||||
const type = props.inbox.channel_type;
|
||||
let icon = channelTypeIconMap[type];
|
||||
|
||||
if (type === 'Channel::Email' && props.inbox.provider) {
|
||||
if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
|
||||
icon = providerIconMap[props.inbox.provider];
|
||||
}
|
||||
}
|
||||
|
||||
return icon ?? 'i-ri-global-fill';
|
||||
});
|
||||
|
||||
const reauthorizationRequired = computed(() => {
|
||||
return props.inbox.reauthorization_required;
|
||||
});
|
||||
@@ -58,7 +28,7 @@ const reauthorizationRequired = computed(() => {
|
||||
class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
|
||||
:class="{ 'bg-n-solid-blue': active }"
|
||||
>
|
||||
<Icon :icon="channelIcon" class="size-3" />
|
||||
<ChannelIcon :inbox="inbox" class="size-3" />
|
||||
</span>
|
||||
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user