@openmrs/esm-billing-app 1.0.1-pre.14

package/src/invoice/payments/payment-form/payment-form.component.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TrashCan, Add } from '@carbon/react/icons';
+import { Button, Dropdown, NumberInputSkeleton, TextInput, NumberInput } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { type PaymentFormValue } from '../payments.component';
+import { usePaymentModes } from '../payment.resource';
+import styles from './payment-form.scss';
+
+type PaymentFormProps = { disablePayment: boolean; amountDue: number };
+
+const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
+
+const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue }) => {
+  const { t } = useTranslation();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<PaymentFormValue>();
+  const { paymentModes, isLoading, error } = usePaymentModes();
+  const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+
+  const handleAppendPaymentMode = useCallback(() => append(DEFAULT_PAYMENT), [append]);
+  const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
+
+  if (isLoading) {
+    return <NumberInputSkeleton />;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorPaymentContainer}>
+        <ErrorState headerTitle={t('errorLoadingPaymentModes', 'Payment modes error')} error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {fields.map((field, index) => (
+        <div key={field.id} className={styles.paymentMethodContainer}>
+          <Controller
+            control={control}
+            name={`payment.${index}.method`}
+            render={({ field }) => (
+              <Dropdown
+                id="paymentMethod"
+                onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                titleText={t('paymentMethod', 'Payment method')}
+                label={t('selectPaymentMethod', 'Select payment method')}
+                items={paymentModes}
+                itemToString={(item) => (item ? item.name : '')}
+                invalid={!!errors?.payment?.[index]?.method}
+                invalidText={errors?.payment?.[index]?.method?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name={`payment.${index}.amount`}
+            render={({ field }) => (
+              <NumberInput
+                id="paymentAmount"
+                {...field}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+                invalid={!!errors?.payment?.[index]?.amount}
+                invalidText={errors?.payment?.[index]?.amount?.message}
+                label={t('amount', 'Amount')}
+                placeholder={t('enterAmount', 'Enter amount')}
+              />
+            )}
+          />
+          <Controller
+            name={`payment.${index}.referenceCode`}
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="paymentReferenceCode"
+                {...field}
+                labelText={t('referenceNumber', 'Reference number')}
+                placeholder={t('enterReferenceNumber', 'Enter ref. number')}
+                type="text"
+              />
+            )}
+          />
+          <div className={styles.removeButtonContainer}>
+            <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+          </div>
+        </div>
+      ))}
+      <Button
+        disabled={disablePayment}
+        size="md"
+        onClick={handleAppendPaymentMode}
+        className={styles.paymentButtons}
+        renderIcon={(props) => <Add size={24} {...props} />}
+        iconDescription="Add">
+        {t('addPaymentOptions', 'Add payment option')}
+      </Button>
+    </div>
+  );
+};
+
+export default PaymentForm;

package/src/invoice/payments/payment-form/payment-form.scss

@@ -0,0 +1,54 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: 1rem;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01;
+  padding: layout.$layout-01;
+  width: 70%;
+  border-right: 1px solid colors.$cool-gray-40;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  align-items: flex-start;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+  width: 100%;
+}
+
+.paymentTotals {
+  margin-top: layout.$spacing-01;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+}
+
+.errorPaymentContainer {
+  margin: layout.$spacing-04;
+  min-height: layout.$spacing-09;
+}
+
+.removeButtonContainer {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+  margin-left: layout.$spacing-07;
+}
+
+.removeButton {
+  color: colors.$red-60;
+}

package/src/invoice/payments/payment-history/payment-history.component.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { type MappedBill } from '../../../types';
+import { formatDate } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../../../helpers';
+
+type PaymentHistoryProps = {
+  bill: MappedBill;
+};
+
+const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const headers = [
+    {
+      key: 'dateCreated',
+      header: 'Date of payment',
+    },
+    {
+      key: 'amount',
+      header: 'Bill amount',
+    },
+    {
+      key: 'amountTendered',
+      header: 'Amount tendered',
+    },
+    {
+      key: 'paymentMethod',
+      header: 'Payment method',
+    },
+  ];
+  const rows = bill?.payments?.map((payment) => ({
+    id: `${payment.uuid}`,
+    dateCreated: formatDate(new Date(payment.dateCreated)),
+    amountTendered: convertToCurrency(payment.amountTendered),
+    amount: convertToCurrency(payment.amount),
+    paymentMethod: payment.instanceType.name,
+  }));
+
+  if (Object.values(bill?.payments ?? {}).length === 0) {
+    return;
+  }
+
+  return (
+    <DataTable size="sm" rows={rows} headers={headers}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </DataTable>
+  );
+};
+
+export default PaymentHistory;

package/src/invoice/payments/payment.resource.ts

