(fix) Add validation on payment amount and improved billing history e…

…2e test (#129) * (fix): Solving the paymeny not decreasing as it should Signed-off-by: Murithi <[email protected]> * (tests): e2e tests for billing app Signed-off-by: Murithi <[email protected]> * (tests) replacing textbox with spinbutton on invoice and adding dev.kenyahmis.org to example.ev Signed-off-by: Murithi <[email protected]> * (tests) replacing textbox with spinbutton on invoice and adding dev.kenyahmis.org to example.ev Signed-off-by: Murithi <[email protected]> --------- Signed-off-by: Murithi <[email protected]> Co-authored-by: Murithi <[email protected]>
palladiumkenya · Jan 16, 2024 · 7d6c3a0 · 7d6c3a0
1 parent ac32668
commit 7d6c3a0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 19 deletions.
diff --git a/e2e/specs/billing/billling-history.spec.ts b/e2e/specs/billing/billling-history.spec.ts
@@ -0,0 +1,21 @@
+import { test } from '../../core';
+import { expect } from '@playwright/test';
+import { HomePage } from '../../pages';
+
+test('Accessing the Billing page Dashboard ', async ({ page }) => {
+  const homePage = new HomePage(page);
+
+  await test.step('When I visit the home page', async () => {
+    await homePage.gotoHome();
+  });
+  await test.step('Then should be able to navigate to billing page', async () => {
+    await page.getByRole('link', { name: 'Billing' }).click();
+    await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/home/billing`);
+  });
+
+  await test.step('Tnen should be able to view Cumulative, Pending and Paid bills', async () => {
+    await expect(page.getByRole('heading', { name: 'Cumulative Bills' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Pending Bills' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Paid Bills' })).toBeVisible();
+  });
+});
diff --git a/example.env b/example.env
@@ -1,5 +1,5 @@
 # This is an example environment file for configuring dynamic values.
-E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_BASE_URL=https://dev.kenyahmis.org/openmrs
 E2E_USER_ADMIN_USERNAME=admin
 E2E_USER_ADMIN_PASSWORD=Admin123
 E2E_LOGIN_DEFAULT_LOCATION_UUID=44c3efb0-2583-4c80-a79e-1f756a03c0a1

diff --git a/packages/esm-billing-app/src/invoice/invoice.test.tsx b/packages/esm-billing-app/src/invoice/invoice.test.tsx
@@ -115,7 +115,7 @@ describe('Invoice', () => {
     await user.click(cashPaymentMode);
 
     // // enter payment amount
-    const paymentAmountInput = screen.getByRole('textbox', { name: /Enter amount/ });
+    const paymentAmountInput = screen.getByPlaceholderText('Enter amount');
     expect(paymentAmountInput).toBeInTheDocument();
     await user.type(paymentAmountInput, '100');
 

diff --git a/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.component.tsx b/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.component.tsx
@@ -2,17 +2,17 @@ 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 } from '@carbon/react';
+import { Button, Dropdown, NumberInputSkeleton, TextInput, NumberInput } from '@carbon/react';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import { PaymentFormValue } from '../payments.component';
 import { usePaymentModes } from '../payment.resource';
 import styles from './payment-form.scss';
 
-type PaymentFormProps = { disablePayment: boolean };
+type PaymentFormProps = { disablePayment: boolean; amountDue: number };
 
 const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
 
-const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment }) => {
+const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue }) => {
   const { t } = useTranslation();
   const {
     control,
@@ -57,11 +57,12 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment }) => {
             control={control}
             name={`payment.${index}.amount`}
             render={({ field }) => (
-              <TextInput
+              <NumberInput
                 {...field}
+                onChange={(e) => field.onChange(Number(e.target.value))}
                 invalid={!!errors?.payment?.[index]?.amount}
                 invalidText={errors?.payment?.[index]?.amount?.message}
-                labelText={t('amount', 'Amount')}
+                label={t('amount', 'Amount')}
                 placeholder={t('enterAmount', 'Enter amount')}
               />
             )}

diff --git a/packages/esm-billing-app/src/invoice/payments/payments.component.tsx b/packages/esm-billing-app/src/invoice/payments/payments.component.tsx
@@ -15,17 +15,6 @@ import PaymentHistory from './payment-history/payment-history.component';
 import PaymentForm from './payment-form/payment-form.component';
 import styles from './payments.scss';
 
-const paymentSchema = z.object({
-  method: z.string().refine((value) => !!value, 'Payment method is required'),
-  amount: z.union([
-    z.number().refine((value) => !!value, 'Amount is required'),
-    z.string().refine((value) => !!value, 'Amount is required'),
-  ]),
-  referenceCode: z.union([z.number(), z.string()]).optional(),
-});
-
-const paymentFormSchema = z.object({ payment: z.array(paymentSchema) });
-
 type PaymentProps = { bill: MappedBill };
 export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
 export type PaymentFormValue = {
@@ -34,6 +23,15 @@ export type PaymentFormValue = {
 
 const Payments: React.FC<PaymentProps> = ({ bill = {} as MappedBill }) => {
   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 methods = useForm<PaymentFormValue>({
     mode: 'all',
     defaultValues: {},
@@ -79,7 +77,7 @@ const Payments: React.FC<PaymentProps> = ({ bill = {} as MappedBill }) => {
           </CardHeader>
           <div>
             {bill && <PaymentHistory bill={bill} />}
-            <PaymentForm disablePayment={amountDue <= 0} />
+            <PaymentForm disablePayment={amountDue <= 0} amountDue={amountDue} />
           </div>
         </div>
         <div className={styles.divider} />