@kiva/kv-components 3.73.2 → 3.74.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.74.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.73.2...@kiva/kv-components@3.74.0) (2024-04-23)
+
+
+### Bug Fixes
+
+* adjusted comment ([e73e6a8](https://github.com/kiva/kv-ui-elements/commit/e73e6a842486ec5ce951a3130348cb1e3428288d))
+* extracted CTA dropdown methods and added unit tests ([4ef99de](https://github.com/kiva/kv-ui-elements/commit/4ef99deb24399fcb619c41d20370ad79812f1b00))
+* removed duplicate test ([838d6d4](https://github.com/kiva/kv-ui-elements/commit/838d6d48c85bbfd7759fd5266498219817e00cd7))
+
+
+### Features
+
+* $1000 lend CTA options ([4f89352](https://github.com/kiva/kv-ui-elements/commit/4f8935237acb9c1f1655b77cc604fe68b21ab077))
+
+
+
+
+
 ## [3.73.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.73.1...@kiva/kv-components@3.73.2) (2024-04-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.73.2",
+  "version": "3.74.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "9cd04b768af71aead30d08320229402bf3c79989"
+  "gitHead": "db1d9c79b08cf5489aa474fddaa610c365526ab7"
 }

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

@@ -2,6 +2,7 @@ import {
 	isBetween25And50,
 	isLessThan25,
 	getLendCtaSelectedOption,
+	getDropdownPriceArray,
 	ERL_COOKIE_NAME,
 	TOP_UP_CAMPAIGN,
 	BASE_CAMPAIGN,
@@ -310,4 +311,127 @@ describe('loanUtils', () => {
 			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
 		});
 	});
+
+	describe('getDropdownPriceArray', () => {
+		it('should return less than 25', () => {
+			const result = getDropdownPriceArray('15.00', true, 15);
+
+			expect(result).toEqual(['15']);
+		});
+
+		it('should return non-25 increments', () => {
+			const result = getDropdownPriceArray('30.00', true);
+
+			expect(result).toEqual(['25', '30']);
+		});
+
+		it('should return dropdown values', () => {
+			const result = getDropdownPriceArray('100.00');
+
+			expect(result).toEqual(['25', '50', '75', '100']);
+		});
+
+		it('should return huge dropdown values between 500 and 1000', () => {
+			const result = getDropdownPriceArray('650.00', false, 25, false, true, false);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+				'600',
+				'650',
+			]);
+		});
+
+		it('should return huge dropdown values up to 10,000', () => {
+			const result = getDropdownPriceArray('11000.00', false, 25, false, true, false);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+				'600',
+				'700',
+				'800',
+				'900',
+				'1,000',
+				'2,000',
+				'3,000',
+				'4,000',
+				'5,000',
+				'6,000',
+				'7,000',
+				'8,000',
+				'9,000',
+				'10,000',
+			]);
+		});
+
+		it('should return not huge dropdown values for visitor', () => {
+			const result = getDropdownPriceArray('650.00', false, 25, false, true, true);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+			]);
+		});
+
+		it('should return 5 dollar notes', () => {
+			const result = getDropdownPriceArray('30.00', true, 25, true);
+
+			expect(result).toEqual(['5', '10', '15', '20', '25', '30']);
+		});
+	});
 });

package/utils/loanUtils.js

@@ -1,3 +1,5 @@
+import numeral from 'numeral';
+
 export const ERL_COOKIE_NAME = 'kverlfivedollarnotes';
 export const TOP_UP_CAMPAIGN = 'TOPUP-VB-BALANCE-MPV1';
 export const BASE_CAMPAIGN = 'BASE-VB_BALANCE_MPV1';
@@ -109,3 +111,99 @@ export function getLendCtaSelectedOption(
 	// $25 is the fallback default selected option
 	return '25';
 }
