Skip to content

Commit

Permalink
feat: Inbox list API integration (#8825)
Browse files Browse the repository at this point in the history 
* feat: Inbox view

* feat: Bind real values

* chore: code cleanup

* feat: add observer

* fix: Inbox icon

* chore: more code cleanup

* chore: Replace conversation id

* chore: Minor fix

* chore: Hide from side bar

* chore: Fix eslint

* chore: Minor fix

* fix: dark mode color

* chore: Minor fix

* feat: Add description for each notification types

* chore: remove commented code

* Update InboxList.vue

* Update InboxView.vue

* chore: fix specs

* fix: specs

* Update InboxView.vue

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
  • Loading branch information
@muhsin-k @iamsivin
3 people committed Feb 1, 2024
1 parent b9c62b3 commit b7a7e5a
Show file tree
Hide file tree
Showing 27 changed files with 541 additions and 210 deletions.
2 changes: 1 addition & 1 deletion app/javascript/dashboard/components/ChatList.vue
View file
@@ -1,6 +1,6 @@
<template>
<div
class="conversations-list-wrap flex-basis-clamp flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
:class="{
hide: !showConversationList,
'list--full-width': isOnExpandedLayout,
Expand Down
3 changes: 0 additions & 3 deletions app/javascript/dashboard/i18n/locale/en/generalSettings.json
View file
Expand Up @@ -90,9 +90,6 @@
"conversation_mention": "Mention"
}
},
"INBOX_PAGE": {
"HEADER": "Inbox"
},
"NETWORK": {
"NOTIFICATION": {
"OFFLINE": "Offline"
Expand Down
17 changes: 17 additions & 0 deletions app/javascript/dashboard/i18n/locale/en/inbox.json
View file
@@ -0,0 +1,17 @@
{
"INBOX": {
"LIST": {
"TITLE": "Inbox",
"LOADING": "Fetching notifications",
"EOF": "All notifications loaded 🎉",
"404": "There are no active notifications in this group."
},
"TYPES": {
"CONVERSATION_MENTION": "You have been mentioned in a conversation",
"CONVERSATION_CREATION": "New conversation created",
"CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
"ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
"PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
}
}
}
2 changes: 2 additions & 0 deletions app/javascript/dashboard/i18n/locale/en/index.js
View file
Expand Up @@ -29,6 +29,7 @@ import settings from './settings.json';
import signup from './signup.json';
import teamsSettings from './teamsSettings.json';
import whatsappTemplates from './whatsappTemplates.json';
import inbox from './inbox.json';

export default {
...advancedFilters,
Expand Down Expand Up @@ -62,4 +63,5 @@ export default {
...signup,
...teamsSettings,
...whatsappTemplates,
...inbox,
};
1 change: 1 addition & 0 deletions app/javascript/dashboard/i18n/locale/en/settings.json
View file
Expand Up @@ -193,6 +193,7 @@
"CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
"SWITCH": "Switch",
"CONVERSATIONS": "Conversations",
"INBOX": "Inbox",
"ALL_CONVERSATIONS": "All Conversations",
"MENTIONED_CONVERSATIONS": "Mentions",
"PARTICIPATING_CONVERSATIONS": "Participating",
Expand Down
80 changes: 69 additions & 11 deletions app/javascript/dashboard/mixins/specs/time.spec.js
View file
Expand Up @@ -52,19 +52,77 @@ describe('#dateFormat', () => {
});

describe('#shortTimestamp', () => {
it('returns correct value', () => {
// Test cases when withAgo is false or not provided
it('returns correct value without ago', () => {
expect(TimeMixin.methods.shortTimestamp('less than a minute ago')).toEqual(
'now'
);
expect(TimeMixin.methods.shortTimestamp(' minute ago')).toEqual('m');
expect(TimeMixin.methods.shortTimestamp(' minutes ago')).toEqual('m');
expect(TimeMixin.methods.shortTimestamp(' hour ago')).toEqual('h');
expect(TimeMixin.methods.shortTimestamp(' hours ago')).toEqual('h');
expect(TimeMixin.methods.shortTimestamp(' day ago')).toEqual('d');
expect(TimeMixin.methods.shortTimestamp(' days ago')).toEqual('d');
expect(TimeMixin.methods.shortTimestamp(' month ago')).toEqual('mo');
expect(TimeMixin.methods.shortTimestamp(' months ago')).toEqual('mo');
expect(TimeMixin.methods.shortTimestamp(' year ago')).toEqual('y');
expect(TimeMixin.methods.shortTimestamp(' years ago')).toEqual('y');
expect(TimeMixin.methods.shortTimestamp('1 minute ago')).toEqual('1m');
expect(TimeMixin.methods.shortTimestamp('12 minutes ago')).toEqual('12m');
expect(TimeMixin.methods.shortTimestamp('a minute ago')).toEqual('1m');
expect(TimeMixin.methods.shortTimestamp('an hour ago')).toEqual('1h');
expect(TimeMixin.methods.shortTimestamp('1 hour ago')).toEqual('1h');
expect(TimeMixin.methods.shortTimestamp('2 hours ago')).toEqual('2h');
expect(TimeMixin.methods.shortTimestamp('1 day ago')).toEqual('1d');
expect(TimeMixin.methods.shortTimestamp('a day ago')).toEqual('1d');
expect(TimeMixin.methods.shortTimestamp('3 days ago')).toEqual('3d');
expect(TimeMixin.methods.shortTimestamp('a month ago')).toEqual('1mo');
expect(TimeMixin.methods.shortTimestamp('1 month ago')).toEqual('1mo');
expect(TimeMixin.methods.shortTimestamp('2 months ago')).toEqual('2mo');
expect(TimeMixin.methods.shortTimestamp('a year ago')).toEqual('1y');
expect(TimeMixin.methods.shortTimestamp('1 year ago')).toEqual('1y');
expect(TimeMixin.methods.shortTimestamp('4 years ago')).toEqual('4y');
});

// Test cases when withAgo is true
it('returns correct value with ago', () => {
expect(
TimeMixin.methods.shortTimestamp('less than a minute ago', true)
).toEqual('now');
expect(TimeMixin.methods.shortTimestamp('1 minute ago', true)).toEqual(
'1m ago'
);
expect(TimeMixin.methods.shortTimestamp('12 minutes ago', true)).toEqual(
'12m ago'
);
expect(TimeMixin.methods.shortTimestamp('a minute ago', true)).toEqual(
'1m ago'
);
expect(TimeMixin.methods.shortTimestamp('an hour ago', true)).toEqual(
'1h ago'
);
expect(TimeMixin.methods.shortTimestamp('1 hour ago', true)).toEqual(
'1h ago'
);
expect(TimeMixin.methods.shortTimestamp('2 hours ago', true)).toEqual(
'2h ago'
);
expect(TimeMixin.methods.shortTimestamp('1 day ago', true)).toEqual(
'1d ago'
);
expect(TimeMixin.methods.shortTimestamp('a day ago', true)).toEqual(
'1d ago'
);
expect(TimeMixin.methods.shortTimestamp('3 days ago', true)).toEqual(
'3d ago'
);
expect(TimeMixin.methods.shortTimestamp('a month ago', true)).toEqual(
'1mo ago'
);
expect(TimeMixin.methods.shortTimestamp('1 month ago', true)).toEqual(
'1mo ago'
);
expect(TimeMixin.methods.shortTimestamp('2 months ago', true)).toEqual(
'2mo ago'
);
expect(TimeMixin.methods.shortTimestamp('a year ago', true)).toEqual(
'1y ago'
);
expect(TimeMixin.methods.shortTimestamp('1 year ago', true)).toEqual(
'1y ago'
);
expect(TimeMixin.methods.shortTimestamp('4 years ago', true)).toEqual(
'4y ago'
);
});
});
45 changes: 28 additions & 17 deletions app/javascript/dashboard/mixins/time.js
View file
Expand Up @@ -28,25 +28,36 @@ export default {
const unixTime = fromUnixTime(time);
return format(unixTime, dateFormat);
},
shortTimestamp(time) {
shortTimestamp(time, withAgo = false) {
// This function takes a time string and converts it to a short time string
// with the following format: 1m, 1h, 1d, 1mo, 1y
// The function also takes an optional boolean parameter withAgo
// which will add the word "ago" to the end of the time string
const suffix = withAgo ? ' ago' : '';
const timeMappings = {
'less than a minute ago': 'now',
'a minute ago': `1m${suffix}`,
'an hour ago': `1h${suffix}`,
'a day ago': `1d${suffix}`,
'a month ago': `1mo${suffix}`,
'a year ago': `1y${suffix}`,
};
// Check if the time string is one of the specific cases
if (timeMappings[time]) {
return timeMappings[time];
}
const convertToShortTime = time
.replace(/about|over|almost|/g, '')
.replace('less than a minute ago', 'now')
.replace(' minute ago', 'm')
.replace(' minutes ago', 'm')
.replace('a minute ago', 'm')
.replace('an hour ago', 'h')
.replace(' hour ago', 'h')
.replace(' hours ago', 'h')
.replace(' day ago', 'd')
.replace('a day ago', 'd')
.replace(' days ago', 'd')
.replace('a month ago', 'mo')
.replace(' months ago', 'mo')
.replace(' month ago', 'mo')
.replace('a year ago', 'y')
.replace(' year ago', 'y')
.replace(' years ago', 'y');
.replace(' minute ago', `m${suffix}`)
.replace(' minutes ago', `m${suffix}`)
.replace(' hour ago', `h${suffix}`)
.replace(' hours ago', `h${suffix}`)
.replace(' day ago', `d${suffix}`)
.replace(' days ago', `d${suffix}`)
.replace(' month ago', `mo${suffix}`)
.replace(' months ago', `mo${suffix}`)
.replace(' year ago', `y${suffix}`)
.replace(' years ago', `y${suffix}`);
return convertToShortTime;
},
},
Expand Down
8 changes: 8 additions & 0 deletions app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
View file
@@ -1,9 +1,17 @@
/* eslint arrow-body-style: 0 */
import { frontendURL } from '../../../helper/URLHelper';
const ConversationView = () => import('./ConversationView');
const InboxView = () => import('../inbox/InboxView.vue');

export default {
routes: [
{
path: frontendURL('accounts/:accountId/inbox'),
name: 'inbox',
roles: ['administrator', 'agent'],
component: InboxView,
props: () => {},
},
{
path: frontendURL('accounts/:accountId/dashboard'),
name: 'home',
Expand Down
2 changes: 0 additions & 2 deletions app/javascript/dashboard/routes/dashboard/dashboard.routes.js
View file
Expand Up @@ -5,7 +5,6 @@ import { routes as contactRoutes } from './contacts/routes';
import { routes as notificationRoutes } from './notifications/routes';
import { frontendURL } from '../../helper/URLHelper';
import helpcenterRoutes from './helpcenter/helpcenter.routes';
import { routes as inboxRoutes } from './inbox/routes';

const AppContainer = () => import('./Dashboard.vue');
const Suspended = () => import('./suspended/Index.vue');
Expand All @@ -22,7 +21,6 @@ export default {
...contactRoutes,
...searchRoutes,
...notificationRoutes,
...inboxRoutes,
],
},
{
Expand Down
70 changes: 0 additions & 70 deletions app/javascript/dashboard/routes/dashboard/inbox/InboxCard.vue
View file

This file was deleted.

0 comments on commit b7a7e5a

Please sign in to comment.