@openmrs/esm-billing-app 1.1.1 → 1.1.2-pre.1

package/src/billing-form/billing-form.resource.test.ts

@@ -0,0 +1,87 @@
+import { renderHook } from '@testing-library/react';
+import useSWR from 'swr';
+import { useLastVisitInfo } from './billing-form.resource';
+
+jest.mock('swr');
+const mockUseSWR = jest.mocked(useSWR);
+
+// Pin "now" so diffDays calculations are deterministic
+const FIXED_NOW = new Date('2026-01-10T12:00:00Z').getTime();
+
+describe('useLastVisitInfo', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(FIXED_NOW);
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns null lastVisitInfo when there is no visit data yet', () => {
+    mockUseSWR.mockReturnValue({ data: undefined, isLoading: false, error: undefined } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.lastVisitInfo).toBeNull();
+  });
+
+  it('returns null lastVisitInfo when the visits list is empty', () => {
+    mockUseSWR.mockReturnValue({ data: { data: { results: [] } }, isLoading: false, error: undefined } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.lastVisitInfo).toBeNull();
+  });
+
+  it('forwards isLoading and error from SWR', () => {
+    const error = new Error('Network error');
+    mockUseSWR.mockReturnValue({ data: undefined, isLoading: true, error } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(error);
+  });
+
+  it('returns correct visit info for a visit 2 days ago', () => {
+    const twoDaysAgo = new Date(FIXED_NOW - 2 * 24 * 60 * 60 * 1000).toISOString();
+    mockUseSWR.mockReturnValue({
+      data: {
+        data: {
+          results: [
+            {
+              startDatetime: twoDaysAgo,
+              visitType: { display: 'Outpatient' },
+              location: { display: 'Main Clinic' },
+            },
+          ],
+        },
+      },
+      isLoading: false,
+      error: undefined,
+    } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.lastVisitInfo).toEqual({ diffDays: 2, type: 'Outpatient', location: 'Main Clinic' });
+  });
+
+  it('returns diffDays of 1 for a visit exactly 1 day ago', () => {
+    const oneDayAgo = new Date(FIXED_NOW - 1 * 24 * 60 * 60 * 1000).toISOString();
+    mockUseSWR.mockReturnValue({
+      data: {
+        data: {
+          results: [{ startDatetime: oneDayAgo, visitType: { display: 'Inpatient' }, location: { display: 'Ward A' } }],
+        },
+      },
+      isLoading: false,
+      error: undefined,
+    } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.lastVisitInfo?.diffDays).toBe(1);
+  });
+
+  it('falls back to empty strings when visitType and location are absent', () => {
+    const oneDayAgo = new Date(FIXED_NOW - 1 * 24 * 60 * 60 * 1000).toISOString();
+    mockUseSWR.mockReturnValue({
+      data: { data: { results: [{ startDatetime: oneDayAgo, visitType: null, location: null }] } },
+      isLoading: false,
+      error: undefined,
+    } as any);
+    const { result } = renderHook(() => useLastVisitInfo('patient-uuid'));
+    expect(result.current.lastVisitInfo).toEqual({ diffDays: 1, type: '', location: '' });
+  });
+});

package/src/billing-form/billing-form.resource.ts

@@ -1,7 +1,40 @@
+import { useMemo } from 'react';
 import useSWR from 'swr';
 import { type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { apiBasePath } from '../constants';
 
+type LastVisitInfo = {
+  diffDays: number;
+  type: string;
+  location: string;
+};
+
+export const useLastVisitInfo = (
+  patientUuid: string,
+): { lastVisitInfo: LastVisitInfo | null; isLoading: boolean; error: any } => {
+  const url = `${restBaseUrl}/visit?patient=${patientUuid}&v=default&limit=1&sort=desc:startDatetime`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<any> } }>(patientUuid ? url : null, openmrsFetch);
+
+  const lastVisitInfo = useMemo((): LastVisitInfo | null => {
+    const results = data?.data?.results;
+    if (!results?.length) return null;
+
+    const visit = results[0];
+    const visitDate = new Date(visit.startDatetime);
+    if (isNaN(visitDate.getTime())) return null;
+    const diffTime = Math.abs(Date.now() - visitDate.getTime());
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+    return {
+      diffDays,
+      type: visit.visitType?.display ?? '',
+      location: visit.location?.display ?? '',
+    };
+  }, [data]);
+
+  return { lastVisitInfo, isLoading, error };
+};
+
 export const useBillableItems = () => {
   const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price,paymentMode))`;
   const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);

package/src/billing-form/billing-form.scss

@@ -1,4 +1,5 @@
 @use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tablet {
@@ -89,15 +90,61 @@
   margin-top: layout.$spacing-05;
 }
 
-.selectedItemsContainer {
-  margin-top: layout.$spacing-05;
-  
-  h4 {
-    margin-bottom: layout.$spacing-05;
+.existingItemsContainer {
+  padding: layout.$spacing-05;
+  background-color: $ui-01;
+  border: 1px solid $ui-03;
+  border-radius: layout.$spacing-02;
+
+  .existingItemRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: layout.$spacing-03 0;
+    border-bottom: 1px solid $ui-03;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    .existingItemName {
+      @include type.type-style('body-compact-01');
+      flex: 1;
+      color: $text-02;
+    }
+
+    .existingItemDetail {
+      @include type.type-style('body-compact-01');
+      flex: 0 0 auto;
+      color: $text-02;
+      margin: 0 layout.$spacing-05;
+    }
+
+    .existingItemTotal {
+      @include type.type-style('heading-compact-01');
+      flex: 0 0 auto;
+      color: $text-02;
+    }
+  }
+
+  .existingItemsSubtotal {
+    @include type.type-style('body-compact-01');
+    text-align: right;
+    padding-top: layout.$spacing-04;
+    border-top: 1px solid $ui-03;
+    margin-top: layout.$spacing-03;
     color: $text-02;
-    font-size: 1rem;
-    font-weight: 600;
   }
+}
+
+.sectionHeading {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-04;
+  color: $text-02;
+}
+
+.selectedItemsContainer {
+  margin-top: layout.$spacing-05;
   
   .itemCard {
     border: 1px solid $ui-03;