(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.3.0",
   "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": "309055b8757f9eca2383037d81b0b3a25c8a185d"
 }

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

@@ -55,9 +55,11 @@ const PaymentModeDashboard: React.FC<PaymentModeDashboardProps> = () => {
     });
   };
 
-  const createPaymentModeModal = () => {
+  const createPaymentModeModal = (paymentMode: PaymentMode, modalTitle: string) => {
     const dispose = showModal('create-payment-mode', {
           closeModal: () => dispose(),
+          initialPaymentMode: paymentMode,
+          modalTitle,
         });
   }
 
@@ -112,10 +114,9 @@ const PaymentModeDashboard: React.FC<PaymentModeDashboardProps> = () => {
     <div>
       <CardHeader title="Payment Modes">
         <Button
-          onClick={() => {createPaymentModeModal()}}
-          className={styles.addPaymentModeButton}
-          size="md"
-          kind="ghost">
+          onClick={() => {createPaymentModeModal(paymentModes[''], t('createPaymentMode', 'Create Payment Mode'))}}
+          className={styles.createPaymentModeButton}
+          size="md">
           {t('addPaymentMode', 'Add Payment Mode')}
         </Button>
       </CardHeader>
@@ -160,12 +161,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={() => createPaymentModeModal(paymentModes[index], t('editPaymentMode', 'Edit Payment Mode')) }
                               itemText={t('edit', 'Edit')}
                             />
                             <OverflowMenuItem

packages/esm-billing-app/src/payment-modes/payment-mode.workspace.test.tsx

@@ -20,7 +20,8 @@ describe('PaymentModeWorkspace', () => {
 
   test('should validate and submit correct form payload', async () => {
     const user = userEvent.setup();
-    render(<CreatePaymentMode closeModal={''}/>);
+    const mockCloseModal = jest.fn();
+    render(<CreatePaymentMode closeModal={mockCloseModal} modalTitle='' />);
     const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });
     const descriptionInput = screen.getByRole('textbox', { name: /Payment mode description/i });
     const submitButton = screen.getByRole('button', { name: /Save & Close/i });
@@ -48,14 +49,15 @@ describe('PaymentModeWorkspace', () => {
 
   test('should show error message when submitting form fails', async () => {
     const user = userEvent.setup();
+    const mockCloseModal = jest.fn()
     mockCreatePaymentMode.mockRejectedValue({
       responseBody: {
         error: {
           message: 'An error occurred while creating the payment mode',
         },
       },
     });
-    render(<CreatePaymentMode closeModal={''} />);
+    render(<CreatePaymentMode closeModal={mockCloseModal} modalTitle='' />);
     const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });
     const descriptionInput = screen.getByRole('textbox', { name: /Payment mode description/i });
     const submitButton = screen.getByRole('button', { name: /Save & Close/i });
@@ -75,7 +77,8 @@ describe('PaymentModeWorkspace', () => {
 
   test('should submit payload with attributeTypes', async () => {
     const user = userEvent.setup();
-    render(<CreatePaymentMode closeModal={''} />);
+    const mockCloseModal = jest.fn()
+    render(<CreatePaymentMode closeModal={mockCloseModal} modalTitle='' />);
 
     // key in name, description and retired
     const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });

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

@@ -12,14 +12,22 @@ import usePaymentModeFormSchema from './usePaymentModeFormSchema';
 import PaymentModeAttributeFields from './payment-attributes/payment-mode-attributes.component';
 import { Add } from '@carbon/react/icons';
 
-const CreatePaymentMode = ({ closeModal }) => {
+type CreatePaymentModeModalProps = {
+    closeModal: () => void;
+    initialPaymentMode?: PaymentMode;
+    modalTitle: string
+  };
+
+const CreatePaymentMode : React.FC<CreatePaymentModeModalProps> = ({ closeModal, initialPaymentMode = {} as PaymentMode, modalTitle }) => {
   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;
@@ -54,7 +62,7 @@ const CreatePaymentMode = ({ closeModal }) => {
     };
 
     try {
-      const response = await createPaymentMode(payload, '');
+      const response = await createPaymentMode(payload, initialPaymentMode?.uuid ?? '');
       if (response.ok) {
         showSnackbar({
           title: t('paymentModeCreated', 'Payment mode created successfully'),
@@ -96,7 +104,7 @@ const CreatePaymentMode = ({ closeModal }) => {
 
   return (
     <Form>
-      <ModalHeader closeModal={closeModal}>Create Payment Mode</ModalHeader>
+      <ModalHeader closeModal={closeModal}>{modalTitle}</ModalHeader>
       <ModalBody>
         <Controller
           name="name"
@@ -142,10 +150,10 @@ const CreatePaymentMode = ({ closeModal }) => {
           {isSubmitting ? (
             <>
               <Loading className={styles.button_spinner} withOverlay={false} small />
-              {t('creating', 'Creating')}
+              {t('submitting', 'Submitting...')}
             </>
           ) : (
-            t('create', 'Create')
+            t('saveAndClose', 'Save & close')
           )}
         </Button>
       </ModalFooter>

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

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