@kiva/kv-components 3.79.0 → 3.80.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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)
 
 

package/package.json

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

package/vue/KvClassicLoanCard.vue

@@ -233,6 +233,16 @@
 				@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"
@@ -263,6 +273,7 @@
 </template>
 
 <script>
+import numeral from 'numeral';
 import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
 
 import KvLoanUse from './KvLoanUse.vue';
@@ -413,6 +424,10 @@ export default {
 			type: String,
 			default: 'Checkout now',
 		},
+		showContributors: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {
@@ -493,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/stories/KvClassicLoanCard.stories.js

@@ -429,3 +429,20 @@ export const RemoveButton = story({
 	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,
+});