fix: use params instead of state for invoiceId

getlago · Jan 24, 2025 · d1dc4cf · d1dc4cf
1 parent 6ece9c9
commit d1dc4cf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 43 deletions.
diff --git a/src/pages/CreatePayment.tsx b/src/pages/CreatePayment.tsx
@@ -2,7 +2,7 @@ import { gql } from '@apollo/client'
 import { InputAdornment } from '@mui/material'
 import { useFormik } from 'formik'
 import { DateTime } from 'luxon'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { date, object, string } from 'yup'
 
@@ -64,22 +64,46 @@ const CreatePayment = () => {
   const { translate } = useInternationalization()
   const navigate = useNavigate()
   const params = useParams<{ invoiceId?: string }>()
-  const [invoiceId, setInvoiceId] = useState('')
   const warningDirtyAttributesDialogRef = useRef<WarningDialogRef>(null)
   const { timezone } = useOrganizationInfos()
 
+  const formikProps = useFormik<CreatePaymentInput>({
+    initialValues: {
+      invoiceId: params.invoiceId ?? '',
+      amountCents: '',
+      reference: '',
+      createdAt: today,
+    },
+    validationSchema: object().shape({
+      invoiceId: string().required(''),
+      amountCents: string()
+        .required('')
+        .test((value) => maxAmount(value)),
+      reference: string().max(40).required(''),
+      createdAt: date().required(''),
+    }),
+    enableReinitialize: true,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      await createPayment({
+        variables: {
+          input: {
+            ...values,
+            amountCents: serializeAmount(values.amountCents, currency),
+            createdAt: values.createdAt.toISO(),
+          },
+        },
+      })
+    },
+  })
+
   const { data: payableInvoices, loading: payableInvoicesLoading } = useGetPayableInvoicesQuery()
+
   const { data: { invoice } = {}, loading: invoiceLoading } = useGetPayableInvoiceQuery({
-    variables: { id: invoiceId },
-    skip: !invoiceId,
+    variables: { id: formikProps.values.invoiceId },
+    skip: !formikProps.values.invoiceId,
   })
 
-  useEffect(() => {
-    if (params.invoiceId) {
-      setInvoiceId(params.invoiceId)
-    }
-  }, [params])
-
   const currency = invoice?.currency ?? CurrencyEnum.Usd
 
   const [createPayment] = useCreatePaymentMutation({
@@ -106,36 +130,6 @@ const CreatePayment = () => {
     [invoice],
   )
 
-  const formikProps = useFormik<CreatePaymentInput>({
-    initialValues: {
-      invoiceId: invoice?.id || '',
-      amountCents: '',
-      reference: '',
-      createdAt: today,
-    },
-    validationSchema: object().shape({
-      invoiceId: string().required(''),
-      amountCents: string()
-        .required('')
-        .test((value) => maxAmount(value)),
-      reference: string().max(40),
-      createdAt: date().required(''),
-    }),
-    enableReinitialize: true,
-    validateOnMount: true,
-    onSubmit: async (values) => {
-      await createPayment({
-        variables: {
-          input: {
-            ...values,
-            amountCents: serializeAmount(values.amountCents, currency),
-            createdAt: values.createdAt.toISO(),
-          },
-        },
-      })
-    },
-  })
-
   const remainingAmount = useMemo(() => {
     const totalAmount = deserializeAmount(invoice?.totalAmountCents ?? 0, currency)
     const amount = Number(formikProps.values.amountCents)
@@ -196,11 +190,13 @@ const CreatePayment = () => {
                         value: id,
                         label: number,
                       }))}
-                      onChange={(value) => setInvoiceId(value)}
+                      onChange={(value) => formikProps.setFieldValue('invoiceId', value)}
                       placeholder={translate('text_17374729448787bzb5yjrbgt')}
                       emptyText={translate('text_6682c52081acea9052074686')}
                       value={formikProps.values.invoiceId}
                       loading={payableInvoicesLoading}
+                      disabled={!!params.invoiceId}
+                      disableClearable={!!params.invoiceId}
                     />
 
                     {invoice && (
@@ -282,7 +278,7 @@ const CreatePayment = () => {
                     <AmountInputField
                       name="amountCents"
                       formikProps={formikProps}
-                      error={!!formikProps.errors.amountCents}
+                      error={!!formikProps.errors.amountCents && !!formikProps.values.invoiceId}
                       label={translate('text_1737472944878ee19ufaaklg')}
                       currency={currency}
                       beforeChangeFormatter={['positiveNumber']}

diff --git a/translations/base.json b/translations/base.json
@@ -2801,7 +2801,7 @@
   "text_1737472944878h2ejm3kxd8h": "Payment information",
   "text_173747294487841dlz5wqd9p": "Define the payment information.",
   "text_1737472944878qfpm9xbrrdn": "Payment date",
-  "text_1737472944878njss1jk5yik": "Payment reference (optional)",
+  "text_1737472944878njss1jk5yik": "Payment reference",
   "text_1737472944878ksy1jz0b4m9": "Reference must be a string of 40 characters maximum",
   "text_1737472944878ee19ufaaklg": "Payment amount",
   "text_1737473550277cncnhv0x6cm": "Invoice total amount due after payment: {{amount}}",