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;