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