Refactor: Update DonationAmountLevels template to support descriptions (

#7363)
impress-org · Apr 24, 2024 · 0d1ec0c · 0d1ec0c
1 parent ffdbe2b
commit 0d1ec0c
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 20 deletions.
diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx
@@ -6,11 +6,12 @@ import classNames from 'classnames';
 type DonationAmountLevelsProps = {
     name: string;
     currency: string;
-    levels: number[];
+    levels: {label: string; value: number}[];
     onLevelClick?: (amount: number) => void;
 };
 
 /**
+ * @unreleased add level descriptions.
  * @since 3.0.0
  */
 export default function DonationAmountLevels({
@@ -23,24 +24,51 @@ export default function DonationAmountLevels({
     const amount = useWatch({name});
     const formatter = useCurrencyFormatter(currency);
 
+    const groupedLevels = levels.reduce(
+        (acc, level) => {
+            const key = level.label ? 'labeled' : 'unlabeled';
+            acc[key].push(level);
+            return acc;
+        },
+        {labeled: [], unlabeled: []}
+    );
+
+    const allLevels = [...groupedLevels.labeled, ...groupedLevels.unlabeled];
+
     return (
-        <div className="givewp-fields-amount__levels-container">
-            {levels.map((levelAmount, index) => {
-                const label = formatter.format(levelAmount);
-                const selected = levelAmount === amount;
+        <div
+            className={classNames('givewp-fields-amount__levels-container', {
+                'givewp-fields-amount__levels-container--has-descriptions': groupedLevels.labeled.length > 0,
+            })}
+        >
+            {allLevels.map((level, index) => {
+                const label = formatter.format(level.value);
+                const selected = level.value === amount;
+                const hasDescription = level.label;
+
                 return (
-                    <button
-                        className={classNames('givewp-fields-amount__level', {
-                            'givewp-fields-amount__level--selected': selected,
+                    <div
+                        className={classNames('givewp-fields-amount__level-container', {
+                            'givewp-fields-amount__level-container--col': hasDescription,
                         })}
-                        type="button"
-                        onClick={() => {
-                            onLevelClick(levelAmount);
-                        }}
-                        key={index}
                     >
-                        {label}
-                    </button>
+                        <button
+                            className={classNames('givewp-fields-amount__level', {
+                                'givewp-fields-amount__level--selected': selected,
+                                'givewp-fields-amount__level--description': hasDescription,
+                            })}
+                            type="button"
+                            onClick={() => {
+                                onLevelClick(level.value);
+                            }}
+                            key={index}
+                        >
+                            {label}
+                        </button>
+                        {hasDescription && (
+                            <span className={'givewp-fields-amount__level__description'}>{level.label}</span>
+                        )}
+                    </div>
                 );
             })}
         </div>

diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/index.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/index.tsx
@@ -21,6 +21,8 @@ export default function Amount({
     fixedAmountValue,
     allowCustomAmount,
     messages,
+    descriptions,
+    descriptionsEnabled
 }: AmountProps) {
     const isFixedAmount = !allowLevels;
     const [customAmountValue, setCustomAmountValue] = useState<string>(
@@ -76,6 +78,8 @@ export default function Amount({
                         resetCustomAmount();
                         setValue(name, levelAmount);
                     }}
+                    descriptions={descriptions}
+                    descriptionsEnabled={descriptionsEnabled}
                 />
             )}
 

diff --git a/src/DonationForms/resources/styles/components/_amount.scss b/src/DonationForms/resources/styles/components/_amount.scss
@@ -114,15 +114,50 @@ $borderColor: #9A9A9A;
 
     &__levels-container {
         display: grid;
-        grid-auto-rows: 1fr;
-        grid-template-columns: repeat(2, 1fr);
         gap: var(--givewp-spacing-2);
+        grid-template-rows: repeat(2, 1fr);
         inline-size: 100%;
         list-style: none;
 
         @media screen and (min-width: variables.$givewp-breakpoint-sm) {
             grid-template-columns: repeat(3, 1fr);
         }
+
+        &--has-descriptions {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .givewp-fields-amount__level-container {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            gap: var(--givewp-spacing-4);
+            min-width: calc((100% - var(--givewp-spacing-2)) / 2);
+
+            @media screen and (min-width: variables.$givewp-breakpoint-sm) {
+                min-width: calc((100% - var(--givewp-spacing-2) * 2) / 3);
+            }
+
+            &--col {
+                flex-basis: 100%;
+            }
+        ;
+
+            .givewp-fields-amount__level {
+                height: 100%;
+
+                &--description {
+                    max-width: 144px;
+                }
+            }
+
+            .givewp-fields-amount__description {
+                margin-bottom: 0;
+                color: var(--givewp-grey-700);
+                font-size: 1rem;
+            }
+        }
     }
 
     &__level {

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
@@ -4,9 +4,6 @@ import type {subscriptionPeriod} from '@givewp/forms/registrars/templates/groups
 export interface DonationAmountAttributes {
     label: string;
     levels: OptionProps[];
-    descriptions: string[];
-    descriptionsEnabled: boolean;
-    defaultLevel: number;
     priceOption: string;
     setPrice: number;
     customAmount: boolean;