@@ -0,0 +1,43 @@
+import useSWR from 'swr';
+import { type Visit, openmrsFetch } from '@openmrs/esm-framework';
+
+type PaymentMethod = {
+  uuid: string;
+  description: string;
+  name: string;
+  retired: boolean;
+};
+
+const swrOption = {
+  errorRetryCount: 2,
+};
+
+export const usePaymentModes = () => {
+  const url = `/ws/rest/v1/cashier/paymentMode`;
+  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<PaymentMethod> } }>(
+    url,
+    openmrsFetch,
+    swrOption,
+  );
+
+  return {
+    paymentModes: data?.data?.results ?? [],
+    isLoading,
+    mutate,
+    error,
+  };
+};
+
+export const updateBillVisitAttribute = async (visit: Visit) => {
+  const { uuid, attributes } = visit;
+  const pendingPaymentAtrributeUuid = attributes?.find(
+    (attribute) => attribute.attributeType.uuid === '919b51c9-8e2e-468f-8354-181bf3e55786',
+  )?.uuid;
+  return openmrsFetch(`/ws/rest/v1/visit/${uuid}/attribute/${pendingPaymentAtrributeUuid}`, {
+    body: { value: false },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+};

package/src/invoice/payments/payments.component.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { navigate, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { type LineItem, type MappedBill } from '../../types';
+import { convertToCurrency } from '../../helpers';
+import { createPaymentPayload } from './utils';
+import { processBillPayment } from '../../billing.resource';
+import { InvoiceBreakDown } from './invoice-breakdown/invoice-breakdown.component';
+import PaymentHistory from './payment-history/payment-history.component';
+import PaymentForm from './payment-form/payment-form.component';
+import { updateBillVisitAttribute } from './payment.resource';
+import styles from './payments.scss';
+
+type PaymentProps = {
+  bill: MappedBill;
+  selectedLineItems: Array<LineItem>;
+};
+
+export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
+
+export type PaymentFormValue = {
+  payment: Array<Payment>;
+};
+
+const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
+  const { t } = useTranslation();
+  const paymentSchema = z.object({
+    method: z.string().refine((value) => !!value, 'Payment method is required'),
+    amount: z
+      .number()
+      .lte(bill.totalAmount - bill.tenderedAmount, { message: 'Amount paid should not be greater than amount due' }),
+    referenceCode: z.union([z.number(), z.string()]).optional(),
+  });
+
+  const paymentFormSchema = z.object({ payment: z.array(paymentSchema) });
+  const { currentVisit } = useVisit(bill?.patientUuid);
+  const methods = useForm<PaymentFormValue>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(paymentFormSchema),
+  });
+
+  const formValues = useWatch({
+    name: 'payment',
+    control: methods.control,
+  });
+
+  const hasMoreThanOneLineItem = bill?.lineItems?.length > 1;
+
+  const computedTotal = hasMoreThanOneLineItem ? computeTotalPrice(selectedLineItems) : bill.totalAmount ?? 0;
+
+  const totalAmountTendered = formValues?.reduce((curr: number, prev) => curr + Number(prev.amount) ?? 0, 0) ?? 0;
+  const amountDue = Number(computedTotal) - (Number(bill.tenderedAmount) + Number(totalAmountTendered));
+
+  const handleNavigateToBillingDashboard = () =>
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'home/billing',
+    });
+
+  const handleProcessPayment = () => {
+    const paymentPayload = createPaymentPayload(bill, bill.patientUuid, formValues, amountDue);
+    processBillPayment(paymentPayload, bill.uuid).then(
+      () => {
+        showSnackbar({
+          title: t('billPayment', 'Bill payment'),
+          subtitle: 'Bill payment processing has been successful',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+        updateBillVisitAttribute(currentVisit);
+        handleNavigateToBillingDashboard();
+      },
+      (error) => {
+        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error });
+      },
+    );
+  };
+
+  const amountDueDisplay = (amount: number) => (amount < 0 ? 'Client balance' : 'Amount Due');
+
+  return (
+    <FormProvider {...methods}>
+      <div className={styles.wrapper}>
+        <div className={styles.paymentContainer}>
+          <CardHeader title={t('payments', 'Payments')}>
+            <span></span>
+          </CardHeader>
+          <div>
+            {bill && <PaymentHistory bill={bill} />}
+            <PaymentForm disablePayment={amountDue <= 0} amountDue={amountDue} />
+          </div>
+        </div>
+        <div className={styles.divider} />
+        <div className={styles.paymentTotals}>
+          <InvoiceBreakDown label={t('totalAmount', 'Total Amount')} value={convertToCurrency(computedTotal)} />
+          <InvoiceBreakDown
+            label={t('totalTendered', 'Total Tendered')}
+            value={convertToCurrency(bill.tenderedAmount + totalAmountTendered ?? 0)}
+          />
+          <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
+          <InvoiceBreakDown
+            hasBalance={amountDue < 0 ?? false}
+            label={amountDueDisplay(amountDue)}
+            value={convertToCurrency(amountDue ?? 0)}
+          />
+          <div className={styles.processPayments}>
+            <Button onClick={handleNavigateToBillingDashboard} kind="secondary">
+              {t('discard', 'Discard')}
+            </Button>
+            <Button onClick={() => handleProcessPayment()} disabled={!formValues?.length || !methods.formState.isValid}>
+              {t('processPayment', 'Process Payment')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </FormProvider>
+  );
+};
+
+const computeTotalPrice = (items) => {
+  if (items && !items.length) {
+    return 0;
+  }
+
+  let totalPrice = 0;
+
+  items?.forEach((item) => {
+    const { price, quantity } = item;
+    totalPrice += price * quantity;
+  });
+
+  return totalPrice;
+};
+
+export default Payments;

