@kiva/kv-components 3.82.1 → 3.83.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.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.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "cde8d379527232294da84dde985729ec92479c65"
+  "gitHead": "a248af9b1215451e5b121939976b5340cf3b00bd"
 }

package/utils/loanCard.js

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

package/vue/KvClassicLoanCard.vue

@@ -25,7 +25,7 @@
 						:href="readMorePath"
 						class="tw-flex"
 						aria-label="Borrower image"
-						@click="clickReadMore('Photo')"
+						@click.native="clickReadMore('Photo', $event)"
 					>
 						<kv-borrower-image
 							class="
@@ -93,7 +93,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 +108,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 +187,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 +229,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 +429,7 @@ export default {
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const {
 			allDataLoaded,
 			borrowerName,
@@ -456,7 +456,7 @@ export default {
 		const {
 			clickReadMore,
 			showLoanDetails,
-		} = loanCardMethods(props);
+		} = loanCardMethods(props, emit);
 
 		return {
 			allDataLoaded,

package/vue/KvWideLoanCard.vue

@@ -35,7 +35,7 @@
 					:href="readMorePath"
 					class="tw-flex"
 					aria-label="Borrower image"
-					@click="clickReadMore('Photo')"
+					@click.native="clickReadMore('Photo', $event)"
 				>
 					<kv-borrower-image
 						class="
@@ -102,7 +102,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 +182,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 +220,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 +338,7 @@ export default {
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const {
 			allDataLoaded,
 			borrowerName,
@@ -365,7 +365,7 @@ export default {
 		const {
 			clickReadMore,
 			showLoanDetails,
-		} = loanCardMethods(props);
+		} = loanCardMethods(props, emit);
 
 		return {
 			allDataLoaded,

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({