@kiva/kv-components 4.5.1 → 4.7.0

package/dist/components/stories/KvVerticalCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvVerticalCarousel from '../KvVerticalCarousel.vue';
 import KvButton from '../KvButton.vue';
 
@@ -186,14 +187,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -203,34 +202,21 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
+/** Fade really only works when the carousel displays 1 slide at a time, this story is wonky as expected */
 export const Fade = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-vertical-carousel

package/dist/utils/carousels.cjs

@@ -61,6 +61,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = (0, import_vue_demi.ref)(null);
   const embla = (0, import_vue_demi.ref)(null);
   const slides = (0, import_vue_demi.ref)([]);
+  const isAutoplaying = (0, import_vue_demi.ref)(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = (0, import_vue_demi.ref)(startIndex);
   const slideIndicatorCount = (0, import_vue_demi.ref)(0);
@@ -86,10 +87,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -99,14 +105,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -143,7 +141,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   (0, import_vue_demi.onMounted)(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
@@ -181,11 +179,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   (0, import_vue_demi.onUnmounted)(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/carousels.js

@@ -1,6 +1,6 @@
 import {
   carouselUtil
-} from "./chunk-P6FXCNYP.js";
+} from "./chunk-WLQNGWMC.js";
 import "./chunk-HV3AUBFT.js";
 import "./chunk-YCNMJ4YV.js";
 export {

package/dist/utils/{chunk-P6FXCNYP.js → chunk-WLQNGWMC.js}

@@ -25,6 +25,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = ref(null);
   const embla = ref(null);
   const slides = ref([]);
+  const isAutoplaying = ref(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = ref(startIndex);
   const slideIndicatorCount = ref(0);
@@ -50,10 +51,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await nextTick();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -63,14 +69,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -107,7 +105,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   onMounted(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push(Autoplay(autoplayOptions.value));
@@ -145,11 +143,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   onUnmounted(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/index.cjs

@@ -169,6 +169,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = (0, import_vue_demi.ref)(null);
   const embla = (0, import_vue_demi.ref)(null);
   const slides = (0, import_vue_demi.ref)([]);
+  const isAutoplaying = (0, import_vue_demi.ref)(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = (0, import_vue_demi.ref)(startIndex);
   const slideIndicatorCount = (0, import_vue_demi.ref)(0);
@@ -194,10 +195,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -207,14 +213,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -251,7 +249,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   (0, import_vue_demi.onMounted)(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
@@ -289,11 +287,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   (0, import_vue_demi.onUnmounted)(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/index.js

@@ -31,7 +31,7 @@ import {
 } from "./chunk-3HK4G4NT.js";
 import {
   carouselUtil
-} from "./chunk-P6FXCNYP.js";
+} from "./chunk-WLQNGWMC.js";
 import {
   throttle
 } from "./chunk-HV3AUBFT.js";

package/package.json

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

package/utils/carousels.js

@@ -22,6 +22,8 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	const rootEl = ref(null);
 	const embla = ref(null);
 	const slides = ref([]);
+	const isAutoplaying = ref(false);
+
 	const startIndex = emblaOptions.value?.startIndex ?? 0;
 	const currentIndex = ref(startIndex);
 	// The indicator count may differ from the slide count when multiple slides are in view
@@ -63,6 +65,13 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			await nextTick(); // wait for embla.
 			goToSlide(index);
 		}
+
+		/** Stop autoplay on user interaction */
+		const autoplay = embla.value?.plugins()?.autoplay;
+		if (autoplay) {
+			autoplay.stop();
+		}
+
 		/**
 		 * Fires when the user interacts with the carousel.
 		 * Contains the interaction type (swipe-left, click-left-arrow, etc.)
@@ -81,19 +90,8 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		if (!autoplay) return;
 		const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
 		playOrStop();
-		handleUserInteraction(null, 'autoplay');
 	};
 
-	/**
-	 * Returns true if the carousel is autoplaying
-	 *
-	 * @public This is a public method
-	 */
-	const isAutoplaying = () => {
-		const autoplay = embla.value?.plugins()?.autoplay;
-		if (!autoplay) return false;
-		return autoplay.isPlaying();
-	};
 	/**
 	 * Returns number of slides in the carousel
 	 *
@@ -198,10 +196,32 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 				emit('change', currentIndex);
 			});
 		});
+
+		embla?.value?.on('autoplay:play', () => {
+			console.log('autoplay:play');
+			/**
+			 * Fires when autoplay starts
+			 * @event autoplay-play
+			 * @type {Event}
+			 */
+			isAutoplaying.value = true;
+		});
+
+		embla?.value?.on('autoplay:stop', () => {
+			console.log('autoplay:stop');
+			/**
+			 * Fires when autoplay starts
+			 * @event autoplay-play
+			 * @type {Event}
+			 */
+			isAutoplaying.value = false;
+		});
 	});
 
 	onUnmounted(async () => {
 		embla?.value?.off('select');
+		embla?.value?.off('autoplay:play');
+		embla?.value?.off('autoplay:stop');
 		embla?.value?.destroy();
 	});
 

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>