akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:chatwoot/chatwoot into chore/vuelidate-v2-migration

Browse Source
This commit is contained in:
Shivam Mishra
2024-07-22 15:04:26 +05:30
parent 9aeccf63c4 81d7c51a84
commit 2a2cd30c6b
42 changed files with 644 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gemfile.lock
+9 -8
View File
@@ -103,8 +103,8 @@ GEM
tzinfo (~> 2.0)
acts-as-taggable-on (9.0.1)
activerecord (>= 6.0, < 7.1)
addressable (2.8.4)
public_suffix (>= 2.0.2, < 6.0)
addressable (2.8.7)
public_suffix (>= 2.0.2, < 7.0)
administrate (0.20.1)
actionpack (>= 6.0, < 8.0)
actionview (>= 6.0, < 8.0)
@@ -171,7 +171,8 @@ GEM
commonmarker (0.23.10)
concurrent-ruby (1.3.3)
connection_pool (2.4.1)
crack (0.4.5)
crack (1.0.0)
bigdecimal
rexml
crass (1.0.6)
csv (3.3.0)
@@ -358,7 +359,7 @@ GEM
ruby2ruby (~> 2.4)
ruby_parser (~> 3.10)
hana (1.3.7)
hashdiff (1.0.1)
hashdiff (1.1.0)
hashie (5.0.0)
http (5.1.1)
addressable (~> 2.8)
@@ -550,7 +551,7 @@ GEM
method_source (~> 1.0)
pry-rails (0.3.9)
pry (>= 0.10.4)
public_suffix (5.0.1)
public_suffix (6.0.0)
puma (6.4.2)
nio4r (~> 2.0)
pundit (2.3.0)
@@ -633,8 +634,8 @@ GEM
retriable (3.1.2)
reverse_markdown (2.1.1)
nokogiri
rexml (3.2.8)
strscan (>= 3.0.9)
rexml (3.3.2)
strscan
rspec-core (3.13.0)
rspec-support (~> 3.13.0)
rspec-expectations (3.13.1)
@@ -809,7 +810,7 @@ GEM
web-push (3.0.1)
jwt (~> 2.0)
openssl (~> 3.0)
webmock (3.18.1)
webmock (3.23.1)
addressable (>= 2.8.0)
crack (>= 0.3.2)
hashdiff (>= 0.4.0, < 2.0.0)
app/javascript/dashboard/components/ChatList.vue
-2
View File
@@ -122,7 +122,6 @@ import ChatListHeader from './ChatListHeader.vue';
import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
import ConversationItem from './ConversationItem.vue';
import timeMixin from '../mixins/time';
import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
import conversationMixin from '../mixins/conversations';
import wootConstants from 'dashboard/constants/globals';
@@ -159,7 +158,6 @@ export default {
VirtualList,
},
mixins: [
timeMixin,
conversationMixin,
keyboardEventListenerMixins,
alertMixin,
app/javascript/dashboard/components/ui/TimeAgo.vue
+18 -17
View File
@@ -5,7 +5,7 @@
delay: { show: 1500, hide: 0 },
hideOnClick: true,
}"
class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
>
<span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
</div>
@@ -16,11 +16,14 @@ const MINUTE_IN_MILLI_SECONDS = 60000;
const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
import timeMixin from 'dashboard/mixins/time';
import {
dynamicTime,
dateFormat,
shortTimestamp,
} from 'shared/helpers/timeHelper';
export default {
name: 'TimeAgo',
mixins: [timeMixin],
props: {
isAutoRefreshEnabled: {
type: Boolean,
@@ -37,17 +40,17 @@ export default {
},
data() {
return {
lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
timer: null,
};
},
computed: {
lastActivityTime() {
return this.shortTimestamp(this.lastActivityAtTimeAgo);
return shortTimestamp(this.lastActivityAtTimeAgo);
},
createdAtTime() {
return this.shortTimestamp(this.createdAtTimeAgo);
return shortTimestamp(this.createdAtTimeAgo);
},
createdAt() {
const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
@@ -56,9 +59,9 @@ export default {
? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
this.createdAtTimeAgo
}`
: `${this.$t(
'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
)} ${this.dateFormat(this.createdAtTimestamp)}`;
: `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
this.createdAtTimestamp
)}`;
},
lastActivity() {
const lastActivityTimeDiff =
@@ -70,7 +73,7 @@ export default {
}`
: `${this.$t(
'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
)} ${this.dateFormat(this.lastActivityTimestamp)}`;
)} ${dateFormat(this.lastActivityTimestamp)}`;
},
tooltipText() {
return `${this.createdAt}
@@ -79,10 +82,10 @@ export default {
},
watch: {
lastActivityTimestamp() {
this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
},
createdAtTimestamp() {
this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
},
},
mounted() {
@@ -96,10 +99,8 @@ export default {
methods: {
createTimer() {
this.timer = setTimeout(() => {
this.lastActivityAtTimeAgo = this.dynamicTime(
this.lastActivityTimestamp
);
this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
this.createTimer();
}, this.refreshTime());
},
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+1 -2
View File
@@ -120,7 +120,6 @@ import { mapGetters } from 'vuex';
import Thumbnail from '../Thumbnail.vue';
import MessagePreview from './MessagePreview.vue';
import conversationMixin from '../../../mixins/conversations';
import timeMixin from '../../../mixins/time';
import router from '../../../routes';
import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
import InboxName from '../InboxName.vue';
@@ -144,7 +143,7 @@ export default {
SLACardLabel,
},
mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
mixins: [inboxMixin, conversationMixin, alertMixin],
props: {
activeLabel: {
type: String,
app/javascript/dashboard/components/widgets/conversation/Message.vue
+5 -2
View File
@@ -158,7 +158,7 @@ import InstagramStory from './bubble/InstagramStory.vue';
import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
import Spinner from 'shared/components/Spinner.vue';
import alertMixin from 'shared/mixins/alertMixin';
import contentTypeMixin from 'shared/mixins/contentTypeMixin';
import { CONTENT_TYPES } from 'shared/constants/contentType';
import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
import { generateBotMessageContent } from './helpers/botMessageContentHelper';
import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -184,7 +184,7 @@ export default {
InstagramStoryReply,
Spinner,
},
mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
mixins: [alertMixin, messageFormatterMixin],
props: {
data: {
type: Object,
@@ -482,6 +482,9 @@ export default {
}
return '';
},
isEmailContentType() {
return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
},
},
watch: {
data() {
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+3 -3
View File
@@ -77,10 +77,10 @@
import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
import inboxMixin from 'shared/mixins/inboxMixin';
import { mapGetters } from 'vuex';
import timeMixin from '../../../../mixins/time';
import { messageTimestamp } from 'shared/helpers/timeHelper';
export default {
mixins: [inboxMixin, timeMixin],
mixins: [inboxMixin],
props: {
sender: {
type: Object,
@@ -159,7 +159,7 @@ export default {
return MESSAGE_STATUS.SENT === this.messageStatus;
},
readableTime() {
return this.messageTimestamp(this.createdAt, 'LLL d, h:mm a');
return messageTimestamp(this.createdAt, 'LLL d, h:mm a');
},
screenName() {
const { additional_attributes: additionalAttributes = {} } =
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+5 -5
View File
@@ -12,7 +12,7 @@
@click="onClose"
>
<div
class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
@click.stop
>
<div
@@ -167,7 +167,7 @@
/>
</div>
</div>
<div class="flex items-center justify-center w-full h-16 px-6 py-2 z-10">
<div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
<div
class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
>
@@ -182,7 +182,7 @@
<script>
import { mapGetters } from 'vuex';
import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
import timeMixin from 'dashboard/mixins/time';
import { messageTimestamp } from 'shared/helpers/timeHelper';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -199,7 +199,7 @@ export default {
components: {
Thumbnail,
},
mixins: [keyboardEventListenerMixins, timeMixin],
mixins: [keyboardEventListenerMixins],
props: {
show: {
type: Boolean,
@@ -236,7 +236,7 @@ export default {
readableTime() {
const { created_at: createdAt } = this.activeAttachment;
if (!createdAt) return '';
return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
return messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
},
isImage() {
return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
app/javascript/dashboard/helper/DOMHelpers.js
+124
View File
@@ -0,0 +1,124 @@
const SCRIPT_TYPE = 'text/javascript';
const DATA_LOADED_ATTR = 'data-loaded';
const SCRIPT_PROPERTIES = [
'defer',
'crossOrigin',
'noModule',
'referrerPolicy',
'id',
];
/**
* Custom error class for script loading failures.
* @extends Error
*/
class ScriptLoaderError extends Error {
/**
* Creates a new ScriptLoaderError.
* @param {string} src - The source URL of the script that failed to load.
* @param {string} message - The error message.
*/
constructor(src, message = 'Failed to load script') {
super(message);
this.name = 'ScriptLoaderError';
this.src = src;
}
/**
* Gets detailed error information.
* @returns {string} A string containing the error details.
*/
getErrorDetails() {
return `Failed to load script from source: ${this.src}`;
}
}
/**
* Creates a new script element with the specified attributes.
* @param {string} src - The source URL of the script.
* @param {Object} options - Options for configuring the script element.
* @param {string} [options.type='text/javascript'] - The type of the script.
* @param {boolean} [options.async=true] - Whether the script should load asynchronously.
* @param {boolean} [options.defer] - Whether the script execution should be deferred.
* @param {string} [options.crossOrigin] - The CORS setting for the script.
* @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
* @param {string} [options.referrerPolicy] - The referrer policy for the script.
* @param {string} [options.id] - The id attribute for the script element.
* @param {Object} [options.attrs] - Additional attributes to set on the script element.
* @returns {HTMLScriptElement} The created script element.
*/
const createScriptElement = (src, options) => {
const el = document.createElement('script');
el.type = options.type || SCRIPT_TYPE;
el.async = options.async !== false;
el.src = src;
SCRIPT_PROPERTIES.forEach(property => {
if (property in options) {
el[property] = options[property];
}
});
Object.entries(options.attrs || {}).forEach(([name, value]) =>
el.setAttribute(name, value)
);
return el;
};
/**
* Finds an existing script element with the specified source URL.
* @param {string} src - The source URL to search for.
* @returns {HTMLScriptElement|null} The found script element, or null if not found.
*/
const findExistingScript = src => {
return document.querySelector(`script[src="${src}"]`);
};
/**
* Loads a script asynchronously and returns a promise.
* @param {string} src - The source URL of the script to load.
* @param {Object} options - Options for configuring the script element.
* @param {string} [options.type='text/javascript'] - The type of the script.
* @param {boolean} [options.async=true] - Whether the script should load asynchronously.
* @param {boolean} [options.defer] - Whether the script execution should be deferred.
* @param {string} [options.crossOrigin] - The CORS setting for the script.
* @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
* @param {string} [options.referrerPolicy] - The referrer policy for the script.
* @param {string} [options.id] - The id attribute for the script element.
* @param {Object} [options.attrs] - Additional attributes to set on the script element.
* @returns {Promise<HTMLScriptElement|boolean>} A promise that resolves with the loaded script element,
* or false if the script couldn't be loaded.
* @throws {ScriptLoaderError} If the script fails to load.
*/
export async function loadScript(src, options) {
if (typeof window === 'undefined' || !window.document) {
return Promise.resolve(false);
}
return new Promise((resolve, reject) => {
if (typeof src !== 'string' || src.trim() === '') {
reject(new Error('Invalid source URL provided'));
return;
}
let el = findExistingScript(src);
if (!el) {
el = createScriptElement(src, options);
document.head.appendChild(el);
} else if (el.hasAttribute(DATA_LOADED_ATTR)) {
resolve(el);
return;
}
const handleError = () => reject(new ScriptLoaderError(src));
el.addEventListener('error', handleError);
el.addEventListener('abort', handleError);
el.addEventListener('load', () => {
el.setAttribute(DATA_LOADED_ATTR, 'true');
resolve(el);
});
});
}
app/javascript/dashboard/helper/specs/DOMHelpers.spec.js
+95
View File
@@ -0,0 +1,95 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { loadScript } from '../DOMHelpers';
import { JSDOM } from 'jsdom';
describe('loadScript', () => {
let dom;
let window;
let document;
beforeEach(() => {
dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>', {
url: 'http://localhost',
});
window = dom.window;
document = window.document;
global.document = document;
});
afterEach(() => {
vi.restoreAllMocks();
delete global.document;
});
it('should load a script successfully', async () => {
const src = 'https://example.com/script.js';
const loadPromise = loadScript(src, {});
// Simulate successful script load
setTimeout(() => {
const script = document.querySelector(`script[src="${src}"]`);
if (script) {
script.dispatchEvent(new window.Event('load'));
}
}, 0);
const script = await loadPromise;
expect(script).toBeTruthy();
expect(script.getAttribute('src')).toBe(src);
expect(script.getAttribute('data-loaded')).toBe('true');
});
it('should not load a script if document is not available', async () => {
delete global.document;
const result = await loadScript('https://example.com/script.js', {});
expect(result).toBe(false);
});
it('should use an existing script if already present', async () => {
const src = 'https://example.com/existing-script.js';
const existingScript = document.createElement('script');
existingScript.src = src;
existingScript.setAttribute('data-loaded', 'true');
document.head.appendChild(existingScript);
const script = await loadScript(src, {});
expect(script).toBe(existingScript);
});
it('should set custom attributes on the script element', async () => {
const src = 'https://example.com/custom-script.js';
const options = {
type: 'module',
async: false,
defer: true,
crossOrigin: 'anonymous',
noModule: true,
referrerPolicy: 'origin',
id: 'custom-script',
attrs: { 'data-custom': 'value' },
};
const loadPromise = loadScript(src, options);
// Simulate successful script load
setTimeout(() => {
const script = document.querySelector(`script[src="${src}"]`);
if (script) {
script.dispatchEvent(new window.Event('load'));
}
}, 0);
const script = await loadPromise;
expect(script.type).toBe('module');
expect(script.async).toBe(false);
expect(script.defer).toBe(true);
expect(script.crossOrigin).toBe('anonymous');
expect(script.noModule).toBe(true);
expect(script.referrerPolicy).toBe('origin');
expect(script.id).toBe('custom-script');
expect(script.getAttribute('data-custom')).toBe('value');
});
});
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+1
View File
@@ -379,6 +379,7 @@
},
"DETAILS": {
"LOADING_FB": "Authenticating you with Facebook...",
"ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
"ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
"ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
"ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
app/javascript/dashboard/mixins/bulkActionsMixin.js
-15
View File
@@ -1,15 +0,0 @@
export default {
props: {
trianglePosition: {
type: String,
default: '0',
},
},
computed: {
cssVars() {
return {
'--triangle-position': this.trianglePosition + 'rem',
};
},
},
};
app/javascript/dashboard/mixins/specs/bulkActions.spec.js
-19
View File
@@ -1,19 +0,0 @@
import { mount } from '@vue/test-utils';
import bulkActionsMixin from '../bulkActionsMixin';
describe('bulkActionsMixin', () => {
it('returns the prop and computed values for triangle position:', async () => {
const Component = {
render() {},
title: 'MyComponent',
mixins: [bulkActionsMixin],
};
const wrapper = mount(Component);
await wrapper.setProps({
trianglePosition: '10',
});
expect(wrapper.props().trianglePosition).toEqual('10');
expect(wrapper.vm.cssVars).toEqual({
'--triangle-position': '10rem',
});
});
});
app/javascript/dashboard/mixins/specs/time.spec.js
-128
View File
@@ -1,128 +0,0 @@
import TimeMixin from '../time';
describe('#messageStamp', () => {
it('returns correct value', () => {
expect(TimeMixin.methods.messageStamp(1612971343)).toEqual('3:35 PM');
expect(TimeMixin.methods.messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
'Feb 10, 3:35 PM'
);
});
});
describe('#messageTimestamp', () => {
beforeEach(() => {
vi.useFakeTimers('modern');
const mockDate = new Date(2023, 4, 5);
vi.setSystemTime(mockDate);
});
afterEach(() => {
vi.useRealTimers();
});
it('should return the message date in the specified format if the message was sent in the current year', () => {
expect(TimeMixin.methods.messageTimestamp(1680777464)).toEqual(
'Apr 6, 2023'
);
});
it('should return the message date and time in a different format if the message was sent in a different year', () => {
expect(TimeMixin.methods.messageTimestamp(1612971343)).toEqual(
'Feb 10 2021, 3:35 PM'
);
});
});
describe('#dynamicTime', () => {
it('returns correct value', () => {
Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
expect(TimeMixin.methods.dynamicTime(1612971343)).toEqual(
'about 2 years ago'
);
});
});
describe('#dateFormat', () => {
it('returns correct value', () => {
expect(TimeMixin.methods.dateFormat(1612971343)).toEqual('Feb 10, 2021');
expect(TimeMixin.methods.dateFormat(1612971343, 'LLL d, yyyy')).toEqual(
'Feb 10, 2021'
);
});
});
describe('#shortTimestamp', () => {
// 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('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'
);
});
});
app/javascript/dashboard/mixins/time.js
-64
View File
@@ -1,64 +0,0 @@
import {
format,
isSameYear,
fromUnixTime,
formatDistanceToNow,
} from 'date-fns';
export default {
methods: {
messageStamp(time, dateFormat = 'h:mm a') {
const unixTime = fromUnixTime(time);
return format(unixTime, dateFormat);
},
messageTimestamp(time, dateFormat = 'MMM d, yyyy') {
const messageTime = fromUnixTime(time);
const now = new Date();
const messageDate = format(messageTime, dateFormat);
if (!isSameYear(messageTime, now)) {
return format(messageTime, 'LLL d y, h:mm a');
}
return messageDate;
},
dynamicTime(time) {
const unixTime = fromUnixTime(time);
return formatDistanceToNow(unixTime, { addSuffix: true });
},
dateFormat(time, dateFormat = 'MMM d, yyyy') {
const unixTime = fromUnixTime(time);
return format(unixTime, dateFormat);
},
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(' 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;
},
},
};
app/javascript/dashboard/modules/notes/components/ContactNote.vue
+7 -7
View File
@@ -1,8 +1,8 @@
<template>
<div
class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
>
<div class="flex justify-between items-end text-xs gap-1">
<div class="flex items-end justify-between gap-1 text-xs">
<div class="flex items-center">
<thumbnail
:title="noteAuthorName"
@@ -22,7 +22,7 @@
</span>
</div>
</div>
<div class="actions flex invisible">
<div class="flex invisible actions">
<woot-button
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
variant="smooth"
@@ -45,22 +45,22 @@
</div>
<p
v-dompurify-html="formatMessage(note || '')"
class="note__content mt-4"
class="mt-4 note__content"
/>
</div>
</template>
<script>
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import timeMixin from 'dashboard/mixins/time';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import { dynamicTime } from 'shared/helpers/timeHelper';
export default {
components: {
Thumbnail,
},
mixins: [timeMixin, messageFormatterMixin],
mixins: [messageFormatterMixin],
props: {
id: {
@@ -87,7 +87,7 @@ export default {
},
computed: {
readableTime() {
return this.dynamicTime(this.createdAt);
return dynamicTime(this.createdAt);
},
noteAuthor() {
return this.user || {};
app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+3 -4
View File
@@ -27,7 +27,7 @@
</h5>
<h5
v-if="email"
class="text-sm email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
>
<span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
{{ email }}
@@ -40,14 +40,13 @@
<script>
import { frontendURL } from 'dashboard/helper/URLHelper.js';
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
import InboxName from 'dashboard/components/widgets/InboxName.vue';
export default {
components: {
InboxName,
},
mixins: [timeMixin],
props: {
id: {
type: Number,
@@ -90,7 +89,7 @@ export default {
);
},
createdAtTime() {
return this.dynamicTime(this.createdAt);
return dynamicTime(this.createdAt);
},
},
};
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+7 -7
View File
@@ -1,6 +1,6 @@
<template>
<section
class="contacts-table-wrap bg-white dark:bg-slate-900 flex-1 h-full overflow-hidden -mt-1"
class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
>
<ve-table
:fixed-header="true"
@@ -20,7 +20,7 @@
v-else-if="!isLoading && !contacts.length"
:title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
/>
<div v-if="isLoading" class="items-center flex text-base justify-center">
<div v-if="isLoading" class="flex items-center justify-center text-base">
<spinner />
<span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
</div>
@@ -34,7 +34,7 @@ import { getCountryFlag } from 'dashboard/helper/flag';
import Spinner from 'shared/components/Spinner.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
import rtlMixin from 'shared/mixins/rtlMixin';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
@@ -44,7 +44,7 @@ export default {
Spinner,
VeTable,
},
mixins: [timeMixin, rtlMixin],
mixins: [rtlMixin],
props: {
contacts: {
type: Array,
@@ -105,9 +105,9 @@ export default {
countryCode: additional.country_code,
conversationsCount: item.conversations_count || '---',
last_activity_at: lastActivityAt
? this.dynamicTime(lastActivityAt)
? dynamicTime(lastActivityAt)
: '---',
created_at: createdAt ? this.dynamicTime(createdAt) : '---',
created_at: createdAt ? dynamicTime(createdAt) : '---',
};
});
},
@@ -134,7 +134,7 @@ export default {
status={row.availability_status}
/>
<div class="user-block">
<h6 class="text-base overflow-hidden whitespace-nowrap text-ellipsis">
<h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
<router-link
to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
class="user-name"
app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+2 -4
View File
@@ -28,10 +28,8 @@
</template>
<script>
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
export default {
mixins: [timeMixin],
props: {
eventType: {
type: String,
@@ -53,7 +51,7 @@ export default {
computed: {
readableTime() {
return this.dynamicTime(this.timeStamp);
return dynamicTime(this.timeStamp);
},
},
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+9 -8
View File
@@ -1,7 +1,7 @@
<template>
<div class="relative items-center p-4 bg-white dark:bg-slate-900 w-full">
<div class="text-left rtl:text-right flex flex-col gap-2 w-full">
<div class="flex justify-between flex-row">
<div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
<div class="flex flex-col w-full gap-2 text-left rtl:text-right">
<div class="flex flex-row justify-between">
<thumbnail
v-if="showAvatar"
:src="contact.thumbnail"
@@ -18,9 +18,9 @@
</div>
<div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
<div v-if="showAvatar" class="flex items-start gap-2 min-w-0 w-full">
<div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
<h3
class="flex-shrink min-w-0 text-base text-slate-800 dark:text-slate-100 capitalize my-0 max-w-full break-words"
class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
>
{{ contact.name }}
</h3>
@@ -55,7 +55,7 @@
<p v-if="additionalAttributes.description" class="break-words mb-0.5">
{{ additionalAttributes.description }}
</p>
<div class="flex flex-col gap-2 items-start w-full">
<div class="flex flex-col items-start w-full gap-2">
<contact-info-row
:href="contact.email ? `mailto:${contact.email}` : ''"
:value="contact.email"
@@ -166,7 +166,7 @@
</div>
</template>
<script>
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
import ContactInfoRow from './ContactInfoRow.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import SocialIcons from './SocialIcons.vue';
@@ -194,7 +194,7 @@ export default {
NewConversation,
ContactMergeModal,
},
mixins: [alertMixin, adminMixin, timeMixin],
mixins: [alertMixin, adminMixin],
props: {
contact: {
type: Object,
@@ -260,6 +260,7 @@ export default {
},
},
methods: {
dynamicTime,
toggleMergeModal() {
this.showMergeModal = !this.showMergeModal;
},
app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+3 -4
View File
@@ -9,7 +9,7 @@
/>
<router-link
:to="searchUrl"
class="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
>
<div class="flex">
<fluent-icon
@@ -19,7 +19,7 @@
/>
</div>
<p
class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
>
{{ $t('CONVERSATION.SEARCH_MESSAGES') }}
</p>
@@ -34,7 +34,6 @@
<script>
import { mapGetters } from 'vuex';
import timeMixin from '../../../../mixins/time';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import SwitchLayout from './SwitchLayout.vue';
import { frontendURL } from 'dashboard/helper/URLHelper';
@@ -49,7 +48,7 @@ export default {
},
},
},
mixins: [timeMixin, messageFormatterMixin],
mixins: [messageFormatterMixin],
props: {
isOnExpandedLayout: {
type: Boolean,
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+10 -10
View File
@@ -1,12 +1,12 @@
<template>
<div
class="text-slate-700 dark:text-slate-100 last:border-b-0 bg-white dark:bg-slate-900 my-0 -mx-4 grid grid-cols-1 lg:grid-cols-12 gap-4 border-b border-slate-50 dark:border-slate-800 px-6 py-3"
class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
>
<span class="items-start flex gap-2 col-span-6 text-left">
<span class="flex items-start col-span-6 gap-2 text-left">
<fluent-icon
v-if="showDragIcon"
size="20"
class="block cursor-move flex-shrink-0 h-4 mt-1 w-4 text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
icon="grab-handle"
/>
<div class="flex flex-col truncate">
@@ -18,7 +18,7 @@
{{ title }}
</h6>
</router-link>
<div class="flex gap-1 items-center">
<div class="flex items-center gap-1">
<Thumbnail
v-if="author"
:src="author.thumbnail"
@@ -39,7 +39,7 @@
class="text-woot-300 dark:text-woot-300"
/>
</div>
<span class="font-normal text-slate-700 dark:text-slate-200 text-sm">
<span class="text-sm font-normal text-slate-700 dark:text-slate-200">
{{ articleAuthorName }}
</span>
</div>
@@ -60,7 +60,7 @@
:title="formattedViewCount"
>
{{ readableViewCount }}
<span class="lg:hidden ml-1">
<span class="ml-1 lg:hidden">
{{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
</span>
</span>
@@ -74,7 +74,7 @@
/>
</span>
<span
class="flex items-center justify-end col-span-2 first-letter:uppercase text-slate-700 dark:text-slate-100 text-xs"
class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
>
{{ lastUpdatedAt }}
</span>
@@ -82,7 +82,7 @@
</template>
<script>
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
import portalMixin from '../mixins/portalMixin';
import { frontendURL } from 'dashboard/helper/URLHelper';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -91,7 +91,7 @@ export default {
components: {
Thumbnail,
},
mixins: [timeMixin, portalMixin],
mixins: [portalMixin],
props: {
showDragIcon: {
type: Boolean,
@@ -131,7 +131,7 @@ export default {
computed: {
lastUpdatedAt() {
return this.dynamicTime(this.updatedAt);
return dynamicTime(this.updatedAt);
},
formattedViewCount() {
return Number(this.views || 0).toLocaleString('en');
app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+8 -11
View File
@@ -10,7 +10,7 @@
@contextmenu="openContextMenu($event)"
@click="openConversation(notificationItem)"
>
<div class="flex relative items-center justify-between w-full">
<div class="relative flex items-center justify-between w-full">
<div
v-if="isUnread"
class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
@@ -23,7 +23,7 @@
</div>
</div>
<div class="flex flex-row justify-between items-center w-full gap-2">
<div class="flex flex-row items-center justify-between w-full gap-2">
<Thumbnail
v-if="assigneeMeta"
:src="assigneeMeta.thumbnail"
@@ -31,19 +31,19 @@
size="16px"
/>
<span
class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
:class="isUnread ? 'font-medium' : 'font-normal'"
>
{{ pushTitle }}
</span>
<span
class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
>
{{ lastActivityAt }}
</span>
</div>
<div v-if="snoozedUntilTime" class="flex items-center">
<span class="text-woot-500 dark:text-woot-500 text-xs font-medium">
<span class="text-xs font-medium text-woot-500 dark:text-woot-500">
{{ snoozedDisplayText }}
</span>
</div>
@@ -63,7 +63,7 @@ import StatusIcon from './StatusIcon.vue';
import InboxNameAndId from './InboxNameAndId.vue';
import InboxContextMenu from './InboxContextMenu.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
export default {
@@ -74,7 +74,6 @@ export default {
InboxNameAndId,
Thumbnail,
},
mixins: [timeMixin],
props: {
notificationItem: {
type: Object,
@@ -115,10 +114,8 @@ export default {
);
},
lastActivityAt() {
const dynamicTime = this.dynamicTime(
this.notificationItem?.last_activity_at
);
return this.shortTimestamp(dynamicTime, true);
const time = dynamicTime(this.notificationItem?.last_activity_at);
return shortTimestamp(time, true);
},
menuItems() {
const items = [
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+7 -7
View File
@@ -14,12 +14,12 @@
v-if="!notificationItem.read_at"
class="w-2 h-2 rounded-full bg-woot-500"
/>
<div v-else class="w-2 flex" />
<div v-else class="flex w-2" />
<div
class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
>
<div class="flex justify-between">
<div class="items-center flex">
<div class="flex items-center">
<span class="font-bold text-slate-800 dark:text-slate-100">
{{
`#${
@@ -47,15 +47,15 @@
/>
</div>
</div>
<div class="w-full flex">
<div class="flex w-full">
<span
class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
>
{{ notificationItem.push_message_title }}
</span>
</div>
<span
class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
>
{{ dynamicTime(notificationItem.last_activity_at) }}
</span>
@@ -67,13 +67,12 @@
<script>
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import timeMixin from 'dashboard/mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
export default {
components: {
Thumbnail,
},
mixins: [timeMixin],
props: {
notificationItem: {
type: Object,
@@ -96,6 +95,7 @@ export default {
},
},
methods: {
dynamicTime,
onClickOpenNotification() {
this.$emit('open-notification', this.notificationItem);
},
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+7 -5
View File
@@ -1,6 +1,6 @@
<template>
<section
class="h-full flex-shrink flex-grow overflow-hidden py-8 px-4 bg-white dark:bg-slate-900"
class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
>
<woot-submit-button
v-if="notificationMetadata.unreadCount"
@@ -22,7 +22,7 @@
>
<td>
<div
class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
>
<h5 class="notification--title">
{{
@@ -34,7 +34,7 @@
}}
</h5>
<span
class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
class="overflow-hidden notification--message-title whitespace-nowrap text-ellipsis"
>
{{ notificationItem.push_message_title }}
</span>
@@ -88,7 +88,7 @@
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import Spinner from 'shared/components/Spinner.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import timeMixin from '../../../../mixins/time';
import { dynamicTime } from 'shared/helpers/timeHelper';
import { mapGetters } from 'vuex';
export default {
@@ -97,7 +97,6 @@ export default {
Spinner,
EmptyState,
},
mixins: [timeMixin],
props: {
notifications: {
type: Array,
@@ -128,6 +127,9 @@ export default {
return !this.isLoading && this.notifications.length === 0;
},
},
methods: {
dynamicTime,
},
};
</script>
app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+8 -7
View File
@@ -1,11 +1,11 @@
<template>
<div class="flex-1 overflow-auto p-4 flex justify-between flex-col">
<div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
<!-- List Audit Logs -->
<div>
<div>
<p
v-if="!uiFlags.fetchingList && !records.length"
class="flex h-full items-center flex-col justify-center"
class="flex flex-col items-center justify-center h-full"
>
{{ $t('AUDIT_LOGS.LIST.404') }}
</p>
@@ -16,7 +16,7 @@
<table
v-if="!uiFlags.fetchingList && records.length"
class="woot-table w-full"
class="w-full woot-table"
>
<colgroup>
<col class="w-3/5" />
@@ -34,10 +34,10 @@
</thead>
<tbody>
<tr v-for="auditLogItem in records" :key="auditLogItem.id">
<td class="whitespace-nowrap break-all">
<td class="break-all whitespace-nowrap">
{{ generateLogText(auditLogItem) }}
</td>
<td class="whitespace-nowrap break-all">
<td class="break-all whitespace-nowrap">
{{
messageTimestamp(
auditLogItem.created_at,
@@ -65,7 +65,7 @@
<script>
import { mapGetters } from 'vuex';
import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
import timeMixin from 'dashboard/mixins/time';
import { messageTimestamp } from 'shared/helpers/timeHelper';
import alertMixin from 'shared/mixins/alertMixin';
import {
generateTranslationPayload,
@@ -76,7 +76,7 @@ export default {
components: {
TableFooter,
},
mixins: [alertMixin, timeMixin],
mixins: [alertMixin],
beforeRouteEnter(to, from, next) {
// Fetch Audit Logs on page load without manual refresh
next(vm => {
@@ -104,6 +104,7 @@ export default {
this.$store.dispatch('agents/get');
},
methods: {
messageTimestamp,
fetchAuditLogs() {
const page = this.$route.query.page ?? 1;
this.$store.dispatch('auditlogs/fetch', { page }).catch(error => {
app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+6 -6
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 p-4 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
@@ -12,7 +12,7 @@
<div class="w-full lg:w-3/5">
<p
v-if="!uiFlags.isFetching && !records.length"
class="flex h-full items-center flex-col justify-center"
class="flex flex-col items-center justify-center h-full"
>
{{ $t('AUTOMATION.LIST.404') }}
</p>
@@ -77,7 +77,7 @@
</table>
</div>
<div class="hidden lg:block w-1/3">
<div class="hidden w-1/3 lg:block">
<span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
</div>
</div>
@@ -128,14 +128,14 @@ import { mapGetters } from 'vuex';
import AddAutomationRule from './AddAutomationRule.vue';
import EditAutomationRule from './EditAutomationRule.vue';
import alertMixin from 'shared/mixins/alertMixin';
import timeMixin from 'dashboard/mixins/time';
import { messageStamp } from 'shared/helpers/timeHelper';
export default {
components: {
AddAutomationRule,
EditAutomationRule,
},
mixins: [alertMixin, timeMixin],
mixins: [alertMixin],
data() {
return {
loading: {},
@@ -278,7 +278,7 @@ export default {
}
},
readableTime(date) {
return this.messageStamp(new Date(date), 'LLL d, h:mm a');
return messageStamp(new Date(date), 'LLL d, h:mm a');
},
},
};
app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+5 -2
View File
@@ -70,14 +70,14 @@
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
import InboxName from 'dashboard/components/widgets/InboxName.vue';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import timeMixin from 'dashboard/mixins/time';
import { messageStamp } from 'shared/helpers/timeHelper';
export default {
components: {
UserAvatarWithName,
InboxName,
},
mixins: [messageFormatterMixin, timeMixin],
mixins: [messageFormatterMixin],
props: {
campaign: {
type: Object,
@@ -110,5 +110,8 @@ export default {
: 'success';
},
},
methods: {
messageStamp,
},
};
</script>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+38 -50
View File
@@ -2,14 +2,15 @@
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<div v-if="!hasLoginStarted" class="login-init h-full">
<div v-if="!hasLoginStarted" class="pt-[30%] h-full">
<a href="#" @click="startLogin()">
<img
class="w-auto h-10"
src="~dashboard/assets/images/channels/facebook_login.png"
alt="Facebook-logo"
/>
</a>
<p>
<p class="py-6">
{{
useInstallationName(
$t('INBOX_MGMT.ADD.FB.HELP'),
@@ -29,7 +30,7 @@
<loading-state v-else-if="showLoader" :message="emptyStateMessage" />
<form
v-else
class="mx-0 flex flex-wrap"
class="flex flex-wrap mx-0"
@submit.prevent="createChannel()"
>
<div class="w-full">
@@ -100,6 +101,9 @@ import router from '../../../../index';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import accountMixin from '../../../../../mixins/account';
import { loadScript } from 'dashboard/helper/DOMHelpers';
import * as Sentry from '@sentry/browser';
export default {
components: {
LoadingState,
@@ -151,19 +155,29 @@ export default {
}),
},
created() {
this.initFB();
this.loadFBsdk();
},
mounted() {
this.initFB();
window.fbAsyncInit = this.runFBInit;
},
methods: {
startLogin() {
async startLogin() {
this.hasLoginStarted = true;
this.tryFBlogin();
try {
// this will load the SDK in a promise, and resolve it when the sdk is loaded
// in case the SDK is already present, it will resolve immediately
await this.loadFBsdk();
this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
this.tryFBlogin(); // make an attempt to login
} catch (error) {
if (error.name === 'ScriptLoaderError') {
// if the error was related to script loading, we show a toast
this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
} else {
// if the error was anything else, we capture it and show a toast
Sentry.captureException(error);
this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
}
}
},
setPageName({ name }) {
@@ -177,34 +191,21 @@ export default {
}
},
initFB() {
if (window.fbSDKLoaded === undefined) {
window.fbAsyncInit = () => {
FB.init({
appId: window.chatwootConfig.fbAppId,
xfbml: true,
version: window.chatwootConfig.fbApiVersion,
status: true,
});
window.fbSDKLoaded = true;
FB.AppEvents.logPageView();
};
}
runFBInit() {
FB.init({
appId: window.chatwootConfig.fbAppId,
xfbml: true,
version: window.chatwootConfig.fbApiVersion,
status: true,
});
window.fbSDKLoaded = true;
FB.AppEvents.logPageView();
},
loadFBsdk() {
((d, s, id) => {
let js;
// eslint-disable-next-line
const fjs = (js = d.getElementsByTagName(s)[0]);
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = '//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
async loadFBsdk() {
return loadScript('https://connect.facebook.net/en_US/sdk.js', {
id: 'facebook-jssdk',
});
},
tryFBlogin() {
@@ -289,16 +290,3 @@ export default {
},
};
</script>
<style scoped lang="scss">
.login-init {
@apply pt-[30%] text-center;
p {
@apply p-6;
}
> a > img {
@apply w-60;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+37 -28
View File
@@ -1,11 +1,14 @@
<template>
<inbox-reconnection-required class="mx-8 mt-5" @reauthorize="tryFBlogin" />
<inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
</template>
<script>
/* global FB */
import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
import { loadScript } from 'dashboard/helper/DOMHelpers';
import alertMixin from 'shared/mixins/alertMixin';
import * as Sentry from '@sentry/browser';
export default {
components: {
@@ -24,38 +27,44 @@ export default {
},
},
mounted() {
this.initFB();
this.loadFBsdk();
window.fbAsyncInit = this.runFBInit;
},
methods: {
initFB() {
if (window.fbSDKLoaded === undefined) {
window.fbAsyncInit = () => {
FB.init({
appId: window.chatwootConfig.fbAppId,
xfbml: true,
version: window.chatwootConfig.fbApiVersion,
status: true,
});
window.fbSDKLoaded = true;
FB.AppEvents.logPageView();
};
}
runFBInit() {
FB.init({
appId: window.chatwootConfig.fbAppId,
xfbml: true,
version: window.chatwootConfig.fbApiVersion,
status: true,
});
window.fbSDKLoaded = true;
FB.AppEvents.logPageView();
},
loadFBsdk() {
((d, s, id) => {
let js;
// eslint-disable-next-line
const fjs = (js = d.getElementsByTagName(s)[0]);
if (d.getElementById(id)) {
return;
async loadFBsdk() {
return loadScript('https://connect.facebook.net/en_US/sdk.js', {
id: 'facebook-jssdk',
});
},
async startLogin() {
this.hasLoginStarted = true;
try {
// this will load the SDK in a promise, and resolve it when the sdk is loaded
// in case the SDK is already present, it will resolve immediately
await this.loadFBsdk();
this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
this.tryFBlogin(); // make an attempt to login
} catch (error) {
if (error.name === 'ScriptLoaderError') {
// if the error was related to script loading, we show a toast
this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
} else {
// if the error was anything else, we capture it and show a toast
Sentry.captureException(error);
this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
}
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
}
},
tryFBlogin() {
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+4 -4
View File
@@ -26,7 +26,7 @@ import { VeTable, VePagination } from 'vue-easytable';
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
import { CSAT_RATINGS } from 'shared/constants/messages';
import { mapGetters } from 'vuex';
import timeMixin from 'dashboard/mixins/time';
import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
import rtlMixin from 'shared/mixins/rtlMixin';
export default {
@@ -34,7 +34,7 @@ export default {
VeTable,
VePagination,
},
mixins: [timeMixin, rtlMixin],
mixins: [rtlMixin],
props: {
pageIndex: {
type: Number,
@@ -137,8 +137,8 @@ export default {
rating: response.rating,
feedbackText: response.feedback_message || '---',
conversationId: response.conversation_id,
createdAgo: this.dynamicTime(response.created_at),
createdAt: this.messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
createdAgo: dynamicTime(response.created_at),
createdAt: messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
}));
},
},
app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+2 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="h-auto overflow-auto flex flex-col">
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header
:header-title="$t('SLA.ADD.TITLE')"
:header-content="$t('SLA.ADD.DESC')"
@@ -14,17 +14,14 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import validationMixin from './validationMixin';
import { mapGetters } from 'vuex';
import validations from './validations';
import SlaForm from './SlaForm.vue';
export default {
components: {
SlaForm,
},
mixins: [alertMixin, validationMixin],
validations,
mixins: [alertMixin],
computed: {
...mapGetters({
uiFlags: 'sla/getUIFlags',
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+12 -3
View File
@@ -12,7 +12,7 @@
}"
:label="$t('SLA.FORM.NAME.LABEL')"
:placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
:error="getSlaNameErrorMessage"
:error="slaNameErrorMessage"
@input="v$.name.$touch"
/>
<woot-input
@@ -70,7 +70,6 @@
<script>
import { mapGetters } from 'vuex';
import { convertSecondsToTimeUnit } from '@chatwoot/utils';
import validationMixin from './validationMixin';
import validations from './validations';
import SlaTimeInput from './SlaTimeInput.vue';
import { useVuelidate } from '@vuelidate/core';
@@ -79,7 +78,6 @@ export default {
components: {
SlaTimeInput,
},
mixins: [validationMixin],
props: {
selectedResponse: {
type: Object,
@@ -134,6 +132,17 @@ export default {
this.uiFlags.isUpdating
);
},
slaNameErrorMessage() {
let errorMessage = '';
if (this.$v.name.$error) {
if (!this.$v.name.required) {
errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
} else if (!this.$v.name.minLength) {
errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
}
}
return errorMessage;
},
},
mounted() {
if (this.selectedResponse) this.setFormValues();
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+14 -3
View File
@@ -11,7 +11,7 @@
}"
:label="label"
:placeholder="placeholder"
:error="getThresholdTimeErrorMessage"
:error="thresholdTimeErrorMessage"
@input="onThresholdTimeChange"
/>
<!-- the mt-7 handles the label offset -->
@@ -34,12 +34,10 @@
</template>
<script>
import validationMixin from './validationMixin';
import validations from './validations';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [validationMixin],
props: {
threshold: {
type: Number,
@@ -73,6 +71,19 @@ export default {
};
},
validations,
computed: {
thresholdTimeErrorMessage() {
let errorMessage = '';
if (this.$v.thresholdTime.$error) {
if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
errorMessage = this.$t(
'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
);
}
}
return errorMessage;
},
},
watch: {
threshold: {
immediate: true,
app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
-106
View File
@@ -1,106 +0,0 @@
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueI18n from 'vue-i18n';
import Vuelidate from 'vuelidate';
import validationMixin from '../validationMixin';
import validations from '../validations';
import i18n from 'dashboard/i18n';
const localVue = createLocalVue();
localVue.use(VueI18n);
localVue.use(Vuelidate);
const i18nConfig = new VueI18n({
locale: 'en',
messages: i18n,
});
const TestComponent = {
render() {},
mixins: [validationMixin],
validations,
};
describe('validationMixin', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(TestComponent, {
localVue,
i18n: i18nConfig,
data() {
return {
name: '',
thresholdTime: '',
};
},
});
});
it('should not return required error message if name is empty but not touched', () => {
wrapper.setData({ name: '' });
expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
});
it('should return empty error message if name is valid', () => {
wrapper.setData({ name: 'ValidName' });
wrapper.vm.$v.name.$touch();
expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
});
it('should return required error message if name is empty', () => {
wrapper.setData({ name: '' });
wrapper.vm.$v.name.$touch();
expect(wrapper.vm.getSlaNameErrorMessage).toBe(
wrapper.vm.$t('SLA.FORM.NAME.REQUIRED_ERROR')
);
});
it('should return minimum length error message if name is too short', () => {
wrapper.setData({ name: 'a' });
wrapper.vm.$v.name.$touch();
expect(wrapper.vm.getSlaNameErrorMessage).toBe(
wrapper.vm.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR')
);
});
it('should accept valid threshold values', () => {
wrapper.setData({ thresholdTime: 10 });
wrapper.vm.$v.thresholdTime.$touch();
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
wrapper.setData({ thresholdTime: 10.5 });
wrapper.vm.$v.thresholdTime.$touch();
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
});
it('should not return invalid format error message if thresholdTime is empty but not touched', () => {
wrapper.setData({ thresholdTime: '' });
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe('');
});
it('should return invalid format error message if thresholdTime has an invalid format', () => {
wrapper.setData({ thresholdTime: 'fsdfsdfsdfsd' });
wrapper.vm.$v.thresholdTime.$touch();
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
);
});
it('should reject invalid threshold values', () => {
wrapper.setData({ thresholdTime: 0 });
wrapper.vm.$v.thresholdTime.$touch();
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
);
});
it('should reject invalid threshold values', () => {
wrapper.setData({ thresholdTime: -1 });
wrapper.vm.$v.thresholdTime.$touch();
expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
);
});
});
app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
-30
View File
@@ -1,30 +0,0 @@
import { useVuelidate } from '@vuelidate/core';
export default {
setup() {
return { v$: useVuelidate() };
},
computed: {
getSlaNameErrorMessage() {
let errorMessage = '';
if (this.v$.name.$error) {
if (!this.v$.name.required) {
errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
} else if (!this.v$.name.minLength) {
errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
}
}
return errorMessage;
},
getThresholdTimeErrorMessage() {
let errorMessage = '';
if (this.v$.thresholdTime.$error) {
if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
errorMessage = this.$t(
'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
);
}
}
return errorMessage;
},
},
};
app/javascript/shared/helpers/specs/timeHelper.spec.js
+92
View File
@@ -0,0 +1,92 @@
import {
messageStamp,
messageTimestamp,
dynamicTime,
dateFormat,
shortTimestamp,
} from 'shared/helpers/timeHelper';
beforeEach(() => {
process.env.TZ = 'UTC';
vi.useFakeTimers('modern');
const mockDate = new Date(Date.UTC(2023, 4, 5));
vi.setSystemTime(mockDate);
});
afterEach(() => {
vi.useRealTimers();
});
describe('#messageStamp', () => {
it('returns correct value', () => {
expect(messageStamp(1612971343)).toEqual('3:35 PM');
expect(messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
'Feb 10, 3:35 PM'
);
});
});
describe('#messageTimestamp', () => {
it('should return the message date in the specified format if the message was sent in the current year', () => {
expect(messageTimestamp(1680777464)).toEqual('Apr 6, 2023');
});
it('should return the message date and time in a different format if the message was sent in a different year', () => {
expect(messageTimestamp(1612971343)).toEqual('Feb 10 2021, 3:35 PM');
});
});
describe('#dynamicTime', () => {
it('returns correct value', () => {
Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
expect(dynamicTime(1612971343)).toEqual('about 2 years ago');
});
});
describe('#dateFormat', () => {
it('returns correct value', () => {
expect(dateFormat(1612971343)).toEqual('Feb 10, 2021');
expect(dateFormat(1612971343, 'LLL d, yyyy')).toEqual('Feb 10, 2021');
});
});
describe('#shortTimestamp', () => {
// Test cases when withAgo is false or not provided
it('returns correct value without ago', () => {
expect(shortTimestamp('less than a minute ago')).toEqual('now');
expect(shortTimestamp('1 minute ago')).toEqual('1m');
expect(shortTimestamp('12 minutes ago')).toEqual('12m');
expect(shortTimestamp('a minute ago')).toEqual('1m');
expect(shortTimestamp('an hour ago')).toEqual('1h');
expect(shortTimestamp('1 hour ago')).toEqual('1h');
expect(shortTimestamp('2 hours ago')).toEqual('2h');
expect(shortTimestamp('1 day ago')).toEqual('1d');
expect(shortTimestamp('a day ago')).toEqual('1d');
expect(shortTimestamp('3 days ago')).toEqual('3d');
expect(shortTimestamp('a month ago')).toEqual('1mo');
expect(shortTimestamp('1 month ago')).toEqual('1mo');
expect(shortTimestamp('2 months ago')).toEqual('2mo');
expect(shortTimestamp('a year ago')).toEqual('1y');
expect(shortTimestamp('1 year ago')).toEqual('1y');
expect(shortTimestamp('4 years ago')).toEqual('4y');
});
// Test cases when withAgo is true
it('returns correct value with ago', () => {
expect(shortTimestamp('less than a minute ago', true)).toEqual('now');
expect(shortTimestamp('1 minute ago', true)).toEqual('1m ago');
expect(shortTimestamp('12 minutes ago', true)).toEqual('12m ago');
expect(shortTimestamp('a minute ago', true)).toEqual('1m ago');
expect(shortTimestamp('an hour ago', true)).toEqual('1h ago');
expect(shortTimestamp('1 hour ago', true)).toEqual('1h ago');
expect(shortTimestamp('2 hours ago', true)).toEqual('2h ago');
expect(shortTimestamp('1 day ago', true)).toEqual('1d ago');
expect(shortTimestamp('a day ago', true)).toEqual('1d ago');
expect(shortTimestamp('3 days ago', true)).toEqual('3d ago');
expect(shortTimestamp('a month ago', true)).toEqual('1mo ago');
expect(shortTimestamp('1 month ago', true)).toEqual('1mo ago');
expect(shortTimestamp('2 months ago', true)).toEqual('2mo ago');
expect(shortTimestamp('a year ago', true)).toEqual('1y ago');
expect(shortTimestamp('1 year ago', true)).toEqual('1y ago');
expect(shortTimestamp('4 years ago', true)).toEqual('4y ago');
});
});
app/javascript/shared/helpers/timeHelper.js
+93
View File
@@ -0,0 +1,93 @@
import {
format,
isSameYear,
fromUnixTime,
formatDistanceToNow,
} from 'date-fns';
/**
* Formats a Unix timestamp into a human-readable time format.
* @param {number} time - Unix timestamp.
* @param {string} [dateFormat='h:mm a'] - Desired format of the time.
* @returns {string} Formatted time string.
*/
export const messageStamp = (time, dateFormat = 'h:mm a') => {
const unixTime = fromUnixTime(time);
return format(unixTime, dateFormat);
};
/**
* Provides a formatted timestamp, adjusting the format based on the current year.
* @param {number} time - Unix timestamp.
* @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
* @returns {string} Formatted date string.
*/
export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
const messageTime = fromUnixTime(time);
const now = new Date();
const messageDate = format(messageTime, dateFormat);
if (!isSameYear(messageTime, now)) {
return format(messageTime, 'LLL d y, h:mm a');
}
return messageDate;
};
/**
* Converts a Unix timestamp to a relative time string (e.g., 3 hours ago).
* @param {number} time - Unix timestamp.
* @returns {string} Relative time string.
*/
export const dynamicTime = time => {
const unixTime = fromUnixTime(time);
return formatDistanceToNow(unixTime, { addSuffix: true });
};
/**
* Formats a Unix timestamp into a specified date format.
* @param {number} time - Unix timestamp.
* @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
* @returns {string} Formatted date string.
*/
export const dateFormat = (time, df = 'MMM d, yyyy') => {
const unixTime = fromUnixTime(time);
return format(unixTime, df);
};
/**
* Converts a detailed time description into a shorter format, optionally appending 'ago'.
* @param {string} time - Detailed time description (e.g., 'a minute ago').
* @param {boolean} [withAgo=false] - Whether to append 'ago' to the result.
* @returns {string} Shortened time description.
*/
export const 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(' 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;
};
app/javascript/shared/mixins/contentTypeMixin.js
-9
View File
@@ -1,9 +0,0 @@
import { CONTENT_TYPES } from '../constants/contentType';
export default {
computed: {
isEmailContentType() {
return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
},
},
};
app/javascript/shared/mixins/specs/contentTypeMixin.spec.js
-32
View File
@@ -1,32 +0,0 @@
import { shallowMount } from '@vue/test-utils';
import contentTypeMixin from '../contentTypeMixin';
describe('contentTypeMixin', () => {
it('returns true if contentType is incoming_email', () => {
const Component = {
render() {},
mixins: [contentTypeMixin],
computed: {
contentType() {
return 'incoming_email';
},
},
};
const wrapper = shallowMount(Component);
expect(wrapper.vm.isEmailContentType).toBe(true);
});
it('returns false if contentType is not incoming_email', () => {
const Component = {
render() {},
mixins: [contentTypeMixin],
computed: {
contentType() {
return 'input_select';
},
},
};
const wrapper = shallowMount(Component);
expect(wrapper.vm.isEmailContentType).toBe(false);
});
});
app/javascript/widget/components/AgentMessage.vue
+4 -4
View File
@@ -30,7 +30,7 @@
/>
<div
v-if="hasAttachments"
class="chat-bubble has-attachment space-y-2 agent"
class="space-y-2 chat-bubble has-attachment agent"
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
>
<div
@@ -90,7 +90,7 @@
import UserMessage from 'widget/components/UserMessage.vue';
import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
import timeMixin from 'dashboard/mixins/time';
import { messageStamp } from 'shared/helpers/timeHelper';
import ImageBubble from 'widget/components/ImageBubble.vue';
import VideoBubble from 'widget/components/VideoBubble.vue';
import FileBubble from 'widget/components/FileBubble.vue';
@@ -116,7 +116,7 @@ export default {
MessageReplyButton,
ReplyToChip,
},
mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
mixins: [configMixin, messageMixin, darkModeMixin],
props: {
message: {
type: Object,
@@ -146,7 +146,7 @@ export default {
},
readableTime() {
const { created_at: createdAt = '' } = this.message;
return this.messageStamp(createdAt, 'LLL d yyyy, h:mm a');
return messageStamp(createdAt, 'LLL d yyyy, h:mm a');
},
messageType() {
const { message_type: type = 1 } = this.message;
app/javascript/widget/components/UserMessage.vue
+3 -3
View File
@@ -83,7 +83,7 @@ import ImageBubble from 'widget/components/ImageBubble.vue';
import VideoBubble from 'widget/components/VideoBubble.vue';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import FileBubble from 'widget/components/FileBubble.vue';
import timeMixin from 'dashboard/mixins/time';
import { messageStamp } from 'shared/helpers/timeHelper';
import messageMixin from '../mixins/messageMixin';
import ReplyToChip from 'widget/components/ReplyToChip.vue';
import DragWrapper from 'widget/components/DragWrapper.vue';
@@ -103,7 +103,7 @@ export default {
ReplyToChip,
DragWrapper,
},
mixins: [timeMixin, messageMixin],
mixins: [messageMixin],
props: {
message: {
type: Object,
@@ -135,7 +135,7 @@ export default {
},
readableTime() {
const { created_at: createdAt = '' } = this.message;
return this.messageStamp(createdAt);
return messageStamp(createdAt);
},
isFailed() {
const { status = '' } = this.message;
docker-compose.production.yaml
+2
View File
@@ -20,6 +20,7 @@ services:
- INSTALLATION_ENV=docker
entrypoint: docker/entrypoints/rails.sh
command: ['bundle', 'exec', 'rails', 's', '-p', '3000', '-b', '0.0.0.0']
restart: always
sidekiq:
<<: *base
@@ -31,6 +32,7 @@ services:
- RAILS_ENV=production
- INSTALLATION_ENV=docker
command: ['bundle', 'exec', 'sidekiq', '-C', 'config/sidekiq.yml']
restart: always
postgres:
image: postgres:12