From a88c9e5e7fb3f28f441f4aeb3fde377a3e558cde Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 14:11:15 -0500
Subject: [PATCH 01/14] feat: typage opt-in module component

---
 .storybook/mock-data/receipt-data-mock.js     |  15 +-
 .storybook/stories/ThanksBadges.stories.js    |  12 +-
 src/components/Thanks/MyKiva/OptInModule.vue  | 252 ++++++++++++++++++
 .../Thanks/MyKiva/OptInNotification.vue       |  78 ++++++
 src/components/Thanks/MyKiva/ThanksBadges.vue |  12 +
 5 files changed, 362 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Thanks/MyKiva/OptInModule.vue
 create mode 100644 src/components/Thanks/MyKiva/OptInNotification.vue

diff --git a/.storybook/mock-data/receipt-data-mock.js b/.storybook/mock-data/receipt-data-mock.js
index faf5a1bfb8..898e3358ca 100644
--- a/.storybook/mock-data/receipt-data-mock.js
+++ b/.storybook/mock-data/receipt-data-mock.js
@@ -39,7 +39,8 @@ export default {
 					"name": "Alan",
 					"id": 1911067,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/5e041e655faa305c49c13505d1c17cba.jpg"
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/5e041e655faa305c49c13505d1c17cba.jpg",
+						"hash": "5e041e655faa305c49c13505d1c17cba"
 					},
 					"use": "to expand her business by purchasing more stock such as seed and manure for the expansion of her vegetable garden.",
 					"geocode": {
@@ -63,7 +64,8 @@ export default {
 					"name": "Alan",
 					"id": 1908530,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/da9ac74228e39e15cc198f8165e68c20.jpg"
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/da9ac74228e39e15cc198f8165e68c20.jpg",
+						"hash": "da9ac74228e39e15cc198f8165e68c20"
 					},
 					"use": "to buy taro roots (seedlings), banana tubers (seedlings), chemicals, a bag back sprayer, and a chainsaw.",
 					"geocode": {
@@ -87,7 +89,8 @@ export default {
 					"name": "Barrio Concepcion Group",
 					"id": 1907517,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/213d4f59069e192a2a4b9ee1fb56b649.jpg"
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/213d4f59069e192a2a4b9ee1fb56b649.jpg",
+						"hash": "213d4f59069e192a2a4b9ee1fb56b649"
 					},
 					"use": "to buy a stove with a grill, kitchen utensils, corn and firewood.",
 					"geocode": {
@@ -111,7 +114,8 @@ export default {
 					"name": "Alan",
 					"id": 1909791,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg"
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg",
+						"hash": "26e15431f51b540f31cd9f011cc54f31"
 					},
 					"use": "to buy farming inputs and improve her production in 2020 for an increased income.",
 					"geocode": {
@@ -135,7 +139,8 @@ export default {
 					"name": "Las Victoriosas Group",
 					"id": 1906824,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26342071330beb8309d17a5d262da2dd.jpg"
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26342071330beb8309d17a5d262da2dd.jpg",
+						"hash": "26342071330beb8309d17a5d262da2dd"
 					},
 					"use": "to buy used clothing for men, women and children in specific sizes.",
 					"geocode": {
diff --git a/.storybook/stories/ThanksBadges.stories.js b/.storybook/stories/ThanksBadges.stories.js
index 68b7f9ba3a..fa64fc33cc 100644
--- a/.storybook/stories/ThanksBadges.stories.js
+++ b/.storybook/stories/ThanksBadges.stories.js
@@ -20,6 +20,14 @@ const story = (args = {}) => {
 	return template;
 };
 
-export const Guest = story({ receipt: mockedReceiptData });
+const loans = mockedReceiptData.items.values?.map((item) => item?.loan).filter(loan => !!loan?.id);
 
-export const User = story({ isGuest: false, receipt: mockedReceiptData });
+export const Guest = story({ receipt: mockedReceiptData, loans, selectedLoan: loans[0] });
+
+export const UserOptedIn = story({ isGuest: false, receipt: mockedReceiptData, loans, selectedLoan: loans[0], optedIn: true });
+
+export const OptedOutWithOneLoan = story({ isGuest: false, receipt: mockedReceiptData, loans: loans.slice(0, 1), selectedLoan: loans[0] });
+
+export const OptedOutWithTwoLoans = story({ isGuest: false, receipt: mockedReceiptData, loans: loans.slice(0, 2), selectedLoan: loans[0] });
+
+export const OptedOutWithTwoOrMoreLoans = story({ isGuest: false, receipt: mockedReceiptData, loans: loans.slice(0, 3), selectedLoan: loans[0] });
diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
new file mode 100644
index 0000000000..4206cd3776
--- /dev/null
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -0,0 +1,252 @@
+<template>
+	<transition-group name="collapse" tag="div">
+		<template v-if="!newConsentAnswered">
+			<div class="module-container">
+				<h2>{{ title }}</h2>
+				<div class="borrower-container">
+					<div
+						class="tw-flex tw-justify-center tw-items-center tw-z-1 image-container"
+					>
+						<borrower-image
+							v-for="loan, index in filteredLoans"
+							:key="loan.id"
+							class="borrower-image"
+							:class="{'centered-borrower' : index === 1 && filteredLoans.length === 3}"
+							:style="{
+								marginLeft: `${loans.length === 2 && index === 1
+									? (index * marginLeftWeight)
+									: (index - 1) * marginLeftWeight}rem`,
+								zIndex: `${index + 1}`,
+							}"
+							:aspect-ratio="1"
+							:default-image="{ width: 200, faceZoom: 30 }"
+							:hash="hash(loan)"
+							:images="[
+								{ width: 200, faceZoom: 30 },
+							]"
+						/>
+					</div>
+				</div>
+				<p>{{ description }}</p>
+				<div class="tw-w-full tw-flex tw-flex-col tw-gap-2">
+					<kv-button
+						class="tw-w-full"
+						@click="() => updateOptIn(true)"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'accept-opt-in-request',
+						]"
+					>
+						Yes, keep me updated
+					</kv-button>
+					<kv-button
+						@click="() => updateOptIn(false)"
+						variant="ghost"
+						class="tw-w-full ghost-button"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'reject-opt-in-request',
+						]"
+					>
+						No, I don’t want to receive updates
+					</kv-button>
+				</div>
+			</div>
+		</template>
+
+		<template v-if="newConsentAnswered">
+			<OptInNotification
+				:filtered-loans="filteredLoans"
+				:receive-news="receiveNews"
+			/>
+		</template>
+	</transition-group>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+import { gql } from 'graphql-tag';
+import logReadQueryError from '#src/util/logReadQueryError';
+import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import useIsMobile from '#src/composables/useIsMobile';
+import {
+	MOBILE_BREAKPOINT,
+} from '#src/composables/useBadgeModal';
+import OptInNotification from './OptInNotification';
+
+const props = defineProps({
+	selectedLoan: {
+		type: Object,
+		default: () => ({})
+	},
+	loans: {
+		type: Array,
+		default: () => ([])
+	},
+	optedIn: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const apollo = inject('apollo');
+const newConsentAnswered = ref(false);
+const receiveNews = ref(false);
+
+const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
+
+const borrowerName = computed(() => {
+	return props.selectedLoan?.name ?? '';
+});
+
+const title = computed(() => {
+	if (props.optedIn) {
+		return 'Thank you! You reached a milestone';
+	}
+	if (props.loans.length === 1) {
+		return `You and ${borrowerName.value} are in this together now.`;
+	}
+	if (props.loans.length === 2) {
+		const names = props.loans.map(loan => loan?.name).join(' and ');
+		return `Thank you! You, ${names} are in this together now.`;
+	}
+
+	return `Thank you! You, ${props.loans[0]?.name}, ${props.loans[1]?.name}
+		and ${props.loans[2]?.name} are in this together now.`;
+});
+
+const description = computed(
+	() => `Want to hear how you're impacting ${borrowerName.value}'s life and more ways to help people like them?`
+);
+
+const filteredLoans = computed(() => {
+	const loans = [...props.loans];
+	if (props.loans.length === 3) {
+		const indexToRemove = loans.indexOf(loan => loan.id === props.selectedLoan.id);
+		const removedLoan = loans.splice(indexToRemove, 1)[0];
+		loans.splice(1, 0, removedLoan);
+	}
+	return loans.slice(0, 3);
+});
+
+const marginLeftWeight = computed(() => {
+	if (filteredLoans.value.length === 1) {
+		return 0;
+	}
+	if (filteredLoans.value.length === 2) {
+		return 6;
+	}
+
+	if (isMobile.value) {
+		return 7;
+	}
+
+	return 12;
+});
+
+const hash = loan => {
+	return loan?.image?.hash ?? '';
+};
+
+const updateOptIn = value => {
+	if (value) {
+		try {
+			apollo.mutate({
+				mutation: gql`
+					mutation updateCommunicationSettings(
+						$lenderNews: Boolean
+					) {
+						my {
+							updateCommunicationSettings(
+								communicationSettings: {
+									lenderNews: $lenderNews
+								}
+							)
+						}
+					}
+				`,
+				variables: {
+					lenderNews: value,
+				},
+			});
+		} catch (error) {
+			logReadQueryError(error, 'error');
+		}
+	}
+	newConsentAnswered.value = true;
+	receiveNews.value = value;
+};
+</script>
+
+<style lang="postcss" scoped>
+
+.module-container {
+	max-width: 620px;
+	max-height: 800px;
+
+	@apply tw-flex tw-flex-col tw-mx-auto tw-overflow-hidden tw-opacity-full tw-bg-white
+		tw-text-center tw-px-3 md:tw-px-8 tw-gap-3 tw-rounded-lg tw-py-4;
+}
+
+.borrower-container {
+	animation: fadein ease-in 1s;
+	width: 70px;
+
+	@screen md {
+		width: 150px;
+	}
+
+	@apply tw-block tw-relative tw-mx-auto tw-z-4;
+}
+
+.borrower-container > div {
+	height: 100px;
+
+	@screen md {
+		height: 200px;
+	}
+}
+
+.borrower-image {
+	width: 80px !important;
+	height: 80px !important;
+
+	@screen md {
+		width: 160px !important;
+		height: 160px !important;
+	}
+
+	box-shadow: '0px 4.42px 22.1px 0px #D1DCD6';
+	@apply tw-absolute tw-w-full tw-rounded-full tw-bg-black tw-border-4 tw-border-white tw-z-2 tw-pb-0;
+}
+
+.centered-borrower {
+	width: 100px !important;
+	height: 100px !important;
+
+	@screen md {
+		width: 180px !important;
+		height: 180px !important;
+	}
+
+	@apply !tw-z-5;
+}
+
+.ghost-button :deep(span) {
+	@apply tw-bg-transparent;
+}
+
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: max-height 1s ease, opacity 1s ease;
+  overflow: hidden;
+}
+
+.collapse-enter,
+.collapse-leave-to {
+	@apply tw-max-h-0 tw-opacity-0 tw-py-0;
+}
+</style>
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
new file mode 100644
index 0000000000..237c83956b
--- /dev/null
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -0,0 +1,78 @@
+<template>
+	<div
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-2 tw-bg-white tw-rounded tw-px-3 tw-py-1.5"
+		:style="{maxWidth: '620px'}"
+	>
+		<div
+			v-if="receiveNews"
+			class="tw-flex tw-justify-center tw-items-center tw-z-1"
+		>
+			<borrower-image
+				v-for="loan, index in filteredLoans"
+				:key="loan.id"
+				class="borrower-image"
+				:class="{'centered-borrower' : index === 1 && filteredLoans.length === 3}"
+				:style="{
+					marginLeft: `${index > 0 ? -1 : 0}rem`,
+					zIndex: `${index + 1}`,
+				}"
+				:aspect-ratio="0"
+				:default-image="{ width: 200, faceZoom: 30 }"
+				:hash="hash(loan)"
+				:images="[
+					{ width: 200, faceZoom: 30 },
+				]"
+			/>
+		</div>
+		<p class="tw-font-medium">
+			{{ notificationMsg }}
+		</p>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
+
+const props = defineProps({
+	receiveNews: {
+		type: Boolean,
+		default: false
+	},
+	filteredLoans: {
+		type: Array,
+		default: () => ([]),
+	},
+});
+
+const notificationMsg = computed(() => {
+	if (props.receiveNews) {
+		return 'Great, we’ll keep you updated.';
+	}
+
+	return 'We won’t send updates. You can change this setting at any time.';
+});
+
+const hash = loan => {
+	return loan?.image?.hash ?? '';
+};
+
+</script>
+
+<style lang="postcss" scoped>
+
+.borrower-image {
+	width: 36px !important;
+	height: 36px !important;
+
+	@apply tw-rounded-full tw-bg-black tw-border-2 tw-border-white tw-z-2;
+}
+
+.centered-borrower {
+	width: 48px !important;
+	height: 48px !important;
+
+	@apply !tw-z-5;
+}
+
+</style>
diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
index e8ac64abee..b75cafac11 100644
--- a/src/components/Thanks/MyKiva/ThanksBadges.vue
+++ b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -1,5 +1,12 @@
 <template>
 	<div class="tw-bg-eco-green-1 tw-p-3 md:tw-py-4">
