Merge branch 'epic/donation-amount-level-descriptions' into refactor/…

…update-donation-type-settings
impress-org · Apr 15, 2024 · 9623b44 · 9623b44
2 parents 9143888 + 1750a6c
commit 9623b44
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 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
@@ -57,10 +57,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,
@@ -121,9 +127,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,
         }))
@@ -164,9 +170,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(
@@ -219,6 +230,20 @@ const Inspector = ({attributes, setAttributes}) => {
                         defaultControlsTooltip={__('Default Level', 'give')}
                     />
                 )}
+                {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

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
@@ -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
@@ -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;
+}