| 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 |
|
