@kiva/kv-components 3.48.0 → 3.48.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.48.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.0...@kiva/kv-components@3.48.1) (2023-11-29)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 # [3.48.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.47.0...@kiva/kv-components@3.48.0) (2023-11-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.48.0",
+  "version": "3.48.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "d6d10fe82c51bb9bd2bab93e475dac025d1298e9"
+  "gitHead": "2c7054617fe956199335addc794ce7ac78003dab"
 }

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

@@ -0,0 +1,136 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvClassicLoanCard from '../../../../vue/KvClassicLoanCard.vue';
+
+const nextWeek = new Date();
+nextWeek.setDate(new Date().getDate() + 7);
+const kvTrackFunction = () => { };
+
+const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
+const loan = {
+	id: 1,
+	name: 'Alan',
+	geocode: {
+		city: 'Lyantonde',
+		state: 'Central Region',
+		country: {
+			isoCode: 'UG',
+			name: 'Uganda',
+			region: 'Africa',
+			__typename: 'Country',
+		},
+		__typename: 'Geocode',
+	},
+	image: { hash: '9673d0722a7675b9b8d11f90849d9b44' },
+	fundraisingPercent: 0.5,
+	unreservedAmount: '500.00',
+	use: 'to purchase heifers to increase headcount of cattle and sales of organic milk.',
+	status: 'fundraising',
+	loanAmount: '1000.00',
+	borrowerCount: 1,
+	activity: {
+		id: 61,
+		name: 'Dairy',
+		__typename: 'Activity',
+	},
+	sector: {
+		id: 1,
+		name: 'Agriculture',
+		__typename: 'Sector',
+	},
+	plannedExpirationDate: nextWeek.toISOString(),
+};
+
+describe('KvClassicLoanCard', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						unreservedAmount: undefined,
+						fundraisingPercent: undefined,
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+	it('location should be formatted correctly for PR', async () => {
+		const { getByText } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						unreservedAmount: undefined,
+						fundraisingPercent: undefined,
+						geocode: {
+							city: 'Rincon',
+							country: {
+								name: 'Puerto Rico',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Rincon, PR');
+		expect(countryTagElement).toBeDefined();
+	});
+	it('location should be formatted correctly for Kiva US', async () => {
+		const { getByText } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						distributionModel: 'direct',
+						geocode: {
+							city: 'Boulder',
+							state: 'Colorado',
+							country: {
+								name: 'United States',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Boulder, Colorado, United States');
+		expect(countryTagElement).toBeDefined();
+	});
+	it('location should be formatted correctly for partner loans', async () => {
+		const { getByText } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						distributionModel: 'partner',
+						geocode: {
+							country: {
+								name: 'Uganda',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Uganda');
+		expect(countryTagElement).toBeDefined();
+	});
+});

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

@@ -0,0 +1,136 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvWideLoanCard from '../../../../vue/KvWideLoanCard.vue';
+
+const nextWeek = new Date();
+nextWeek.setDate(new Date().getDate() + 7);
+const kvTrackFunction = () => { };
+
+const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
+const loan = {
+	id: 1,
+	name: 'Alan',
+	geocode: {
+		city: 'Lyantonde',
+		state: 'Central Region',
+		country: {
+			isoCode: 'UG',
+			name: 'Uganda',
+			region: 'Africa',
+			__typename: 'Country',
+		},
+		__typename: 'Geocode',
+	},
+	image: { hash: '9673d0722a7675b9b8d11f90849d9b44' },
+	fundraisingPercent: 0.5,
+	unreservedAmount: '500.00',
+	use: 'to purchase heifers to increase headcount of cattle and sales of organic milk.',
+	status: 'fundraising',
+	loanAmount: '1000.00',
+	borrowerCount: 1,
+	activity: {
+		id: 61,
+		name: 'Dairy',
+		__typename: 'Activity',
+	},
+	sector: {
+		id: 1,
+		name: 'Agriculture',
+		__typename: 'Sector',
+	},
+	plannedExpirationDate: nextWeek.toISOString(),
+};
+
+describe('KvWideLoanCard', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = render(KvWideLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						unreservedAmount: undefined,
+						fundraisingPercent: undefined,
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+	it('location should be formatted correctly for PR', async () => {
+		const { getByText } = render(KvWideLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						unreservedAmount: undefined,
+						fundraisingPercent: undefined,
+						geocode: {
+							city: 'Rincon',
+							country: {
+								name: 'Puerto Rico',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Rincon, PR');
+		expect(countryTagElement).toBeDefined();
+	});
+	it('location should be formatted correctly for Kiva US', async () => {
+		const { getByText } = render(KvWideLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						distributionModel: 'direct',
+						geocode: {
+							city: 'Boulder',
+							state: 'Colorado',
+							country: {
+								name: 'United States',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Boulder, Colorado, United States');
+		expect(countryTagElement).toBeDefined();
+	});
+	it('location should be formatted correctly for partner loans', async () => {
+		const { getByText } = render(KvWideLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan: {
+						...loan,
+						distributionModel: 'partner',
+						geocode: {
+							country: {
+								name: 'Uganda',
+							},
+						},
+					},
+					kvTrackFunction,
+					photoPath,
+					externalLinks: true,
+				},
+			});
+
+		const countryTagElement = getByText('Uganda');
+		expect(countryTagElement).toBeDefined();
+	});
+});

package/utils/loanCard.js

@@ -0,0 +1,189 @@
+import {
+	computed,
+	toRefs,
+} from 'vue-demi';
+
+import { mdiMapMarker } from '@mdi/js';
+
+const LSE_LOAN_KEY = 'N/A';
+const ECO_FRIENDLY_KEY = 'ECO-FRIENDLY';
+const SUSTAINABLE_AG_KEY = 'SUSTAINABLE AG';
+const SINGLE_PARENT_KEY = 'SINGLE PARENT';
+const REFUGEE_KEY = 'REFUGEES/DISPLACED';
+
+export function loanCardComputedProperties(props) {
+	const {
+		externalLinks,
+		customLoanDetails,
+		loanId,
+		loan,
+		categoryPageName,
+		customCallouts,
+	} = toRefs(props);
+
+	const tag = computed(() => (externalLinks.value ? 'a' : 'router-link'));
+	const readMorePath = computed(() => (customLoanDetails.value ? '' : `/lend/${loanId.value}`));
+	const isLoading = computed(() => !loanId.value || !loan.value);
+	const borrowerName = computed(() => loan.value?.name || '');
+	const countryName = computed(() => loan.value?.geocode?.country?.name || '');
+	const city = computed(() => loan.value?.geocode?.city || '');
+	const state = computed(() => loan.value?.geocode?.state || '');
+	const distributionModel = computed(() => loan.value?.distributionModel || '');
+	const imageHash = computed(() => loan.value?.image?.hash ?? '');
+	const hasProgressData = computed(() => {
+		return typeof loan.value?.unreservedAmount !== 'undefined'
+			&& typeof loan.value?.fundraisingPercent !== 'undefined';
+	});
+
+	const allDataLoaded = computed(() => !isLoading.value && hasProgressData.value);
+
+	const fundraisingPercent = computed(() => loan.value?.fundraisingPercent ?? 0);
+
+	const unreservedAmount = computed(() => {
+		const stringAmount = loan.value?.unreservedAmount ?? '0';
+		return Number(stringAmount);
+	});
+
+	const formattedLocation = computed(() => {
+		if (distributionModel.value === 'direct') {
+			return `${city.value}, ${state.value}, ${countryName.value}`;
+		}
+		if (countryName.value === 'Puerto Rico') {
+			return `${city.value}, PR`;
+		}
+		return countryName.value;
+	});
+
+	const loanUse = computed(() => loan.value?.use ?? '');
+
+	const loanStatus = computed(() => loan.value?.status ?? '');
+
+	const loanAmount = computed(() => loan.value?.loanAmount ?? '0');
+
+	const loanBorrowerCount = computed(() => loan.value?.borrowerCount ?? 0);
+
+	const loanCallouts = computed(() => {
+		const callouts = [];
+		const activityName = loan.value?.activity?.name ?? '';
+		const sectorName = loan.value?.sector?.name ?? '';
+		const tags = loan.value?.tags?.filter((loantag) => loantag.charAt(0) === '#')
+			.map((loantag) => loantag.substring(1)) ?? [];
+		const themes = loan.value?.themes ?? [];
+		const categories = {
+			ecoFriendly: !!tags
+				.filter((t) => t.toUpperCase() === ECO_FRIENDLY_KEY || t.toUpperCase() === SUSTAINABLE_AG_KEY).length,
+			refugeesIdps: !!themes.filter((t) => t.toUpperCase() === REFUGEE_KEY).length,
+			singleParents: !!tags.filter((t) => t.toUpperCase() === SINGLE_PARENT_KEY).length,
+		};
+
+		const isLseLoan = loan.value?.partnerName?.toUpperCase().includes(LSE_LOAN_KEY);
+
+		// P1 Category
+		// Exp limited to: Eco-friendly, Refugees and IDPs, Single Parents
+		// Tag as first option for LSE loans
+		if (isLseLoan && tags.length) {
+			const position = Math.floor(Math.random() * tags.length);
+			const atag = tags[position];
+			callouts.push(atag);
+		}
+
+		if (!categoryPageName.value) {
+			if (categories.ecoFriendly
+				// eslint-disable-next-line max-len
+				&& !callouts.find((c) => c.toUpperCase() === ECO_FRIENDLY_KEY || c.toUpperCase() === SUSTAINABLE_AG_KEY)) {
+				callouts.push('Eco-friendly');
+			} else if (categories.refugeesIdps) {
+				callouts.push('Refugees and IDPs');
+			} else if (categories.singleParents
+				&& !callouts.find((c) => c.toUpperCase() === SINGLE_PARENT_KEY)) {
+				callouts.push('Single Parent');
+			}
+		}
+
+		// P2 Activity
+		if (activityName && categoryPageName.value?.toUpperCase() !== activityName.toUpperCase()) {
+			callouts.push(activityName);
+		}
+
+		// P3 Sector
+		if (sectorName
+			&& (activityName.toUpperCase() !== sectorName.toUpperCase())
+			&& (sectorName.toUpperCase() !== categoryPageName.value?.toUpperCase())
+			&& callouts.length < 2) {
+			callouts.push(sectorName);
+		}
+
+		// P4 Tag
+		if (!!tags.length && callouts.length < 2) {
+			const position = Math.floor(Math.random() * tags.length);
+			const atag = tags[position];
+			if (!callouts.filter((c) => c.toUpperCase() === tag.toUpperCase()).length) {
+				callouts.push(atag);
+			}
+		}
+
+		// P5 Theme
+		if (!!themes.length && callouts.length < 2) {
+			const position = Math.floor(Math.random() * themes.length);
+			const theme = themes[position];
+			if (!callouts.filter((c) => c.toUpperCase() === theme.toUpperCase()).length
+				&& theme.toUpperCase() !== categoryPageName.value?.toUpperCase()) {
+				callouts.push(theme);
+			}
+		}
+
+		// Only show one callout for LSE loans
+		if (isLseLoan && callouts.length > 1) return [callouts.shift()];
+
+		// Add all custom callouts if available
+		callouts.push(...customCallouts?.value);
+		return callouts;
+	});
+
+	return {
+		tag,
+		readMorePath,
+		isLoading,
+		borrowerName,
+		countryName,
+		city,
+		state,
+		distributionModel,
+		imageHash,
+		hasProgressData,
+		allDataLoaded,
+		fundraisingPercent,
+		unreservedAmount,
+		formattedLocation,
+		loanUse,
+		loanStatus,
+		loanAmount,
+		loanBorrowerCount,
+		mdiMapMarker,
+		loanCallouts,
+	};
+}
+
+export function loanCardMethods(props) {
+	const {
+		loanId,
+		customLoanDetails,
+		kvTrackFunction,
+	} = toRefs(props);
+
+	function showLoanDetails(e) {
+		if (customLoanDetails.value) {
+			e.preventDefault();
+			this.$emit('show-loan-details');
+		}
+	}
+
+	function clickReadMore(target) {
+		kvTrackFunction.value('Lending', 'click-Read more', target, loanId.value);
+	}
+
+	return {
+		showLoanDetails,
+		clickReadMore,
+	};
+}

package/vue/KvBorrowerImage.vue

@@ -146,8 +146,17 @@ export default {
 			if (!width && !height && !square && !faceZoom) {
 				return '';
 			}
-			const w = width ? `w${Math.ceil(width)}` : '';
-			const h = height ? `h${Math.ceil(height)}` : '';
+			let w = '';
+			let h = '';
+			// If width and height are different, use w and h
+			if (width === height) {
+				// if height and width are the same, use square param
+				// eslint-disable-next-line no-param-reassign
+				square = width;
+			} else {
+				w = width ? `w${Math.ceil(width)}` : '';
+				h = height ? `h${Math.ceil(height)}` : '';
+			}
 			const s = square ? `s${Math.ceil(square)}` : '';
 			const fz = faceZoom ? `fz${Math.ceil(faceZoom)}` : '';