Feature: update amount block settings with descriptions

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<OptionProps[]>(
-        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' && (
+                    <OptionsPanel
+                        currency={currency}
+                        multiple={false}
+                        options={donationLevels}
+                        setOptions={handleLevelsChange}
+                        onAddOption={handleLevelAdded}
+                        onRemoveOption={handleLevelRemoved}
+                        defaultControlsTooltip={__('Default Level', 'give')}
+                        toggleLabel={__('Enable amount description', 'give')}
+                        toggleEnabled={descriptionsEnabled}
+                        onHandleToggle={(value) => setAttributes({descriptionsEnabled: value})}
+                    />
+                )}
             </PanelBody>
             <PanelBody title={__('Custom Amount', 'give')} initialOpen={false}>
                 <ToggleControl
@@ -248,20 +273,6 @@ const Inspector = ({attributes, setAttributes}) => {
                 )}
             </PanelBody>
 
-            {priceOption === 'multi' && (
-                <PanelBody title={__('Donation Levels', 'give')} initialOpen={false}>
-                    <OptionsPanel
-                        currency={currency}
-                        multiple={false}
-                        options={donationLevels}
-                        setOptions={handleLevelsChange}
-                        onAddOption={handleLevelAdded}
-                        onRemoveOption={handleLevelRemoved}
-                        defaultControlsTooltip={__('Default Level', 'give')}
-                    />
-                </PanelBody>
-            )}
-
             <PanelBody title={__('Recurring Donations', 'give')} initialOpen={false}>
                 {!isRecurringSupported &&
                     (recurringAddonData.isInstalled ? (

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,

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
-}
+    recurringEnableOneTimeDonations: boolean;
+}