@kiva/kv-components 3.71.1 → 3.72.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 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)
+
+
+### Bug Fixes
+
+* icon needs to be pulled to the right on voting card for small titles ([571d372](https://github.com/kiva/kv-ui-elements/commit/571d372d54c20c08203ef901cd8d55023e12477a))
+* pinned title to top of area below image and vote + progress to bottom of card ([24f1609](https://github.com/kiva/kv-ui-elements/commit/24f1609f4ccc6211c02baef3530dba6bfe593271))
+
+
+
+
+
 ## [3.71.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.71.0...@kiva/kv-components@3.71.1) (2024-04-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.71.1",
+  "version": "3.72.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "0f9330ee9a430eaa837a9dd7fa068afabc3fe756"
+  "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/KvVotingCard.vue

@@ -8,7 +8,6 @@
 		tw-p-1
 		tw-flex
 		tw-flex-col
-		tw-justify-between
 		tw-max-w-300"
 	>
 		<div class="tw-relative tw-flex tw-w-full tw-bg-black tw-rounded tw-mb-1">
@@ -35,13 +34,13 @@
 				</div>
 			</div>
 		</div>
-		<div class="tw-flex">
-			<div>
+		<div class="tw-flex tw-flex-grow">
+			<div class="tw-flex-grow">
 				<h3 class="tw-font-medium">
 					{{ category }}
 				</h3>
 			</div>
-			<div>
+			<div class="tw-flex-shrink">
 				<kv-material-icon
 					v-if="showInfoIcon"
 					:icon="infoIcon"

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