diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/DonationAmountLevels.tsx index 5c841eb7946..3dfad87aef9 100644 --- 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 ( -
- {levels.map((levelAmount, index) => { - const label = formatter.format(levelAmount); - const selected = levelAmount === amount; +
0, + })} + > + {allLevels.map((level, index) => { + const label = formatter.format(level.value); + const selected = level.value === amount; + const hasDescription = level.label; + return ( - + + {hasDescription && ( + {level.label} + )} +
); })}
diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/index.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/index.tsx index 8ff9d0676dd..170cbb48f39 100644 --- 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( @@ -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 index 8b7c9d094d8..2f426462055 100644 --- 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 index d1fe6722216..c5bac486c0d 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 @@ -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;