feat: Update inbox card design

app/javascript/dashboard/helper/directives/resize.js

@@ -0,0 +1,41 @@
+import { debounce } from '@chatwoot/utils';
+
+const RESIZE_OBSERVER_DEBOUNCE_TIME = 100;
+
+function createResizeObserver(el, binding) {
+  const { value } = binding;
+  const observer = new ResizeObserver(
+    debounce(entries => {
+      const entry = entries[0];
+      if (entry && value && typeof value === 'function') {
+        value(entry);
+      }
+    }, RESIZE_OBSERVER_DEBOUNCE_TIME)
+  );
+
+  el.cwResizeObserver = observer;
+  observer.observe(el);
+}
+
+function destroyResizeObserver(el) {
+  if (el.cwResizeObserver) {
+    el.cwResizeObserver.unobserve(el);
+    el.cwResizeObserver.disconnect();
+    delete el.cwResizeObserver;
+  }
+}
+
+export default {
+  bind(el, binding) {
+    createResizeObserver(el, binding);
+  },
+  update(el, binding) {
+    if (binding.oldValue !== binding.value) {
+      destroyResizeObserver(el);
+      createResizeObserver(el, binding);
+    }
+  },
+  unbind(el) {
+    destroyResizeObserver(el);
+  },
+};

app/javascript/dashboard/helper/snoozeHelpers.js

@@ -66,3 +66,29 @@ export const snoozedReopenTime = snoozedUntil => {
   }
   return snoozedUntil ? format(date, 'd MMM, h.mmaaa') : null;
 };
+export const snoozedReopenTimeToTimestamp = snoozedUntil => {
+  return snoozedUntil ? getUnixTime(new Date(snoozedUntil)) : null;
+};
+export const shortenSnoozeTime = snoozedUntil => {
+  if (!snoozedUntil) {
+    return null;
+  }
+  const unitMap = {
+    minutes: 'm',
+    minute: 'm',
+    hours: 'h',
+    hour: 'h',
+    days: 'd',
+    day: 'd',
+    months: 'mo',
+    month: 'mo',
+    years: 'y',
+    year: 'y',
+  };
+  const shortenTime = snoozedUntil.replace(
+    /\s(minute|hour|day|month|year)s?\b/gi,
+    (match, unit) => unitMap[unit.toLowerCase()] || match
+  );
+
+  return shortenTime;
+};

app/javascript/dashboard/helper/specs/directives/resize.spec.js

@@ -0,0 +1,78 @@
+import resize from '../../directives/resize';
+
+class ResizeObserverMock {
+  // eslint-disable-next-line class-methods-use-this
+  observe() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  unobserve() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnect() {}
+}
+
+describe('resize directive', () => {
+  let el;
+  let binding;
+  let observer;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+    observer = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+    window.ResizeObserver = ResizeObserverMock;
+    jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create ResizeObserver on bind', () => {
+    resize.bind(el, binding);
+
+    expect(ResizeObserver).toHaveBeenCalled();
+    expect(observer.observe).toHaveBeenCalledWith(el);
+  });
+
+  it('should call callback on observer callback', () => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+
+    resize.bind(el, binding);
+
+    const entries = [{ contentRect: { width: 100, height: 100 } }];
+    const callback = binding.value;
+    callback(entries[0]);
+
+    expect(binding.value).toHaveBeenCalledWith(entries[0]);
+  });
+
+  it('should destroy and recreate observer on update', () => {
+    resize.bind(el, binding);
+
+    resize.update(el, { ...binding, oldValue: 'old' });
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+    expect(ResizeObserver).toHaveBeenCalledTimes(2);
+    expect(observer.observe).toHaveBeenCalledTimes(2);
+  });
+
+  it('should destroy observer on unbind', () => {
+    resize.bind(el, binding);
+
+    resize.unbind(el);
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+  });
+});

app/javascript/dashboard/helper/specs/snoozeHelpers.spec.js

@@ -5,6 +5,8 @@ import {
   findStartOfNextMonth,
   findNextDay,
   setHoursToNine,
+  snoozedReopenTimeToTimestamp,
+  shortenSnoozeTime,
 } from '../snoozeHelpers';
 
 describe('#Snooze Helpers', () => {
@@ -107,4 +109,41 @@ describe('#Snooze Helpers', () => {
       expect(findNextDay(today)).toEqual(nextDay);
     });
   });
+
+  describe('snoozedReopenTimeToTimestamp', () => {
+    it('should return timestamp if snoozedUntil is not nil', () => {
+      expect(snoozedReopenTimeToTimestamp('2023-06-07T09:00:00.000Z')).toEqual(
+        1686128400
+      );
+    });
+    it('should return nil if snoozedUntil is nil', () => {
+      expect(snoozedReopenTimeToTimestamp(null)).toEqual(null);
+    });
+  });
+
+  describe('shortenSnoozeTime', () => {
+    it('should return shortened time if snoozedUntil is not nil and day is passed', () => {
+      expect(shortenSnoozeTime('1 day')).toEqual('1d');
+    });
+
+    it('should return shortened time if snoozedUntil is not nil and month is passed', () => {
+      expect(shortenSnoozeTime('1 month')).toEqual('1mo');
+    });
+
+    it('should return shortened time if snoozedUntil is not nil and year is passed', () => {
+      expect(shortenSnoozeTime('1 year')).toEqual('1y');
+    });
+
+    it('should return shortened time if snoozedUntil is not nil and hour is passed', () => {
+      expect(shortenSnoozeTime('1 hour')).toEqual('1h');
+    });
+
+    it('should return shortened time if snoozedUntil is not nil and minutes is passed', () => {
+      expect(shortenSnoozeTime('1 minutes')).toEqual('1m');
+    });
+
+    it('should return nil if snoozedUntil is nil', () => {
+      expect(shortenSnoozeTime(null)).toEqual(null);
+    });
+  });
 });

app/javascript/dashboard/i18n/locale/en/inbox.json

@@ -8,24 +8,20 @@
       "NO_NOTIFICATIONS": "No notifications",
       "NOTE": "Notifications from all subscribed inboxes",
       "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
-      "SNOOZED_UNTIL": "Snoozed until",
-      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
-      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
+      "SNOOZED_UNTIL": "We’ll remind you after {time}",
+      "SNOOZED_ENDS": "We won’t notify you again"
     },
     "ACTION_HEADER": {
       "SNOOZE": "Snooze notification",
       "DELETE": "Delete notification",
       "BACK": "Back"
     },
     "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",
-      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
-      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
-      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
+      "CONVERSATION_MENTION": "Mention",
+      "CONVERSATION_ASSIGNMENT": "Assigned to you",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA breach",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA breach",
+      "SLA_MISSED_RESOLUTION": "SLA breach"
     },
     "MENU_ITEM": {
       "MARK_AS_READ": "Mark as read",

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full md:w-[calc(100%-360px)]">
+  <div class="h-full flex-1 min-w-0">
     <div v-if="showEmptyState" class="flex w-full h-full">
       <inbox-empty-state
         :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"