mutate when new payment is added and not refresh the whole page

openmrs · Apr 3, 2024 · 2c2eb7c · 2c2eb7c
1 parent af7cf71
commit 2c2eb7c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/invoice/invoice.component.tsx b/src/invoice/invoice.component.tsx
@@ -24,7 +24,7 @@ const Invoice: React.FC = () => {
   const { t } = useTranslation();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
-  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
+  const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
   const [selectedLineItems, setSelectedLineItems] = useState([]);
   const componentRef = useRef<HTMLDivElement>(null);
@@ -123,7 +123,7 @@ const Invoice: React.FC = () => {
       </div>
 
       <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} selectedLineItems={selectedLineItems} />
+      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
 
       <div className={styles.printContainer} ref={componentRef}>
         {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}

diff --git a/src/invoice/payments/payments.component.tsx b/src/invoice/payments/payments.component.tsx
@@ -20,6 +20,7 @@ import { useBillableServices } from '../../billable-services/billable-service.re
 type PaymentProps = {
   bill: MappedBill;
   selectedLineItems: Array<LineItem>;
+  mutate: () => void;
 };
 
 export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
@@ -28,10 +29,10 @@ export type PaymentFormValue = {
   payment: Array<Payment>;
 };
 
-const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
+const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems, mutate }) => {
   const { t } = useTranslation();
   const { defaultCurrency } = useConfig();
-  const { billableServices, isLoading, isValidating, error, mutate } = useBillableServices();
+  const { billableServices, isLoading, isValidating, error } = useBillableServices();
   const paymentSchema = z.object({
     method: z.string().refine((value) => !!value, 'Payment method is required'),
     amount: z
@@ -44,7 +45,7 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
   const { currentVisit } = useVisit(bill?.patientUuid);
   const methods = useForm<PaymentFormValue>({
     mode: 'all',
-    defaultValues: {},
+    defaultValues: { payment: [{ method: '', amount: '', referenceCode: '' }] }, // Specify default values
     resolver: zodResolver(paymentFormSchema),
   });
 
@@ -88,7 +89,8 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
         if (currentVisit) {
           updateBillVisitAttribute(currentVisit);
         }
-        window.location.reload(); // Refresh the page after successful payment
+        methods.reset({ payment: [{ method: '', amount: '', referenceCode: '' }] });
+        mutate();
       },
       (error) => {
         showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });