@kiva/kv-components 4.8.6 → 5.1.0

package/utils/expander.js

@@ -1,72 +0,0 @@
-/* eslint-disable no-param-reassign */
-
-function setInitialStyle(el, { property, delay, easing }) {
-	el.style.overflow = 'hidden';
-	el.style.transition = `${property} ${delay}ms ${easing}`;
-}
-
-function unsetStyles(el, { property }) {
-	el.style[property] = null;
-	el.style.overflow = null;
-	el.style.transition = null;
-}
-
-export function expand(el, {
-	easing = 'ease',
-	delay = 500,
-	done = () => {},
-	from = 0,
-	property = 'height',
-}) {
-	// set initial styles
-	setInitialStyle(el, { property, delay, easing });
-
-	// need to measure the property, so first set the value to 'auto'
-	// then unset display:none from v-show
-	el.style[property] = 'auto';
-	el.style.display = null;
-
-	// measure the property
-	const propValue = window.getComputedStyle(el).getPropertyValue(property);
-
-	// set the property to the 'from' value
-	el.style[property] = from;
-
-	el.addEventListener('transitionend', function listener() {
-		unsetStyles(el, { property });
-		// finally, call the done callback after the transition
-		done();
-		el.removeEventListener('transitionend', listener, true);
-	}, true);
-
-	// hack to cause the browser to reflow
-	void el.offsetWidth; // eslint-disable-line no-void
-	// ...and set the property to the measured value on the next tick so it animates w/ css
-	el.style[property] = propValue;
-}
-
-export function collapse(el, {
-	easing = 'ease',
-	delay = 500,
-	done = () => {},
-	to = 0,
-	property = 'height',
-}) {
-	// set initial styles
-	setInitialStyle(el, { property, delay, easing });
-
-	// explicitly set the property value...
-	el.style[property] = window.getComputedStyle(el).getPropertyValue(property);
-
-	el.addEventListener('transitionend', function listener() {
-		unsetStyles(el, { property });
-		// finally, call the done callback after the transition
-		done();
-		el.removeEventListener('transitionend', listener, true);
-	}, true);
-
-	// hack to cause the browser to reflow
-	void el.offsetWidth; // eslint-disable-line no-void
-	// ...and set the property to the 'to' value on the next tick so it animates w/ css
-	el.style[property] = to;
-}

package/utils/imageUtils.js

@@ -1,43 +0,0 @@
-/**
- * Determines if the users avatar is the default legacy placeholder image from the monolith.
- * The legacy avatars are found exclusively at the following urls:
- * <domain>/img/<size param>/726677.jpg
- * <domain>/img/<size param>/315726.jpg
- * for images from Fastly, urls, like: <domain>/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg
- * are the default placeholder image.
- *
- * @param filename The filename of the avatar
- * @returns Whether the file is a legacy placeholder image
- */
-export function isLegacyPlaceholderAvatar(filename) {
-	// if filename is empty or undefined, return false
-	if (!filename) {
-		return false;
-	}
-	// convert filename to string if it is a number
-	let filenameCleaned = filename.toString();
-	// remove file extension from filename if it exists
-	if (filenameCleaned.includes('.')) {
-		[filenameCleaned] = filenameCleaned.split('.');
-	}
-	const defaultProfileIds = ['726677', '315726', '4d844ac2c0b77a8a522741b908ea5c32'];
-	return defaultProfileIds.includes(filenameCleaned);
-}
-
-/**
- * Returns a class string to style a user avatar
- * @returns Random user avatar class string
- */
-export function randomizedUserAvatarClass() {
-	const userCardStyleOptions = [
-		{ color: 'tw-text-action', bg: 'tw-bg-brand-100' },
-		{ color: 'tw-text-black', bg: 'tw-bg-brand-100' },
-		{ color: 'tw-text-white', bg: 'tw-bg-action' },
-		{ color: 'tw-text-brand-100', bg: 'tw-bg-action' },
-		{ color: 'tw-text-primary-inverse', bg: 'tw-bg-action' },
-		{ color: 'tw-text-white', bg: 'tw-bg-black' },
-		{ color: 'tw-text-action', bg: 'tw-bg-black' },
-	];
-	const randomStyle = userCardStyleOptions[Math.floor(Math.random() * userCardStyleOptions.length)];
-	return `${randomStyle.color} ${randomStyle.bg}`;
-}

package/utils/index.js

@@ -1,14 +0,0 @@
-export * from './Alea';
-export * from './attrs';
-export * from './carousels';
-export * from './expander';
-export * from './imageUtils';
-export * from './loanCard';
-export * from './loanUtils';
-export * from './mapUtils';
-export * from './printing';
-export * from './scrollLock';
-export * from './themeUtils.cjs';
-export * from './throttle';
-export * from './touchEvents';
-export * from './treemap';

package/utils/loanCard.js

@@ -1,204 +0,0 @@
-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';
-
-const findCalloutData = (tags, tagName) => tags?.find((t) => t.name.replace('#', '').toUpperCase() === tagName.toUpperCase()) ?? {}; // eslint-disable-line max-len
-
-export function loanCardComputedProperties(props, hideUnitedStatesText = false) {
-	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 countryCode = computed(() => loan.value?.geocode?.country?.isoCode || '');
-	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') {
-			const countryText = hideUnitedStatesText && countryName.value.toLowerCase() === 'united states'
-				? '' : `, ${countryName.value}`;
-			return `${city.value}, ${state.value}${countryText}`;
-		}
-		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 activityId = loan.value?.activity?.id ?? null;
-		const sectorName = loan.value?.sector?.name ?? '';
-		const sectorId = loan.value?.sector?.id ?? null;
-		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);
-
-		const tagsData = loan.value?.tagsData ?? [];
-		const themesData = loan.value?.themesData ?? [];
-
-		// 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 p1Tag = tags[position];
-			const tagData = findCalloutData(tagsData, p1Tag);
-			const id = tagData?.id ?? null;
-			callouts.push({ label: p1Tag, type: 'tag', id });
-		}
-
-		if (!categoryPageName.value) {
-			if (categories.ecoFriendly
-				// eslint-disable-next-line max-len
-				&& !callouts.find((c) => c.label.toUpperCase() === ECO_FRIENDLY_KEY || c.label.toUpperCase() === SUSTAINABLE_AG_KEY)) {
-				callouts.push({ label: 'Eco-friendly', type: 'tag', id: 9 });
-			} else if (categories.refugeesIdps) {
-				callouts.push({ label: 'Refugees and IDPs', type: 'attribute', id: 28 });
-			} else if (categories.singleParents
-				&& !callouts.find((c) => c.label.toUpperCase() === SINGLE_PARENT_KEY)) {
-				callouts.push({ label: 'Single Parent', type: 'tag', id: 17 });
-			}
-		}
-
-		// P2 Activity
-		if (activityName && activityId && categoryPageName.value?.toUpperCase() !== activityName.toUpperCase()) {
-			callouts.push({ id: activityId, label: activityName, type: 'activity' });
-		}
-
-		// P3 Sector
-		if (sectorName && sectorId
-			&& (activityName.toUpperCase() !== sectorName.toUpperCase())
-			&& (sectorName.toUpperCase() !== categoryPageName.value?.toUpperCase())
-			&& callouts.length < 2) {
-			callouts.push({ id: sectorId, label: sectorName, type: 'sector' });
-		}
-
-		// P4 Tag
-		if (!!tags.length && callouts.length < 2) {
-			const position = Math.floor(Math.random() * tags.length);
-			const p4Tag = tags[position];
-			const tagData = findCalloutData(tagsData, p4Tag);
-			const id = tagData?.id ?? null;
-			if (!callouts.filter((c) => c.label.toUpperCase() === p4Tag.toUpperCase()).length) {
-				callouts.push({ label: p4Tag, type: 'tag', id });
-			}
-		}
-
-		// P5 Theme
-		if (!!themes.length && callouts.length < 2) {
-			const position = Math.floor(Math.random() * themes.length);
-			const theme = themes[position];
-			const themeData = findCalloutData(themesData, theme);
-			const id = themeData?.id ?? null;
-			if (!callouts.filter((c) => c.label.toUpperCase() === theme.toUpperCase()).length
-				&& theme.toUpperCase() !== categoryPageName.value?.toUpperCase()) {
-				callouts.push({ label: theme, type: 'attribute', id });
-			}
-		}
-
-		// Only show one callout for LSE loans
-		if (isLseLoan && callouts.length > 1) return [callouts.shift()];
-
-		// Add all custom callouts if available
-		const customTags = customCallouts.value?.map((c) => ({ label: c })) ?? [];
-		callouts.push(...customTags);
-		return callouts;
-	});
-
-	return {
-		tag,
-		readMorePath,
-		isLoading,
-		borrowerName,
-		countryName,
-		countryCode,
-		city,
-		state,
-		distributionModel,
-		imageHash,
-		hasProgressData,
-		allDataLoaded,
-		fundraisingPercent,
-		unreservedAmount,
-		formattedLocation,
-		loanUse,
-		loanStatus,
-		loanAmount,
-		loanBorrowerCount,
-		mdiMapMarker,
-		loanCallouts,
-	};
-}
-
-export function loanCardMethods(props, emit) {
-	const {
-		loanId,
-		customLoanDetails,
-		kvTrackFunction,
-	} = toRefs(props);
-
-	function clickReadMore(target, event) {
-		kvTrackFunction.value('Lending', 'click-Read more', target, loanId.value);
-		if (customLoanDetails.value) {
-			event.preventDefault();
-			emit('show-loan-details');
-		}
-	}
-
-	return {
-		clickReadMore,
-	};
-}

package/utils/loanUtils.js

@@ -1,209 +0,0 @@
-import numeral from 'numeral';
-
-export const ERL_COOKIE_NAME = 'kverlfivedollarnotes';
-export const TOP_UP_CAMPAIGN = 'TOPUP-VB-BALANCE-MPV1';
-export const BASE_CAMPAIGN = 'BASE-VB_BALANCE_MPV1';
-export const BALANCE_CAMPAIGN = 'REPAYMENT-NOTIFICATION_BALANCE_MPV1';
-export const NO_BALANCE_CAMPAIGN = 'REPAYMENT-NOTIFICATION_NO-BALANCE_MPV1';
-
-function balanceCampaignOptions(val) {
-	if (val > 20) return 25;
-	if (val > 15) return 20;
-	if (val > 10) return 15;
-	if (val > 5) return 10;
-	return 5;
-}
-
-/**
- * Checks if the unreserved amount is between 25 and 50
- *
- * @param {string} unreservedAmount
- * @returns Whether the unreserved amount is between 25 and 50
- */
-export function isBetween25And50(unreservedAmount) {
-	return unreservedAmount <= 50 && unreservedAmount > 25;
-}
-
-/**
- * Checks if the unreserved amount is less than 25
- *
- * @param {string} unreservedAmount
- * @returns Whether the unreserved amount is less than 25
- */
-export function isLessThan25(unreservedAmount) {
-	return unreservedAmount < 25 && unreservedAmount > 0;
-}
-
-/**
- * Gets the selected option for the Lend CTA component
- *
- * @param {Function} getCookie Method that returns a cookie by name
- * @param {Function} setCookie Method that sets a cookie with the provided name, value, and options
- * @param {boolean} enableFiveDollarsNotes Whether $5 notes experiment is assigned
- * @param {string} campaign The "utm_campaign" query param sourced from the Vue component route
- * @param {string} unreservedAmount The unreserved amount for the loan
- * @param {string} userBalance The balance of the current user
- * @returns {string} The option to be selected in the CTA dropdown
- */
-export function getLendCtaSelectedOption(
-	getCookie,
-	setCookie,
-	enableFiveDollarsNotes,
-	campaign,
-	unreservedAmount,
-	userBalance,
-	fiveDollarsSelected,
-) {
-	// defaulted to $5 for fiveDollarsSelected flag even when users come from email with a different balance
-	if (enableFiveDollarsNotes && fiveDollarsSelected) {
-		return '5';
-	}
-
-	// Don't enable the campaign changes when the user balance is undefined (user not logged in)
-	if (enableFiveDollarsNotes && typeof userBalance !== 'undefined') {
-		let currentCampaign = getCookie?.(ERL_COOKIE_NAME);
-
-		if (campaign && typeof campaign === 'string' && !currentCampaign) {
-			// Effects of the campaign lasts for 24 hours
-			const expires = new Date();
-			expires.setHours(expires.getHours() + 24);
-
-			const campaignToCheck = campaign.toUpperCase();
-
-			// eslint-disable-next-line no-nested-ternary
-			currentCampaign = campaignToCheck.includes(TOP_UP_CAMPAIGN)
-				? TOP_UP_CAMPAIGN
-				: campaignToCheck.includes(BASE_CAMPAIGN) ? BASE_CAMPAIGN // eslint-disable-line no-nested-ternary
-					: campaignToCheck.includes(BALANCE_CAMPAIGN) ? BALANCE_CAMPAIGN // eslint-disable-line no-nested-ternary
-						: (campaignToCheck.includes(NO_BALANCE_CAMPAIGN) ? NO_BALANCE_CAMPAIGN : '');
-
-			if (currentCampaign && setCookie) {
-				setCookie(ERL_COOKIE_NAME, currentCampaign, { expires });
-			}
-		}
-
-		if (currentCampaign) {
-			let val = Math.floor(userBalance / 5) * 5;
-
-			// Base campaign gets largest increment of $5 under the user's balance up to $25 or the unreserved amount
-			if (currentCampaign === BASE_CAMPAIGN) {
-				// eslint-disable-next-line no-nested-ternary
-				val = val === 0 ? 5 : (val > 25 ? 25 : val);
-
-				return Number(val <= unreservedAmount ? val : unreservedAmount).toFixed();
-			}
-
-			if (currentCampaign === BALANCE_CAMPAIGN) {
-				val = balanceCampaignOptions(val);
-				return Number(val).toFixed();
-			}
-
-			// Top up and no balance campaigns defaults to $5
-			return Number(unreservedAmount > 5 ? 5 : unreservedAmount).toFixed();
-		}
-	}
-
-	// Handle when $5 notes isn't enabled
-	if (isBetween25And50(unreservedAmount) || isLessThan25(unreservedAmount)) {
-		return Number(unreservedAmount).toFixed();
-	}
-
-	// $25 is the fallback default selected option
-	return '25';
-}
-
-function buildHugePriceArray(amountLeft) {
-	const priceArray = [];
-
-	// Add $100 options up to $1,000
-	let minAmount = 100;
-	let limitAmount = amountLeft > 1000 ? 1000 : amountLeft;
-	let optionCount = limitAmount / minAmount;
-	for (let i = 1; i <= optionCount; i += 1) {
-		const price = minAmount * i + 500;
-		if (price > limitAmount) break;
-		priceArray.push(numeral(price).format('0,0'));
-	}
-
-	// Add $1000 options up to $10,000
-	minAmount = 1000;
-	limitAmount = amountLeft > 10000 ? 10000 : amountLeft;
-	optionCount = limitAmount / minAmount;
-	for (let i = 1; i <= optionCount; i += 1) {
-		const price = minAmount * i + 1000;
-		if (price > limitAmount) break;
-		priceArray.push(numeral(price).format('0,0'));
-	}
-
-	// Ensure final option is added
-	if (!priceArray.includes(numeral(limitAmount).format('0,0'))) {
-		priceArray.push(numeral(limitAmount).format('0,0'));
-	}
-
-	return priceArray;
-}
-
-function build5DollarsPriceArray(amountLeft) {
-	const limit5Notes = amountLeft < 50 ? amountLeft : 50;
-	const numberOf5 = limit5Notes / 5;
-	const numberOf25 = Math.ceil((amountLeft - limit5Notes) / 25) + 1;
-	const priceArray = [];
-	for (let i = 1; i <= numberOf5; i += 1) {
-		priceArray.push(numeral(5 * i).format('0,0'));
-	}
-	if (amountLeft > limit5Notes) {
-		for (let i = 3; i <= numberOf25; i += 1) {
-			priceArray.push(numeral(25 * i).format('0,0'));
-		}
-	}
-	return priceArray;
-}
-
-function buildPriceArray(amountLeft, minAmount) {
-	// Get count of shares based on available remaining amount
-	const optionCount = amountLeft / minAmount;
-	// Convert this to formatted array for our select element
-	const priceArray = []; // ex. priceArray = ['25', '50', '75']
-	for (let i = 1; i <= optionCount; i += 1) {
-		priceArray.push(numeral(minAmount * i).format('0,0'));
-	}
-	return priceArray;
-}
-
-/**
- *	Gets the dropdown price values for the lend CTA
- *
- * @param {string} unreservedAmount The unreserved amount of the loan
- * @param {boolean} isCompleteLoanActive Whether to include option that would complete loan
- * @param {number} minAmount The min amount to show in the dropdown
- * @param {boolean} enableFiveDollarsNotes Whether five dollar notes are enabled
- * @param {boolean} enableHugeAmount Whether huge loan amounts are enabled
- * @param {boolean} isVisitor Whether the current user is a visitor
- * @param {boolean} inPfp Whether the loan is in PFP
- * @returns {string[]} Price value array for the CTA dropdown
- */
-export function getDropdownPriceArray(
-	unreservedAmount,
-	isCompleteLoanActive = false,
-	minAmount = 25,
-	enableFiveDollarsNotes = false,
-	enableHugeAmount = false,
-	isVisitor = true,
-	inPfp = false,
-) {
-	const parsedAmountLeft = parseFloat(unreservedAmount);
-	let priceArray = (enableFiveDollarsNotes && !inPfp)
-		? build5DollarsPriceArray(parsedAmountLeft).slice(0, 28)
-		: buildPriceArray(parsedAmountLeft, minAmount).slice(0, 20);
-
-	if (enableHugeAmount && parsedAmountLeft > 500 && !isVisitor) {
-		const hugePriceArray = buildHugePriceArray(parsedAmountLeft);
-		priceArray = priceArray.concat(hugePriceArray);
-	}
-
-	if (isCompleteLoanActive && !priceArray.includes(Number(unreservedAmount).toFixed())) {
-		priceArray.push(Number(unreservedAmount).toFixed());
-	}
-
-	return priceArray;
-}