+
+function buildHugePriceArray(amountLeft) {
+	const priceArray = [];
+
+	// Add $100 options up to $1,000
+	let minAmount = 100;
+	let limitAmount = amountLeft > 1000 ? 1000 : amountLeft;
+	let optionCount = limitAmount / minAmount;
+	for (let i = 1; i <= optionCount; i += 1) {
+		const price = minAmount * i + 500;
+		if (price > limitAmount) break;
+		priceArray.push(numeral(price).format('0,0'));
+	}
+
+	// Add $1000 options up to $10,000
+	minAmount = 1000;
+	limitAmount = amountLeft > 10000 ? 10000 : amountLeft;
+	optionCount = limitAmount / minAmount;
+	for (let i = 1; i <= optionCount; i += 1) {
+		const price = minAmount * i + 1000;
+		if (price > limitAmount) break;
+		priceArray.push(numeral(price).format('0,0'));
+	}
+
+	// Ensure final option is added
+	if (!priceArray.includes(numeral(limitAmount).format('0,0'))) {
+		priceArray.push(numeral(limitAmount).format('0,0'));
+	}
+
+	return priceArray;
+}
+
+function build5DollarsPriceArray(amountLeft) {
+	const limit5Notes = amountLeft < 50 ? amountLeft : 50;
+	const numberOf5 = limit5Notes / 5;
+	const numberOf25 = Math.ceil((amountLeft - limit5Notes) / 25) + 1;
+	const priceArray = [];
+	for (let i = 1; i <= numberOf5; i += 1) {
+		priceArray.push(numeral(5 * i).format('0,0'));
+	}
+	if (amountLeft > limit5Notes) {
+		for (let i = 3; i <= numberOf25; i += 1) {
+			priceArray.push(numeral(25 * i).format('0,0'));
+		}
+	}
+	return priceArray;
+}
+
+function buildPriceArray(amountLeft, minAmount) {
+	// Get count of shares based on available remaining amount
+	const optionCount = amountLeft / minAmount;
+	// Convert this to formatted array for our select element
+	const priceArray = []; // ex. priceArray = ['25', '50', '75']
+	for (let i = 1; i <= optionCount; i += 1) {
+		priceArray.push(numeral(minAmount * i).format('0,0'));
+	}
+	return priceArray;
+}
+
+/**
+ *	Gets the dropdown price values for the lend CTA
+ *
+ * @param {string} unreservedAmount The unreserved amount of the loan
+ * @param {boolean} isCompleteLoanActive Whether to include option that would complete loan
+ * @param {number} minAmount The min amount to show in the dropdown
+ * @param {boolean} enableFiveDollarsNotes Whether five dollar notes are enabled
+ * @param {boolean} enableHugeAmount Whether huge loan amounts are enabled
+ * @param {boolean} isVisitor Whether the current user is a visitor
+ * @param {boolean} inPfp Whether the loan is in PFP
+ * @returns {string[]} Price value array for the CTA dropdown
+ */
+export function getDropdownPriceArray(
+	unreservedAmount,
+	isCompleteLoanActive = false,
+	minAmount = 25,
+	enableFiveDollarsNotes = false,
+	enableHugeAmount = false,
+	isVisitor = true,
+	inPfp = false,
+) {
+	const parsedAmountLeft = parseFloat(unreservedAmount);
+	let priceArray = (enableFiveDollarsNotes && !inPfp)
+		? build5DollarsPriceArray(parsedAmountLeft).slice(0, 28)
+		: buildPriceArray(parsedAmountLeft, minAmount).slice(0, 20);
+
+	if (enableHugeAmount && parsedAmountLeft > 500 && !isVisitor) {
+		const hugePriceArray = buildHugePriceArray(parsedAmountLeft);
+		priceArray = priceArray.concat(hugePriceArray);
+	}
+
+	if (isCompleteLoanActive && !priceArray.includes(Number(unreservedAmount).toFixed())) {
+		priceArray.push(Number(unreservedAmount).toFixed());
+	}
+
+	return priceArray;
+}

package/vue/KvLendCta.vue

@@ -126,13 +126,12 @@
 </template>
 
 <script>
-import numeral from 'numeral';
 import { mdiChevronRight } from '@mdi/js';
 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';
