@kiva/kv-components 3.71.2 → 3.72.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.72.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.71.2...@kiva/kv-components@3.72.0) (2024-04-05)
+
+
+### Features
+
+* huge lent amount added to lend cta dropdown ([#387](https://github.com/kiva/kv-ui-elements/issues/387)) ([0874f5c](https://github.com/kiva/kv-ui-elements/commit/0874f5c888bb388fc9e9f7dc857f2c92b919c78b))
+
+
+
+
+
 ## [3.71.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.71.1...@kiva/kv-components@3.71.2) (2024-04-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.71.2",
+  "version": "3.72.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "8befe6efc6052b76c67a4b377b945dd19021f7ee"
+  "gitHead": "4948d2fb45e6c10fd6251788a8b1051a1761c9b8"
 }

package/vue/KvClassicLoanCard.vue

@@ -219,6 +219,8 @@
 				:user-balance="userBalance"
 				:get-cookie="getCookie"
 				:set-cookie="setCookie"
+				:enable-huge-amount="enableHugeAmount"
+				:is-visitor="isVisitor"
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
@@ -246,6 +248,8 @@
 				:get-cookie="getCookie"
 				:set-cookie="setCookie"
 				:error-msg="errorMsg"
+				:enable-huge-amount="enableHugeAmount"
+				:is-visitor="isVisitor"
 				@add-to-basket="$emit('add-to-basket', $event)"
 			/>
 		</div>
@@ -383,6 +387,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		enableHugeAmount: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {

package/vue/KvLendCta.vue

@@ -199,6 +199,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		enableHugeAmount: {
+			type: Boolean,
+			default: false,
+		},
+		isVisitor: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -420,11 +428,37 @@ export default {
 			}
 			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);
-			return (enableFiveDollarsNotes && !inPfp)
+			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/KvLoanActivities.vue

@@ -65,6 +65,8 @@
 						:basket-items="basketItems"
 						:route="route"
 						:is-adding="isAdding"
+						:enable-huge-amount="enableHugeAmount"
+						:is-visitor="isVisitor"
 						:enable-five-dollars-notes="enableFiveDollarsNotes"
 						@add-to-basket="$emit('add-to-basket', $event)"
 					/>
@@ -164,6 +166,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		enableHugeAmount: {
+			type: Boolean,
+			default: false,
+		},
+		isVisitor: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	emits: [
 		'add-to-basket',

package/vue/KvWideLoanCard.vue

@@ -215,6 +215,8 @@
 					:user-balance="userBalance"
 					:get-cookie="getCookie"
 					:set-cookie="setCookie"
+					:enable-huge-amount="enableHugeAmount"
+					:is-visitor="isVisitor"
 					class="tw-mt-auto tw-self-end"
 					:class="{'tw-flex-grow' : unreservedAmount === 0, 'tw-flex-shrink-0' : unreservedAmount > 0}"
 					@add-to-basket="$emit('add-to-basket', $event)"
@@ -331,6 +333,10 @@ export default {
 			type: Array,
 			default: () => ([]),
 		},
+		enableHugeAmount: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {

package/vue/stories/KvClassicLoanCard.stories.js

@@ -31,6 +31,7 @@ const story = (args) => {
 					:custom-callouts="customCallouts"
 					:is-team-pick="isTeamPick"
 					:combined-activities="combinedActivities"
+					:enable-huge-amount="enableHugeAmount"
 				/>
 			</div>
 		`,
@@ -375,3 +376,15 @@ export const ActivityFeed = story({
 	photoPath,
 	combinedActivities,
 });
+
+export const HugeLentAmount = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '850.00',
+	},
+	kvTrackFunction,
+	photoPath,
+	isVisitor: false,
+	enableHugeAmount: true,
+});

package/vue/stories/KvLendCta.stories.js

@@ -21,6 +21,8 @@ const story = (args) => {
 					:kv-track-function="kvTrackFunction"
 					:show-view-loan="showViewLoan"
 					:custom-loan-details="customLoanDetails"
+					:enable-huge-amount="enableHugeAmount"
+					:is-visitor="isVisitor"
 				/>
 			</div>
 		`,
@@ -68,6 +70,28 @@ export const Dropdown = story({
 	kvTrackFunction,
 });
 
+export const HugeLentAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '12850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+});
+
+export const Between500and1000 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+});
+
 export const FiveDollar = story({
 	isLoading: false,
 	loan: {

package/vue/stories/KvWideLoanCard.stories.js

@@ -27,6 +27,7 @@ const story = (args) => {
 				:photo-path="photoPath"
 				:show-view-loan="showViewLoan"
 				:custom-callouts="customCallouts"
+				:enable-huge-amount="enableHugeAmount"
 			/>
 		</div>
 	`,
@@ -277,3 +278,15 @@ export const LendAgain = story({
 	kvTrackFunction,
 	photoPath,
 });
+
+export const HugeLentAmount = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '850.00',
+	},
+	kvTrackFunction,
+	photoPath,
+	isVisitor: false,
+	enableHugeAmount: true,
+});