@kiva/kv-components 4.5.1 → 4.7.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.7.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.6.0...@kiva/kv-components@4.7.0) (2025-01-09)
+
+
+### Features
+
+* add autoplay button if autoplay plugin is enabled ([8bebbe5](https://github.com/kiva/kv-ui-elements/commit/8bebbe5945dd4e34c922f9f511a4145564ae005a))
+
+
+
+
+
+# [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/KvVerticalCarousel.vue

@@ -29,40 +29,69 @@
 		<!-- Carousel Controls -->
 		<div
 			class="kv-carousel__controls tw-flex
-			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
-			tw-mt-2 tw-w-full"
+			tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full
+			tw-justify-between md:tw-justify-center"
 		>
-			<button
-				class="tw-text-primary
+			<div
+				class="tw-flex tw-gap-2 tw-w-full md:tw-w-auto"
+				:class="{'tw-justify-between md:tw-justify-center': !hasAutoplay}"
+			>
+				<button
+					class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollPrev()"
-				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
-			>
-				<kv-material-icon
-					class="tw-w-4"
-					:icon="mdiChevronUp"
-				/>
-				<span class="tw-sr-only">Show previous slide</span>
-			</button>
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronUp"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+				<button
+					class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronDown"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+
 			<button
+				v-if="hasAutoplay"
 				class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollNext()"
-				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				@click.native.prevent="toggleAutoPlay()"
 			>
 				<kv-material-icon
+					v-if="isAutoplaying"
 					class="tw-w-4"
-					:icon="mdiChevronDown"
+					:icon="mdiPause"
 				/>
-				<span class="tw-sr-only">Show next slide</span>
+				<kv-material-icon
+					v-else
+					class="tw-w-4"
+					:icon="mdiPlay"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
 			</button>
 		</div>
 	</div>
@@ -70,9 +99,15 @@
 
 <script>
 import {
+	toRefs,
+} from 'vue-demi';
+import {
+	mdiPause,
+	mdiPlay,
 	mdiChevronUp,
 	mdiChevronDown,
 } from '@mdi/js';
+import { computed } from 'vue';
 import { carouselUtil } from '../utils/carousels';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
@@ -129,6 +164,10 @@ export default {
 		'interact-carousel',
 	],
 	setup(props, { emit, slots }) {
+		const {
+			autoplayOptions,
+		} = toRefs(props);
+
 		const {
 			componentSlotKeys,
 			currentIndex,
@@ -148,7 +187,12 @@ export default {
 			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
+		const hasAutoplay = computed(() => {
+			return Object.keys(autoplayOptions.value).length !== 0;
+		});
+
 		return {
+			hasAutoplay,
 			componentSlotKeys,
 			currentIndex,
 			embla,
@@ -156,6 +200,8 @@ export default {
 			handleUserInteraction,
 			isAriaHidden,
 			isAutoplaying,
+			mdiPause,
+			mdiPlay,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,

package/dist/components/stories/KvCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvCarousel from '../KvCarousel.vue';
 import KvLoadingSpinner from '../KvLoadingSpinner.vue';
 import KvButton from '../KvButton.vue';
@@ -444,14 +445,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvCarousel,
 	},
-	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: `
@@ -461,34 +460,20 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-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();
-		},
-	},
 });
 
 export const Fade = () => ({
 	components: {
 		KvCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-carousel

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,
+});