+		<OptInModule
+			v-if="!isGuest && !optedIn"
+			class="tw-pb-4"
+			:selected-loan="selectedLoan"
+			:loans="loans"
+			:is-guest="isGuest"
+		/>
 		<div
 			class="tw-rounded md:tw-rounded-lg tw-mx-auto tw-bg-white tw-shadow-lg tw-p-3"
 			:style="{ maxWidth: '620px' }"
@@ -102,6 +109,7 @@ import SocialShareV2 from '#src/components/Checkout/SocialShareV2';
 import { mdiChevronDown } from '@mdi/js';
 import CheckoutReceipt from '#src/components/Checkout/CheckoutReceipt';
 import GuestAccountCreation from '#src/components/Forms/GuestAccountCreation';
+import OptInModule from './OptInModule';
 
 // TODO: ensure these props are all needed as functionality is expanded (some currently unused)
 defineProps({
@@ -125,6 +133,10 @@ defineProps({
 		type: Object,
 		default: () => ({}),
 	},
+	optedIn: {
+		type: Boolean,
+		default: false
+	}
 });
 
 const openCreateAccount = ref(false);

From c84fbc7ff02d90a964597e3d630e4b21949ddf34 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 15:33:25 -0500
Subject: [PATCH 02/14] refactor: using kv avatar for notification

---
 src/components/Thanks/MyKiva/OptInModule.vue  | 13 +++--
 .../Thanks/MyKiva/OptInNotification.vue       | 55 +++++++++----------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 4206cd3776..b0336c523f 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -8,10 +8,10 @@
 						class="tw-flex tw-justify-center tw-items-center tw-z-1 image-container"
 					>
 						<borrower-image
-							v-for="loan, index in filteredLoans"
+							v-for="loan, index in loansToDisplay"
 							:key="loan.id"
 							class="borrower-image"
-							:class="{'centered-borrower' : index === 1 && filteredLoans.length === 3}"
+							:class="{'centered-borrower' : index === 1 && loansToDisplay.length === 3}"
 							:style="{
 								marginLeft: `${loans.length === 2 && index === 1
 									? (index * marginLeftWeight)
@@ -58,8 +58,9 @@
 
 		<template v-if="newConsentAnswered">
 			<OptInNotification
-				:filtered-loans="filteredLoans"
+				:loans-to-display="loansToDisplay"
 				:receive-news="receiveNews"
+				:is-mobile="isMobile"
 			/>
 		</template>
 	</transition-group>
@@ -122,7 +123,7 @@ const description = computed(
 	() => `Want to hear how you're impacting ${borrowerName.value}'s life and more ways to help people like them?`
 );
 
-const filteredLoans = computed(() => {
+const loansToDisplay = computed(() => {
 	const loans = [...props.loans];
 	if (props.loans.length === 3) {
 		const indexToRemove = loans.indexOf(loan => loan.id === props.selectedLoan.id);
@@ -133,10 +134,10 @@ const filteredLoans = computed(() => {
 });
 
 const marginLeftWeight = computed(() => {
-	if (filteredLoans.value.length === 1) {
+	if (loansToDisplay.value.length === 1) {
 		return 0;
 	}
-	if (filteredLoans.value.length === 2) {
+	if (loansToDisplay.value.length === 2) {
 		return 6;
 	}
 
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 237c83956b..60e843d2e5 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,27 +1,25 @@
 <template>
 	<div
-		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-2 tw-bg-white tw-rounded tw-px-3 tw-py-1.5"
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
+			tw-bg-white tw-rounded tw-px-3 tw-py-1.5"
 		:style="{maxWidth: '620px'}"
 	>
 		<div
 			v-if="receiveNews"
-			class="tw-flex tw-justify-center tw-items-center tw-z-1"
+			class="avatar-container tw-flex tw-items-center tw-w-auto"
 		>
-			<borrower-image
-				v-for="loan, index in filteredLoans"
+			<KvUserAvatar
+				v-for="loan, index in loansToDisplay"
 				:key="loan.id"
-				class="borrower-image"
-				:class="{'centered-borrower' : index === 1 && filteredLoans.length === 3}"
+				:lender-name="loan?.name"
+				:lender-image-url="loan?.image?.url"
+				class="tw-rounded-full tw-shadow tw-border-white tw-border-2 tw-w-auto"
+				:class="{'smaller-borrower-avatar' : loansToDisplay.length > 2 && index !== 1 }"
 				:style="{
-					marginLeft: `${index > 0 ? -1 : 0}rem`,
-					zIndex: `${index + 1}`,
+					zIndex: index === 1 ? 2 : 1,
+					marginRight: loansToDisplay.length > 2 && index === 0 ? '-22px' : '0',
+					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-22px' : '0',
 				}"
-				:aspect-ratio="0"
-				:default-image="{ width: 200, faceZoom: 30 }"
-				:hash="hash(loan)"
-				:images="[
-					{ width: 200, faceZoom: 30 },
-				]"
 			/>
 		</div>
 		<p class="tw-font-medium">
@@ -32,17 +30,21 @@
 
 <script setup>
 import { computed } from 'vue';
-import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
+import KvUserAvatar from '@kiva/kv-components/vue/KvUserAvatar';
 
 const props = defineProps({
 	receiveNews: {
 		type: Boolean,
 		default: false
 	},
-	filteredLoans: {
+	loansToDisplay: {
 		type: Array,
 		default: () => ([]),
 	},
+	isMobile: {
+		type: Boolean,
+		default: false,
+	}
 });
 
 const notificationMsg = computed(() => {
@@ -53,26 +55,21 @@ const notificationMsg = computed(() => {
 	return 'We won’t send updates. You can change this setting at any time.';
 });
 
-const hash = loan => {
-	return loan?.image?.hash ?? '';
-};
-
 </script>
 
 <style lang="postcss" scoped>
 
-.borrower-image {
-	width: 36px !important;
-	height: 36px !important;
+.avatar-container {
+	@media screen and (width >= 414px) {
+		width: auto;
+	}
 
-	@apply tw-rounded-full tw-bg-black tw-border-2 tw-border-white tw-z-2;
+	@apply tw-w-full;
 }
 
-.centered-borrower {
-	width: 48px !important;
-	height: 48px !important;
-
-	@apply !tw-z-5;
+.smaller-borrower-avatar :deep(img) {
+	height: 36px;
+	width: 36px;
 }
 
 </style>

From 982b136fcc8dee0267fbb97f0ef77120734a3200 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 16:12:16 -0500
Subject: [PATCH 03/14] fix: width in notification

---
 .storybook/stories/ThanksBadges.stories.js         | 1 +
 src/components/Thanks/MyKiva/OptInNotification.vue | 6 ++----
 src/components/Thanks/MyKiva/ThanksBadges.vue      | 4 ++++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/.storybook/stories/ThanksBadges.stories.js b/.storybook/stories/ThanksBadges.stories.js
index c58b484c70..60115ca384 100644
--- a/.storybook/stories/ThanksBadges.stories.js
+++ b/.storybook/stories/ThanksBadges.stories.js
@@ -106,6 +106,7 @@ export const UserGuestOptedOutWithOneLoan = story({
 	optedIn: false,
 	receipt: mockedReceiptData,
 	loans: loans.slice(0, 1),
+	selectedLoan: loans[0],
 	badgesAchieved: [mockTieredBadge],
 });
 
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 60e843d2e5..11e46a7909 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -6,7 +6,7 @@
 	>
 		<div
 			v-if="receiveNews"
-			class="avatar-container tw-flex tw-items-center tw-w-auto"
+			class="avatars-container tw-flex tw-items-center tw-w-full"
 		>
 			<KvUserAvatar
 				v-for="loan, index in loansToDisplay"
@@ -59,12 +59,10 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.avatar-container {
+.avatars-container {
 	@media screen and (width >= 414px) {
 		width: auto;
 	}
-
-	@apply tw-w-full;
 }
 
 .smaller-borrower-avatar :deep(img) {
diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
index 5ff3779325..4024831eb1 100644
--- a/src/components/Thanks/MyKiva/ThanksBadges.vue
+++ b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -179,6 +179,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
+	selectedLoan: {
+		type: Object,
+		default: () => ({})
+	}
 });
 
 const { getHighestPriorityDisplayBadge, getLastCompletedBadgeLevelData } = useBadgeData();

From 147fc7c82d8ca150bfeb0156444582ecae288590 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 17:37:47 -0500
Subject: [PATCH 04/14] fix: borrower image issues

---
 .storybook/stories/ThanksBadges.stories.js    | 17 ++--
 src/components/Thanks/MyKiva/OptInModule.vue  | 86 ++++++++++---------
 src/components/Thanks/MyKiva/ThanksBadges.vue |  4 -
 3 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/.storybook/stories/ThanksBadges.stories.js b/.storybook/stories/ThanksBadges.stories.js
index 60115ca384..e526d89ff5 100644
--- a/.storybook/stories/ThanksBadges.stories.js
+++ b/.storybook/stories/ThanksBadges.stories.js
@@ -26,8 +26,6 @@ const story = (args = {}) => {
 	return template;
 };
 
-const loans = mockedReceiptData.items.values?.map((item) => item?.loan).filter(loan => !!loan?.id);
-
 export const UserGuest = story({
 	lender: mockLender,
 	loans: mockLoans,
@@ -105,8 +103,8 @@ export const UserGuestOptedOutWithOneLoan = story({
 	isGuest: false,
 	optedIn: false,
 	receipt: mockedReceiptData,
-	loans: loans.slice(0, 1),
-	selectedLoan: loans[0],
+	loans: mockLoans.slice(0, 1),
+	selectedLoan: mockLoans[0],
 	badgesAchieved: [mockTieredBadge],
 });
 
@@ -115,7 +113,16 @@ export const UserGuestOptedOutWithTwoLoans = story({
 	isGuest: false,
 	optedIn: false,
 	receipt: mockedReceiptData,
-	loans: loans.slice(0, 2),
+	loans: mockLoans.slice(0, 2),
+	badgesAchieved: [mockTieredBadge],
+});
+
+export const UserGuestOptedOutWithThreeOrMoreLoans = story({
+	lender: mockLender,
+	isGuest: false,
+	optedIn: false,
+	receipt: mockedReceiptData,
+	loans: mockLoans.slice(0, 3),
 	badgesAchieved: [mockTieredBadge],
 });
 
diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index b0336c523f..11548d33ba 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -3,31 +3,31 @@
 		<template v-if="!newConsentAnswered">
 			<div class="module-container">
 				<h2>{{ title }}</h2>
-				<div class="borrower-container">
-					<div
-						class="tw-flex tw-justify-center tw-items-center tw-z-1 image-container"
-					>
-						<borrower-image
-							v-for="loan, index in loansToDisplay"
-							:key="loan.id"
-							class="borrower-image"
-							:class="{'centered-borrower' : index === 1 && loansToDisplay.length === 3}"
-							:style="{
-								marginLeft: `${loans.length === 2 && index === 1
-									? (index * marginLeftWeight)
-									: (index - 1) * marginLeftWeight}rem`,
-								zIndex: `${index + 1}`,
-							}"
-							:aspect-ratio="1"
-							:default-image="{ width: 200, faceZoom: 30 }"
-							:hash="hash(loan)"
-							:images="[
-								{ width: 200, faceZoom: 30 },
-							]"
-						/>
-					</div>
+				<div class="tw-flex tw-items-center tw-justify-center">
+					<BorrowerImage
+						v-for="loan, index in loansToDisplay"
+						:key="loan.id"
+						class="borrower-image"
+						:class="{'centered-borrower' : index === 1 && loansToDisplay.length === 3}"
+						:style="{
+							marginRight: getMarginRight(index),
+							marginLeft: getMarginLeft(index),
+							zIndex: index === 1 ? 2 : 1,
+						}"
+						:aspect-ratio="3 / 4"
+						:default-image="{ width: 336 }"
+						:hash="hash(loan)"
+						:images="[
+							{ width: 336, viewSize: 1024 },
+							{ width: 336, viewSize: 768 },
+							{ width: 416, viewSize: 480 },
+							{ width: 374, viewSize: 414 },
+							{ width: 335, viewSize: 375 },
+							{ width: 280 },
+						]"
+					/>
 				</div>
-				<p>{{ description }}</p>
+				<h3>{{ description }}</h3>
 				<div class="tw-w-full tw-flex tw-flex-col tw-gap-2">
 					<kv-button
 						class="tw-w-full"
@@ -108,7 +108,7 @@ const title = computed(() => {
 		return 'Thank you! You reached a milestone';
 	}
 	if (props.loans.length === 1) {
-		return `You and ${borrowerName.value} are in this together now.`;
+		return `Thank you! You and ${borrowerName.value} are in this together now.`;
 	}
 	if (props.loans.length === 2) {
 		const names = props.loans.map(loan => loan?.name).join(' and ');
@@ -133,20 +133,27 @@ const loansToDisplay = computed(() => {
 	return loans.slice(0, 3);
 });
 
-const marginLeftWeight = computed(() => {
-	if (loansToDisplay.value.length === 1) {
-		return 0;
-	}
-	if (loansToDisplay.value.length === 2) {
-		return 6;
+const getMarginRight = index => {
+	if (loansToDisplay.value.length > 2 && index === 0) {
+		if (isMobile.value) {
+			return '-40px';
+		}
+		return '-80px';
 	}
 
-	if (isMobile.value) {
-		return 7;
+	return '0';
+};
+
+const getMarginLeft = index => {
+	if (loansToDisplay.value.length > 1 && index === loansToDisplay.value.length - 1) {
+		if (isMobile.value) {
+			return '-40px';
+		}
+		return '-80px';
 	}
 
-	return 12;
-});
+	return '0';
+};
 
 const hash = loan => {
 	return loan?.image?.hash ?? '';
@@ -220,8 +227,11 @@ const updateOptIn = value => {
 		height: 160px !important;
 	}
 
-	box-shadow: '0px 4.42px 22.1px 0px #D1DCD6';
-	@apply tw-absolute tw-w-full tw-rounded-full tw-bg-black tw-border-4 tw-border-white tw-z-2 tw-pb-0;
+	@apply tw-w-full tw-rounded-full tw-bg-black tw-border-4 tw-border-white tw-z-2 !tw-pb-0;
+}
+
+.borrower-image :deep(img) {
+	@apply tw-object-cover;
 }
 
 .centered-borrower {
@@ -232,8 +242,6 @@ const updateOptIn = value => {
 		width: 180px !important;
 		height: 180px !important;
 	}
-
-	@apply !tw-z-5;
 }
 
 .ghost-button :deep(span) {
diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
index 4024831eb1..1c2eadc499 100644
--- a/src/components/Thanks/MyKiva/ThanksBadges.vue
+++ b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -175,10 +175,6 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
-	optedIn: {
-		type: Boolean,
-		default: false
-	},
 	selectedLoan: {
 		type: Object,
 		default: () => ({})

From 7e14e16123645399a8533f240e3981de8acd02ca Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 18:30:21 -0500
Subject: [PATCH 05/14] fix: switch to user avatar

---
 .storybook/mock-data/receipt-data-mock.js     | 10 +--
 src/components/Thanks/MyKiva/OptInModule.vue  | 65 +++++--------------
 .../Thanks/MyKiva/OptInNotification.vue       |  8 +--
 3 files changed, 26 insertions(+), 57 deletions(-)

diff --git a/.storybook/mock-data/receipt-data-mock.js b/.storybook/mock-data/receipt-data-mock.js
index 898e3358ca..ff186dc021 100644
--- a/.storybook/mock-data/receipt-data-mock.js
+++ b/.storybook/mock-data/receipt-data-mock.js
@@ -39,7 +39,7 @@ export default {
 					"name": "Alan",
 					"id": 1911067,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/5e041e655faa305c49c13505d1c17cba.jpg",
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s300/5e041e655faa305c49c13505d1c17cba.jpg",
 						"hash": "5e041e655faa305c49c13505d1c17cba"
 					},
 					"use": "to expand her business by purchasing more stock such as seed and manure for the expansion of her vegetable garden.",
@@ -64,7 +64,7 @@ export default {
 					"name": "Alan",
 					"id": 1908530,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/da9ac74228e39e15cc198f8165e68c20.jpg",
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s300/da9ac74228e39e15cc198f8165e68c20.jpg",
 						"hash": "da9ac74228e39e15cc198f8165e68c20"
 					},
 					"use": "to buy taro roots (seedlings), banana tubers (seedlings), chemicals, a bag back sprayer, and a chainsaw.",
@@ -89,7 +89,7 @@ export default {
 					"name": "Barrio Concepcion Group",
 					"id": 1907517,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/213d4f59069e192a2a4b9ee1fb56b649.jpg",
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s300/213d4f59069e192a2a4b9ee1fb56b649.jpg",
 						"hash": "213d4f59069e192a2a4b9ee1fb56b649"
 					},
 					"use": "to buy a stove with a grill, kitchen utensils, corn and firewood.",
@@ -114,7 +114,7 @@ export default {
 					"name": "Alan",
 					"id": 1909791,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg",
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s300/26e15431f51b540f31cd9f011cc54f31.jpg",
 						"hash": "26e15431f51b540f31cd9f011cc54f31"
 					},
 					"use": "to buy farming inputs and improve her production in 2020 for an increased income.",
@@ -139,7 +139,7 @@ export default {
 					"name": "Las Victoriosas Group",
 					"id": 1906824,
 					"image": {
-						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s100/26342071330beb8309d17a5d262da2dd.jpg",
+						"url": "https://www-dev-kiva-org.global.ssl.fastly.net/img/s300/26342071330beb8309d17a5d262da2dd.jpg",
 						"hash": "26342071330beb8309d17a5d262da2dd"
 					},
 					"use": "to buy used clothing for men, women and children in specific sizes.",
diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 11548d33ba..4412ad1e0e 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -4,27 +4,18 @@
 			<div class="module-container">
 				<h2>{{ title }}</h2>
 				<div class="tw-flex tw-items-center tw-justify-center">
-					<BorrowerImage
+					<KvUserAvatar
 						v-for="loan, index in loansToDisplay"
 						:key="loan.id"
-						class="borrower-image"
-						:class="{'centered-borrower' : index === 1 && loansToDisplay.length === 3}"
+						:lender-name="loan?.name"
+						:lender-image-url="loan?.image?.url"
+						class="borrower-image tw-rounded-full tw-shadow tw-border-white tw-border-2"
+						:class="{'centered-borrower-image' : index === 1 && loansToDisplay.length === 3}"
 						:style="{
 							marginRight: getMarginRight(index),
 							marginLeft: getMarginLeft(index),
 							zIndex: index === 1 ? 2 : 1,
 						}"
-						:aspect-ratio="3 / 4"
-						:default-image="{ width: 336 }"
-						:hash="hash(loan)"
-						:images="[
-							{ width: 336, viewSize: 1024 },
-							{ width: 336, viewSize: 768 },
-							{ width: 416, viewSize: 480 },
-							{ width: 374, viewSize: 414 },
-							{ width: 335, viewSize: 375 },
-							{ width: 280 },
-						]"
 					/>
 				</div>
 				<h3>{{ description }}</h3>
@@ -70,19 +61,15 @@
 import { computed, inject, ref } from 'vue';
 import { gql } from 'graphql-tag';
 import logReadQueryError from '#src/util/logReadQueryError';
-import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
 import KvButton from '@kiva/kv-components/vue/KvButton';
 import useIsMobile from '#src/composables/useIsMobile';
 import {
 	MOBILE_BREAKPOINT,
 } from '#src/composables/useBadgeModal';
+import KvUserAvatar from '@kiva/kv-components/vue/KvUserAvatar';
 import OptInNotification from './OptInNotification';
 
 const props = defineProps({
-	selectedLoan: {
-		type: Object,
-		default: () => ({})
-	},
 	loans: {
 		type: Array,
 		default: () => ([])
@@ -99,16 +86,12 @@ const receiveNews = ref(false);
 
 const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
 
-const borrowerName = computed(() => {
-	return props.selectedLoan?.name ?? '';
-});
-
 const title = computed(() => {
 	if (props.optedIn) {
 		return 'Thank you! You reached a milestone';
 	}
 	if (props.loans.length === 1) {
-		return `Thank you! You and ${borrowerName.value} are in this together now.`;
+		return `Thank you! You and ${props.loans[0]?.name} are in this together now.`;
 	}
 	if (props.loans.length === 2) {
 		const names = props.loans.map(loan => loan?.name).join(' and ');
@@ -120,18 +103,10 @@ const title = computed(() => {
 });
 
 const description = computed(
-	() => `Want to hear how you're impacting ${borrowerName.value}'s life and more ways to help people like them?`
+	() => `Want to hear how you're impacting ${props.loans[0]?.name}'s life and more ways to help people like them?`
 );
 
-const loansToDisplay = computed(() => {
-	const loans = [...props.loans];
-	if (props.loans.length === 3) {
-		const indexToRemove = loans.indexOf(loan => loan.id === props.selectedLoan.id);
-		const removedLoan = loans.splice(indexToRemove, 1)[0];
-		loans.splice(1, 0, removedLoan);
-	}
-	return loans.slice(0, 3);
-});
+const loansToDisplay = computed(() => props.loans.slice(0, 3));
 
 const getMarginRight = index => {
 	if (loansToDisplay.value.length > 2 && index === 0) {
@@ -181,7 +156,7 @@ const updateOptIn = value => {
 				},
 			});
 		} catch (error) {
-			logReadQueryError(error, 'error');
+			logReadQueryError(error, 'OptInModule updateCommunicationSettings');
 		}
 	}
 	newConsentAnswered.value = true;
@@ -218,23 +193,17 @@ const updateOptIn = value => {
 	}
 }
 
-.borrower-image {
-	width: 80px !important;
-	height: 80px !important;
+.borrower-image, .borrower-image :deep(img) {
+	width: 80px;
+	height: 80px;
 
 	@screen md {
-		width: 160px !important;
-		height: 160px !important;
+		width: 160px;
+		height: 160px;
 	}
-
-	@apply tw-w-full tw-rounded-full tw-bg-black tw-border-4 tw-border-white tw-z-2 !tw-pb-0;
-}
-
-.borrower-image :deep(img) {
-	@apply tw-object-cover;
 }
 
-.centered-borrower {
+.centered-borrower-image, .centered-borrower-image :deep(img) {
 	width: 100px !important;
 	height: 100px !important;
 
@@ -250,7 +219,7 @@ const updateOptIn = value => {
 
 .collapse-enter-active,
 .collapse-leave-active {
-  transition: max-height 1s ease, opacity 1s ease;
+  transition: max-height 1s ease, opacity 1s ease, padding 1s ease;
   overflow: hidden;
 }
 
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 11e46a7909..0a5b5de921 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,12 +1,12 @@
 <template>
 	<div
-		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-2
 			tw-bg-white tw-rounded tw-px-3 tw-py-1.5"
 		:style="{maxWidth: '620px'}"
 	>
 		<div
 			v-if="receiveNews"
-			class="avatars-container tw-flex tw-items-center tw-w-full"
+			class="avatars-container tw-flex tw-items-center"
 		>
 			<KvUserAvatar
 				v-for="loan, index in loansToDisplay"
@@ -60,8 +60,8 @@ const notificationMsg = computed(() => {
 <style lang="postcss" scoped>
 
 .avatars-container {
-	@media screen and (width >= 414px) {
-		width: auto;
+	@media screen and (width <= 375px ) {
+		width: 100%;
 	}
 }
 

From 3e43e7d37b61db5af68e03b0936350fc195d0c74 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 18:35:48 -0500
Subject: [PATCH 06/14] fix: lint

---
 src/components/Thanks/MyKiva/OptInModule.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 4412ad1e0e..0049c3554c 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -130,10 +130,6 @@ const getMarginLeft = index => {
 	return '0';
 };
 
-const hash = loan => {
-	return loan?.image?.hash ?? '';
-};
-
 const updateOptIn = value => {
 	if (value) {
 		try {

From ffb8ad56cdea2cb97ca4ab250e45131d5eeca254 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 11 Nov 2024 19:50:37 -0500
Subject: [PATCH 07/14] fix: avatar image sizes

---
 src/components/Thanks/MyKiva/OptInModule.vue  | 26 +++++++-----------
 .../Thanks/MyKiva/OptInNotification.vue       | 27 ++++++++++++-------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 0049c3554c..c534a8ad5d 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -110,10 +110,7 @@ const loansToDisplay = computed(() => props.loans.slice(0, 3));
 
 const getMarginRight = index => {
 	if (loansToDisplay.value.length > 2 && index === 0) {
-		if (isMobile.value) {
-			return '-40px';
-		}
-		return '-80px';
+		return '-100px';
 	}
 
 	return '0';
@@ -121,10 +118,7 @@ const getMarginRight = index => {
 
 const getMarginLeft = index => {
 	if (loansToDisplay.value.length > 1 && index === loansToDisplay.value.length - 1) {
-		if (isMobile.value) {
-			return '-40px';
-		}
-		return '-80px';
+		return '-100px';
 	}
 
 	return '0';
@@ -164,7 +158,7 @@ const updateOptIn = value => {
 
 .module-container {
 	max-width: 620px;
-	max-height: 800px;
+	max-height: 900px;
 
 	@apply tw-flex tw-flex-col tw-mx-auto tw-overflow-hidden tw-opacity-full tw-bg-white
 		tw-text-center tw-px-3 md:tw-px-8 tw-gap-3 tw-rounded-lg tw-py-4;
@@ -190,22 +184,22 @@ const updateOptIn = value => {
 }
 
 .borrower-image, .borrower-image :deep(img) {
-	width: 80px;
-	height: 80px;
+	width: 124px;
+	height: 120px;
 
 	@screen md {
-		width: 160px;
+		width: 164px;
 		height: 160px;
 	}
 }
 
 .centered-borrower-image, .centered-borrower-image :deep(img) {
-	width: 100px !important;
-	height: 100px !important;
+	width: 164px !important;
+	height: 160px !important;
 
 	@screen md {
-		width: 180px !important;
-		height: 180px !important;
+		width: 204px !important;
+		height: 200px !important;
 	}
 }
 
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 0a5b5de921..21e9aef16d 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-2
-			tw-bg-white tw-rounded tw-px-3 tw-py-1.5"
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
+			tw-bg-white tw-rounded tw-px-3 tw-py-1.5 container"
 		:style="{maxWidth: '620px'}"
 	>
 		<div
@@ -13,18 +13,18 @@
 				:key="loan.id"
 				:lender-name="loan?.name"
 				:lender-image-url="loan?.image?.url"
-				class="tw-rounded-full tw-shadow tw-border-white tw-border-2 tw-w-auto"
+				class="avatar tw-rounded-full tw-shadow tw-border-white tw-border-2 tw-w-auto"
 				:class="{'smaller-borrower-avatar' : loansToDisplay.length > 2 && index !== 1 }"
 				:style="{
 					zIndex: index === 1 ? 2 : 1,
-					marginRight: loansToDisplay.length > 2 && index === 0 ? '-22px' : '0',
-					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-22px' : '0',
+					marginRight: loansToDisplay.length > 2 && index === 0 ? '-30px' : '0',
+					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-30px' : '0',
 				}"
 			/>
 		</div>
-		<p class="tw-font-medium">
+		<span class="tw-font-medium">
 			{{ notificationMsg }}
-		</p>
+		</span>
 	</div>
 </template>
 
@@ -59,12 +59,21 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.avatars-container {
-	@media screen and (width <= 375px ) {
+.container {
+	@media screen and (width <= 422px ) {
+		display: block;
+		margin: 0 auto;
+		text-align: center;
 		width: 100%;
 	}
 }
 
+.container > .avatars-container {
+	@media screen and (width <= 422px ) {
+		justify-content: center;
+	}
+}
+
 .smaller-borrower-avatar :deep(img) {
 	height: 36px;
 	width: 36px;

From 1b2879d493530f597fc02615213686f7a8865312 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 10:06:36 -0500
Subject: [PATCH 08/14] fix: avatar sizes, borders and animation error

---
 src/components/Thanks/MyKiva/OptInModule.vue  | 39 ++++++++++++++++---
 .../Thanks/MyKiva/OptInNotification.vue       | 17 ++------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index c534a8ad5d..82f9194ed5 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -9,8 +9,11 @@
 						:key="loan.id"
 						:lender-name="loan?.name"
 						:lender-image-url="loan?.image?.url"
-						class="borrower-image tw-rounded-full tw-shadow tw-border-white tw-border-2"
-						:class="{'centered-borrower-image' : index === 1 && loansToDisplay.length === 3}"
+						class="borrower-image tw-rounded-full tw-shadow"
+						:class="{
+							'centered-borrower-image' : index === 1 && loansToDisplay.length === 3,
+							'pair-loans': loansToDisplay.length === 2
+						}"
 						:style="{
 							marginRight: getMarginRight(index),
 							marginLeft: getMarginLeft(index),
@@ -110,6 +113,9 @@ const loansToDisplay = computed(() => props.loans.slice(0, 3));
 
 const getMarginRight = index => {
 	if (loansToDisplay.value.length > 2 && index === 0) {
+		if (isMobile.value) {
+			return '-81.5px';
+		}
 		return '-100px';
 	}
 
@@ -118,6 +124,13 @@ const getMarginRight = index => {
 
 const getMarginLeft = index => {
 	if (loansToDisplay.value.length > 1 && index === loansToDisplay.value.length - 1) {
+		if (loansToDisplay.value.length === 2) {
+			return '-63px';
+		}
+
+		if (isMobile.value) {
+			return '-81.5px';
+		}
 		return '-100px';
 	}
 
@@ -185,31 +198,45 @@ const updateOptIn = value => {
 
 .borrower-image, .borrower-image :deep(img) {
 	width: 124px;
-	height: 120px;
+	height: 124px;
 
 	@screen md {
-		width: 164px;
+		width: 160px;
 		height: 160px;
 	}
 }
 
+.pair-loans, .pair-loans :deep(img) {
+	width: 148px !important;
+	height: 148px !important;
+
+	@screen md {
+		width: 200px !important;
+		height: 200px !important;
+	}
+}
+
 .centered-borrower-image, .centered-borrower-image :deep(img) {
 	width: 164px !important;
 	height: 160px !important;
 
 	@screen md {
-		width: 204px !important;
+		width: 200px !important;
 		height: 200px !important;
 	}
 }
 
+.borrower-image :deep(img), .centered-borrower-image :deep(img) {
+	@apply tw-border-4 tw-border-white;
+}
+
 .ghost-button :deep(span) {
 	@apply tw-bg-transparent;
 }
 
 .collapse-enter-active,
 .collapse-leave-active {
-  transition: max-height 1s ease, opacity 1s ease, padding 1s ease;
+  transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
   overflow: hidden;
 }
 
diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 21e9aef16d..6a862107f7 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -6,7 +6,7 @@
 	>
 		<div
 			v-if="receiveNews"
-			class="avatars-container tw-flex tw-items-center"
+			class="avatars-container tw-flex tw-items-center tw-flex-2"
 		>
 			<KvUserAvatar
 				v-for="loan, index in loansToDisplay"
@@ -59,18 +59,9 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.container {
-	@media screen and (width <= 422px ) {
-		display: block;
-		margin: 0 auto;
-		text-align: center;
-		width: 100%;
-	}
-}
-
-.container > .avatars-container {
-	@media screen and (width <= 422px ) {
-		justify-content: center;
+.avatars-container {
+	@media screen and (width <= 420px ) {
+		width: 120px;
 	}
 }
 

From 12d3d035254370d731eee7814cb34863b2110336 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 12:06:52 -0500
Subject: [PATCH 09/14] fix: inner padding in buttons and single loan image
 size

---
 src/components/Thanks/MyKiva/OptInModule.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 82f9194ed5..53eb582894 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -12,7 +12,7 @@
 						class="borrower-image tw-rounded-full tw-shadow"
 						:class="{
 							'centered-borrower-image' : index === 1 && loansToDisplay.length === 3,
-							'pair-loans': loansToDisplay.length === 2
+							'single-pair-loans': loansToDisplay.length < 3
 						}"
 						:style="{
 							marginRight: getMarginRight(index),
@@ -24,7 +24,7 @@
 				<h3>{{ description }}</h3>
 				<div class="tw-w-full tw-flex tw-flex-col tw-gap-2">
 					<kv-button
-						class="tw-w-full"
+						class="tw-w-full btn"
 						@click="() => updateOptIn(true)"
 						v-kv-track-event="[
 							'thanks',
@@ -37,7 +37,7 @@
 					<kv-button
 						@click="() => updateOptIn(false)"
 						variant="ghost"
-						class="tw-w-full ghost-button"
+						class="tw-w-full btn ghost"
 						v-kv-track-event="[
 							'thanks',
 							'click',
@@ -206,7 +206,7 @@ const updateOptIn = value => {
 	}
 }
 
-.pair-loans, .pair-loans :deep(img) {
+.single-pair-loans, .single-pair-loans :deep(img) {
 	width: 148px !important;
 	height: 148px !important;
 
@@ -230,7 +230,11 @@ const updateOptIn = value => {
 	@apply tw-border-4 tw-border-white;
 }
 
-.ghost-button :deep(span) {
+.btn :deep(span) {
+	@apply tw-px-0;
+}
+
+.btn.ghost :deep(span) {
 	@apply tw-bg-transparent;
 }
 

From d86ec10de590d72f0b5f275644831736025371c3 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 12:09:07 -0500
Subject: [PATCH 10/14] fix: add font book to module description

---
 src/components/Thanks/MyKiva/OptInModule.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue
index 53eb582894..89dff51d53 100644
--- a/src/components/Thanks/MyKiva/OptInModule.vue
+++ b/src/components/Thanks/MyKiva/OptInModule.vue
@@ -21,7 +21,9 @@
 						}"
 					/>
 				</div>
-				<h3>{{ description }}</h3>
+				<h3 class="tw-font-book">
+					{{ description }}
+				</h3>
 				<div class="tw-w-full tw-flex tw-flex-col tw-gap-2">
 					<kv-button
 						class="tw-w-full btn"

From 3da08b1d6dfa352999a9ff1d4deb38cc20054884 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 12:34:40 -0500
Subject: [PATCH 11/14] fix: notification design

---
 src/components/Thanks/MyKiva/OptInNotification.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 6a862107f7..99b234a07f 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
-			tw-bg-white tw-rounded tw-px-3 tw-py-1.5 container"
+			tw-bg-white tw-rounded tw-px-1.5 md:tw-px-3 tw-py-1.5 container"
 		:style="{maxWidth: '620px'}"
 	>
 		<div
@@ -22,7 +22,7 @@
 				}"
 			/>
 		</div>
-		<span class="tw-font-medium">
+		<span class="tw-text-small md:tw-text-base !tw-font-medium">
 			{{ notificationMsg }}
 		</span>
 	</div>
@@ -59,15 +59,9 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.avatars-container {
-	@media screen and (width <= 420px ) {
-		width: 120px;
-	}
-}
-
 .smaller-borrower-avatar :deep(img) {
-	height: 36px;
-	width: 36px;
+	height: 48px;
+	width: 48px;
 }
 
 </style>

From a7faf24ee44fc58bc54db1798bd32ca14cb8c24a Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 12:36:16 -0500
Subject: [PATCH 12/14] fix: change smaller avatar size

---
 src/components/Thanks/MyKiva/OptInNotification.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 99b234a07f..44d8f10b33 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -60,8 +60,8 @@ const notificationMsg = computed(() => {
 <style lang="postcss" scoped>
 
 .smaller-borrower-avatar :deep(img) {
-	height: 48px;
-	width: 48px;
+	height: 36px;
+	width: 36px;
 }
 
 </style>

From 90121580948c01fa66345c7c3a77cb128967605b Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 12:41:55 -0500
Subject: [PATCH 13/14] fix: text size for mobile

---
 src/components/Thanks/MyKiva/OptInNotification.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 44d8f10b33..9cbf359bfa 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -22,7 +22,7 @@
 				}"
 			/>
 		</div>
-		<span class="tw-text-small md:tw-text-base !tw-font-medium">
+		<span class="!tw-font-medium message">
 			{{ notificationMsg }}
 		</span>
 	</div>
@@ -64,4 +64,11 @@ const notificationMsg = computed(() => {
 	width: 36px;
 }
 
+.message {
+	@media screen and (width <= 398px) {
+		font-size: 0.8125rem !important;
+		line-height: 1.5 !important;
+	}
+}
+
 </style>

From e0e7914baad0ffa91fa238c48cc5b2f1000fda68 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 13:05:01 -0500
Subject: [PATCH 14/14] fix: update notification avatar sizes for mobile and
 desktop

---
 .../Thanks/MyKiva/OptInNotification.vue        | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 9cbf359bfa..900cd54613 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-1 md:tw-gap-2
 			tw-bg-white tw-rounded tw-px-1.5 md:tw-px-3 tw-py-1.5 container"
 		:style="{maxWidth: '620px'}"
 	>
@@ -13,12 +13,12 @@
 				:key="loan.id"
 				:lender-name="loan?.name"
 				:lender-image-url="loan?.image?.url"
-				class="avatar tw-rounded-full tw-shadow tw-border-white tw-border-2 tw-w-auto"
+				class="avatar tw-rounded-full tw-shadow tw-w-auto"
 				:class="{'smaller-borrower-avatar' : loansToDisplay.length > 2 && index !== 1 }"
 				:style="{
 					zIndex: index === 1 ? 2 : 1,
-					marginRight: loansToDisplay.length > 2 && index === 0 ? '-30px' : '0',
-					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-30px' : '0',
+					marginRight: loansToDisplay.length > 2 && index === 0 ? '-18px' : '0',
+					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-18px' : '0',
 				}"
 			/>
 		</div>
@@ -59,9 +59,13 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.smaller-borrower-avatar :deep(img) {
-	height: 36px;
-	width: 36px;
+.avatar :deep(img) {
+	@apply tw-w-4.5 tw-h-4.5 md:tw-h-6 md:tw-w-6 tw-border-2 tw-border-white;
+}
+
+.smaller-borrower-avatar, .smaller-borrower-avatar :deep(img) {
+	height: 30px;
+	width: 30px;
 }
 
 .message {