Form.tsx
88 lines
| 1 | import {FormProvider, useForm, useFormState} from 'react-hook-form'; |
| 2 | import {joiResolver} from '@hookform/resolvers/joi'; |
| 3 | |
| 4 | import getWindowData from '../utilities/getWindowData'; |
| 5 | import {useDonationFormState} from '../store'; |
| 6 | import {Section} from '@givewp/forms/types'; |
| 7 | import {withTemplateWrapper} from '../templates'; |
| 8 | import {useCallback} from 'react'; |
| 9 | import FormSection from './Section'; |
| 10 | |
| 11 | import {ObjectSchema} from 'joi'; |
| 12 | import DonationFormErrorBoundary from '@givewp/forms/app/errors/boundaries/DonationFormErrorBoundary'; |
| 13 | import handleSubmitRequest from '@givewp/forms/app/utilities/handleFormSubmitRequest'; |
| 14 | import {DonationSummaryProvider} from '@givewp/forms/app/store/donation-summary'; |
| 15 | |
| 16 | const {donateUrl, inlineRedirectRoutes} = getWindowData(); |
| 17 | const formTemplates = window.givewp.form.templates; |
| 18 | |
| 19 | const FormTemplate = withTemplateWrapper(formTemplates.layouts.form); |
| 20 | |
| 21 | export default function Form({defaultValues, sections, validationSchema}: PropTypes) { |
| 22 | const {gateways} = useDonationFormState(); |
| 23 | |
| 24 | const getGateway = useCallback((gatewayId) => gateways.find(({id}) => id === gatewayId), []); |
| 25 | |
| 26 | const methods = useForm<FormInputs>({ |
| 27 | defaultValues, |
| 28 | resolver: joiResolver(validationSchema), |
| 29 | reValidateMode: 'onBlur', |
| 30 | }); |
| 31 | |
| 32 | const {handleSubmit, setError, control} = methods; |
| 33 | |
| 34 | const {errors, isSubmitting, isSubmitSuccessful} = useFormState({control}); |
| 35 | |
| 36 | const formError = errors.hasOwnProperty('FORM_ERROR') ? errors.FORM_ERROR.message : null; |
| 37 | |
| 38 | return ( |
| 39 | <FormProvider {...methods}> |
| 40 | <DonationFormErrorBoundary> |
| 41 | <DonationSummaryProvider> |
| 42 | <FormTemplate |
| 43 | formProps={{ |
| 44 | id: 'give-next-gen', |
| 45 | onSubmit: handleSubmit((values: any) => |
| 46 | handleSubmitRequest( |
| 47 | values, |
| 48 | setError, |
| 49 | getGateway(values.gatewayId), |
| 50 | donateUrl, |
| 51 | inlineRedirectRoutes |
| 52 | ) |
| 53 | ), |
| 54 | }} |
| 55 | isSubmitting={isSubmitting || isSubmitSuccessful} |
| 56 | formError={formError} |
| 57 | > |
| 58 | <> |
| 59 | {sections.map((section) => { |
| 60 | return ( |
| 61 | <DonationFormErrorBoundary key={section.name}> |
| 62 | <FormSection key={section.name} section={section} /> |
| 63 | </DonationFormErrorBoundary> |
| 64 | ); |
| 65 | })} |
| 66 | </> |
| 67 | </FormTemplate> |
| 68 | </DonationSummaryProvider> |
| 69 | </DonationFormErrorBoundary> |
| 70 | </FormProvider> |
| 71 | ); |
| 72 | } |
| 73 | |
| 74 | type PropTypes = { |
| 75 | sections: Section[]; |
| 76 | defaultValues: object; |
| 77 | validationSchema: ObjectSchema; |
| 78 | }; |
| 79 | |
| 80 | type FormInputs = { |
| 81 | FORM_ERROR: string; |
| 82 | amount: number; |
| 83 | firstName: string; |
| 84 | lastName: string; |
| 85 | email: string; |
| 86 | gatewayId: string; |
| 87 | }; |
| 88 |