From 3e61ea5cfab776db3c460a1bc2fb70159b83cb53 Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Thu, 24 Dec 2020 05:23:47 -0800 Subject: [PATCH] feat: Change the date format display in widget (#1528) Co-authored-by: Pranav --- .../shared/components/DateSeparator.vue | 12 +++++- .../components/specs/DateSeparator.spec.js | 5 ++- .../__snapshots__/DateSeparator.spec.js.snap | 2 +- app/javascript/shared/helpers/DateHelper.js | 9 ++++ .../shared/helpers/specs/DateHelper.sepc.js | 13 ------ .../shared/helpers/specs/DateHelper.spec.js | 42 +++++++++++++++++++ app/javascript/widget/i18n/locale/en.json | 4 +- 7 files changed, 70 insertions(+), 17 deletions(-) delete mode 100644 app/javascript/shared/helpers/specs/DateHelper.sepc.js create mode 100644 app/javascript/shared/helpers/specs/DateHelper.spec.js diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue index 6a4e9f6d4..487da2f76 100644 --- a/app/javascript/shared/components/DateSeparator.vue +++ b/app/javascript/shared/components/DateSeparator.vue @@ -1,10 +1,11 @@ diff --git a/app/javascript/shared/components/specs/DateSeparator.spec.js b/app/javascript/shared/components/specs/DateSeparator.spec.js index 92f54c360..059cff4cf 100644 --- a/app/javascript/shared/components/specs/DateSeparator.spec.js +++ b/app/javascript/shared/components/specs/DateSeparator.spec.js @@ -1,12 +1,15 @@ import { mount } from '@vue/test-utils'; import DateSeparator from '../DateSeparator'; -describe('Spinner', () => { +describe('DateSeparator', () => { test('matches snapshot', () => { const wrapper = mount(DateSeparator, { propsData: { date: 'Nov 18, 2019', }, + mocks: { + $t: () => {}, + }, }); expect(wrapper.isVueInstance()).toBeTruthy(); expect(wrapper.element).toMatchSnapshot(); diff --git a/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap index ebed84bcf..4ddc499f9 100644 --- a/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap +++ b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Spinner matches snapshot 1`] = ` +exports[`DateSeparator matches snapshot 1`] = `
diff --git a/app/javascript/shared/helpers/DateHelper.js b/app/javascript/shared/helpers/DateHelper.js index 81041a422..c137cee76 100644 --- a/app/javascript/shared/helpers/DateHelper.js +++ b/app/javascript/shared/helpers/DateHelper.js @@ -1,7 +1,16 @@ import fromUnixTime from 'date-fns/fromUnixTime'; import format from 'date-fns/format'; +import isToday from 'date-fns/isToday'; +import isYesterday from 'date-fns/isYesterday'; export const formatUnixDate = (date, dateFormat = 'MMM dd, yyyy') => { const unixDate = fromUnixTime(date); return format(unixDate, dateFormat); }; + +export const formatDate = ({ date, todayText, yesterdayText }) => { + const dateValue = new Date(date); + if (isToday(dateValue)) return todayText; + if (isYesterday(dateValue)) return yesterdayText; + return date; +}; diff --git a/app/javascript/shared/helpers/specs/DateHelper.sepc.js b/app/javascript/shared/helpers/specs/DateHelper.sepc.js deleted file mode 100644 index 3641bc369..000000000 --- a/app/javascript/shared/helpers/specs/DateHelper.sepc.js +++ /dev/null @@ -1,13 +0,0 @@ -import DateSeparator from '../DateSeparator'; - -describe('#DateSeparator', () => { - it('should format correctly without dateFormat', () => { - expect(new DateSeparator(1576340626).format()).toEqual('Dec 14, 2019'); - }); - - it('should format correctly without dateFormat', () => { - expect(new DateSeparator(1576340626).format('DD-MM-YYYY')).toEqual( - '14-12-2019' - ); - }); -}); diff --git a/app/javascript/shared/helpers/specs/DateHelper.spec.js b/app/javascript/shared/helpers/specs/DateHelper.spec.js new file mode 100644 index 000000000..c89bb3ef1 --- /dev/null +++ b/app/javascript/shared/helpers/specs/DateHelper.spec.js @@ -0,0 +1,42 @@ +import { formatDate, formatUnixDate } from '../DateHelper'; + +describe('#DateHelper', () => { + it('should format unix date correctly without dateFormat', () => { + expect(formatUnixDate(1576340626)).toEqual('Dec 14, 2019'); + }); + + it('should format unix date correctly without dateFormat', () => { + expect(formatUnixDate(1608214031, 'MM/dd/yyyy')).toEqual('12/17/2020'); + }); + + it('should format date', () => { + expect( + formatDate({ + date: 'Dec 14, 2019', + todayText: 'Today', + yesterdayText: 'Yesterday', + }) + ).toEqual('Dec 14, 2019'); + }); + it('should format date as today ', () => { + expect( + formatDate({ + date: new Date(), + todayText: 'Today', + yesterdayText: 'Yesterday', + }) + ).toEqual('Today'); + }); + it('should format date as yesterday ', () => { + const today = new Date(); + const yesterday = new Date(today); + yesterday.setDate(yesterday.getDate() - 1); + expect( + formatDate({ + date: yesterday, + todayText: 'Today', + yesterdayText: 'Yesterday', + }) + ).toEqual('Yesterday'); + }); +}); diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json index e56a43a8a..2498c74e5 100644 --- a/app/javascript/widget/i18n/locale/en.json +++ b/app/javascript/widget/i18n/locale/en.json @@ -27,5 +27,7 @@ }, "POWERED_BY": "Powered by Chatwoot", "EMAIL_PLACEHOLDER": "Please enter your email", - "CHAT_PLACEHOLDER": "Type your message" + "CHAT_PLACEHOLDER": "Type your message", + "TODAY": "Today", + "YESTERDAY": "Yesterday" }