package/src/invoice/payments/payments.scss

@@ -0,0 +1,46 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.wrapper {
+  display: flex;
+}
+
+.divider {
+  background: colors.$gray-20;
+  height: 12rem;
+  margin: 2rem;
+  width: 1px;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01 0;
+  padding: layout.$layout-01;
+  width: 70%;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  align-items: flex-end;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+}
+
+.paymentTotals {
+  margin: layout.$spacing-05 0;
+  padding: layout.$spacing-07 layout.$spacing-05;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+  border-top: 1px solid colors.$cool-gray-40;
+}

package/src/invoice/payments/utils.ts

@@ -0,0 +1,30 @@
+import { type MappedBill } from '../../types';
+import { type Payment } from './payments.component';
+
+export const createPaymentPayload = (
+  bill: MappedBill,
+  patientUuid: string,
+  formValues: Array<Payment>,
+  amountDue: number,
+) => {
+  const { cashier } = bill;
+  const totalAmount = bill?.totalAmount;
+  const paymentStatus = amountDue <= 0 ? 'PAID' : 'PENDING';
+
+  const billPayment = formValues.map((formValue) => ({
+    amount: parseFloat(totalAmount.toFixed(2)),
+    amountTendered: parseFloat(Number(formValue.amount).toFixed(2)),
+    attributes: [],
+    instanceType: formValue.method,
+  }));
+  const processedPayment = {
+    cashPoint: bill.cashPointUuid,
+    cashier: cashier.uuid,
+    lineItems: bill.lineItems.map((lineItem) => ({ ...lineItem, billableService: 'service', paymentStatus: 'PAID' })),
+    payments: [...billPayment],
+    patient: patientUuid,
+    status: paymentStatus,
+  };
+
+  return processedPayment;
+};

package/src/invoice/payments/visit-tags/visit-attribute.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { usePatientPaymentInfo } from '../../../billing.resource';
+
+type VisitAttributeTagsProps = { patientUuid: string };
+
+const VisitAttributeTags: React.FC<VisitAttributeTagsProps> = ({ patientUuid }) => {
+  const patientBillingInfo = usePatientPaymentInfo(patientUuid);
+  return (
+    <div>
+      {patientBillingInfo?.map((tag) => (
+        <React.Fragment key={tag.name}>
+          <Tag type="gray">{tag.name}</Tag>
+          <Tag type="cool-gray">{tag.value}</Tag>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default VisitAttributeTags;

package/src/invoice/printable-invoice/print-receipt.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './print-receipt.scss';
+
+interface PrintReceiptProps {
+  billId: number;
+}
+const PrintReceipt: React.FC<PrintReceiptProps> = ({ billId }) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      kind="secondary"
+      className={styles.button}
+      size="md"
+      renderIcon={(props) => <Printer size={24} {...props} />}>
+      <ConfigurableLink
+        className={styles.configurableLink}
+        to={`\${openmrsBase}/ws/rest/v1/cashier/receipt?billId=${billId}`}>
+        {t('printReceipt', 'Print receipt')}
+      </ConfigurableLink>{' '}
+    </Button>
+  );
+};
+
+export default PrintReceipt;

package/src/invoice/printable-invoice/print-receipt.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.configurableLink {
+  color: colors.$white;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+.button {
+  margin-left: layout.$spacing-04;
+}

package/src/invoice/printable-invoice/printable-footer.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDefaultFacility } from '../../billing.resource';
+import styles from './printable-footer.scss';
+
+const PrintableFooter = () => {
+  const { data, isLoading } = useDefaultFacility();
+
+  if (isLoading) {
+    return <div>--</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <p className={styles.itemFooter}>{data?.display}</p>
+    </div>
+  );
+};
+
+export default PrintableFooter;

package/src/invoice/printable-invoice/printable-footer.scss

@@ -0,0 +1,17 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+}
+
+.itemFooter {
+  padding: 1rem;
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+}

package/src/invoice/printable-invoice/printable-footer.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { useDefaultFacility } from '../../billing.resource';
+import PrintableFooter from './printable-footer.component';
+
+const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
+
+jest.mock('../../billing.resource', () => ({
+  useDefaultFacility: jest.fn(),
+}));
+
+describe('PrintableFooter', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render PrintableFooter component', () => {
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableFooter />);
+    const footer = screen.getByText('MTRH');
+    expect(footer).toBeInTheDocument();
+  });
+
+  test('should show placeholder text when facility isLoading', () => {
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: true });
+    render(<PrintableFooter />);
+    const footer = screen.getByText('--');
+    expect(footer).toBeInTheDocument();
+  });
+});