feat: Change the date format display in widget (#1528)

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/shared/components/DateSeparator.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="date--separator">
-    {{ date }}
+    {{ formattedDate }}
   </div>
 </template>
 
 <script>
+import { formatDate } from 'shared/helpers/DateHelper';
 export default {
   props: {
     date: {
@@ -12,6 +13,15 @@ export default {
       required: true,
     },
   },
+  computed: {
+    formattedDate() {
+      return formatDate({
+        date: this.date,
+        todayText: this.$t('TODAY'),
+        yesterdayText: this.$t('YESTERDAY'),
+      });
+    },
+  },
 };
 </script>
 

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();

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`] = `
 <div
   class="date--separator"
 >

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;
+};

app/javascript/shared/helpers/specs/DateHelper.sepc.js

@@ -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'
-    );
-  });
-});

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');
+  });
+});

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"
 }