LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Fix issues with contact routes in old navigation sidebar (#10547)

Browse Source
This commit is contained in:
Sivin Varghese
2024-12-06 12:16:57 +05:30
committed by GitHub
parent 3fd585f40b
commit afb3e3e649
9 changed files with 149 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
View File

@@ -20,7 +20,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['goToContactsList']);
const emit = defineEmits(['goToContactsList', 'resetTab']);
const { t } = useI18n();
const store = useStore();
@@ -74,6 +74,9 @@ const onContactSearch = debounce(
);
const resetState = () => {
if (state.primaryContactId === null) {
emit('resetTab');
}
state.primaryContactId = null;
searchResults.value = [];
isSearching.value = false;

31
app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
View File

@@ -130,15 +130,28 @@ const handleAvatarDelete = async () => {
<h3 class="text-base font-medium text-n-slate-12">
{{ selectedContact?.name }}
</h3>
<span class="text-sm text-n-slate-11">
{{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
•
{{
$t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
date: lastActivityAt,
})
}}
</span>
<div class="flex flex-col gap-1.5">
<span
v-if="selectedContact?.identifier"
class="inline-flex items-center gap-1 text-sm text-n-slate-11"
>
<span class="i-ph-user-gear text-n-slate-10 size-4" />
{{ selectedContact?.identifier }}
</span>
<span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
<span
v-if="selectedContact?.identifier"
class="i-ph-activity text-n-slate-10 size-4"
/>
{{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
•
{{
$t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
date: lastActivityAt,
})
}}
</span>
</div>
</div>
<ContactLabels :contact-id="selectedContact?.id" />
</div>

9
app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
View File

@@ -1,12 +1,8 @@
import { INBOX_TYPES } from 'dashboard/helper/inbox';
import { getInboxIconByType } from 'dashboard/helper/inbox';
import camelcaseKeys from 'camelcase-keys';
import ContactAPI from 'dashboard/api/contacts';
export const convertChannelTypeToLabel = channelType => {
const [, type] = channelType.split('::');
return type ? type.charAt(0).toUpperCase() + type.slice(1) : channelType;
};
export const generateLabelForContactableInboxesList = ({
name,
email,
@@ -22,7 +18,7 @@ export const generateLabelForContactableInboxesList = ({
) {
return `${name} (${phoneNumber})`;
}
return `${name} (${convertChannelTypeToLabel(channelType)})`;
return name;
};
export const buildContactableInboxesList = contactInboxes => {
@@ -30,6 +26,7 @@ export const buildContactableInboxesList = contactInboxes => {
return contactInboxes.map(
({ name, id, email, channelType, phoneNumber, ...rest }) => ({
id,
icon: getInboxIconByType(channelType, phoneNumber, 'line'),
label: generateLabelForContactableInboxesList({
name,
email,

16
app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
View File

@@ -6,19 +6,6 @@ import * as helpers from '../composeConversationHelper';
vi.mock('dashboard/api/contacts');
describe('composeConversationHelper', () => {
describe('convertChannelTypeToLabel', () => {
it('converts channel type with namespace to capitalized label', () => {
expect(helpers.convertChannelTypeToLabel('Channel::Email')).toBe('Email');
expect(helpers.convertChannelTypeToLabel('Channel::Whatsapp')).toBe(
'Whatsapp'
);
});
it('returns original value if no namespace found', () => {
expect(helpers.convertChannelTypeToLabel('email')).toBe('email');
});
});
describe('generateLabelForContactableInboxesList', () => {
const contact = {
name: 'John Doe',
@@ -59,7 +46,7 @@ describe('composeConversationHelper', () => {
...contact,
channelType: 'Channel::Api',
})
).toBe('John Doe (Api)');
).toBe('John Doe');
});
});
@@ -83,6 +70,7 @@ describe('composeConversationHelper', () => {
const result = helpers.buildContactableInboxesList(inboxes);
expect(result[0]).toMatchObject({
id: 1,
icon: 'i-ri-mail-line',
label: 'Email Inbox (support@example.com)',
action: 'inbox',
value: 1,

2
app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
View File

@@ -15,7 +15,7 @@ const contacts = accountId => ({
icon: 'contact-card-group',
label: 'ALL_CONTACTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/contacts`),
toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
toStateName: 'contacts_dashboard_index',
},
],

10
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
View File

@@ -134,7 +134,7 @@ export default {
icon: 'number-symbol',
label: 'TAGGED_WITH',
hasSubMenu: true,
key: 'label',
key: 'labels',
newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
newLinkTag: 'NEW_LABEL',
toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
@@ -147,7 +147,7 @@ export default {
color: label.color,
truncateLabel: true,
toState: frontendURL(
`accounts/${this.accountId}/labels/${label.title}/contacts`
`accounts/${this.accountId}/contacts/labels/${label.title}`
),
})),
};
@@ -194,7 +194,7 @@ export default {
icon: 'folder',
label: 'CUSTOM_VIEWS_SEGMENTS',
hasSubMenu: true,
key: 'custom_view',
key: 'segments',
children: this.customViews
.filter(view => view.filter_type === 'contact')
.map(view => ({
@@ -202,7 +202,7 @@ export default {
label: view.name,
truncateLabel: true,
toState: frontendURL(
`accounts/${this.accountId}/contacts/custom_view/${view.id}`
`accounts/${this.accountId}/contacts/segments/${view.id}`
),
})),
};
@@ -247,7 +247,7 @@ export default {
<transition-group
name="menu-list"
tag="ul"
class="pt-2 reset-base list-none"
class="pt-2 list-none reset-base"
>
<SecondaryNavItem
v-for="menuItem in accessibleMenuItems"

27
app/javascript/dashboard/helper/inbox.js
View File

@@ -12,17 +12,17 @@ export const INBOX_TYPES = {
};
const INBOX_ICON_MAP = {
[INBOX_TYPES.WEB]: 'i-ri-global-fill',
[INBOX_TYPES.FB]: 'i-ri-messenger-fill',
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
[INBOX_TYPES.API]: 'i-ri-cloudy-fill',
[INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
[INBOX_TYPES.LINE]: 'i-ri-line-fill',
[INBOX_TYPES.WEB]: 'i-ri-global',
[INBOX_TYPES.FB]: 'i-ri-messenger',
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x',
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp',
[INBOX_TYPES.API]: 'i-ri-cloudy',
[INBOX_TYPES.EMAIL]: 'i-ri-mail',
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram',
[INBOX_TYPES.LINE]: 'i-ri-line',
};
const DEFAULT_ICON = 'i-ri-chat-1-fill';
const DEFAULT_ICON = 'i-ri-chat-1';
export const getInboxSource = (type, phoneNumber, inbox) => {
switch (type) {
@@ -110,15 +110,16 @@ export const getInboxClassByType = (type, phoneNumber) => {
}
};
export const getInboxIconByType = (type, phoneNumber) => {
export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
// Special case for Twilio (whatsapp and sms)
if (type === INBOX_TYPES.TWILIO) {
return phoneNumber?.startsWith('whatsapp')
? 'i-ri-whatsapp-fill'
: 'i-ri-chat-1-fill';
? `i-ri-whatsapp-${variant}`
: `i-ri-chat-1-${variant}`;
}
return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
const baseIcon = INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
return `${baseIcon}-${variant}`;
};
export const getInboxWarningIconClass = (type, reauthorizationRequired) => {

152
app/javascript/dashboard/helper/specs/inbox.spec.js
View File

@@ -41,70 +41,112 @@ describe('#Inbox Helpers', () => {
});
describe('getInboxIconByType', () => {
it('returns correct icon for web widget', () => {
expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
describe('fill variant (default)', () => {
it('returns correct icon for web widget', () => {
expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
});
it('returns correct icon for Facebook', () => {
expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
});
it('returns correct icon for Twitter', () => {
expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
'i-ri-twitter-x-fill'
);
});
it('returns correct icon for WhatsApp', () => {
expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
'i-ri-whatsapp-fill'
);
});
it('returns correct icon for API', () => {
expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
});
it('returns correct icon for Email', () => {
expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
});
it('returns correct icon for Telegram', () => {
expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
'i-ri-telegram-fill'
);
});
it('returns correct icon for Line', () => {
expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
});
it('returns default icon for unknown type', () => {
expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
});
it('returns default icon for undefined type', () => {
expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
});
});
it('returns correct icon for Facebook', () => {
expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
});
describe('line variant', () => {
it('returns correct line icon for web widget', () => {
expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
'i-ri-global-line'
);
});
it('returns correct icon for Twitter', () => {
expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
'i-ri-twitter-x-fill'
);
it('returns correct line icon for Facebook', () => {
expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
'i-ri-messenger-line'
);
});
it('returns correct line icon for unknown type', () => {
expect(getInboxIconByType('UNKNOWN_TYPE', null, 'line')).toBe(
'i-ri-chat-1-line'
);
});
});
describe('Twilio cases', () => {
it('returns WhatsApp icon for Twilio WhatsApp number', () => {
expect(
getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
).toBe('i-ri-whatsapp-fill');
describe('fill variant', () => {
it('returns WhatsApp icon for Twilio WhatsApp number', () => {
expect(
getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
).toBe('i-ri-whatsapp-fill');
});
it('returns SMS icon for regular Twilio number', () => {
expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
'i-ri-chat-1-fill'
);
});
it('returns SMS icon when phone number is undefined', () => {
expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
'i-ri-chat-1-fill'
);
});
});
it('returns SMS icon for regular Twilio number', () => {
expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
'i-ri-chat-1-fill'
);
describe('line variant', () => {
it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
expect(
getInboxIconByType(
INBOX_TYPES.TWILIO,
'whatsapp:+1234567890',
'line'
)
).toBe('i-ri-whatsapp-line');
});
it('returns SMS line icon for regular Twilio number', () => {
expect(
getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890', 'line')
).toBe('i-ri-chat-1-line');
});
});
it('returns SMS icon when phone number is undefined', () => {
expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
'i-ri-chat-1-fill'
);
});
});
it('returns correct icon for WhatsApp', () => {
expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
'i-ri-whatsapp-fill'
);
});
it('returns correct icon for API', () => {
expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
});
it('returns correct icon for Email', () => {
expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
});
it('returns correct icon for Telegram', () => {
expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
'i-ri-telegram-fill'
);
});
it('returns correct icon for Line', () => {
expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
});
it('returns default icon for unknown type', () => {
expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
});
it('returns default icon for undefined type', () => {
expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
});
});

1
app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
View File

@@ -145,6 +145,7 @@ onMounted(() => {
ref="contactMergeRef"
:selected-contact="selectedContact"
@go-to-contacts-list="goToContactsList"
@reset-tab="handleTabChange(CONTACT_TABS_OPTIONS[0])"
/>
</template>
</template>