Merge pull request #5085 from kiva/borrower-profile-education-placeme…

…nt-exp-MARS-514

feat: add education placement in borrower profile based on region

src/components/BorrowerProfile/BorrowerEducationPlacement.vue

@@ -0,0 +1,138 @@
+<template>
+	<section>
+		<h2 class="tw-mb-2">
+			How the Kiva team expands financial access
+		</h2>
+		<p class="tw-mb-4">
+			<!-- eslint-disable-next-line max-len -->
+			Kiva's global Investments team of 30+ employees oversees all lending partner relationships to ensure fair and trustworthy lending.
+		</p>
+		<div class="tw-flex tw-items-center tw-gap-2 tw-mb-2">
+			<div class="tw-h-10 tw-w-10">
+				<img
+					:src="imageRequire(`./borrower-profile/education-placement/${regionFolder}/associate.png`)"
+					alt="Manon, Investment Manager for Africa"
+				>
+			</div>
+			<div>
+				<p class="tw-text-h3">
+					{{ associateNameAndTitle }}
+				</p>
+			</div>
+		</div>
+		<p class="tw-mb-4 tw-text-subhead">
+			{{ associateQuote }}
+		</p>
+		<div id="education-photos" class="tw-flex tw-items-center tw-w-full tw-overflow-auto tw-mb-2 tw-gap-2.5">
+			<img
+				:src="imageRequire(`./borrower-profile/education-placement/${regionFolder}/photo_1.jpg`)"
+				:alt="`Borrower photo from ${loanRegion}`"
+			>
+			<img
+				:src="imageRequire(`./borrower-profile/education-placement/${regionFolder}/photo_2.jpg`)"
+				:alt="`Borrower photo from ${loanRegion}`"
+			>
+		</div>
+		<div
+			class="tw-flex tw-flex-col md:tw-flex-row tw-justify-center tw-gap-2
+						tw-bg-brand-100 tw-rounded tw-p-2 tw-mb-2"
+		>
+			<img
+				class="tw-w-7 tw-h-7"
+				:src="imageRequire(`./leaf_heart.svg`)"
+				alt="donation line item image"
+			>
+			<!-- eslint-disable-next-line max-len -->
+			<p>None of this work would be possible without donations from lenders like you. Thank you for continuing to support {{ associateNameAndTitle | splitName }} and the Kiva team! </p>
+		</div>
+	</section>
+</template>
+
+<script>
+const imageRequire = require.context('@/assets/images/', true);
+
+export default {
+	name: 'BorrowerEducationPlacement',
+	data() {
+		return {
+			imageRequire,
+		};
+	},
+	props: {
+		loanRegion: {
+			type: String,
+			default: ''
+		}
+	},
+	filters: {
+		splitName(value) {
+			return value.split(',')[0];
+		}
+	},
+	computed: {
+		associateNameAndTitle() {
+			const region = this.loanRegion.toLowerCase();
+			if (region === 'africa') {
+				return 'Manon, Investment Manager for Africa';
+			} if (region === 'north america') {
+				return 'Eli, Director of Kiva U.S.';
+			} if (['europe', 'asia'].includes(region)) {
+				return 'Kendra, Investment Director for Europe & Asia';
+			}
+
+			return 'Patrick, Investment Manager for Latin America';
+		},
+		regionFolder() {
+			const region = this.loanRegion.toLowerCase().replace(' ', '-');
+			if (['europe', 'asia'].includes(region)) {
+				return 'europe-asia';
+			} if (['central-america', 'south-america'].includes(region)) {
+				return 'central-south-america';
+			}
+
+			return region;
+		},
+		associateQuote() {
+			const region = this.loanRegion.toLowerCase();
+			if (region === 'africa') {
+				// eslint-disable-next-line max-len
+				return "“Being able to visit to the communities we serve is invaluable.It not only allows us to witness Kiva's real-world impact in people's lives, but it also deepens our relationships with our partners and helps us to better understand the realities that borrowers face so that we can better serve them.“";
+			} if (region === 'north america') {
+				// eslint-disable-next-line max-len
+				return '“Kiva’s impact in the U.S. is built on the strong relationships we cultivate with community partners who champion borrowers and their businesses. The work we do on the Kiva US team to empower and support these partners forms the very foundation of our mission, enabling us to expand our reach and transform lives within these communities.”';
+			} if (['europe', 'asia'].includes(region)) {
+				// eslint-disable-next-line max-len
+				return "“Part of my team's focus is evaluating and monitoring the client protection practices that our Lending Partners have in place to ensure that borrowers’ rights are prioritized.We make sure borrowers only receive loans that they have the capacity to repay and are not subject to predatory lending practices, so that the only experience they have with their loan is a positive one.”";
+			}
+
+			// eslint-disable-next-line max-len
+			return '“As Investment Managers, we work on finding innovative solutions that can scale our impact to more communities. For example, working with nontraditional partners to expand our reach to Venezuelan refugees, or creating a collaboration between smallholder farmers in Peru and a European foundation leveraging blockchain tools to help them access international markets.”';
+		},
+
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+
+	#education-photos > img {
+		@apply tw-rounded;
+
+		width: 264px;
+		height: 160px;
+
+		@screen md {
+			width: 363px;
+			height: 220px;
+		}
+	}
+
+	#education-photos > img:nth-child(2) {
+		width: 192px;
+
+		@screen md {
+			width: 264px;
+		}
+	}
+
+</style>

