@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

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

@@ -0,0 +1,195 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MappedBill } from '../../../types';
+import styles from './payment.scss';
+import { Stack, TextInput, Button, ButtonSet, InlineLoading, Dropdown } from '@carbon/react';
+import {
+  DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  showNotification,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { Controller } from 'react-hook-form';
+import { addPaymentToBill, usePaymentModes } from '../../../billing.resource';
+import { usePaymentForm } from './use-payment-form';
+import { z } from 'zod';
+import { mutate } from 'swr';
+
+type PaymentWorkspaceProps = DefaultWorkspaceProps & {
+  bill: MappedBill;
+};
+
+const PaymentWorkspace: React.FC<PaymentWorkspaceProps> = ({
+  bill,
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { formMethods, paymentSchema } = usePaymentForm((key, defaultValue) => t(key, defaultValue), bill.balance);
+
+  type PaymentFormData = z.infer<typeof paymentSchema>;
+
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
+
+  const {
+    formState: { isSubmitting, errors },
+    control,
+    handleSubmit,
+  } = formMethods;
+
+  const onSubmit = async (data: PaymentFormData) => {
+    const payment = {
+      instanceType: data.instanceType?.uuid,
+      amount: data.amountTendered,
+      amountTendered: data.amountTendered,
+      attributes: data.attributes
+        ? Object.entries(data.attributes).map(([uuid, value]) => ({
+            attributeType: {
+              uuid,
+            },
+            value,
+          }))
+        : [],
+    };
+
+    try {
+      const response = await addPaymentToBill(bill.uuid, payment);
+      if (response.ok) {
+        showSnackbar({
+          title: t('paymentSaved', 'Payment saved'),
+          kind: 'success',
+          subtitle: t('paymentSavedSuccessfully', 'Payment saved successfully'),
+        });
+      }
+      const url = `/ws/rest/v1/cashier/bill/${bill.uuid}`;
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+      closeWorkspaceWithSavedChanges();
+    } catch (error) {
+      showSnackbar({
+        title: t('errorSavingPayment', 'Error saving payment'),
+        kind: 'error',
+        subtitle: error.message,
+      });
+    }
+  };
+
+  const handleError = (error: any) => {
+    showSnackbar({
+      title: t('errorSavingPayment', 'Error generating payment'),
+      kind: 'error',
+      subtitle: JSON.stringify(error, null, 2),
+    });
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => formMethods.formState.isDirty);
+  }, [formMethods.formState.isDirty, promptBeforeClosing]);
+
+  if (isLoadingPaymentModes) {
+    return <InlineLoading status="active" iconDescription="Loading payment modes" />;
+  }
+
+  const attributeTypes = (formMethods.watch('instanceType')?.attributeTypes as Array<Record<string, string>>) || [];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, handleError)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <Stack className={styles.formStackControl} gap={7}>
+          <ResponsiveWrapper>
+            <Stack gap={4}>
+              <Controller
+                name="instanceType"
+                control={control}
+                render={({ field }) => (
+                  <Dropdown
+                    {...field}
+                    id="instanceType"
+                    titleText={t('instanceType', 'Instance Type')}
+                    label={t('selectInstanceType', 'Select instance type')}
+                    items={paymentModes}
+                    onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                    itemToString={(item) => (item ? item.name : '')}
+                    invalid={!!errors.instanceType}
+                    invalidText={errors.instanceType?.message}
+                  />
+                )}
+              />
+            </Stack>
+          </ResponsiveWrapper>
+          <ResponsiveWrapper>
+            <Controller
+              name="amountTendered"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  id="amountTendered"
+                  labelText={t('amountTendered', 'Amount Tendered')}
+                  placeholder={t('enterAmountTendered', 'Enter amount tendered, max is {{max}}', {
+                    max: bill.balance,
+                  })}
+                  type="number"
+                  step="0.01"
+                  max={bill.balance}
+                  onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                  invalid={!!errors.amountTendered}
+                  invalidText={errors.amountTendered?.message}
+                />
+              )}
+            />
+          </ResponsiveWrapper>
+          <ResponsiveWrapper>
+            {attributeTypes.map((attributeType) => (
+              <Controller
+                key={attributeType.uuid}
+                name={`attributes.${attributeType.uuid}`}
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id={attributeType.uuid}
+                    labelText={`${attributeType.name || 'Attribute'}${
+                      attributeType.required ? t('required', ' (Required)') : ''
+                    }`}
+                    placeholder={attributeType.description || 'Enter value'}
+                    invalid={!!errors.attributes?.[attributeType.uuid] || (attributeType.required && !field.value)}
+                    invalidText={
+                      errors.attributes?.[attributeType.uuid]?.message ||
+                      (attributeType.required && !field.value
+                        ? t('attributeValueRequired', 'Attribute value is required')
+                        : '')
+                    }
+                  />
+                )}
+              />
+            ))}
+          </ResponsiveWrapper>
+        </Stack>
+      </div>
+      <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          disabled={isSubmitting || Object.keys(errors).length > 0}
+          style={{ maxWidth: '50%' }}
+          kind="primary"
+          type="submit">
+          {isSubmitting ? (
+            <span style={{ display: 'flex', justifyItems: 'center' }}>
+              {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </form>
+  );
+};
+
+export default PaymentWorkspace;

package/src/invoice/payments/payment-form/use-payment-form.ts

@@ -0,0 +1,77 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+export const createPaymentSchema = (t: (key: string, defaultValue?: string) => string, billBalance: number) =>
+  z
+    .object({
+      instanceType: z
+        .object({
+          uuid: z.string().min(1, t('instanceTypeUuidRequired', 'Instance type UUID is required')),
+          name: z.string().min(1, t('instanceTypeNameRequired', 'Instance type name is required')),
+          description: z.string().optional(),
+          retired: z.boolean().optional(),
+          retireReason: z.string().nullable().optional(),
+          attributeTypes: z
+            .array(
+              z.object({
+                uuid: z.string().optional(),
+                name: z.string().optional(),
+                description: z.string().optional(),
+                required: z.boolean().optional(),
+              }),
+            )
+            .optional(),
+          sortOrder: z.number().nullable().optional(),
+          resourceVersion: z.string().optional(),
+        })
+        .optional(),
+      amountTendered: z
+        .number()
+        .positive(t('amountTenderedPositive', 'Amount tendered must be positive'))
+        .max(billBalance, t('amountTenderedExceedsBalance', 'Amount tendered cannot exceed bill balance')),
+      attributes: z.record(z.string(), z.string()).optional(),
+    })
+    .refine(
+      (data) => {
+        // Check if all required attributes have values
+        if (!data.instanceType?.attributeTypes) {
+          return true;
+        }
+
+        const requiredAttributeTypes = data.instanceType.attributeTypes.filter((attr) => attr.required && attr.uuid);
+        const providedAttributes = data.attributes || {};
+
+        for (const requiredAttr of requiredAttributeTypes) {
+          if (!providedAttributes[requiredAttr.uuid] || providedAttributes[requiredAttr.uuid].trim() === '') {
+            return false;
+          }
+        }
+
+        return true;
+      },
+      {
+        message: t('requiredAttributesMissing', 'Required attributes are missing'),
+        path: ['attributes'],
+      },
+    );
+
+export const usePaymentForm = (t: (key: string, defaultValue?: string) => string, billBalance: number) => {
+  const paymentSchema = createPaymentSchema(t, billBalance);
+
+  type PaymentFormData = z.infer<typeof paymentSchema>;
+
+  const formMethods = useForm<PaymentFormData>({
+    resolver: zodResolver(paymentSchema),
+    defaultValues: {
+      instanceType: undefined,
+      amountTendered: undefined,
+      attributes: {},
+    },
+  });
+
+  return {
+    formMethods,
+    paymentSchema,
+  };
+};

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 { MappedBill } from '../../../types';
+import { formatDate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useCurrencyFormatting } from '../../../helpers/currency';
+
+type PaymentHistoryProps = {
+  bill: MappedBill;
+};
+
+const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const headers = [
+    {
+      key: 'dateCreated',
+      header: t('dateOfPayment', 'Date of payment'),
+    },
+    {
+      key: 'amountTendered',
+      header: t('amountTendered', 'Amount tendered'),
+    },
+    {
+      key: 'paymentMethod',
+      header: t('paymentMethod', 'Payment method'),
+    },
+  ];
+  const rows = bill?.payments?.map((payment) => ({
+    id: `${payment.uuid}`,
+    dateCreated: formatDate(new Date(payment.dateCreated)),
+    amountTendered: formatCurrency(payment.amountTendered),
+    amount: formatCurrency(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-status-ckecker.modal.tsx

@@ -0,0 +1,136 @@
+import {
+  Button,
+  ButtonSet,
+  ContentSwitcher,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Switch,
+  TextInput,
+} from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
+import { processBillPayment, usePaymentModes } from '../../billing.resource';
+import { BillingConfig } from '../../config-schema';
+import { useClockInStatus } from '../../bill-administration/payment-points/use-clock-in-status';
+import { LineItem, MappedBill } from '../../types';
+import { checkPaymentStatus } from './payments.resource';
+import styles from './payments.scss';
+import { createPaymentPayload } from './utils';
+type PaymentStatusCheckerModalProps = {
+  onClose: () => void;
+  paymentMade?: boolean;
+  onPaymentMadestatusChange?: (paid: boolean) => void;
+  bill: MappedBill;
+  selectedLineItems: Array<LineItem>;
+};
+const PaymentStatusCheckerModal: React.FC<PaymentStatusCheckerModalProps> = ({
+  onClose,
+  onPaymentMadestatusChange,
+  paymentMade,
+  bill,
+  selectedLineItems,
+}) => {
+  const { t } = useTranslation();
+  const [transactionid, setTransactionid] = useState<string>();
+  const { globalActiveSheet } = useClockInStatus();
+  const { mobileMoneyPaymentModeUUID } = useConfig<BillingConfig>();
+  const { paymentModes, isLoading } = usePaymentModes();
+  const [checking, setChecking] = useState(false);
+  const mobilemoneypaymentMethod = useMemo(
+    () => paymentModes.find((mode) => mode.uuid === mobileMoneyPaymentModeUUID),
+    [paymentModes, mobileMoneyPaymentModeUUID],
+  );
+
+  const handleCheckPaymentStatus = useCallback(async () => {
+    try {
+      setChecking(true);
+      const res = await checkPaymentStatus(transactionid);
+      if (res?.data?.success) {
+        const totalAmountTendered = Number(res.data.data.TransAmount) || 0;
+        const amountDue = Number(bill.totalAmount) - (Number(bill.tenderedAmount) + Number(totalAmountTendered));
+        const paymentPayload = createPaymentPayload(
+          bill,
+          bill.patientUuid,
+          [{ referenceCode: transactionid, amount: totalAmountTendered, method: mobilemoneypaymentMethod }],
+          amountDue,
+          selectedLineItems,
+          globalActiveSheet,
+        );
+        await processBillPayment(paymentPayload, bill.uuid);
+        showSnackbar({
+          title: t('success', 'Success'),
+          kind: 'success',
+          subtitle: t('paymentReceived', 'Payment received'),
+        });
+        const url = `/ws/rest/v1/cashier/bill/${bill.uuid}`;
+        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+        onClose?.();
+      } else {
+        showSnackbar({
+          title: t('paymentFailure', 'Payment Failure'),
+          kind: 'error',
+          subtitle: res?.data?.message || t('paymentNotSettled', 'Payment not settled'),
+        });
+      }
+    } catch (error: any) {
+      showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: error?.message });
+    } finally {
+      setChecking(false);
+    }
+  }, [transactionid, selectedLineItems, onClose, mobilemoneypaymentMethod, globalActiveSheet, bill, t]);
+  return (
+    <React.Fragment>
+      <ModalHeader className={styles.heading} closeModal={onClose}>
+        {t('checkpaymentStatus', 'Check payment status')}
+      </ModalHeader>
+      <ModalBody>
+        <ContentSwitcher
+          size="md"
+          selectedIndex={paymentMade ? 1 : 0}
+          onChange={({ name }) => {
+            onPaymentMadestatusChange?.(name === 'paymentMade');
+          }}>
+          <Switch name="paymentNotMade" text={t('paymentNotMade', 'Payment not made')} />
+          <Switch name="paymentMade" text={t('paymentMade', 'Payments already made')} />
+        </ContentSwitcher>
+        <TextInput
+          value={transactionid}
+          id="text-input-1"
+          labelText={t('transactionId', 'Transaction Id')}
+          placeholder={t('exampletransactionId', 'e.g TRMEWECEDD')}
+          size="md"
+          type="text"
+          helperText={t('mpesaTransactionId', 'Mpesa transaction Id')}
+          onChange={({ target: { value } }) => setTransactionid(value)}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={onClose} className={styles.button}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            kind="primary"
+            disabled={!transactionid?.length || isLoading || checking}
+            onClick={handleCheckPaymentStatus}
+            className={styles.button}>
+            {isLoading || checking ? (
+              <InlineLoading
+                description={t('checkingPaymentStatus', 'Check payment status') + '...'}
+                iconDescription={t('loading', 'Loading')}
+              />
+            ) : (
+              t('check', 'Check')
+            )}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default PaymentStatusCheckerModal;