(feat) SJT-132 Create the Edit Payment mode modal

packages/esm-billing-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ehospital/esm-billing-app",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Billing frontend module for use in O3",
   "browser": "dist/ehospital-esm-billing-app.js",
   "main": "src/index.ts",
@@ -121,5 +121,5 @@
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
   },
   "packageManager": "[email protected]",
-  "gitHead": "7c7b1efa438601ea3b1f2697a6c96c57b46f9b9c"
+  "gitHead": "2b7c7512b5292f14f4181c835a942e3e278fb303"
 }

packages/esm-billing-app/src/index.ts

@@ -27,6 +27,7 @@ import { ClockIn } from './payment-points/payment-point/clock-in.component';
 import { ClockOut } from './payment-points/payment-point/clock-out.component';
 import DeletePaymentModeModal from './payment-modes/delete-payment-mode.modal';
 import PaymentModeWorkspace from "./payment-modes/payment-mode.workspace";
+import EditPaymentMode from './payment-modes/edit-payment-mode.modal';
 
 const moduleName = '@ehospital/esm-billing-app';
 
@@ -83,6 +84,7 @@ export const paymentModesPanelLink = getSyncLifecycle(
 
 export const paymentModeWorkspace = getSyncLifecycle(PaymentModeWorkspace, options);
 export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, options);
+export const editPaymentMode = getSyncLifecycle(EditPaymentMode, options)
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 

