@kiva/kv-components 3.82.1 → 3.83.1

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.83.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.0...@kiva/kv-components@3.83.1) (2024-06-07)
+
+
+### Bug Fixes
+
+* event is firing twice ([#417](https://github.com/kiva/kv-ui-elements/issues/417)) ([3e30e40](https://github.com/kiva/kv-ui-elements/commit/3e30e4023c6d6af324fc99e805b0f10d36934c2e))
+
+
+
+
+
+# [3.83.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.82.1...@kiva/kv-components@3.83.0) (2024-06-07)
+
+
+### Features
+
+* implement custom loan details on loan card ([#416](https://github.com/kiva/kv-ui-elements/issues/416)) ([13a7a39](https://github.com/kiva/kv-ui-elements/commit/13a7a39ed9d073aa3ee7319b69c6b46f26d45d5b))
+
+
+
+
+
 ## [3.82.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.82.0...@kiva/kv-components@3.82.1) (2024-06-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.82.1",
+  "version": "3.83.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "cde8d379527232294da84dde985729ec92479c65"
+  "gitHead": "fd9613c908f4eeaddb1a8395e864c5c0448c53af"
 }

package/utils/loanCard.js

@@ -179,26 +179,22 @@ export function loanCardComputedProperties(props) {
 	};
 }
 
-export function loanCardMethods(props) {
+export function loanCardMethods(props, emit) {
 	const {
 		loanId,
 		customLoanDetails,
 		kvTrackFunction,
 	} = toRefs(props);
 
-	function showLoanDetails(e) {
+	function clickReadMore(target, event) {
+		kvTrackFunction.value('Lending', 'click-Read more', target, loanId.value);
 		if (customLoanDetails.value) {
-			e.preventDefault();
-			this.$emit('show-loan-details');
+			event.preventDefault();
+			emit('show-loan-details');
 		}
 	}
 
-	function clickReadMore(target) {
-		kvTrackFunction.value('Lending', 'click-Read more', target, loanId.value);
-	}
-
 	return {
-		showLoanDetails,
 		clickReadMore,
 	};
 }

package/vue/KvClassicLoanCard.vue

@@ -17,7 +17,6 @@
 				<div
 					v-else
 					class="tw-relative"
-					@click="showLoanDetails"
 				>
 					<component
 						:is="tag"
@@ -25,7 +24,7 @@
 						:href="readMorePath"
 						class="tw-flex"
 						aria-label="Borrower image"
-						@click="clickReadMore('Photo')"
+						@click.native="clickReadMore('Photo', $event)"
 					>
 						<kv-borrower-image
 							class="
@@ -93,7 +92,7 @@
 					class="tw-flex hover:tw-no-underline focus:tw-no-underline"
 					:class="{ 'tw-px-1': largeCard }"
 					aria-label="Loan tag"
-					@click="clickReadMore('Tag')"
+					@click.native="clickReadMore('Tag', $event)"
 				>
 					<kv-loan-tag
 						v-if="showTags && !isLoading"
@@ -108,7 +107,7 @@
 					:href="readMorePath"
 					class="loan-card-use tw-text-primary"
 					aria-label="Loan use"
-					@click="clickReadMore('Use')"
+					@click.native="clickReadMore('Use', $event)"
 				>
 					<!-- Loan use  -->
 					<div class="tw-mb-1.5 tw-pt-1">
@@ -187,7 +186,7 @@
 					:href="readMorePath"
 					class="loan-card-progress tw-mt-1"
 					aria-label="Loan progress"
-					@click="clickReadMore('Progress')"
+					@click.native="clickReadMore('Progress', $event)"
 				>
 					<kv-loan-progress-group
 						id="loanProgress"
@@ -229,7 +228,7 @@
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
-				@show-loan-details="clickReadMore('ViewLoan')"
+				@show-loan-details="clickReadMore('ViewLoan', $event)"
 				@remove-from-basket="$emit('remove-from-basket', $event)"
 			/>
 		</div>
@@ -429,7 +428,7 @@ export default {
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const {
 			allDataLoaded,
 			borrowerName,
@@ -455,8 +454,7 @@ export default {
 
 		const {
 			clickReadMore,
-			showLoanDetails,
-		} = loanCardMethods(props);
+		} = loanCardMethods(props, emit);
 
 		return {
 			allDataLoaded,
@@ -480,7 +478,6 @@ export default {
 			tag,
 			unreservedAmount,
 			clickReadMore,
-			showLoanDetails,
 		};
 	},
 	computed: {

package/vue/KvWideLoanCard.vue

@@ -27,7 +27,6 @@
 			<div
 				v-else
 				class="tw-relative tw-w-full"
-				@click="showLoanDetails"
 			>
 				<component
 					:is="tag"
@@ -35,7 +34,7 @@
 					:href="readMorePath"
 					class="tw-flex"
 					aria-label="Borrower image"
-					@click="clickReadMore('Photo')"
+					@click.native="clickReadMore('Photo', $event)"
 				>
 					<kv-borrower-image
 						class="
@@ -102,7 +101,7 @@
 				:href="readMorePath"
 				class="tw-flex hover:tw-no-underline focus:tw-no-underline"
 				aria-label="Loan tag"
-				@click="clickReadMore('Tag')"
+				@click.native="clickReadMore('Tag', $event)"
 			>
 				<kv-loan-tag
 					v-if="showTags && !isLoading"
@@ -182,7 +181,7 @@
 					:href="readMorePath"
 					class="loan-card-progress tw-mt-1 tw-flex-grow"
 					aria-label="Loan progress"
-					@click="clickReadMore('Progress')"
+					@click.native="clickReadMore('Progress', $event)"
 				>
 					<kv-loan-progress-group
 						id="loanProgress"
@@ -220,7 +219,7 @@
 					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)"
-					@show-loan-details="clickReadMore('ViewLoan')"
+					@show-loan-details="clickReadMore('ViewLoan', $event)"
 				/>
 			</div>
 		</div>
@@ -338,7 +337,7 @@ export default {
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const {
 			allDataLoaded,
 			borrowerName,
@@ -364,8 +363,7 @@ export default {
 
 		const {
 			clickReadMore,
-			showLoanDetails,
-		} = loanCardMethods(props);
+		} = loanCardMethods(props, emit);
 
 		return {
 			allDataLoaded,
@@ -389,7 +387,6 @@ export default {
 			tag,
 			unreservedAmount,
 			clickReadMore,
-			showLoanDetails,
 		};
 	},
 	computed: {

package/vue/stories/KvClassicLoanCard.stories.js

@@ -37,9 +37,15 @@ const story = (args) => {
 					:primary-button-text="primaryButtonText"
 					:secondary-button-text="secondaryButtonText"
 					:secondary-button-handler="secondaryButtonHandler"
+					@show-loan-details="showLoanDetails"
 				/>
 			</div>
 		`,
+		methods: {
+			showLoanDetails() {
+				console.log('show-loan-details');
+			},
+		},
 	});
 	template.args = args;
 	return template;
@@ -421,6 +427,18 @@ export const SupportAgain = story({
 	photoPath,
 });
 
+export const CustomShowLoanDetails = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		userProperties: { lentTo: true },
+	},
+	primaryButtonText: 'Support',
+	kvTrackFunction,
+	photoPath,
+	customLoanDetails: true,
+});
+
 export const RemoveButton = story({
 	loanId: loan.id,
 	loan,
@@ -428,7 +446,7 @@ export const RemoveButton = story({
 	photoPath,
 	basketItems: [{ id: loan.id, __typename: 'LoanReservation' }],
 	secondaryButtonText: 'Remove Loan',
-	secondaryButtonHandler: () => {},
+	secondaryButtonHandler: () => { },
 });
 
 export const ContributorsAndAmount = story({