index.tsx
8 months ago
styles.module.scss
8 months ago
useCampaignAsyncSelectOptions.ts
8 months ago
useFormAsyncSelectOptions.ts
8 months ago
index.tsx
84 lines
| 1 | /** |
| 2 | * External dependencies |
| 3 | */ |
| 4 | import { useEffect } from 'react'; |
| 5 | import { FieldError, useFormContext, useFormState } from 'react-hook-form'; |
| 6 | |
| 7 | /** |
| 8 | * WordPress dependencies |
| 9 | */ |
| 10 | import { __ } from '@wordpress/i18n'; |
| 11 | |
| 12 | /** |
| 13 | * Internal dependencies |
| 14 | */ |
| 15 | import styles from './styles.module.scss'; |
| 16 | import AsyncSelectOption from '../AsyncSelectOption'; |
| 17 | import useCampaignAsyncSelectOptions from './useCampaignAsyncSelectOptions'; |
| 18 | import useFormAsyncSelectOptions from './useFormAsyncSelectOptions'; |
| 19 | import { SelectOption } from '@givewp/admin/types'; |
| 20 | |
| 21 | type CampaignFormGroupProps = { |
| 22 | campaignIdFieldName: string; |
| 23 | formIdFieldName: string; |
| 24 | } |
| 25 | |
| 26 | /** |
| 27 | * @since 4.11.0 |
| 28 | */ |
| 29 | export default function CampaignFormGroup({ campaignIdFieldName, formIdFieldName }: CampaignFormGroupProps) { |
| 30 | const { watch, setValue } = useFormContext(); |
| 31 | const { errors } = useFormState(); |
| 32 | const campaignId = watch(campaignIdFieldName); |
| 33 | const formId = watch(formIdFieldName); |
| 34 | |
| 35 | const { selectedOption: campaignSelectedOption, loadOptions: campaignLoadOptions, mapOptionsForMenu: campaignMapOptionsForMenu, error: campaignError } = useCampaignAsyncSelectOptions(campaignId); |
| 36 | const { selectedOption: formSelectedOption, loadOptions: formLoadOptions, mapOptionsForMenu: formMapOptionsForMenu, error: formError } = useFormAsyncSelectOptions(formId, campaignId); |
| 37 | |
| 38 | const handleCampaignChange = (selectedOption: SelectOption) => { |
| 39 | setValue(campaignIdFieldName, selectedOption?.value ?? null, { shouldDirty: true }); |
| 40 | setValue(formIdFieldName, selectedOption?.record?.defaultFormId ?? null, { shouldDirty: true }); |
| 41 | }; |
| 42 | |
| 43 | const handleFormChange = (selectedOption: SelectOption) => { |
| 44 | setValue(formIdFieldName, selectedOption?.value ?? null, { shouldDirty: true }); |
| 45 | }; |
| 46 | |
| 47 | |
| 48 | return ( |
| 49 | <div className={styles.formRow}> |
| 50 | <AsyncSelectOption |
| 51 | name={campaignIdFieldName} |
| 52 | label={__('Campaign', 'give')} |
| 53 | handleChange={handleCampaignChange} |
| 54 | selectedOption={campaignSelectedOption} |
| 55 | loadOptions={campaignLoadOptions} |
| 56 | mapOptionsForMenu={campaignMapOptionsForMenu} |
| 57 | isLoadingError={campaignError} |
| 58 | errorMessage={errors[campaignIdFieldName]?.message as string} |
| 59 | searchPlaceholder={__('Search for a campaign...', 'give')} |
| 60 | loadingMessage={__('Loading campaigns...', 'give')} |
| 61 | loadingError={__('Error loading campaigns. Please try again.', 'give')} |
| 62 | ariaLabel={__('Select a campaign', 'give')} |
| 63 | noOptionsMessage={__('No campaigns found.', 'give')} |
| 64 | /> |
| 65 | <AsyncSelectOption |
| 66 | key={`${campaignId}-${formId}`} |
| 67 | name={formIdFieldName} |
| 68 | label={__('Form', 'give')} |
| 69 | handleChange={handleFormChange} |
| 70 | selectedOption={formSelectedOption} |
| 71 | loadOptions={formLoadOptions} |
| 72 | mapOptionsForMenu={formMapOptionsForMenu} |
| 73 | isLoadingError={formError} |
| 74 | errorMessage={errors[formIdFieldName]?.message as string} |
| 75 | searchPlaceholder={__('Search for a form...', 'give')} |
| 76 | loadingMessage={__('Loading forms...', 'give')} |
| 77 | loadingError={__('Error loading forms. Please try again.', 'give')} |
| 78 | ariaLabel={__('Select a form', 'give')} |
| 79 | noOptionsMessage={__('No forms found.', 'give')} |
| 80 | /> |
| 81 | </div> |
| 82 | ) |
| 83 | } |
| 84 |