src/pages/BorrowerProfile/BorrowerProfile.vue

@@ -84,6 +84,12 @@
 					/>
 				</content-container>
 			</div>
+			<content-container v-if="showEducationPlacementExp">
+				<borrower-education-placement
+					data-testid="bp-education"
+					:loan-region="loanRegion"
+				/>
+			</content-container>
 			<content-container>
 				<more-about-loan
 					data-testid="bp-more-about"
@@ -160,11 +166,13 @@ import ShareButton from '@/components/BorrowerProfile/ShareButton';
 import JournalUpdates from '@/components/BorrowerProfile/JournalUpdates';
 import { fireHotJarEvent } from '@/util/hotJarUtils';
 import _throttle from 'lodash/throttle';
+import BorrowerEducationPlacement from '@/components/BorrowerProfile/BorrowerEducationPlacement';
 import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 
 const getPublicId = route => route?.query?.utm_content ?? route?.query?.name ?? '';
 
 const SHARE_LANGUAGE_EXP = 'share_language_bp';
+const EDUCATION_PLACEMENT_EXP = 'education_placement_bp';
 
 const preFetchQuery = gql`
 	query borrowerProfileMeta(
@@ -195,6 +203,7 @@ const preFetchQuery = gql`
 					country {
 						name
 						isoCode
+						region
 					}
 				}
 				image {
@@ -296,6 +305,7 @@ export default {
 		SummaryCard,
 		TopBannerPfp,
 		WwwPage,
+		BorrowerEducationPlacement,
 	},
 	metaInfo() {
 		const title = this.anonymizationLevel === 'full' ? undefined : this.pageTitle;
@@ -407,6 +417,17 @@ export default {
 			state: '',
 			isMobile: false,
 			isLoading: true,
+			regionBelongsToExp: false,
+			showEducationPlacementExp: false,
+			loanRegion: '',
+			expRegionList: [
+				'North America',
+				'Central America',
+				'South America',
+				'Africa',
+				'Asia',
+				'Europe'
+			],
 		};
 	},
 	mixins: [fiveDollarsTest, guestComment],
@@ -450,6 +471,7 @@ export default {
 					return Promise.all([
 						client.query({ query: experimentAssignmentQuery, variables: { id: SHARE_LANGUAGE_EXP } }),
 						client.query({ query: experimentAssignmentQuery, variables: { id: FIVE_DOLLARS_NOTES_EXP } }),
+						client.query({ query: experimentAssignmentQuery, variables: { id: EDUCATION_PLACEMENT_EXP } }),
 					]);
 				});
 		},
@@ -496,6 +518,8 @@ export default {
 			this.isoCode = loan?.geocode?.country?.isoCode ?? '';
 			this.city = loan?.geocode?.city ?? '';
 			this.state = loan?.geocode?.state ?? '';
+			this.loanRegion = loan?.geocode?.country?.region ?? '';
+			this.regionBelongsToExp = this.expRegionList.includes(this.loanRegion);
 		},
 	},
 	async mounted() {
@@ -530,6 +554,19 @@ export default {
 			this.shareLanguageExpVersion = version;
 		}
 
+		if (this.regionBelongsToExp) {
+			const educationExpData = trackExperimentVersion(
+				this.apollo,
+				this.$kvTrackEvent,
+				'borrower-profile',
+				EDUCATION_PLACEMENT_EXP,
+				'EXP-MARS-514-DEC2023 ',
+			);
+			if (educationExpData.version === 'a') {
+				this.showEducationPlacementExp = true;
+			}
+		}
+
 		this.determineIfMobile();
 
 		window.addEventListener('resize', _throttle(() => {