@kiva/kv-components 3.78.2 → 3.80.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.80.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.79.0...@kiva/kv-components@3.80.0) (2024-05-22)
+
+
+### Bug Fixes
+
+* add showContributors condition ([2fe0be3](https://github.com/kiva/kv-ui-elements/commit/2fe0be34ea8cb18fdce37a0eba979d089a850426))
+
+
+### Features
+
+* show contributors section of loan card ([e65e80f](https://github.com/kiva/kv-ui-elements/commit/e65e80f1862c93e45b9f3a05a3a01d3585b4fc7c))
+
+
+
+
+
+# [3.79.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.78.2...@kiva/kv-components@3.79.0) (2024-05-21)
+
+
+### Bug Fixes
+
+* change cta2ButtonText to loanInBasketButtonText ([f052b7b](https://github.com/kiva/kv-ui-elements/commit/f052b7bdee874b5e2447b437cd90c7751ced4bce))
+* remove button story edits ([9dfbf98](https://github.com/kiva/kv-ui-elements/commit/9dfbf981adc2f90384650044f35e6179dbbd851f))
+* remove showSecondaryButton in favor of condition to make code more readable ([8223460](https://github.com/kiva/kv-ui-elements/commit/8223460d56480267b2d4f16e99c7becc1e72b40e))
+* set consistent default values for buttons ([041fef2](https://github.com/kiva/kv-ui-elements/commit/041fef2cc21b11b4b4d11f342c8fb7a7dcee222f))
+
+
+### Features
+
+* loan card primary and secondary button customization options ([77ecb2e](https://github.com/kiva/kv-ui-elements/commit/77ecb2e90c1df81201029ba8906f217cf9f9d6b2))
+
+
+
+
+
 ## [3.78.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.78.1...@kiva/kv-components@3.78.2) (2024-05-20)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.78.2",
+  "version": "3.80.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "c6f35180e5a27c234e8c7f4ea19d7b267b842677"
+  "gitHead": "3dbb81161c861155a392916f6bf297caea902e86"
 }

package/vue/KvClassicLoanCard.vue

@@ -223,12 +223,26 @@
 				:set-cookie="setCookie"
 				:enable-huge-amount="enableHugeAmount"
 				:is-visitor="isVisitor"
+				:primary-button-text="primaryButtonText"
+				:secondary-button-text="secondaryButtonText"
+				:secondary-button-handler="secondaryButtonHandler"
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
 				@show-loan-details="clickReadMore('ViewLoan')"
+				@remove-from-basket="$emit('remove-from-basket', $event)"
 			/>
 		</div>
+
+		<div
+			v-if="showContributors && lendersNumber && amountLent"
+			class="tw-text-center tw-w-full tw-mt-1 tw-font-medium "
+		>
+			<p>
+				{{ lendersNumber }} people contributed {{ amountLent }}
+			</p>
+		</div>
+
 		<div
 			v-if="combinedActivities.length > 0"
 			class="tw-pt-1.5"
@@ -259,6 +273,7 @@
 </template>
 
 <script>
+import numeral from 'numeral';
 import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
 
 import KvLoanUse from './KvLoanUse.vue';
@@ -397,6 +412,22 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		primaryButtonText: {
+			type: String,
+			default: 'Lend',
+		},
+		secondaryButtonHandler: {
+			type: Function,
+			default: undefined,
+		},
+		secondaryButtonText: {
+			type: String,
+			default: 'Checkout now',
+		},
+		showContributors: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {
@@ -477,6 +508,13 @@ export default {
 				{ width: 335, viewSize: 375 },
 			];
 		},
+		lendersNumber() {
+			return this.loan?.lenders?.totalCount ?? 0;
+		},
+		amountLent() {
+			const amount = this.loan?.loanFundraisingInfo?.fundedAmount ?? 0;
+			return numeral(parseFloat(amount)).format('$0,0');
+		},
 	},
 };
 </script>

package/vue/KvLendCta.vue

@@ -8,9 +8,9 @@
 			data-testid="bp-lend-cta-checkout-button"
 			:to="!externalLinks ? '/basket' : undefined"
 			:href="externalLinks ? '/basket' : undefined"
-			@click.native="clickCheckout"
+			@click.native="clickSecondaryButton"
 		>
-			Checkout now
+			{{ loanInBasketButtonText }}
 		</kv-ui-button>
 
 		<!-- Refunded, allSharesReserved button -->
@@ -98,7 +98,7 @@
 						data-testid="bp-lend-cta-lend-again-button"
 						type="submit"
 					>
-						Lend again
+						{{ primaryButtonText || 'Lend' }} again
 					</kv-ui-button>
 				</div>
 
@@ -206,6 +206,18 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		primaryButtonText: {
+			type: String,
+			default: 'Lend',
+		},
+		secondaryButtonText: {
+			type: String,
+			default: 'Checkout now',
+		},
+		secondaryButtonHandler: {
+			type: Function,
+			default: undefined,
+		},
 	},
 	data() {
 		return {
@@ -261,7 +273,7 @@ export default {
 		},
 		ctaButtonText() {
 			if (this.isCompleteLoanActive) {
-				return 'Lend';
+				return this.primaryButtonText || 'Lend';
 			}
 			switch (this.state) {
 				case 'loading':
@@ -269,9 +281,12 @@ export default {
 				case 'refunded':
 				case 'expired':
 				default:
-					return 'Lend';
+					return this.primaryButtonText || 'Lend';
 			}
 		},
+		loanInBasketButtonText() {
+			return this.secondaryButtonText;
+		},
 		useFormSubmit() {
 			if (this.hideShowLendDropdown
 				|| this.lendButtonVisibility
@@ -392,7 +407,16 @@ export default {
 		clickDropdown() {
 			this.kvTrackFunction('Lending', 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId);
 		},
-		clickCheckout() {
+		clickSecondaryButton() {
+			if (this.secondaryButtonHandler) {
+				// Custom secondary button behavior
+				this.secondaryButtonHandler();
+			} else {
+				// Default secondary button behavior
+				this.handleCheckout();
+			}
+		},
+		handleCheckout() {
 			this.kvTrackFunction(
 				'Lending',
 				'click-Continue-to-checkout',

package/vue/stories/KvClassicLoanCard.stories.js

@@ -33,6 +33,9 @@ const story = (args) => {
 					:combined-activities="combinedActivities"
 					:enable-huge-amount="enableHugeAmount"
 					:enable-clickable-tags="enableClickableTags"
+					:primary-button-text="primaryButtonText"
+					:secondary-button-text="secondaryButtonText"
+					:secondary-button-handler="secondaryButtonHandler"
 				/>
 			</div>
 		`,
@@ -397,3 +400,49 @@ export const ClickableTags = story({
 	photoPath,
 	enableClickableTags: true,
 });
+
+export const SupportButton = story({
+	loanId: loan.id,
+	loan,
+	primaryButtonText: 'Support',
+	kvTrackFunction,
+	photoPath,
+});
+
+export const SupportAgain = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		userProperties: { lentTo: true },
+	},
+	primaryButtonText: 'Support',
+	kvTrackFunction,
+	photoPath,
+});
+
+export const RemoveButton = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	basketItems: [{ id: loan.id, __typename: 'LoanReservation' }],
+	secondaryButtonText: 'Remove Loan',
+	secondaryButtonHandler: () => {},
+});
+
+export const ContributorsAndAmount = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanFundraisingInfo: {
+			fundedAmount: '950.00',
+			reservedAmount: '0.00',
+			isExpiringSoon: false,
+		},
+		lenders: {
+			totalCount: 7,
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+});