From 1750a6c9d1a10580776e27721024d8453ef0a781 Mon Sep 17 00:00:00 2001
From: Joshua Dinh <75056371+JoshuaHungDinh@users.noreply.github.com>
Date: Tue, 16 Apr 2024 08:22:02 +0900
Subject: [PATCH] Feature: update amount block settings with descriptions
 (#7353)

---
 .../blocks/fields/amount/inspector/index.tsx  | 45 ++++++++++++-------
 .../src/blocks/fields/amount/settings.tsx     |  5 +++
 .../src/blocks/fields/amount/types.ts         |  8 ++--
 3 files changed, 38 insertions(+), 20 deletions(-)

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<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 ? (
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;
+}