@kenyaemr/esm-billing-app 5.4.2-pre.2301 → 5.4.2-pre.2305

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

@@ -0,0 +1,33 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.paymentMethods {
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$spacing-05;
+}
+
+.formStackControl {
+  row-gap: layout.$layout-01;
+}

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(t, 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/routes.json

@@ -279,6 +279,12 @@
       "component": "depositTransactionWorkspace",
       "title": "Deposit Transaction",
       "type": "other-form"
+    },
+    {
+      "name": "payment-workspace",
+      "component": "paymentWorkspace",
+      "title": "Payment Workspace",
+      "type": "other-form"
     }
   ],
   "modals": [

package/translations/am.json

@@ -6,6 +6,7 @@
   "addBill": "የሂሳብ ዕቃ(ዎች) ይጨምሩ",
   "addCommodityChargeItem": "የክፍያ ዕቃ ይጨምሩ",
   "addDeposit": "ተቀማጭ ገንዘብ ይጨምሩ",
+  "additionalPayment": "ተቀማጭ ክፍያ",
   "addPaymentOptions": "የክፍያ አማራጭ ይጨምሩ",
   "addSchema": "ስኬማ ይጨምሩ",
   "addServiceChargeItem": "የክፍያ አገልግሎት ይጨምሩ",

package/translations/en.json

@@ -6,6 +6,7 @@
   "addBill": "Add bill item(s)",
   "addCommodityChargeItem": "Add charge item",
   "addDeposit": "Add deposit",
+  "additionalPayment": "Additional Payment",
   "addPaymentOptions": "Add payment option",
   "addSchema": "Add Schema",
   "addServiceChargeItem": "Add charge service",

package/translations/sw.json

@@ -6,6 +6,7 @@
   "addBill": "Add bill item(s)",
   "addCommodityChargeItem": "Add charge item",
   "addDeposit": "Add Deposit",
+  "additionalPayment": "Additional Payment",
   "addPaymentOptions": "Add payment option",
   "addSchema": "Add Schema",
   "addServiceChargeItem": "Add charge service",