@kiva/kv-components 4.5.1 → 4.6.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.6.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.5.1...@kiva/kv-components@4.6.0) (2025-01-08)
+
+
+### Bug Fixes
+
+* case when unreserved amount is greater first dropdown option ([af7bac1](https://github.com/kiva/kv-ui-elements/commit/af7bac155c18e902c7fe9594d75bd74ee966564a))
+* edge cases for unreserved amount and select dropdown by default ([273e13f](https://github.com/kiva/kv-ui-elements/commit/273e13fa377277bf49684ea3032da56f0e5537ff))
+* new cases for unreserved amount ([2de1302](https://github.com/kiva/kv-ui-elements/commit/2de1302de738d0f2489f56721efc30d1f6ab448a))
+* remove lendCtaSelectedOption modification ([10c98d0](https://github.com/kiva/kv-ui-elements/commit/10c98d04bc72eba67591e6d7dbaf6347f5026bdf))
+* resolve comments and add new cases in stories ([310c152](https://github.com/kiva/kv-ui-elements/commit/310c15273d21e2610f7e7bd67c46e5c6d5bf32d5))
+
+
+### Features
+
+* add enableHugeAmount option to preset buttons ([c07a4b1](https://github.com/kiva/kv-ui-elements/commit/c07a4b1f74532b57f15a7aef9337659462c57b2e))
+* new lendCta variant with preset options as buttons plus dropdown ([1e464a7](https://github.com/kiva/kv-ui-elements/commit/1e464a7518e77657deb59cadb90f78f1dc0db287))
+* new line for dropdown when huge amount flag is enabled ([c66a90e](https://github.com/kiva/kv-ui-elements/commit/c66a90e6ac0e7b4bdc15ca28f681a97eab43dfca))
+
+
+
+
+
 ## [4.5.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.5.0...@kiva/kv-components@4.5.1) (2025-01-04)
 
 **Note:** Version bump only for package @kiva/kv-components

package/dist/components/KvLendCta.vue

@@ -54,10 +54,57 @@
 		>
 			<fieldset
 				class="tw-w-full tw-flex"
+				:class="{'tw-flex-col tw-gap-1 md:tw-flex-row md:tw-justify-between': showPresetAmounts}"
 				:disabled="isAdding"
 				data-testid="bp-lend-cta-select-and-button"
 			>
-				<div class="amountDropdownWrapper">
+				<div
+					v-if="showPresetAmounts"
+					class="tw-flex tw-gap-1"
+					:class="{'tw-flex-wrap md:tw-flex-nowrap': enableHugeAmount}"
+				>
+					<template v-if="!isLendAmountButton">
+						<kv-ui-button
+							v-for="option in presetButtonsPrices"
+							:key="option"
+							variant="secondary"
+							class="tw-inline-flex tw-flex-1 preset-option tw-w-8"
+							:class="{'selected-option': selectedOption == option }"
+							data-testid="bp-lend-cta-lend-button"
+							type="submit"
+							@click="clickPresetButton(option)"
+						>
+							${{ option }}
+						</kv-ui-button>
+					</template>
+					<kv-ui-select
+						v-if="showFilteredDropdown"
+						:id="`LoanAmountDropdown_${loanId}`"
+						v-model="selectedDropdownOption"
+						class="tw-min-w-12 tw-rounded filtered-dropdown"
+						:class="{
+							'unselected-dropdown': !selectedDropdown,
+							'selected-dropdown': selectedDropdown,
+							'tw-w-full': enableHugeAmount
+						}"
+						aria-label="Lend amount"
+						@update:modelValue="trackLendAmountSelection"
+						@click.native.stop="clickDropdown"
+					>
+						<option
+							v-for="priceOption in presetDropdownPrices"
+							:key="priceOption"
+							:value="priceOption"
+						>
+							{{ priceOption !== 'Other' ? `$${priceOption}` : priceOption }}
+						</option>
+					</kv-ui-select>
+				</div>
+
+				<div
+					v-else-if="!showPresetAmounts"
+					class="amountDropdownWrapper"
+				>
 					<kv-ui-select
 						v-if="hideShowLendDropdown && !isLessThan25"
 						:id="`LoanAmountDropdown_${loanId}`"
@@ -79,11 +126,17 @@
 				</div>
 
 				<!-- Lend button -->
-				<div :class="{ 'lendButtonWrapper': hideShowLendDropdown }">
+				<div
+					:class="{
+						'lendButtonWrapper': hideShowLendDropdown && !showPresetAmounts,
+						'tw-hidden': isAdding && showPresetAmounts
+					}"
+				>
 					<kv-ui-button
 						v-if="lendButtonVisibility && !isLessThan25"
 						key="lendButton"
 						class="tw-inline-flex tw-flex-1"
+						:class="{'tw-w-full': showPresetAmounts }"
 						data-testid="bp-lend-cta-lend-button"
 						type="submit"
 					>
@@ -95,6 +148,7 @@
 						v-else-if="showLendAgain"
 						key="lendAgainButton"
 						class="lend-again"
+						:class="{'tw-w-full': showPresetAmounts }"
 						data-testid="bp-lend-cta-lend-again-button"
 						type="submit"
 					>
@@ -218,10 +272,19 @@ export default {
 			type: Function,
 			default: undefined,
 		},
+		showPresetAmounts: {
+			type: Boolean,
+			default: false,
+		},
+		kvTrackCategory: {
+			type: String,
+			default: 'Lending',
+		},
 	},
 	data() {
 		return {
 			mdiChevronRight,
+			defaultAmountOptions: [25, 50, 75],
 			selectedOption: getLendCtaSelectedOption(
 				this.getCookie,
 				this.setCookie,
@@ -231,6 +294,7 @@ export default {
 				this.userBalance,
 				this.fiveDollarsSelected,
 			),
+			selectedDropdownOption: 'Other',
 		};
 	},
 	computed: {
@@ -271,21 +335,49 @@ export default {
 				this.isVisitor,
 			);
 		},
-		ctaButtonText() {
-			if (this.isCompleteLoanActive) {
-				return this.primaryButtonText || 'Lend';
+		presetButtonsPrices() {
+			const prices = this.prices.slice(0, 3);
+
+			// Show only one extra option as button
+			if (this.prices.length === 4) {
+				prices.push(this.prices[3]);
 			}
+
+			return prices;
+		},
+		presetDropdownPrices() {
+			// Hide dropdown if there is only one option
+			if (this.prices.length === 4) {
+				return [];
+			}
+
+			const extraDropdownPrices = this.prices.slice(this.defaultAmountOptions.length);
+			extraDropdownPrices.unshift('Other');
+
+			return extraDropdownPrices;
+		},
+		loanName() {
+			return this.loan?.name ?? '';
+		},
+		presetAmountCtaButtonText() {
+			return this.loan?.borrowerCount > 1 ? 'Support' : `Support ${this.loanName}`;
+		},
+		defaultCtaButtonText() {
+			if (this.showPresetAmounts) return this.presetAmountCtaButtonText;
+			return this.primaryButtonText || 'Lend';
+		},
+		ctaButtonText() {
 			switch (this.state) {
 				case 'loading':
 					return 'Loading...';
 				case 'refunded':
 				case 'expired':
 				default:
-					return this.primaryButtonText || 'Lend';
+					return this.defaultCtaButtonText;
 			}
 		},
 		loanInBasketButtonText() {
-			return this.secondaryButtonText;
+			return this.showPresetAmounts ? 'Continue to basket' : this.secondaryButtonText;
 		},
 		useFormSubmit() {
 			if (this.hideShowLendDropdown
@@ -347,18 +439,27 @@ export default {
 				|| this.isAmountBetween25And500(this.unreservedAmount));
 		},
 		isLendAmountButton() {
-			return (this.lendButtonVisibility || this.state === 'lent-to')
-				&& this.isAmountLessThan25(this.unreservedAmount);
+			return ((this.lendButtonVisibility || this.state === 'lent-to')
+				&& this.isAmountLessThan25(this.unreservedAmount));
 		},
 		isFunded() {
 			return this.state === 'funded' || this.state === 'fully-reserved';
 		},
 		amountToLend() {
+			if (this.selectedDropdown) {
+				return this.selectedDropdownOption;
+			}
 			return this.isLessThan25 ? this.unreservedAmount : this.selectedOption;
 		},
 		showLendAgain() {
 			return this.isLentTo && !this.isLessThan25;
 		},
+		selectedDropdown() {
+			return this.selectedDropdownOption !== 'Other';
+		},
+		showFilteredDropdown() {
+			return this.presetDropdownPrices.length > 1;
+		},
 	},
 	watch: {
 		unreservedAmount(newValue, previousValue) {
@@ -371,14 +472,19 @@ export default {
 					newValue,
 					this.userBalance,
 					this.fiveDollarsSelected,
+					this.showPresetAmounts,
 				);
 			}
+
+			if (this.showPresetAmounts) {
+				this.selectedOption = 'Other';
+			}
 		},
 	},
 	methods: {
 		async addToBasket() {
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'Add to basket',
 				this.showLendAgain ? 'Lend again' : 'lend-button-click',
 				this.loanId,
@@ -396,8 +502,12 @@ export default {
 			return unreservedAmount < 500 && unreservedAmount >= 25;
 		},
 		trackLendAmountSelection(selectedDollarAmount) {
+			if (this.showPresetAmounts) {
+				this.selectedOption = null;
+			}
+
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'Modify lend amount',
 				selectedDollarAmount,
 				this.loanId,
@@ -405,7 +515,9 @@ export default {
 			);
 		},
 		clickDropdown() {
-			this.kvTrackFunction('Lending', 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId);
+			this.kvTrackFunction(
+				this.kvTrackCategory, 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId,
+			);
 		},
 		clickSecondaryButton(event) {
 			if (this.secondaryButtonHandler) {
@@ -418,9 +530,15 @@ export default {
 				this.handleCheckout();
 			}
 		},
+		clickPresetButton(selectedDollarAmount) {
+			this.kvTrackFunction(
+				this.kvTrackCategory, 'Modify lend amount', selectedDollarAmount, this.loanId, this.loanId,
+			);
+			this.selectedOption = selectedDollarAmount;
+		},
 		handleCheckout() {
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'click-Continue-to-checkout',
 				'Continue to checkout',
 				this.loanId,
@@ -448,4 +566,24 @@ export default {
 .lendButtonWrapper >>> span:first-child {
 	border-radius: 0 14px 14px 0;
 }
+
+.filtered-dropdown >>> select {
+	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
+}
+
+.unselected-dropdown >>> select {
+	@apply tw-border-gray-400;
+}
+
+.selected-dropdown >>> select {
+	@apply tw-border-eco-green-4;
+}
+
+.preset-option >>> span.tw-w-full:first-child {
+	@apply tw-border-2 tw-border-gray-400;
+}
+
+.selected-option >>> span.tw-w-full:first-child {
+	@apply tw-border-eco-green-4;
+}
 </style>

package/dist/components/stories/KvLendCta.stories.js

@@ -164,3 +164,169 @@ export const ViewLoanFunded = story({
 	kvTrackFunction,
 	showViewLoan: true,
 });
+
+export const WithPresetOptions = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		name: 'John',
+		unreservedAmount: '150.00',
+		borrowerCount: 1,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsGroup = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsEqualThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '75.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '50.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan25 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '10.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan50 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '40.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan100 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '80.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan200 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '190.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsHugeAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '12850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLoading = story({
+	isLoading: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsAdding = story({
+	isLoading: false,
+	isAdding: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsBasketed = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	showPresetAmounts: true,
+	kvTrackFunction,
+});
+
+export const WithPresetOptionsBasketedWithSecondaryAction = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	externalLinks: true,
+	kvTrackFunction,
+	secondaryButtonHandler,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsFunded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsNonActionable = story({
+	isLoading: false,
+	loan: { status: 'refunded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "bcfe3bd0b8f202f7bdd27e47ce013f9c51d69469"
+  "gitHead": "4e5a4bbf728bcf6d7c29c291591cf52798230cb0"
 }

package/vue/KvLendCta.vue

@@ -54,10 +54,57 @@
 		>
 			<fieldset
 				class="tw-w-full tw-flex"
+				:class="{'tw-flex-col tw-gap-1 md:tw-flex-row md:tw-justify-between': showPresetAmounts}"
 				:disabled="isAdding"
 				data-testid="bp-lend-cta-select-and-button"
 			>
-				<div class="amountDropdownWrapper">
+				<div
+					v-if="showPresetAmounts"
+					class="tw-flex tw-gap-1"
+					:class="{'tw-flex-wrap md:tw-flex-nowrap': enableHugeAmount}"
+				>
+					<template v-if="!isLendAmountButton">
+						<kv-ui-button
+							v-for="option in presetButtonsPrices"
+							:key="option"
+							variant="secondary"
+							class="tw-inline-flex tw-flex-1 preset-option tw-w-8"
+							:class="{'selected-option': selectedOption == option }"
+							data-testid="bp-lend-cta-lend-button"
+							type="submit"
+							@click="clickPresetButton(option)"
+						>
+							${{ option }}
+						</kv-ui-button>
+					</template>
+					<kv-ui-select
+						v-if="showFilteredDropdown"
+						:id="`LoanAmountDropdown_${loanId}`"
+						v-model="selectedDropdownOption"
+						class="tw-min-w-12 tw-rounded filtered-dropdown"
+						:class="{
+							'unselected-dropdown': !selectedDropdown,
+							'selected-dropdown': selectedDropdown,
+							'tw-w-full': enableHugeAmount
+						}"
+						aria-label="Lend amount"
+						@update:modelValue="trackLendAmountSelection"
+						@click.native.stop="clickDropdown"
+					>
+						<option
+							v-for="priceOption in presetDropdownPrices"
+							:key="priceOption"
+							:value="priceOption"
+						>
+							{{ priceOption !== 'Other' ? `$${priceOption}` : priceOption }}
+						</option>
+					</kv-ui-select>
+				</div>
+
+				<div
+					v-else-if="!showPresetAmounts"
+					class="amountDropdownWrapper"
+				>
 					<kv-ui-select
 						v-if="hideShowLendDropdown && !isLessThan25"
 						:id="`LoanAmountDropdown_${loanId}`"
@@ -79,11 +126,17 @@
 				</div>
 
 				<!-- Lend button -->
-				<div :class="{ 'lendButtonWrapper': hideShowLendDropdown }">
+				<div
+					:class="{
+						'lendButtonWrapper': hideShowLendDropdown && !showPresetAmounts,
+						'tw-hidden': isAdding && showPresetAmounts
+					}"
+				>
 					<kv-ui-button
 						v-if="lendButtonVisibility && !isLessThan25"
 						key="lendButton"
 						class="tw-inline-flex tw-flex-1"
+						:class="{'tw-w-full': showPresetAmounts }"
 						data-testid="bp-lend-cta-lend-button"
 						type="submit"
 					>
@@ -95,6 +148,7 @@
 						v-else-if="showLendAgain"
 						key="lendAgainButton"
 						class="lend-again"
+						:class="{'tw-w-full': showPresetAmounts }"
 						data-testid="bp-lend-cta-lend-again-button"
 						type="submit"
 					>
@@ -218,10 +272,19 @@ export default {
 			type: Function,
 			default: undefined,
 		},
+		showPresetAmounts: {
+			type: Boolean,
+			default: false,
+		},
+		kvTrackCategory: {
+			type: String,
+			default: 'Lending',
+		},
 	},
 	data() {
 		return {
 			mdiChevronRight,
+			defaultAmountOptions: [25, 50, 75],
 			selectedOption: getLendCtaSelectedOption(
 				this.getCookie,
 				this.setCookie,
@@ -231,6 +294,7 @@ export default {
 				this.userBalance,
 				this.fiveDollarsSelected,
 			),
+			selectedDropdownOption: 'Other',
 		};
 	},
 	computed: {
@@ -271,21 +335,49 @@ export default {
 				this.isVisitor,
 			);
 		},
-		ctaButtonText() {
-			if (this.isCompleteLoanActive) {
-				return this.primaryButtonText || 'Lend';
+		presetButtonsPrices() {
+			const prices = this.prices.slice(0, 3);
+
+			// Show only one extra option as button
+			if (this.prices.length === 4) {
+				prices.push(this.prices[3]);
 			}
+
+			return prices;
+		},
+		presetDropdownPrices() {
+			// Hide dropdown if there is only one option
+			if (this.prices.length === 4) {
+				return [];
+			}
+
+			const extraDropdownPrices = this.prices.slice(this.defaultAmountOptions.length);
+			extraDropdownPrices.unshift('Other');
+
+			return extraDropdownPrices;
+		},
+		loanName() {
+			return this.loan?.name ?? '';
+		},
+		presetAmountCtaButtonText() {
+			return this.loan?.borrowerCount > 1 ? 'Support' : `Support ${this.loanName}`;
+		},
+		defaultCtaButtonText() {
+			if (this.showPresetAmounts) return this.presetAmountCtaButtonText;
+			return this.primaryButtonText || 'Lend';
+		},
+		ctaButtonText() {
 			switch (this.state) {
 				case 'loading':
 					return 'Loading...';
 				case 'refunded':
 				case 'expired':
 				default:
-					return this.primaryButtonText || 'Lend';
+					return this.defaultCtaButtonText;
 			}
 		},
 		loanInBasketButtonText() {
-			return this.secondaryButtonText;
+			return this.showPresetAmounts ? 'Continue to basket' : this.secondaryButtonText;
 		},
 		useFormSubmit() {
 			if (this.hideShowLendDropdown
@@ -347,18 +439,27 @@ export default {
 				|| this.isAmountBetween25And500(this.unreservedAmount));
 		},
 		isLendAmountButton() {
-			return (this.lendButtonVisibility || this.state === 'lent-to')
-				&& this.isAmountLessThan25(this.unreservedAmount);
+			return ((this.lendButtonVisibility || this.state === 'lent-to')
+				&& this.isAmountLessThan25(this.unreservedAmount));
 		},
 		isFunded() {
 			return this.state === 'funded' || this.state === 'fully-reserved';
 		},
 		amountToLend() {
+			if (this.selectedDropdown) {
+				return this.selectedDropdownOption;
+			}
 			return this.isLessThan25 ? this.unreservedAmount : this.selectedOption;
 		},
 		showLendAgain() {
 			return this.isLentTo && !this.isLessThan25;
 		},
+		selectedDropdown() {
+			return this.selectedDropdownOption !== 'Other';
+		},
+		showFilteredDropdown() {
+			return this.presetDropdownPrices.length > 1;
+		},
 	},
 	watch: {
 		unreservedAmount(newValue, previousValue) {
@@ -371,14 +472,19 @@ export default {
 					newValue,
 					this.userBalance,
 					this.fiveDollarsSelected,
+					this.showPresetAmounts,
 				);
 			}
+
+			if (this.showPresetAmounts) {
+				this.selectedOption = 'Other';
+			}
 		},
 	},
 	methods: {
 		async addToBasket() {
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'Add to basket',
 				this.showLendAgain ? 'Lend again' : 'lend-button-click',
 				this.loanId,
@@ -396,8 +502,12 @@ export default {
 			return unreservedAmount < 500 && unreservedAmount >= 25;
 		},
 		trackLendAmountSelection(selectedDollarAmount) {
+			if (this.showPresetAmounts) {
+				this.selectedOption = null;
+			}
+
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'Modify lend amount',
 				selectedDollarAmount,
 				this.loanId,
@@ -405,7 +515,9 @@ export default {
 			);
 		},
 		clickDropdown() {
-			this.kvTrackFunction('Lending', 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId);
+			this.kvTrackFunction(
+				this.kvTrackCategory, 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId,
+			);
 		},
 		clickSecondaryButton(event) {
 			if (this.secondaryButtonHandler) {
@@ -418,9 +530,15 @@ export default {
 				this.handleCheckout();
 			}
 		},
+		clickPresetButton(selectedDollarAmount) {
+			this.kvTrackFunction(
+				this.kvTrackCategory, 'Modify lend amount', selectedDollarAmount, this.loanId, this.loanId,
+			);
+			this.selectedOption = selectedDollarAmount;
+		},
 		handleCheckout() {
 			this.kvTrackFunction(
-				'Lending',
+				this.kvTrackCategory,
 				'click-Continue-to-checkout',
 				'Continue to checkout',
 				this.loanId,
@@ -448,4 +566,24 @@ export default {
 .lendButtonWrapper >>> span:first-child {
 	border-radius: 0 14px 14px 0;
 }
+
+.filtered-dropdown >>> select {
+	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
+}
+
+.unselected-dropdown >>> select {
+	@apply tw-border-gray-400;
+}
+
+.selected-dropdown >>> select {
+	@apply tw-border-eco-green-4;
+}
+
+.preset-option >>> span.tw-w-full:first-child {
+	@apply tw-border-2 tw-border-gray-400;
+}
+
+.selected-option >>> span.tw-w-full:first-child {
+	@apply tw-border-eco-green-4;
+}
 </style>

package/vue/stories/KvLendCta.stories.js

@@ -164,3 +164,169 @@ export const ViewLoanFunded = story({
 	kvTrackFunction,
 	showViewLoan: true,
 });
+
+export const WithPresetOptions = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		name: 'John',
+		unreservedAmount: '150.00',
+		borrowerCount: 1,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsGroup = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsEqualThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '75.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '50.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan25 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '10.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan50 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '40.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan100 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '80.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan200 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '190.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsHugeAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '12850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLoading = story({
+	isLoading: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsAdding = story({
+	isLoading: false,
+	isAdding: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsBasketed = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	showPresetAmounts: true,
+	kvTrackFunction,
+});
+
+export const WithPresetOptionsBasketedWithSecondaryAction = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	externalLinks: true,
+	kvTrackFunction,
+	secondaryButtonHandler,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsFunded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsNonActionable = story({
+	isLoading: false,
+	loan: { status: 'refunded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});