packages/esm-billing-app/src/payment-modes/edit-payment-mode.modal.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Loading, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
+import { restBaseUrl, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { Controller, useForm } from 'react-hook-form';
+import styles from './payment-mode.workspace.scss';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createPaymentMode, handleMutation } from './payment-mode.resource';
+import { PaymentMode } from '../types';
+import usePaymentModeFormSchema from './usePaymentModeFormSchema';
+import PaymentModeAttributeFields from './payment-attributes/payment-mode-attributes.component';
+import { Add } from '@carbon/react/icons';
+
+type EditPaymentModeModalProps = {
+    closeModal: () => void;
+    initialPaymentMode?: PaymentMode;
+  };
+
+const EditPaymentMode : React.FC<EditPaymentModeModalProps> = ({ closeModal, initialPaymentMode = {} as PaymentMode, }) => {
+  const { t } = useTranslation();
+  const { paymentModeFormSchema } = usePaymentModeFormSchema();
+  type PaymentModeFormSchema = z.infer<typeof paymentModeFormSchema>;
+  const formDefaultValues = Object.keys(initialPaymentMode).length > 0 ? initialPaymentMode : {};
+
+  const formMethods = useForm<PaymentModeFormSchema>({
+    resolver: zodResolver(paymentModeFormSchema),
+    mode: 'all',
+    defaultValues: formDefaultValues,
+  });
+
+  const { errors, isSubmitting } = formMethods.formState;
+
+  // field array
+  // const {
+  //   fields: attributeTypeFields,
+  //   append: appendAttributeType,
+  //   remove: removeAttributeType,
+  // } = useFieldArray({
+  //   control: formMethods.control,
+  //   name: 'attributeTypes',
+  // });
+
+  // const mappedAttributeTypes = (attributes) => {
+  //   return {
+  //     name: attributes.name,
+  //     description: attributes.description,
+  //     retired: attributes.retired,
+  //     attributeOrder: attributes?.attributeOrder ?? 0,
+  //     format: attributes?.format ?? '',
+  //     foreignKey: attributes?.foreignKey ?? null,
+  //     regExp: attributes?.regExp ?? '',
+  //     required: attributes.required,
+  //   };
+  // };
+
+  const onSubmit = async (data: PaymentModeFormSchema) => {
+    const payload: Partial<PaymentMode> = {
+      name: data.name,
+      description: data.description,
+    };
+
+    try {
+      const response = await createPaymentMode(payload, initialPaymentMode?.uuid ?? '');
+      if (response.ok) {
+        showSnackbar({
+          title: t('paymentModeUpdated', 'Payment mode updated successfully'),
+          subtitle: t('paymentModeUpdatedSubtitle', 'The payment mode has been updated successfully'),
+          kind: 'success',
+          isLowContrast: true,
+        });
+        closeModal();
+        handleMutation(`${restBaseUrl}/billing/paymentMode?v=full`);
+      }
+    } catch (error) {
+      const errorObject = error?.responseBody?.error;
+      const errorMessage = errorObject?.message ?? 'An error occurred while creating the payment mode';
+      showSnackbar({
+        title: t('paymentModeUpdateFailed', 'Payment mode updating failed'),
+        subtitle: t(
+          'paymentModeCreationFailedSubtitle',
+          'An error occurred while updating the payment mode {{errorMessage}}',
+          { errorMessage },
+        ),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  const handleError = (error) => {
+    showSnackbar({
+      title: t('paymentModeUpdateFailed', 'Payment mode updating failed'),
+      subtitle: t(
+        'paymentModeCreationFailedSubtitle',
+        'An error occurred while updating the payment mode {{errorMessage}}',
+        { errorMessage: JSON.stringify(error, null, 2) },
+      ),
+      kind: 'error',
+      isLowContrast: true,
+    });
+  };
+
+  return (
+    <Form>
+      <ModalHeader closeModal={closeModal}>Edit Payment Mode</ModalHeader>
+      <ModalBody>
+        <Controller
+          name="name"
+          control={formMethods.control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="name"
+              type="text"
+              labelText={t('paymentModeName', 'Payment mode name')}
+              placeholder={t('paymentModeNamePlaceholder', 'Enter payment mode name')}
+              invalid={!!errors.name}
+              invalidText={errors.name?.message}
+            />
+          )}
+        />
+        <Controller
+          name="description"
+          control={formMethods.control}
+          render={({ field }) => (
+            <TextInput
+              {...field}
+              id="description"
+              type="text"
+              labelText={t('paymentModeDescription', 'Payment mode description')}
+              placeholder={t('paymentModeDescriptionPlaceholder', 'Enter payment mode description')}
+              invalid={!!errors.description}
+              invalidText={errors.description?.message}
+            />
+          )}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          disabled={isSubmitting || Object.keys(errors).length > 0}
+          style={{ maxWidth: '50%' }}
+          kind="primary"
+          type="submit"
+          onClick={formMethods.handleSubmit(onSubmit, handleError)}>
+          {isSubmitting ? (
+            <>
+              <Loading className={styles.button_spinner} withOverlay={false} small />
+              {t('updating', 'Updating')}
+            </>
+          ) : (
+            t('update', 'Update')
+          )}
+        </Button>
+      </ModalFooter>
+    </Form>
+  );
+};
+
+export default EditPaymentMode;

packages/esm-billing-app/src/payment-modes/payment-mode-dashboard.component.tsx

@@ -55,6 +55,13 @@ const PaymentModeDashboard: React.FC<PaymentModeDashboardProps> = () => {
     });
   };
 
+  const showEditPaymentModeModal = (paymentMode: PaymentMode) => {
+    const dispose = showModal('edit-payment-mode', {
+      closeModal: () => dispose(),
+      initialPaymentMode: paymentMode,
+    });
+  };
+
   const createPaymentModeModal = () => {
     const dispose = showModal('create-payment-mode', {
           closeModal: () => dispose(),
@@ -160,12 +167,7 @@ const PaymentModeDashboard: React.FC<PaymentModeDashboardProps> = () => {
                         <TableCell className="cds--table-column-menu">
                           <OverflowMenu size={size} iconDescription={t('actions', 'Actions')} flipped>
                             <OverflowMenuItem
-                              onClick={() =>
-                                launchWorkspace('payment-mode-workspace', {
-                                  workspaceTitle: t('editPaymentMode', 'Edit Payment Mode'),
-                                  initialPaymentMode: paymentModes[index],
-                                })
-                              }
+                              onClick={() => showEditPaymentModeModal(paymentModes[index]) }
                               itemText={t('edit', 'Edit')}
                             />
                             <OverflowMenuItem

packages/esm-billing-app/src/routes.json

@@ -155,6 +155,14 @@
       "name": "clock-out-modal",
       "component": "clockOutModal"
     },
+    {
+      "name": "create-payment-mode",
+      "component": "createPaymentMode"
+    },
+    {
+      "name": "edit-payment-mode",
+      "component": "editPaymentMode"
+    },
     {
       "name": "delete-payment-mode-modal",
       "component": "deletePaymentModeModal"
@@ -166,10 +174,6 @@
     {
       "name": "paid-bill-receipt-print-preview-modal",
       "component": "paidBillReceiptPrintPreviewModal"
-    },
-    {
-      "name": "create-payment-mode",
-      "component": "createPaymentMode"
     }
   ]
 }