Include year in older dates for contact chat history

src/display/TembaDate.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { Store } from '../store/Store';
 import { DateTime } from 'luxon';
+import { timeSince } from '../utils';
 
 export const Display = {
   date: DateTime.DATE_SHORT,
@@ -97,7 +98,7 @@ export class TembaDate extends RapidElement {
             >just now</span
           >`;
         }
-        formatted = this.store.getShortDuration(this.datetime);
+        formatted = timeSince(this.datetime.toJSDate());
       } else if (this.display === Display.countdown) {
         formatted = this.store.getCountdown(this.datetime);
       } else if (this.display === Display.day) {

test/temba-date.test.ts

@@ -7,7 +7,8 @@ import {
   loadStore,
   mockNow
 } from './utils.test';
-import { SinonStub } from 'sinon';
+import { SinonStub, stub } from 'sinon';
+import { stubbable } from '../src/utils';
 
 const TAG = 'temba-date';
 
@@ -18,13 +19,18 @@ export const getDate = async (attrs: any = {}) => {
 
 describe('temba-date', () => {
   let mockedNow: SinonStub;
+  let stubbableStub: SinonStub;
+  const baseDate = new Date('2022-12-02T21:00:00.000000');
+
   beforeEach(() => {
     mockedNow = mockNow('2022-12-02T21:00:00.000000');
+    stubbableStub = stub(stubbable, 'getCurrentDate').returns(baseDate);
     loadStore();
   });
 
   afterEach(() => {
     mockedNow.restore();
+    stubbableStub.restore();
   });
 
   it('renders default', async () => {
@@ -47,7 +53,43 @@ describe('temba-date', () => {
     ).innerText;
 
     await assertScreenshot('date/duration', getClip(date));
-    expect(dateString).to.equal('44 years ago');
+    expect(dateString).to.equal('18 Nov 1978');
+  });
+
+  it('renders duration with recent date showing relative time', async () => {
+    const date = await getDate({
+      value: '2022-12-02T20:00:00.000000', // 1 hour ago from mocked "now" (21:00)
+      display: 'duration'
+    });
+    const dateString = (
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
+    ).innerText;
+
+    expect(dateString).to.equal('1h');
+  });
+
+  it('renders duration with date from different year', async () => {
+    const date = await getDate({
+      value: '2021-06-15T10:00:00.000000', // More than 6 months ago from mocked Dec 2022
+      display: 'duration'
+    });
+    const dateString = (
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
+    ).innerText;
+
+    expect(dateString).to.equal('15 Jun 2021');
+  });
+
+  it('renders duration with date from same year but more than 6 months', async () => {
+    const date = await getDate({
+      value: '2022-01-15T10:00:00.000000', // More than 6 months ago but same year
+      display: 'duration'
+    });
+    const dateString = (
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
+    ).innerText;
+
+    expect(dateString).to.equal('15 Jan'); // Should not show year for same year
   });
 
   it('renders datetime', async () => {