@kiva/kv-components 3.69.1 → 3.70.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.70.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.69.1...@kiva/kv-components@3.70.0) (2024-04-01)
+
+
+### Features
+
+* activity feed added to loan card ([#383](https://github.com/kiva/kv-ui-elements/issues/383)) ([a7a3bfc](https://github.com/kiva/kv-ui-elements/commit/a7a3bfc600742b700eb221fa77d9951d793ca86b))
+
+
+
+
+
 ## [3.69.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.69.0...@kiva/kv-components@3.69.1) (2024-03-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.69.1",
+  "version": "3.70.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "12d886b4e18e7c961758e6b2c95568d85bed191c"
+  "gitHead": "8e428b2a434b924a6a345f133e1a6e80bbede201"
 }

package/tests/unit/specs/components/KvClassicLoanCard.spec.js

@@ -41,6 +41,40 @@ const loan = {
 	plannedExpirationDate: nextWeek.toISOString(),
 };
 
+const combinedActivities = [
+	{
+		key: 'Mon Nov 13 2023',
+		data: [
+			{
+				lenderName: 'Erica',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Erica lent $5',
+				date: '2023-11-13T10:51:10Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+	{
+		key: 'Tue Nov 07 2023',
+		data: [
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy left comment <span class="tw-italic">"I know him and his wife and they work hard to make everything they do the best. His farm and bake goods are amazing. He just keeps working harder and harder to do more and reach out to the community in everyway."</span>',
+				date: '2023-11-08T02:37:56Z',
+				type: 'Comment',
+			},
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy lent $25',
+				date: '2023-11-08T02:32:20Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+];
+
 describe('KvClassicLoanCard', () => {
 	it('has no automated accessibility violations', async () => {
 		const { container } = render(KvClassicLoanCard,
@@ -60,6 +94,7 @@ describe('KvClassicLoanCard', () => {
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});
+
 	it('location should be formatted correctly for PR', async () => {
 		const { getByText } = render(KvClassicLoanCard,
 			{
@@ -85,6 +120,7 @@ describe('KvClassicLoanCard', () => {
 		const countryTagElement = getByText('Rincon, PR');
 		expect(countryTagElement).toBeDefined();
 	});
+
 	it('location should be formatted correctly for Kiva US', async () => {
 		const { getByText } = render(KvClassicLoanCard,
 			{
@@ -110,6 +146,7 @@ describe('KvClassicLoanCard', () => {
 		const countryTagElement = getByText('Boulder, Colorado, United States');
 		expect(countryTagElement).toBeDefined();
 	});
+
 	it('location should be formatted correctly for partner loans', async () => {
 		const { getByText } = render(KvClassicLoanCard,
 			{
@@ -133,4 +170,32 @@ describe('KvClassicLoanCard', () => {
 		const countryTagElement = getByText('Uganda');
 		expect(countryTagElement).toBeDefined();
 	});
+
+	it('activity feed should be showed correctly', () => {
+		const { getByText, getByRole } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						loanFundraisingInfo: {
+							fundedAmount: '950.00',
+							isExpiringSoon: false,
+							reservedAmount: '0.00',
+						},
+						lenders: {
+							totalCount: 7,
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					combinedActivities,
+				},
+			});
+
+		const activityText = getByText('7 members lent $950.');
+		const activityBtn = getByRole('button', { name: 'See all activity' });
+		expect(activityText).toBeDefined();
+		expect(activityBtn).toBeDefined();
+	});
 });

package/vue/KvActivityRow.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="tw-flex tw-gap-x-1 tw-items-center">
+		<div>
+			<KvUserAvatar
+				:lender-name="activity.lenderName"
+				:lender-image-url="activity.lenderImage"
+				:is-small="true"
+			/>
+		</div>
+		<div>
+			<!-- eslint-disable vue/no-v-html -->
+			<p v-html="activity.text"></p>
+			<!-- eslint-enable -->
+		</div>
+	</div>
+</template>
+
+<script>
+import KvUserAvatar from './KvUserAvatar.vue';
+
+export default {
+	name: 'KvActivityRow',
+	components: {
+		KvUserAvatar,
+	},
+	props: {
+		activity: {
+			type: Object,
+			required: true,
+		},
+	},
+};
+</script>

package/vue/KvClassicLoanCard.vue

@@ -225,6 +225,29 @@
 				@show-loan-details="clickReadMore('ViewLoan')"
 			/>
 		</div>
+		<div
+			v-if="combinedActivities.length > 0"
+			class="tw-pt-1.5"
+		>
+			<hr class="tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto">
+			<KvLoanActivities
+				:loan="loan"
+				:combined-activities="combinedActivities"
+				:kv-track-function="kvTrackFunction"
+				:basket-items="basketItems"
+				:is-adding="isAdding"
+				:enable-five-dollars-notes="enableFiveDollarsNotes"
+				:five-dollars-selected="fiveDollarsSelected"
+				:show-view-loan="showViewLoan"
+				:custom-loan-details="customLoanDetails"
+				:external-links="externalLinks"
+				:route="route"
+				:user-balance="userBalance"
+				:get-cookie="getCookie"
+				:set-cookie="setCookie"
+				@add-to-basket="$emit('add-to-basket', $event)"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -241,6 +264,7 @@ import KvLoanTag from './KvLoanTag.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
 import KvLoanTeamPick from './KvLoanTeamPick.vue';
+import KvLoanActivities from './KvLoanActivities.vue';
 
 export default {
 	name: 'KvClassicLoanCard',
@@ -255,6 +279,7 @@ export default {
 		KvLoanCallouts,
 		KvLoanBookmark,
 		KvLoanTeamPick,
+		KvLoanActivities,
 	},
 	props: {
 		loanId: {
@@ -349,6 +374,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		combinedActivities: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	setup(props) {
 		const {

package/vue/KvLoanActivities.vue

@@ -0,0 +1,258 @@
+<template>
+	<div
+		v-if="combinedActivities.length > 0"
+		class="loan-activity"
+	>
+		<div class="tw-flex tw-justify-center lg:tw-px-0">
+			<KvActivityRow
+				:activity="singleActivity"
+			/>
+		</div>
+		<div class="tw-flex tw-justify-center tw-mt-1 tw-text-small">
+			<span v-if="lendersNumber && amountLent">
+				{{ lendersNumber }} members lent {{ amountLent }}. &nbsp;
+			</span>
+			<button
+				class="tw-text-action hover:tw-underline"
+				@click="showActivityModal"
+			>
+				See all activity
+			</button>
+		</div>
+		<KvLightbox
+			title="Activity Feed Modal"
+			:visible="lightboxOpen"
+			@lightbox-closed="closeLightbox"
+		>
+			<template #header>
+				<h2 class="tw-text-h3 tw-flex-1 data-hj-suppress">
+					{{ modalTitle }}
+				</h2>
+			</template>
+			<div class="tw-overflow-x-hidden tw-px-2 tw-pb-1">
+				<div
+					v-for="activity in combinedActivities"
+					:key="activity.key"
+					class="md:tw-px-8 lg:tw-px-14 tw-mt-4"
+				>
+					<h4 class="tw-text-center tw-text-h4">
+						{{ formattedDate(activity.key) }}
+					</h4>
+					<div class="tw-flex tw-flex-col tw-gap-y-1">
+						<KvActivityRow
+							v-for="(act, index) in activity.data"
+							:key="index"
+							:activity="act"
+						/>
+					</div>
+				</div>
+			</div>
+			<div>
+				<p
+					v-if="errorMsg"
+					class="tw-mt-1 tw-text-small tw-text-danger"
+				>
+					{{ errorMsg }}
+				</p>
+				<div class="tw-flex tw-justify-end tw-mt-4 tw-pb-2.5 md:tw-pb-4">
+					<KvLendCta
+						:loan="loan"
+						:is-loading="false"
+						:kv-track-function="kvTrackFunction"
+						:get-cookie="getCookie"
+						:set-cookie="setCookie"
+						:user-balance="userBalance"
+						:basket-items="basketItems"
+						:route="route"
+						:is-adding="isAdding"
+						:enable-five-dollars-notes="enableFiveDollarsNotes"
+						@add-to-basket="$emit('add-to-basket', $event)"
+					/>
+				</div>
+			</div>
+		</KvLightbox>
+	</div>
+</template>
+
+<script>
+import { computed, ref, toRefs } from 'vue-demi';
+import numeral from 'numeral';
+import { format } from 'date-fns';
+import KvActivityRow from './KvActivityRow.vue';
+import KvLightbox from './KvLightbox.vue';
+import KvLendCta from './KvLendCta.vue';
+
+export default {
+	name: 'KvLoanActivities',
+	components: {
+		KvActivityRow,
+		KvLightbox,
+		KvLendCta,
+	},
+	props: {
+		/**
+		 * loan object coming from parent component
+		 */
+		loan: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * loan combined activities coming from parent component
+		 */
+		combinedActivities: {
+			type: Array,
+			default: () => ([]),
+		},
+		/**
+		 * isAdding flag coming from parent add to basket method
+		 */
+		isAdding: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * basketItems array coming from parent component
+		 */
+		basketItems: {
+			type: Array,
+			default: () => ([]),
+		},
+		/**
+		 * userBalance string coming from parent component
+		 */
+		userBalance: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * errorMsg string coming from parent add to basket method
+		 */
+		errorMsg: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * kvTrackFunction function to track events from LendCta component
+		 */
+		kvTrackFunction: {
+			type: Function,
+			required: true,
+		},
+		/**
+		 * getCookie function for LendCta component
+		 */
+		getCookie: {
+			type: Function,
+			default: undefined,
+		},
+		/**
+		 * setCookie function for LendCta component
+		 */
+		setCookie: {
+			type: Function,
+			default: undefined,
+		},
+		/**
+		 * route object for LendCta component
+		 */
+		route: {
+			type: Object,
+			default: undefined,
+		},
+		enableFiveDollarsNotes: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'add-to-basket',
+	],
+	setup(props) {
+		const {
+			loan,
+			combinedActivities,
+			kvTrackFunction,
+		} = toRefs(props);
+
+		const lightboxOpen = ref(false);
+
+		const modalTitle = computed(() => `Activity for ${loan.value?.name}`);
+
+		const lendersNumber = computed(() => loan.value?.lenders?.totalCount ?? 0);
+
+		const amountLent = computed(() => {
+			const amount = loan.value?.loanFundraisingInfo?.fundedAmount ?? 0;
+			return numeral(parseFloat(amount)).format('$0,0');
+		});
+
+		const singleActivity = computed(() => {
+			const singleAct = combinedActivities.value.find((activity) => {
+				return activity.data.some((element) => {
+					return element.type === 'LendingAction';
+				});
+			});
+
+			return singleAct?.data[0] ?? {};
+		});
+
+		const formattedDate = (date) => {
+			const dateObj = new Date(date);
+			return format(dateObj, 'MMM d, yyyy');
+		};
+		const showActivityModal = () => {
+			kvTrackFunction.value('loan-card', 'click', 'see-all-activity');
+			lightboxOpen.value = true;
+		};
+		const closeLightbox = () => {
+			lightboxOpen.value = false;
+		};
+
+		return {
+			lightboxOpen,
+			modalTitle,
+			formattedDate,
+			showActivityModal,
+			closeLightbox,
+			singleActivity,
+			lendersNumber,
+			amountLent,
+		};
+	},
+};
+</script>
+
+<style scoped lang="postcss">
+.loan-activity >>> #kvLightboxBody {
+	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
+}
+
+.loan-activity >>> div > div > div > div > div:first-child {
+	box-shadow: var(--kiva-box-shadow);
+}
+
+.loan-activity >>> div > div > div > div > div:first-child > div,
+.loan-activity >>> #kvLightboxBody div {
+	box-shadow: none;
+}
+
+.loan-activity >>> #kvLightboxBody > div:first-child {
+	@apply tw-px-4;
+}
+
+.loan-activity >>> [role=dialog] {
+	min-width: 840px;
+	max-width: 840px !important;
+
+	@media (max-width: calc(840px + 2rem)) {
+		min-width: 100%;
+		max-width: 100% !important;
+	}
+}
+
+.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+	@apply tw-px-4;
+
+	box-shadow: var(--kiva-negative-box-shadow);
+}
+</style>

package/vue/stories/KvActivityRow.stories.js

@@ -0,0 +1,25 @@
+import KvActivityRow from '../KvActivityRow.vue';
+
+export default {
+	title: 'KvActivityRow',
+	component: KvActivityRow,
+};
+
+const activity = {
+	lenderName: 'Stephanie',
+	lenderImage: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	text: 'Stephanie lent $25',
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvActivityRow },
+		template: `<KvActivityRow
+			:activity="activity" />`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ activity });

package/vue/stories/KvClassicLoanCard.stories.js

@@ -30,6 +30,7 @@ const story = (args) => {
 					:show-view-loan="showViewLoan"
 					:custom-callouts="customCallouts"
 					:is-team-pick="isTeamPick"
+					:combined-activities="combinedActivities"
 				/>
 			</div>
 		`,
@@ -75,6 +76,40 @@ const loan = {
 	plannedExpirationDate: nextWeek.toISOString(),
 };
 
+const combinedActivities = [
+	{
+		key: 'Mon Nov 13 2023',
+		data: [
+			{
+				lenderName: 'Erica',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Erica lent $5',
+				date: '2023-11-13T10:51:10Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+	{
+		key: 'Tue Nov 07 2023',
+		data: [
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy left comment <span class="tw-italic">"I know him and his wife and they work hard to make everything they do the best. His farm and bake goods are amazing. He just keeps working harder and harder to do more and reach out to the community in everyway."</span>',
+				date: '2023-11-08T02:37:56Z',
+				type: 'Comment',
+			},
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy lent $25',
+				date: '2023-11-08T02:32:20Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+];
+
 const kvTrackFunction = () => { };
 
 const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
@@ -322,3 +357,21 @@ export const TeamPickVisitor = story({
 	isTeamPick: true,
 	isVisitor: true,
 });
+
+export const ActivityFeed = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanFundraisingInfo: {
+			fundedAmount: '950.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+		lenders: {
+			totalCount: 7,
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+	combinedActivities,
+});

package/vue/stories/KvLoanActivities.stories.js

@@ -0,0 +1,104 @@
+import KvLoanActivities from '../KvLoanActivities.vue';
+
+export default {
+	title: 'KvLoanActivities',
+	component: KvLoanActivities,
+};
+
+const loan = {
+	id: 1998250,
+	distributionModel: 'partner', // direct, partner, both
+	geocode: {
+		city: 'Cranston',
+		state: 'RI',
+		country: {
+			name: 'Malawi',
+			isoCode: 'MW',
+		},
+	},
+	image: {
+		hash: 'd5ad26cd7acc24317edc1c04c6250074',
+	},
+	name: 'Microloan Foundation Malawi',
+	sector: {
+		name: 'Services',
+	},
+	whySpecial: 'It helps Lending Partners withstand negative economic impacts of the COVID-19 pandemic.',
+	userProperties: {
+		lentTo: null,
+	},
+	use: 'this Lending Partner provide loans to women in rural Malawi during the COVID-19 crisis.',
+	status: 'fundraising',
+	loanAmount: '250000.00',
+	borrowerCount: 1,
+	anonymizationLevel: 'none',
+	fullLoanUse: 'A loan of $250,000 helps this Lending Partner provide loans to women in rural Malawi during the COVID-19 crisis.',
+	fundraisingPercent: 0.75,
+	unreservedAmount: '600',
+	loanFundraisingInfo: {
+		fundedAmount: '218950.00',
+		reservedAmount: '0.00',
+		isExpiringSoon: false,
+	},
+	lenders: {
+		totalCount: 7,
+	},
+	plannedExpirationDate: '2020-09-10T19:30:13Z',
+	matchingText: 'LISC',
+	matchRatio: 2,
+};
+
+const combinedActivities = [
+	{
+		key: 'Mon Nov 13 2023',
+		data: [
+			{
+				lenderName: 'Erica',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Erica lent $5',
+				date: '2023-11-13T10:51:10Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+	{
+		key: 'Tue Nov 07 2023',
+		data: [
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy left comment <span class="tw-italic">"I know him and his wife and they work hard to make everything they do the best. His farm and bake goods are amazing. He just keeps working harder and harder to do more and reach out to the community in everyway."</span>',
+				date: '2023-11-08T02:37:56Z',
+				type: 'Comment',
+			},
+			{
+				lenderName: 'Joy',
+				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+				text: 'Joy lent $25',
+				date: '2023-11-08T02:32:20Z',
+				type: 'LendingAction',
+			},
+		],
+	},
+];
+
+const kvTrackFunction = () => { };
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanActivities },
+		template: `
+		<div style="max-width: 400px;">
+			<KvLoanActivities
+				:loan="loan"
+				:combined-activities="combinedActivities"
+				:kv-track-function="kvTrackFunction"
+			/>
+		</div>`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ loan, combinedActivities, kvTrackFunction });