diff --git a/packages/esm-billing-app/src/config-schema.ts b/packages/esm-billing-app/src/config-schema.ts index b59aa36f..4d062b82 100644 --- a/packages/esm-billing-app/src/config-schema.ts +++ b/packages/esm-billing-app/src/config-schema.ts @@ -13,11 +13,6 @@ export interface BillingConfig { patientExemptionCategories: Array<{ value: string; label: string }>; excludedPaymentMode: Array<{ uuid: string; label: string }>; enforceBillPayment: boolean; - mpesaCallbackUrl: string; - shortCode: string; - passKey: string; - authorizationUrl: string; - initiateUrl: string; billingStatusQueryUrl: string; mpesaAPIBaseUrl: string; } @@ -100,31 +95,6 @@ export const configSchema = { _default: true, _description: 'Whether to enforce bill payment or not for patient to receive service', }, - mpesaCallbackUrl: { - _type: Type.String, - _default: '', - _description: 'MPESA callback Url to receive confirmation payload from MPESA Daraja API', - }, - shortCode: { - _type: Type.String, - _default: '', - _description: 'shortcode used to identify an organization and receive the transaction', - }, - passKey: { - _type: Type.String, - _default: '', - _description: 'Passkey used for generating password for generation of access token to auth APIs', - }, - authorizationUrl: { - _type: Type.String, - _default: '', - _description: 'MPESA Authenciation url gives you a time bound access token to call allowed APIs.', - }, - initiateUrl: { - _type: Type.String, - _default: '', - _description: 'MPESA Initiator url which Initiates online payment on behalf of a customer.', - }, billingStatusQueryUrl: { _type: Type.String, _default: '${restBaseUrl}/cashier/billLineItem?orderUuid=${orderUuid}&v=full', diff --git a/packages/esm-billing-app/src/invoice/payments/initiate-payment/initiate-payment.component.tsx b/packages/esm-billing-app/src/invoice/payments/initiate-payment/initiate-payment.component.tsx index 0e9c42cb..ded13d50 100644 --- a/packages/esm-billing-app/src/invoice/payments/initiate-payment/initiate-payment.component.tsx +++ b/packages/esm-billing-app/src/invoice/payments/initiate-payment/initiate-payment.component.tsx @@ -10,9 +10,10 @@ import { InlineNotification, InlineLoading, Loading, + NumberInputSkeleton, } from '@carbon/react'; import styles from './initiate-payment.scss'; -import { Controller, useForm } from 'react-hook-form'; +import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { MappedBill } from '../../../types'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; @@ -20,11 +21,11 @@ import { formatPhoneNumber } from '../utils'; import { useSystemSetting } from '../../../hooks/getMflCode'; import { initiateStkPush } from '../../../m-pesa/mpesa-resource'; import { useRequestStatus } from '../../../hooks/useRequestStatus'; -import { useConfig, usePatient } from '@openmrs/esm-framework'; +import { useConfig } from '@openmrs/esm-framework'; import { BillingConfig } from '../../../config-schema'; import { usePatientAttributes } from '../../../hooks/usePatientAttributes'; -const InitiatePaymentSchema = z.object({ +const initiatePaymentSchema = z.object({ phoneNumber: z .string() .nonempty({ message: 'Phone number is required' }) @@ -32,6 +33,8 @@ const InitiatePaymentSchema = z.object({ billAmount: z.string().nonempty({ message: 'Amount is required' }), }); +type FormData = z.infer; + export interface InitiatePaymentDialogProps { closeModal: () => void; bill: MappedBill; @@ -51,17 +54,23 @@ const InitiatePaymentDialog: React.FC = ({ closeModa handleSubmit, formState: { errors, isValid }, setValue, - } = useForm({ + watch, + reset, + } = useForm({ mode: 'all', defaultValues: { billAmount: String(bill.totalAmount), phoneNumber: phoneNumber }, - resolver: zodResolver(InitiatePaymentSchema), + resolver: zodResolver(initiatePaymentSchema), }); + const watchedPhoneNumber = watch('phoneNumber'); + useEffect(() => { - setValue('phoneNumber', phoneNumber); - }, [phoneNumber, setValue]); + if (!watchedPhoneNumber && phoneNumber) { + reset({ phoneNumber: watchedPhoneNumber }); + } + }, [watchedPhoneNumber, setValue, phoneNumber, reset]); - const onSubmit = async (data: { phoneNumber: any; billAmount: any }) => { + const onSubmit: SubmitHandler = async (data) => { const phoneNumber = formatPhoneNumber(data.phoneNumber); const amountBilled = data.billAmount; const accountReference = `${mflCodeValue}#${bill.receiptNumber}`; @@ -78,10 +87,6 @@ const InitiatePaymentDialog: React.FC = ({ closeModa pollingTrigger({ requestId, requestStatus: 'INITIATED' }); }; - if (isLoadingPhoneNumber || isLoading) { - return ; - } - return (
@@ -95,24 +100,28 @@ const InitiatePaymentDialog: React.FC = ({ closeModa onCloseButtonClick={() => setNotification(null)} /> )} -
- ( - - - - )} - /> -
+ {isLoadingPhoneNumber ? ( + + ) : ( +
+ ( + + + + )} + /> +
+ )}