diff --git a/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx b/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx index ab10e0b68b..9f9299f4fe 100644 --- a/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx +++ b/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx @@ -12,6 +12,7 @@ import { createUnnestedFormData, } from "@bciers/components/form/formDataUtils"; import { registrationOperationInformationUiSchema } from "@/registration/app/data/jsonSchema/operationInformation/registrationOperationInformation"; +import { useRouter } from "next/navigation"; interface OperationInformationFormProps { rawFormData: OperationInformationFormData; @@ -26,6 +27,7 @@ const OperationInformationForm = ({ step, steps, }: OperationInformationFormProps) => { + const router = useRouter(); const [selectedOperation, setSelectedOperation] = useState(""); const [error, setError] = useState(undefined); const nestedFormData = rawFormData @@ -95,6 +97,13 @@ const OperationInformationForm = ({ cancelUrl="/" formData={formState} onSubmit={handleSubmit} + firstStepExtraHandling={(response) => { + // Since our form's route includes the operation's id, which doesn't exist until after the first step, we need to pass in a custom function that uses the response to generate a redirect url + const nextStepUrl = `/register-an-operation/${response.id}/${ + step + 1 + }$`; + router.push(nextStepUrl); + }} schema={schema} step={step} steps={steps} diff --git a/bciers/libs/components/src/form/MultiStepBase.tsx b/bciers/libs/components/src/form/MultiStepBase.tsx index 5bcc671048..4d84234dfe 100644 --- a/bciers/libs/components/src/form/MultiStepBase.tsx +++ b/bciers/libs/components/src/form/MultiStepBase.tsx @@ -30,6 +30,7 @@ interface MultiStepBaseProps { submitButtonDisabled?: boolean; customValidate?: any; successComponent?: React.ReactNode; + firstStepExtraHandling?: (response: any) => any; } // Modified MultiStepFormBase meant to facilitate more modularized Multi-step forms @@ -56,6 +57,7 @@ const MultiStepBase = ({ submitButtonDisabled, customValidate, successComponent, + firstStepExtraHandling, }: MultiStepBaseProps) => { const [isSubmitting, setIsSubmitting] = useState(false); const [isSuccessfullySubmitted, setIsSuccessfullySubmitted] = useState(false); @@ -77,16 +79,11 @@ const MultiStepBase = ({ setError(response?.error); return; } - // First step - if (step === 1) { - // The URL below is customized for the registration workflow. It can be generalized later if needed. - const nextStepUrl = `/register-an-operation/${response.id}/${step + 1}${ - baseUrlParams ? `?${baseUrlParams}` : "" - }`; - router.push(nextStepUrl); + // In some cases, for the first step, we need to do something beyond simply redirecting to the baseUrl after successful onSubmit. + if (step === 1 && firstStepExtraHandling) { + firstStepExtraHandling(response); return; } - // Middle steps if (isNotFinalStep && baseUrl) { const nextStepUrl = `${baseUrl}/${step + 1}${ baseUrlParams ? `?${baseUrlParams}` : ""