+import { getLendCtaSelectedOption, getDropdownPriceArray } from '../utils/loanUtils';
 
 export default {
 	name: 'KvLendCta',
@@ -251,15 +250,14 @@ export default {
 			// If we wanted to show this interface on loans with less than 25 remaining they would see the selector
 			const minAmount = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25);
 			// Limit price options
-			const priceArray = this.getDropdownPriceArray(
+			return getDropdownPriceArray(
 				this.unreservedAmount,
+				this.isCompleteLoanActive,
 				minAmount,
 				this.enableFiveDollarsNotes,
+				this.enableHugeAmount,
+				this.isVisitor,
 			);
-			if (this.isCompleteLoanActive && !priceArray.includes(Number(this.unreservedAmount).toFixed())) {
-				priceArray.push(Number(this.unreservedAmount).toFixed());
-			}
-			return priceArray;
 		},
 		ctaButtonText() {
 			if (this.isCompleteLoanActive) {
@@ -403,63 +401,6 @@ export default {
 				this.loanId,
 			);
 		},
-		build5DollarsPriceArray(amountLeft) {
-			const limit5Notes = amountLeft < 50 ? amountLeft : 50;
-			const numberOf5 = limit5Notes / 5;
-			const numberOf25 = Math.ceil((amountLeft - limit5Notes) / 25) + 1;
-			const priceArray = [];
-			for (let i = 1; i <= numberOf5; i += 1) {
-				priceArray.push(numeral(5 * i).format('0,0'));
-			}
-			if (amountLeft > limit5Notes) {
-				for (let i = 3; i <= numberOf25; i += 1) {
-					priceArray.push(numeral(25 * i).format('0,0'));
-				}
-			}
-			return priceArray;
-		},
-		buildPriceArray(amountLeft, minAmount) {
-			// get count of shares based on available remaining amount.
-			const N = amountLeft / minAmount;
-			// convert this to formatted array for our select element
-			const priceArray = []; // ex. priceArray = ['25', '50', '75']
-			for (let i = 1; i <= N; i += 1) {
-				priceArray.push(numeral(minAmount * i).format('0,0'));
-			}
-			return priceArray;
-		},
-		buildHugePriceArray(amountLeft) {
-			const minAmount = 100;
-			const limitAmount = amountLeft > 1000 ? 1000 : amountLeft;
-			const N = limitAmount / minAmount;
-
-			const priceArray = [];
-			for (let i = 1; i <= N; i += 1) {
-				const price = minAmount * i + 500;
-				if (price > limitAmount) break;
-				priceArray.push(numeral(price).format('0,0'));
-			}
-
-			if (!priceArray.includes(numeral(limitAmount).format('0,0'))) {
-				priceArray.push(numeral(limitAmount).format('0,0'));
-			}
-
-			return priceArray;
-		},
-		getDropdownPriceArray(unreservedAmount, minAmount, enableFiveDollarsNotes, inPfp = false) {
-			const parsedAmountLeft = parseFloat(unreservedAmount);
-			let combinedPricesArray = [];
-			const priceArray = (enableFiveDollarsNotes && !inPfp)
-				? this.build5DollarsPriceArray(parsedAmountLeft).slice(0, 28)
-				: this.buildPriceArray(parsedAmountLeft, minAmount).slice(0, 20);
-
-			const showHugeAmount = this.enableHugeAmount && parsedAmountLeft > 500 && !this.isVisitor;
-			if (showHugeAmount) {
-				const hugePriceArray = this.buildHugePriceArray(parsedAmountLeft);
-				combinedPricesArray = priceArray.concat(hugePriceArray);
-			}
-			return showHugeAmount ? combinedPricesArray : priceArray;
-		},
 	},
 };
 

package/vue/stories/KvLendCta.stories.js

@@ -70,7 +70,7 @@ export const Dropdown = story({
 	kvTrackFunction,
 });
 
-export const HugeLentAmount = story({
+export const HugeAmount = story({
 	isLoading: false,
 	loan: {
 		id: 1,
@@ -81,7 +81,7 @@ export const HugeLentAmount = story({
 	isVisitor: false,
 });
 
-export const Between500and1000 = story({
+export const HugeAmountUnder1000 = story({
 	isLoading: false,
 	loan: {
 		id: 1,