@kiva/kv-components 3.23.0 → 3.24.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.
 
+# [3.24.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.23.1...@kiva/kv-components@3.24.0) (2023-06-21)
+
+
+### Features
+
+* add support for $5 notes default lend CTA dropdown selected amount changing for ERL ([bac6944](https://github.com/kiva/kv-ui-elements/commit/bac69444b032c9b42c25f6359baf7c4a03eb651b))
+
+
+
+
+
+## [3.23.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.23.0...@kiva/kv-components@3.23.1) (2023-06-14)
+
+
+### Bug Fixes
+
+* **KvLightbox:** use all available space for title instead of sharing with close button ([21db7b9](https://github.com/kiva/kv-ui-elements/commit/21db7b905119276e2fe21d4e31b4b73bc1e780d1))
+
+
+
+
+
 # [3.23.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.22.3...@kiva/kv-components@3.23.0) (2023-06-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "097c378d83450baa4999ee5440a3862aa1496836"
+  "gitHead": "37410d19aa27c86c01a93e6423439b4da500673b"
 }

package/tests/unit/specs/utils/loanUtils.spec.js

@@ -0,0 +1,313 @@
+import {
+	isBetween25And50,
+	isLessThan25,
+	getLendCtaSelectedOption,
+	ERL_COOKIE_NAME,
+	TOP_UP_CAMPAIGN,
+	BASE_CAMPAIGN,
+} from '../../../../utils/loanUtils';
+
+describe('loanUtils', () => {
+	describe('isBetween25And50', () => {
+		it('should handle empty string', () => {
+			expect(isBetween25And50('')).toBe(false);
+			expect(isBetween25And50(undefined)).toBe(false);
+			expect(isBetween25And50(null)).toBe(false);
+		});
+
+		it('should return false for number below 25', () => {
+			expect(isBetween25And50('3')).toBe(false);
+		});
+
+		it('should return false for 25', () => {
+			expect(isBetween25And50('25')).toBe(false);
+		});
+
+		it('should return true for number between 25 and 50', () => {
+			expect(isBetween25And50('30')).toBe(true);
+		});
+
+		it('should return true for 50', () => {
+			expect(isBetween25And50('50')).toBe(true);
+		});
+
+		it('should return false for number above 50', () => {
+			expect(isBetween25And50('100')).toBe(false);
+		});
+	});
+
+	describe('isLessThan25', () => {
+		it('should handle empty string', () => {
+			expect(isLessThan25('')).toBe(false);
+			expect(isLessThan25(undefined)).toBe(false);
+			expect(isLessThan25(null)).toBe(false);
+		});
+
+		it('should return false for number below 0', () => {
+			expect(isLessThan25('-1')).toBe(false);
+		});
+
+		it('should return false for 0', () => {
+			expect(isLessThan25('0')).toBe(false);
+		});
+
+		it('should return true for number below 25', () => {
+			expect(isLessThan25('3')).toBe(true);
+		});
+
+		it('should return false for 25', () => {
+			expect(isLessThan25('25')).toBe(false);
+		});
+
+		it('should return true for number above 25', () => {
+			expect(isLessThan25('30')).toBe(false);
+		});
+	});
+
+	describe('getLendCtaSelectedOption', () => {
+		let mockCookieStoreGet;
+		let mockCookieStoreSet;
+		const mockTomorrow = new Date(2023, 1, 2);
+
+		beforeEach(() => {
+			mockCookieStoreGet = jest.fn();
+			mockCookieStoreSet = jest.fn();
+			jest.useFakeTimers('modern');
+			jest.setSystemTime(new Date(2023, 1, 1));
+		});
+
+		afterEach(() => {
+			jest.clearAllMocks();
+			jest.useRealTimers();
+		});
+
+		it('should handle unreserved amount greater than $50 without campaign', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'75.00',
+				'0.00',
+			);
+
+			expect(result).toBe('25');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+
+		it('should handle unreserved amount between $25 and $50 without $5 notes', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'45.00',
+				'0.00',
+			);
+
+			expect(result).toBe('45');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+
+		it('should handle unreserved amount less than $25 without $5 notes', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('15');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+
+		it('should handle $5 notes ERL top up campaign without existing cookie', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				TOP_UP_CAMPAIGN,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				TOP_UP_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL base campaign without existing cookie', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				BASE_CAMPAIGN,
+				'15.00',
+				'10.00',
+			);
+
+			expect(result).toBe('10');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				BASE_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL base campaign max $25', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				BASE_CAMPAIGN,
+				'75.00',
+				'50.00',
+			);
+
+			expect(result).toBe('25');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				BASE_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL base campaign default to $5 with no balance', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				BASE_CAMPAIGN,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				BASE_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL base campaign default to unreserved amount when not enough', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				BASE_CAMPAIGN,
+				'5.00',
+				'15.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				BASE_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL top up campaign with existing cookie', () => {
+			mockCookieStoreGet.mockReturnValue(TOP_UP_CAMPAIGN);
+
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+
+		it('should handle $5 notes ERL base campaign with existing cookie', () => {
+			mockCookieStoreGet.mockReturnValue(BASE_CAMPAIGN);
+
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'15.00',
+				'15.00',
+			);
+
+			expect(result).toBe('15');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+
+		it('should handle $5 notes ERL campaign use partial string match', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				`asd${TOP_UP_CAMPAIGN}asd`,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				TOP_UP_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL campaign use case insensitive match', () => {
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				`asd${TOP_UP_CAMPAIGN.toLowerCase()}asd`,
+				'15.00',
+				'0.00',
+			);
+
+			expect(result).toBe('5');
+			expect(mockCookieStoreGet).toHaveBeenCalledWith(ERL_COOKIE_NAME);
+			expect(mockCookieStoreSet).toHaveBeenCalledWith(
+				ERL_COOKIE_NAME,
+				TOP_UP_CAMPAIGN,
+				{ expires: mockTomorrow },
+			);
+		});
+
+		it('should handle $5 notes ERL campaign with undefined balance', () => {
+			mockCookieStoreGet.mockReturnValue(BASE_CAMPAIGN);
+
+			const result = getLendCtaSelectedOption(
+				mockCookieStoreGet,
+				mockCookieStoreSet,
+				true,
+				undefined,
+				'100.00',
+				undefined,
+			);
+
+			expect(result).toBe('25');
+			expect(mockCookieStoreGet).toHaveBeenCalledTimes(0);
+			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
+		});
+	});
+});

package/utils/loanUtils.js

@@ -0,0 +1,88 @@
+export const ERL_COOKIE_NAME = 'kverlfivedollarnotes';
+export const TOP_UP_CAMPAIGN = 'TOPUP-VB-BALANCE-MPV1';
+export const BASE_CAMPAIGN = 'BASE-VB_BALANCE_MPV1';
+
+/**
+ * Checks if the unreserved amount is between 25 and 50
+ *
+ * @param {string} unreservedAmount
+ * @returns Whether the unreserved amount is between 25 and 50
+ */
+export function isBetween25And50(unreservedAmount) {
+	return unreservedAmount <= 50 && unreservedAmount > 25;
+}
+
+/**
+ * Checks if the unreserved amount is less than 25
+ *
+ * @param {string} unreservedAmount
+ * @returns Whether the unreserved amount is less than 25
+ */
+export function isLessThan25(unreservedAmount) {
+	return unreservedAmount < 25 && unreservedAmount > 0;
+}
+
+/**
+ * Gets the selected option for the Lend CTA component
+ *
+ * @param {Function} getCookie Method that returns a cookie by name
+ * @param {Function} setCookie Method that sets a cookie with the provided name, value, and options
+ * @param {boolean} enableFiveDollarsNotes Whether $5 notes experiment is assigned
+ * @param {string} campaign The "utm_campaign" query param sourced from the Vue component route
+ * @param {string} unreservedAmount The unreserved amount for the loan
+ * @param {string} userBalance The balance of the current user
+ * @returns {string} The option to be selected in the CTA dropdown
+ */
+export function getLendCtaSelectedOption(
+	getCookie,
+	setCookie,
+	enableFiveDollarsNotes,
+	campaign,
+	unreservedAmount,
+	userBalance,
+) {
+	// Don't enable the campaign changes when the user balance is undefined (user not logged in)
+	if (enableFiveDollarsNotes && typeof userBalance !== 'undefined') {
+		let currentCampaign = getCookie?.(ERL_COOKIE_NAME);
+
+		if (campaign && typeof campaign === 'string' && !currentCampaign) {
+			// Effects of the campaign lasts for 24 hours
+			const expires = new Date();
+			expires.setHours(expires.getHours() + 24);
+
+			const campaignToCheck = campaign.toUpperCase();
+
+			// eslint-disable-next-line no-nested-ternary
+			currentCampaign = campaignToCheck.includes(TOP_UP_CAMPAIGN)
+				? TOP_UP_CAMPAIGN
+				: (campaignToCheck.includes(BASE_CAMPAIGN) ? BASE_CAMPAIGN : '');
+
+			if (currentCampaign && setCookie) {
+				setCookie(ERL_COOKIE_NAME, currentCampaign, { expires });
+			}
+		}
+
+		if (currentCampaign) {
+			// Base campaign gets largest increment of $5 under the user's balance up to $25 or the unreserved amount
+			if (currentCampaign === BASE_CAMPAIGN) {
+				let val = Math.floor(userBalance / 5) * 5;
+
+				// eslint-disable-next-line no-nested-ternary
+				val = val === 0 ? 5 : (val > 25 ? 25 : val);
+
+				return Number(val <= unreservedAmount ? val : unreservedAmount).toFixed();
+			}
+
+			// Top up campaign defaults to $5
+			return Number(unreservedAmount > 5 ? 5 : unreservedAmount).toFixed();
+		}
+	}
+
+	// Handle when $5 notes isn't enabled
+	if (isBetween25And50(unreservedAmount) || isLessThan25(unreservedAmount)) {
+		return Number(unreservedAmount).toFixed();
+	}
+
+	// $25 is the fallback default selected option
+	return '25';
+}

package/vue/KvClassicLoanCard.vue

@@ -205,6 +205,10 @@
 				:show-view-loan="showViewLoan"
 				:custom-loan-details="customLoanDetails"
 				:external-links="externalLinks"
+				:route="route"
+				:user-balance="userBalance"
+				:get-cookie="getCookie"
+				:set-cookie="setCookie"
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
@@ -304,6 +308,22 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		route: {
+			type: String,
+			default: undefined,
+		},
+		userBalance: {
+			type: String,
+			default: undefined,
+		},
+		getCookie: {
+			type: Function,
+			default: undefined,
+		},
+		setCookie: {
+			type: Function,
+			default: undefined,
+		},
 	},
 	data() {
 		return {

package/vue/KvLendAmountButton.vue

@@ -1,8 +1,5 @@
 <template>
-	<kv-button
-		:state="buttonState"
-		@click="addToBasket"
-	>
+	<kv-button @click="addToBasket">
 		{{ buttonText }}
 	</kv-button>
 </template>

package/vue/KvLendCta.vue

@@ -132,6 +132,7 @@ import KvLendAmountButton from './KvLendAmountButton.vue';
 import KvUiSelect from './KvSelect.vue';
 import KvUiButton from './KvButton.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
+import { getLendCtaSelectedOption } from '../utils/loanUtils';
 
 export default {
 	name: 'KvLendCta',
@@ -178,11 +179,34 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		route: {
+			type: String,
+			default: undefined,
+		},
+		userBalance: {
+			type: String,
+			default: undefined,
+		},
+		getCookie: {
+			type: Function,
+			default: undefined,
+		},
+		setCookie: {
+			type: Function,
+			default: undefined,
+		},
 	},
 	data() {
 		return {
 			mdiChevronRight,
-			selectedOption: this.getSelectedOption(this.loan?.unreservedAmount),
+			selectedOption: getLendCtaSelectedOption(
+				this.getCookie,
+				this.setCookie,
+				this.enableFiveDollarsNotes,
+				this.route?.query?.utm_campaign,
+				this.loan?.unreservedAmount,
+				this.userBalance,
+			),
 		};
 	},
 	computed: {
@@ -313,7 +337,14 @@ export default {
 	watch: {
 		unreservedAmount(newValue, previousValue) {
 			if (newValue !== previousValue && previousValue === '') {
-				this.selectedOption = this.getSelectedOption(newValue);
+				this.selectedOption = getLendCtaSelectedOption(
+					this.getCookie,
+					this.setCookie,
+					this.enableFiveDollarsNotes,
+					this.route?.query?.utm_campaign,
+					newValue,
+					this.userBalance,
+				);
 			}
 		},
 	},
@@ -337,12 +368,6 @@ export default {
 		isAmountBetween25And500(unreservedAmount) {
 			return unreservedAmount < 500 && unreservedAmount >= 25;
 		},
-		getSelectedOption(unreservedAmount) {
-			if (this.isAmountBetween25And50(unreservedAmount) || this.isAmountLessThan25(unreservedAmount)) {
-				return Number(unreservedAmount).toFixed();
-			}
-			return '25';
-		},
 		trackLendAmountSelection(selectedDollarAmount) {
 			this.kvTrackFunction(
 				'Lending',

package/vue/KvLightbox.vue

@@ -63,7 +63,7 @@
 								tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5
 							"
 						>
-							<div>
+							<div class="tw-flex-grow">
 								<!-- @slot header -->
 								<slot name="header">
 									<h2	class="tw-text-h3 tw-flex-1">