diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx index 848c11061c..a59671177b 100644 --- a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx +++ b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx @@ -56,10 +56,16 @@ const numberOfDonationsControlOptions = [{label: __('Ongoing', 'give'), value: ' })) ); +/** + * @unreleased add description fields to levels. + * @since 3.0.0 + */ const Inspector = ({attributes, setAttributes}) => { const { label = __('Donation Amount', 'give'), levels, + descriptions, + descriptionsEnabled = false, defaultLevel, priceOption, setPrice, @@ -120,9 +126,9 @@ const Inspector = ({attributes, setAttributes}) => { const isRecurring = isRecurringSupported && recurringEnabled; const [donationLevels, setDonationLevels] = useState( - levels.map((level) => ({ + levels.map((level, index) => ({ id: String(Math.floor(Math.random() * 1000000)), - label: formatCurrencyAmount(level.toString()), + label: descriptions[index] || '', value: level.toString(), checked: defaultLevel === level, })) @@ -163,9 +169,14 @@ const Inspector = ({attributes, setAttributes}) => { const handleLevelsChange = (options: OptionProps[]) => { const checkedLevel = options.filter((option) => option.checked); const newLevels = options.filter((option) => option.value).map((option) => Number(option.value)); + const newDescriptions = options.map((option) => option.label); setDonationLevels(options); - setAttributes({levels: newLevels, defaultLevel: Number(checkedLevel[0].value)}); + setAttributes({ + levels: newLevels, + defaultLevel: Number(checkedLevel[0].value), + descriptions: newDescriptions, + }); }; const getDefaultBillingPeriodOptions = useCallback( @@ -220,6 +231,20 @@ const Inspector = ({attributes, setAttributes}) => { onValueChange={(setPrice) => setAttributes({setPrice: setPrice ? parseInt(setPrice) : 0})} /> )} + {priceOption === 'multi' && ( + setAttributes({descriptionsEnabled: value})} + /> + )} { )} - {priceOption === 'multi' && ( - - - - )} - {!isRecurringSupported && (recurringAddonData.isInstalled ? ( diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/settings.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/settings.tsx index b27bfb9e20..2f50ac7444 100644 --- a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/settings.tsx +++ b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/settings.tsx @@ -18,6 +18,7 @@ const { setPrice, priceOption, levels, + descriptions, defaultLevel, } = getDefaultBlockAttributes('givewp/donation-amount'); @@ -39,6 +40,10 @@ const settings: FieldBlock['settings'] = { type: 'array', default: levels, }, + descriptions: { + type: 'array', + default: descriptions, + }, defaultLevel: { type: 'number', default: defaultLevel, diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/types.ts b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/types.ts index 2a0d945172..e8ef518f01 100644 --- a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/types.ts +++ b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/types.ts @@ -1,8 +1,10 @@ -import type {subscriptionPeriod} from "@givewp/forms/registrars/templates/groups/DonationAmount/subscriptionPeriod"; +import type {subscriptionPeriod} from '@givewp/forms/registrars/templates/groups/DonationAmount/subscriptionPeriod'; export interface DonationAmountAttributes { label: string; levels: number[]; + descriptions: string[]; + descriptionsEnabled: boolean; defaultLevel: number; priceOption: string; setPrice: number; @@ -14,5 +16,5 @@ export interface DonationAmountAttributes { recurringBillingPeriodOptions: subscriptionPeriod[]; recurringLengthOfTime: string; recurringOptInDefaultBillingPeriod: subscriptionPeriod | 'one-time'; - recurringEnableOneTimeDonations: boolean -} \ No newline at end of file + recurringEnableOneTimeDonations: boolean; +}