From 98f4b7c867df6784875f89d9b22a2fff36f1153e Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 15 Apr 2024 12:57:21 -0700
Subject: [PATCH] refactor: update donation amount settings to handle
 descriptions

---
 .../blocks/fields/amount/inspector/index.tsx  | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 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..a15a0c0c1f 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
@@ -60,6 +60,7 @@ const Inspector = ({attributes, setAttributes}) => {
     const {
         label = __('Donation Amount', 'give'),
         levels,
+        descriptions,
         defaultLevel,
         priceOption,
         setPrice,
@@ -120,11 +121,12 @@ 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()),
             value: level.toString(),
             checked: defaultLevel === level,
+            description: descriptions[index] || '',
         }))
     );
 
@@ -163,9 +165,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));
-
-        setDonationLevels(options);
-        setAttributes({levels: newLevels, defaultLevel: Number(checkedLevel[0].value)});
+        const newDescriptions = options.map((option) => option.description);
+
+        setDonationLevels(donationLevels);
+        setAttributes({
+            levels: newLevels,
+            defaultLevel: Number(checkedLevel[0].value),
+            descriptions: newDescriptions,
+        });
     };
 
     const getDefaultBillingPeriodOptions = useCallback(
@@ -220,6 +227,18 @@ 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')}
+                        hasDescriptions={!!descriptions}
+                    />
+                )}
             </PanelBody>
             <PanelBody title={__('Custom Amount', 'give')} initialOpen={false}>
                 <ToggleControl
@@ -248,20 +267,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 ? (