From 18fb9d3ef9a99f4753ffaf08033d47657985a0d0 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Wed, 16 Oct 2024 16:19:46 -0500
Subject: [PATCH 1/9] feat: modal content for completed badges

---
 .../stories/MyKivaBadgeCompleted.stories.js   | 208 ++++++++++++++++++
 src/components/MyKiva/BadgeCompleted.vue      | 167 ++++++++++++++
 src/components/Thanks/AnimatedStars.vue       | 136 +++++++-----
 3 files changed, 459 insertions(+), 52 deletions(-)
 create mode 100644 .storybook/stories/MyKivaBadgeCompleted.stories.js
 create mode 100644 src/components/MyKiva/BadgeCompleted.vue

diff --git a/.storybook/stories/MyKivaBadgeCompleted.stories.js b/.storybook/stories/MyKivaBadgeCompleted.stories.js
new file mode 100644
index 0000000000..920da61a01
--- /dev/null
+++ b/.storybook/stories/MyKivaBadgeCompleted.stories.js
@@ -0,0 +1,208 @@
+import BadgeCompleted from '#src/components/MyKiva/BadgeCompleted.vue';
+
+export default {
+	title: 'MyKiva/BadgeCompleted',
+	component: BadgeCompleted,
+};
+
+const story = (args = {}) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { BadgeCompleted },
+		setup() { return { args }; },
+		template: `
+			<badge-completed v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const contentfulBadgeData = {
+  "metadata": {
+      "tags": [],
+      "concepts": []
+    },
+    "sys": {
+      "space": {
+        "sys": {
+          "type": "Link",
+          "linkType": "Space",
+          "id": "j0p9a6ql0rn7"
+        }
+      },
+      "id": "5qVq3IF07C8um3AiQVjLK5",
+      "type": "Entry",
+      "createdAt": "2024-10-08T20:25:25.114Z",
+      "updatedAt": "2024-10-15T23:11:19.111Z",
+      "environment": {
+        "sys": {
+          "id": "development",
+          "type": "Link",
+          "linkType": "Environment"
+        }
+      },
+      "revision": 4,
+      "contentType": {
+        "sys": {
+          "type": "Link",
+          "linkType": "ContentType",
+          "id": "challenge"
+        }
+      },
+      "locale": "en-US"
+    },
+    "fields": {
+      "key": "us-economic-equality-level-2",
+      "challengeName": "U.S. Economic equality (level 2)",
+      "badgeImage": {
+        "metadata": {
+          "tags": []
+        },
+        "sys": {
+          "space": {
+            "sys": {
+              "type": "Link",
+              "linkType": "Space",
+              "id": "j0p9a6ql0rn7"
+            }
+          },
+          "id": "62zEUpZbO7qWZPoV1z2pZU",
+          "type": "Asset",
+          "createdAt": "2024-10-08T20:25:01.320Z",
+          "updatedAt": "2024-10-08T20:25:01.320Z",
+          "environment": {
+            "sys": {
+              "id": "development",
+              "type": "Link",
+              "linkType": "Environment"
+            }
+          },
+          "revision": 1,
+          "locale": "en-US"
+        },
+        "fields": {
+          "title": "US Economic Equality Level 2",
+          "description": "",
+          "file": {
+            "url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
+            "details": {
+              "size": 18162550,
+              "image": {
+                "width": 2382,
+                "height": 2382
+              }
+            },
+            "fileName": "US Economic Equality Level 2.svg",
+            "contentType": "image/svg+xml"
+          }
+        }
+      },
+      "thankYouImage": {
+        "metadata": {
+          "tags": []
+        },
+        "sys": {
+          "space": {
+            "sys": {
+              "type": "Link",
+              "linkType": "Space",
+              "id": "j0p9a6ql0rn7"
+            }
+          },
+          "id": "62zEUpZbO7qWZPoV1z2pZU",
+          "type": "Asset",
+          "createdAt": "2024-10-08T20:25:01.320Z",
+          "updatedAt": "2024-10-08T20:25:01.320Z",
+          "environment": {
+            "sys": {
+              "id": "development",
+              "type": "Link",
+              "linkType": "Environment"
+            }
+          },
+          "revision": 1,
+          "locale": "en-US"
+        },
+        "fields": {
+          "title": "US Economic Equality Level 2",
+          "description": "",
+          "file": {
+            "url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
+            "details": {
+              "size": 18162550,
+              "image": {
+                "width": 2382,
+                "height": 2382
+              }
+            },
+            "fileName": "US Economic Equality Level 2.svg",
+            "contentType": "image/svg+xml"
+          }
+        }
+      },
+      "shareFact": "3 in 5 U.S. business owners brought in more income after their Kiva loan.*",
+      "shareFactUrl": "/",
+      "dateTagline": "N/A",
+      "shareFactFootnote": "Kiva borrowers surveyed by 60 Decibels."
+    }
+}
+
+export const Default = story({
+  badge: contentfulBadgeData,
+  lendingAchievement: {
+      "id": "us-economic-equality",
+      "tiers": [
+        {
+          "completedDate": "2021-01-01T00:00:00Z",
+          "learnMoreURL": "",
+          "target": 2,
+          "tierStatement": ""
+        },
+        {
+          "completedDate": "2021-01-01T00:00:00Z",
+          "learnMoreURL": "",
+          "target": 3,
+          "tierStatement": ""
+        },
+        {
+          "completedDate": "2021-01-01T00:00:00Z",
+          "learnMoreURL": "",
+          "target": 5,
+          "tierStatement": ""
+        },
+        {
+          "completedDate": "2021-01-01T00:00:00Z",
+          "learnMoreURL": "",
+          "target": 10,
+          "tierStatement": ""
+        },
+        {
+          "completedDate": "2021-04-20T00:00:00Z",
+          "learnMoreURL": "https://www.kiva.org/impact/systemically-marginalized-communities",
+          "target": 20,
+          "tierStatement": "70% of U.S. business owners surveyed were more confident in their business as a result of their loan.*"
+        },
+        {
+          "completedDate": null,
+          "learnMoreURL": "",
+          "target": 50,
+          "tierStatement": ""
+        },
+        {
+          "completedDate": null,
+          "learnMoreURL": "",
+          "target": 100,
+          "tierStatement": ""
+        },
+      ],
+      "description": "description",
+      "totalProgressToAchievement": 0,
+      "status": "PARTIALLY_COMPLETE"
+  },
+  lender: {
+    publicName: 'Christian',
+    public: true,
+    publicId: 'christian78848470'
+  }
+});
diff --git a/src/components/MyKiva/BadgeCompleted.vue b/src/components/MyKiva/BadgeCompleted.vue
new file mode 100644
index 0000000000..4d6dea8fac
--- /dev/null
+++ b/src/components/MyKiva/BadgeCompleted.vue
@@ -0,0 +1,167 @@
+<template>
+	<div class="container">
+		<div class="badge-container tw-flex-col tw-mb-4">
+			<h2 class="tw-text-center tw-mb-2">
+				{{ badgeTitle }}
+			</h2>
+			<div class="tw-relative tw-z-1 tw-mb-3" :style="{ minWidth: '16rem'}">
+				<div
+					class="tw-absolute tw-h-full tw-z-docked"
+				>
+					<AnimatedStars badge-completed :style="{ minWidth: '16rem'}" class="tw-h-full" />
+				</div>
+
+				<img
+					:src="badgeImage"
+					class="badge tw-z-2"
+					:alt="badgeTitle"
+				>
+			</div>
+			<h2 class="tw-italic tw-font-medium tw-text-desert-rose-4 tw-mb-2 tw-text-center">
+				{{ funFact }}<a
+					:href="learnMoreLink"
+					v-kv-track-event="[
+						'portfolio',
+						'click',
+						'Already earned badge modal - Learn more',
+						badgeCategory,
+						badgeLevel
+					]"
+					class="tw-underline tw-text-desert-rose-4 hover:tw-text-desert-rose-4"
+				> Learn more</a>
+			</h2>
+			<h4 class="tw-text-secondary">
+				{{ earnedDate }}
+			</h4>
+		</div>
+		<KvSocialShareButton
+			style="max-width: 328px; margin: 0 auto"
+			v-kv-track-event="[
+				'portfolio',
+				'click',
+				'Already earned badge modal - Share badge',
+				badgeCategory,
+				badgeLevel
+			]"
+			variant="primary"
+			modal-title="Celebrate your badge!"
+			:share-message="shareMessage"
+			:share-url="shareUrl"
+			:utm-campaign="utmCampaign"
+			:utm-content="utmContent"
+		>
+			<div class="tw-flex tw-gap-1 tw-items-center">
+				<KvMaterialIcon :icon="mdiExportVariant" class="tw-w-2.5 tw-h-2.5 tw-text-white" />
+				<span class="tw-font-medium">Share</span>
+			</div>
+		</KvSocialShareButton>
+		<p class="tw-text-small tw-text-center tw-text-secondary tw-mt-1.5">
+			{{ funFactSource }}
+		</p>
+	</div>
+</template>
+
+<script setup>
+
+import KvSocialShareButton from '#src/components/Kv/KvSocialShareButton';
+import AnimatedStars from '#src/components/Thanks/AnimatedStars';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+
+import confetti from 'canvas-confetti';
+import {
+	defineProps,
+	computed,
+	toRefs,
+	onMounted
+} from 'vue';
+import { format } from 'date-fns';
+import { mdiExportVariant } from '@mdi/js';
+
+const props = defineProps({
+	badge: {
+		type: Object,
+		default: () => ({}),
+	},
+	lender: {
+		type: Object,
+		default: () => ({}),
+	},
+	lendingAchievement: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const { badge, lender, lendingAchievement } = toRefs(props);
+
+const isPublic = computed(() => lender.value?.public && lender.value?.publicName);
+const shareUrl = computed(() => (isPublic.value ? `/lender/${lender.value?.publicId}` : 'https://www.kiva.org'));
+// eslint-disable-next-line max-len
+const shareMessage = "It's not everyday you change a life! Thank you, from all of us at Kiva and the millions of lives changed around the world.";
+
+const utmCampaign = computed(() => `social_share_portfolio_badge_${badge.value.id}`);
+const utmContent = computed(() => {
+	if (lender.value?.public && lender.value?.publicName) return lender.value.publicName;
+	return 'anonymous';
+});
+
+const badgeImage = computed(() => {
+	return badge.value.fields?.badgeImage?.fields?.file?.url ?? '';
+});
+
+const badgeCategory = computed(() => badge.value?.challengeName ?? '');
+const tiers = computed(() => lendingAchievement.value?.tiers ?? []);
+
+const currentTier = computed(() => {
+	return tiers.value?.findLast(tier => tier.completedDate) ?? null;
+});
+const badgeLevel = computed(() => {
+	return currentTier.value?.target ?? 0;
+});
+
+const badgeTitle = computed(() => {
+	return badge.value?.fields?.challengeName ?? '';
+});
+const funFact = computed(() => {
+	return badge.value.fields?.shareFact ?? '';
+});
+const funFactSource = computed(() => {
+	return badge.value.fields?.shareFactFootnote ?? '';
+});
+const learnMoreLink = computed(() => badge.value.shareFactUrl ?? '');
+const earnedDate = computed(() => `Earned ${format(new Date(currentTier.value.completedDate), 'MMMM do, yyyy')}`);
+
+onMounted(() => {
+	confetti({
+		origin: {
+			y: 0.2
+		},
+		particleCount: 150,
+		spread: 200,
+		colors: ['#6AC395', '#223829', '#95D4B3'],
+		disableForReducedMotion: true,
+	});
+});
+</script>
+
+<style lang="postcss" scoped>
+
+.container {
+  @apply tw-mx-auto tw-bg-white tw-p-4.5 tw-rounded;
+  max-width: 888px;
+}
+.badge-container {
+  @apply tw-flex tw-flex-col tw-justify-center tw-items-center;
+}
+
+.badge {
+	@apply tw-mx-auto;
+  width: 160px;
+  height: 160px;
+
+  @screen md {
+    width: 211px;
+    height: 211px;
+  }
+}
+</style>
diff --git a/src/components/Thanks/AnimatedStars.vue b/src/components/Thanks/AnimatedStars.vue
index 269d289587..f301c4ed77 100644
--- a/src/components/Thanks/AnimatedStars.vue
+++ b/src/components/Thanks/AnimatedStars.vue
@@ -1,58 +1,88 @@
 <!-- eslint-disable max-len -->
 <template>
 	<div>
-		<svg
-			class="svg first-svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M15.6562 9.56756C10.5937 9.56756 9.32812 5.18919 9.32812 3C9.32812 5.18919 8.0625 9.56756 3 9.56756C8.0625 9.56756 9.32812 14.1892 9.32812 16.5C9.32812 14.1892 10.5937 9.56756 15.6562 9.56756Z"
-				fill="#F4B539"
-				stroke="#F4B539"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-			<path
-				d="M18.75 16.5V21"
-				stroke="#F4B539"
-				stroke-width="1.5"
-				stroke-linecap="round"
-			/>
-			<path
-				d="M21 18.75L16.5 18.75"
-				stroke="#F4B539"
-				stroke-width="1.5"
-				stroke-linecap="round"
-			/>
-			<circle cx="19.875" cy="4.125" r="1.125" fill="#F4B539" />
-		</svg>
+		<template v-if="badgeCompleted">
+			<svg class="svg first-star tw-bottom-0 tw-left-4" width="20" height="38" viewBox="0 0 20 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M16.3283 8.29768L15.0814 8.47958C11.5591 8.99342 8.82807 11.821 8.4369 15.359L8.27546 16.8191L8.0741 15.364C7.58616 11.838 4.77873 9.08629 1.24365 8.66914L-0.0078125 8.52147L1.23913 8.33956C4.76145 7.82573 7.49246 4.99815 7.88363 1.46011L8.04507 0L8.24644 1.45514C8.73438 4.98114 11.5418 7.73285 15.0769 8.15L16.3283 8.29768Z" fill="#F4B539" />
+				<path d="M19.5009 33.5749C17.4901 33.8682 15.9311 35.4823 15.7078 37.5021L15.697 37.6001L15.6834 37.5024C15.4049 35.4896 13.8022 33.9187 11.7842 33.6806C13.7949 33.3872 15.354 31.7731 15.5773 29.7533L15.5881 29.6553L15.6016 29.753C15.8802 31.7659 17.4828 33.3367 19.5009 33.5749Z" fill="#F4B539" />
+			</svg>
 
-		<svg
-			class="svg second-svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M15.6562 11.8176C10.5937 11.8176 9.32812 7.43919 9.32812 5.25C9.32812 7.43919 8.0625 11.8176 3 11.8176C8.0625 11.8176 9.32812 16.4392 9.32812 18.75C9.32812 16.4392 10.5937 11.8176 15.6562 11.8176Z"
-				fill="#F4B539"
-				stroke="#F4B539"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-			<circle cx="19.875" cy="6.375" r="1.125" fill="#F4B539" />
-		</svg>
+			<svg class="svg second-star tw-top-0 tw-right-0" width="18" height="42" viewBox="0 0 18 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M16.3274 8.6219L15.0804 8.80381C11.5581 9.31764 8.82709 12.1452 8.43591 15.6833L8.27447 17.1434L8.0731 15.6882C7.58516 12.1622 4.77774 9.41052 1.24266 8.99337L-0.00878906 8.84569L1.23815 8.66378C4.76048 8.14995 7.49147 5.32238 7.88264 1.78433L8.04408 0.324219L8.24545 1.77936C8.73339 5.30536 11.5408 8.05707 15.0759 8.47423L16.3274 8.6219Z" fill="#F4B539" />
+				<path d="M17.2021 37.0827C15.1913 37.376 13.6323 38.9902 13.409 41.0099L13.3982 41.108L13.3846 41.0102C13.1061 38.9974 11.5034 37.4265 9.48535 37.1884C11.4961 36.8951 13.0552 35.2809 13.2785 33.2612L13.2893 33.1631L13.3028 33.2608C13.5814 35.2737 15.184 36.8445 17.2021 37.0827Z" fill="#F4B539" />
+			</svg>
+
+			<svg class="svg third-star tw-top-0 tw-left-0" width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M23.128 15.3867C23.2344 18.1277 25.432 20.3253 28.173 20.4317C25.432 20.5381 23.2344 22.7357 23.128 25.4767C23.0216 22.7357 20.824 20.5381 18.083 20.4317C20.824 20.3253 23.0216 18.1277 23.128 15.3867Z" fill="#F4B539" />
+				<path d="M17.0891 8.29668L15.8421 8.47861C12.3198 8.99245 9.5888 11.82 9.19763 15.3581L9.0362 16.8182L8.83483 15.363C8.34689 11.837 5.53946 9.0853 2.00438 8.66815L0.75293 8.52049L1.99987 8.33859C5.52219 7.82476 8.2532 4.99718 8.64437 1.45914L8.8058 -0.000976562L9.00717 1.45416C9.49511 4.98017 12.3025 7.73187 15.8376 8.14902L17.0891 8.29668Z" fill="#F4B539" />
+			</svg>
+		</template>
+		<template v-else>
+			<svg
+				class="svg first-star tw-top-0 tw-right-0"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M15.6562 9.56756C10.5937 9.56756 9.32812 5.18919 9.32812 3C9.32812 5.18919 8.0625 9.56756 3 9.56756C8.0625 9.56756 9.32812 14.1892 9.32812 16.5C9.32812 14.1892 10.5937 9.56756 15.6562 9.56756Z"
+					fill="#F4B539"
+					stroke="#F4B539"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<path
+					d="M18.75 16.5V21"
+					stroke="#F4B539"
+					stroke-width="1.5"
+					stroke-linecap="round"
+				/>
+				<path
+					d="M21 18.75L16.5 18.75"
+					stroke="#F4B539"
+					stroke-width="1.5"
+					stroke-linecap="round"
+				/>
+				<circle cx="19.875" cy="4.125" r="1.125" fill="#F4B539" />
+			</svg>
+
+			<svg
+				class="svg second-star tw-bottom-0 tw-left-0"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M15.6562 11.8176C10.5937 11.8176 9.32812 7.43919 9.32812 5.25C9.32812 7.43919 8.0625 11.8176 3 11.8176C8.0625 11.8176 9.32812 16.4392 9.32812 18.75C9.32812 16.4392 10.5937 11.8176 15.6562 11.8176Z"
+					fill="#F4B539"
+					stroke="#F4B539"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<circle cx="19.875" cy="6.375" r="1.125" fill="#F4B539" />
+			</svg>
+		</template>
 	</div>
 </template>
 
+<script>
+export default {
+	name: 'AnimatedStars',
+	props: {
+		badgeCompleted: {
+			type: Boolean,
+			default: false,
+		},
+	}
+};
+</script>
+
 <style lang="postcss" scoped>
 
 .svg {
@@ -60,14 +90,16 @@
 	@apply tw-absolute tw-w-3 tw-h-3 tw-opacity-0;
 }
 
-.first-svg {
+.first-star {
 	animation-delay: 0s;
-	@apply tw-top-0 tw-right-0;
 }
 
-.second-svg {
+.second-star {
 	animation-delay: 0.5s;
-	@apply tw-bottom-0 tw-left-0;
+}
+
+.third-star {
+	animation-delay: 1s;
 }
 
 @keyframes fadeTransition {

From 1d0bbcb55548125a71cc7f6ca2cda617c2a469f2 Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 16 Oct 2024 13:21:10 -0700
Subject: [PATCH 2/9] fix: first name box should only show when names required
 MP-938

---
 src/pages/LoginAndRegister/RegisterSocial.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/LoginAndRegister/RegisterSocial.vue b/src/pages/LoginAndRegister/RegisterSocial.vue
index 8ea5053d75..43f6a9a940 100644
--- a/src/pages/LoginAndRegister/RegisterSocial.vue
+++ b/src/pages/LoginAndRegister/RegisterSocial.vue
@@ -43,7 +43,7 @@
 					<kv-base-input
 						name="firstName"
 						type="text"
-						v-show="true"
+						v-show="needsNames"
 						v-model.trim="firstName"
 						:validation="v$.firstName"
 					>

From 9b068bbc5fe924fb21f0c1d9eb32c5914e433d39 Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 16 Oct 2024 13:38:27 -0700
Subject: [PATCH 3/9] fix: classes need to be applied to KvBaseInput wrapper
 MP-938

---
 src/components/Forms/GuestAccountCreation.vue | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/Forms/GuestAccountCreation.vue b/src/components/Forms/GuestAccountCreation.vue
index 8e806d3270..65fdd38941 100644
--- a/src/components/Forms/GuestAccountCreation.vue
+++ b/src/components/Forms/GuestAccountCreation.vue
@@ -3,30 +3,32 @@
 		id="guestUpsellForm"
 		@submit.prevent.stop="submit"
 	>
-		<kv-base-input
-			name="firstName"
-			class="data-hj-suppress tw-mb-2"
-			type="text"
-			v-model.trim="firstName"
-			:validation="v$.firstName"
-		>
-			First name
-			<template #required>
-				Enter first name.
-			</template>
-		</kv-base-input>
-		<kv-base-input
-			name="lastName"
-			class="data-hj-suppress tw-mb-2"
-			type="text"
-			v-model.trim="lastName"
-			:validation="v$.lastName"
-		>
-			Last name
-			<template #required>
-				Enter last name.
-			</template>
-		</kv-base-input>
+		<div class="data-hj-suppress tw-mb-2">
+			<kv-base-input
+				name="firstName"
+				type="text"
+				v-model.trim="firstName"
+				:validation="v$.firstName"
+			>
+				First name
+				<template #required>
+					Enter first name.
+				</template>
+			</kv-base-input>
+		</div>
+		<div class="data-hj-suppress tw-mb-2">
+			<kv-base-input
+				name="lastName"
+				type="text"
+				v-model.trim="lastName"
+				:validation="v$.lastName"
+			>
+				Last name
+				<template #required>
+					Enter last name.
+				</template>
+			</kv-base-input>
+		</div>
 		<p
 			v-if="serverError"
 			class="tw-text-danger tw-text-small tw-font-medium tw-mb-2"

From f664ead5a3e7dcf38d429a38dcf7c30995068b1a Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 16 Oct 2024 13:48:02 -0700
Subject: [PATCH 4/9] fix: validation checks were changed to invalid when they
 should have stayed error MP-938

---
 src/components/Checkout/CheckoutDropInPaymentWrapper.vue | 6 +++---
 src/components/Checkout/KivaCreditGuestPayment.vue       | 4 ++--
 src/components/Checkout/UserUpdatesPreference.vue        | 6 +++---
 src/components/Settings/PhoneAuthentication.vue          | 4 ++--
 src/pages/LoginAndRegister/RegisterSocial.vue            | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Checkout/CheckoutDropInPaymentWrapper.vue b/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
index 69d746d49f..2e824edd41 100644
--- a/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
+++ b/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
@@ -48,10 +48,10 @@
 						'Where should we email your receipt?'
 					)"
 				/>
-				<p v-if="promoGuestCheckoutEnabled && v$.email?.$invalid">
+				<p v-if="promoGuestCheckoutEnabled && v$.email?.$error">
 					Valid campaign email required
 				</p>
-				<p v-else-if="v$.email?.$invalid" class="input-error tw-text-danger tw-text-base tw-mb-2">
+				<p v-else-if="v$.email?.$error" class="input-error tw-text-danger tw-text-base tw-mb-2">
 					Valid email required.
 				</p>
 				<user-updates-preference
@@ -87,7 +87,7 @@
 							target="_blank"
 							:title="`Open Privacy ${enableCommsExperiment ? 'Notice' : 'Policy' } in a new window`"
 						>Privacy {{ enableCommsExperiment ? 'Notice' : 'Policy' }}</a>.
-						<p v-if="v$.termsAgreement?.$invalid" class="input-error tw-text-danger tw-text-base">
+						<p v-if="v$.termsAgreement?.$error" class="input-error tw-text-danger tw-text-base">
 							You must agree to the Kiva Terms of service & Privacy
 							{{ enableCommsExperiment ? 'Notice' : 'Policy' }}.
 						</p>
diff --git a/src/components/Checkout/KivaCreditGuestPayment.vue b/src/components/Checkout/KivaCreditGuestPayment.vue
index aafe8cf23e..5944abeda7 100644
--- a/src/components/Checkout/KivaCreditGuestPayment.vue
+++ b/src/components/Checkout/KivaCreditGuestPayment.vue
@@ -22,7 +22,7 @@
 					'Where should we email your receipt?'
 				)"
 			/>
-			<p v-if="v$.email?.$invalid" class="input-error tw-text-danger tw-text-base tw-mb-2">
+			<p v-if="v$.email?.$error" class="input-error tw-text-danger tw-text-base tw-mb-2">
 				Valid email required.
 			</p>
 			<kv-checkbox
@@ -50,7 +50,7 @@
 					target="_blank"
 					title="Open Privacy Policy in a new window"
 				>Privacy Policy</a>.
-				<p v-if="v$.termsAgreement?.$invalid" class="input-error tw-text-danger tw-text-base">
+				<p v-if="v$.termsAgreement?.$error" class="input-error tw-text-danger tw-text-base">
 					You must agree to the Kiva Terms of service & Privacy
 					policy.
 				</p>
diff --git a/src/components/Checkout/UserUpdatesPreference.vue b/src/components/Checkout/UserUpdatesPreference.vue
index f765256c25..e7c8fd3592 100644
--- a/src/components/Checkout/UserUpdatesPreference.vue
+++ b/src/components/Checkout/UserUpdatesPreference.vue
@@ -4,7 +4,7 @@
 			@input="event => $emit('update:modelValue', event.target.value)"
 			class="tw-flex tw-flex-col tw-gap-2 tw-mt-1 tw-mb-2 tw-text-small"
 		>
-			<div :class="{'radio-error': v$.selectedComms?.$invalid}">
+			<div :class="{'radio-error': v$.selectedComms?.$error}">
 				<kv-radio
 					value="on"
 					v-model="selectedComms"
@@ -21,7 +21,7 @@
 					Send me updates from people I've funded, my impact, and other ways I can help.
 				</kv-radio>
 			</div>
-			<div :class="{'radio-error': v$.selectedComms?.$invalid}">
+			<div :class="{'radio-error': v$.selectedComms?.$error}">
 				<kv-radio
 					value="off"
 					name="newsConsent"
@@ -40,7 +40,7 @@
 			</div>
 		</fieldset>
 		<p
-			v-if="v$.selectedComms?.$invalid"
+			v-if="v$.selectedComms?.$error"
 			class="input-error tw-text-danger tw-text-base tw-mb-2 tw-text-small"
 		>
 			Choose your communication preferences.
diff --git a/src/components/Settings/PhoneAuthentication.vue b/src/components/Settings/PhoneAuthentication.vue
index 18103c12f6..de76fdc553 100644
--- a/src/components/Settings/PhoneAuthentication.vue
+++ b/src/components/Settings/PhoneAuthentication.vue
@@ -24,14 +24,14 @@
 						<kv-phone-input
 							class="phone-authentication__phone-input tw-mb-1 data-hj-suppress"
 							:disabled="enrollmentPending"
-							:valid="!v$.phoneNumber?.$invalid"
+							:valid="!v$.phoneNumber?.$error"
 							id="phone_input"
 							ref="phoneInput"
 							v-model="phoneNumber"
 							@blur="v$.phoneNumber.$touch"
 							@validity-changed="onValidityChanged"
 						/>
-						<ul class="validation-errors" v-if="v$.phoneNumber?.$invalid">
+						<ul class="validation-errors" v-if="v$.phoneNumber?.$error">
 							<li v-if="v$.phoneNumber?.required?.$invalid">
 								Field is required
 							</li>
diff --git a/src/pages/LoginAndRegister/RegisterSocial.vue b/src/pages/LoginAndRegister/RegisterSocial.vue
index 43f6a9a940..504470c438 100644
--- a/src/pages/LoginAndRegister/RegisterSocial.vue
+++ b/src/pages/LoginAndRegister/RegisterSocial.vue
@@ -129,7 +129,7 @@
 					/>
 					<p
 						class="tw-text-center tw-text-danger tw-text-small tw-font-medium tw-mt-1"
-						v-if="needsCaptcha && v$.captcha?.$invalid"
+						v-if="needsCaptcha && v$.captcha?.$error"
 					>
 						Please complete the captcha.
 					</p>

From c8ed30619d540b74be0b3fa80c9fbe4089cd6eef Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 16 Oct 2024 14:03:58 -0700
Subject: [PATCH 5/9] feat: use kv-components KvLoadingSpinner for
 KvLoadingOverlay

---
 src/components/Kv/KvLoadingOverlay.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Kv/KvLoadingOverlay.vue b/src/components/Kv/KvLoadingOverlay.vue
index fb0de9fc1b..ddb2874773 100644
--- a/src/components/Kv/KvLoadingOverlay.vue
+++ b/src/components/Kv/KvLoadingOverlay.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="loading-overlay">
 		<div class="spinner-wrapper" :style="{ top }">
-			<kv-loading-spinner />
+			<kv-loading-spinner size="large" />
 		</div>
 	</div>
 </template>
 
 <script>
 import _throttle from 'lodash/throttle';
-import KvLoadingSpinner from '#src/components/Kv/KvLoadingSpinner';
+import KvLoadingSpinner from '@kiva/kv-components/vue/KvLoadingSpinner';
 import getCacheKey from '#src/util/getCacheKey';
 
 export default {

From c39d113015b17615242e450a6db33a748844361a Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 16 Oct 2024 14:04:39 -0700
Subject: [PATCH 6/9] feat: prevent double-clicking complete registration CTA
 MP-938

---
 src/pages/LoginAndRegister/RegisterSocial.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/LoginAndRegister/RegisterSocial.vue b/src/pages/LoginAndRegister/RegisterSocial.vue
index 504470c438..e5baabc8b4 100644
--- a/src/pages/LoginAndRegister/RegisterSocial.vue
+++ b/src/pages/LoginAndRegister/RegisterSocial.vue
@@ -153,6 +153,7 @@
 					Cancel registration
 				</a>
 			</div>
+			<kv-loading-overlay v-if="loading" class="tw-rounded" />
 		</div>
 	</system-page>
 </template>
@@ -163,6 +164,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
 import logReadQueryError from '#src/util/logReadQueryError';
 import KvBaseInput from '#src/components/Kv/KvBaseInput';
+import KvLoadingOverlay from '#src/components/Kv/KvLoadingOverlay';
 import ReCaptchaEnterprise from '#src/components/Forms/ReCaptchaEnterprise';
 import SystemPage from '#src/components/SystemFrame/SystemPage';
 import KvButton from '@kiva/kv-components/vue/KvButton';
@@ -184,6 +186,7 @@ export default {
 	components: {
 		KvBaseInput,
 		KvButton,
+		KvLoadingOverlay,
 		ReCaptchaEnterprise,
 		SystemPage,
 		UserUpdatesPreference,
@@ -219,6 +222,7 @@ export default {
 			needsComms: false,
 			selectedComms: '',
 			enableRadioBtnExperiment: false,
+			loading: false,
 		};
 	},
 	setup() { return { v$: useVuelidate() }; },
@@ -368,6 +372,7 @@ export default {
 					this.newsConsent = this.selectedComms === '1';
 				}
 
+				this.loading = true;
 				this.$kvTrackEvent('Register', 'register-social-success');
 			} else {
 				event.preventDefault();

From 3226745989f0634f7b5f1cf02ee48b1a130c34c0 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Wed, 16 Oct 2024 17:15:45 -0500
Subject: [PATCH 7/9] fix: solve comments

---
 .../mock-data/contentful-badge-data-mock.js   | 129 ++++++++++
 .../stories/MyKivaBadgeCompleted.stories.js   | 243 ++++--------------
 src/components/MyKiva/BadgeCompleted.vue      |  38 ++-
 src/components/MyKiva/MyKivaBadgeStars.vue    |  53 ++++
 src/components/Thanks/AnimatedStars.vue       | 136 ++++------
 5 files changed, 316 insertions(+), 283 deletions(-)
 create mode 100644 .storybook/mock-data/contentful-badge-data-mock.js
 create mode 100644 src/components/MyKiva/MyKivaBadgeStars.vue

diff --git a/.storybook/mock-data/contentful-badge-data-mock.js b/.storybook/mock-data/contentful-badge-data-mock.js
new file mode 100644
index 0000000000..48f3d53181
--- /dev/null
+++ b/.storybook/mock-data/contentful-badge-data-mock.js
@@ -0,0 +1,129 @@
+export default {
+	"metadata": {
+			"tags": [],
+			"concepts": []
+		},
+		"sys": {
+			"space": {
+				"sys": {
+					"type": "Link",
+					"linkType": "Space",
+					"id": "j0p9a6ql0rn7"
+				}
+			},
+			"id": "5qVq3IF07C8um3AiQVjLK5",
+			"type": "Entry",
+			"createdAt": "2024-10-08T20:25:25.114Z",
+			"updatedAt": "2024-10-15T23:11:19.111Z",
+			"environment": {
+				"sys": {
+					"id": "development",
+					"type": "Link",
+					"linkType": "Environment"
+				}
+			},
+			"revision": 4,
+			"contentType": {
+				"sys": {
+					"type": "Link",
+					"linkType": "ContentType",
+					"id": "challenge"
+				}
+			},
+			"locale": "en-US"
+		},
+		"fields": {
+			"key": "us-economic-equality-level-2",
+			"challengeName": "U.S. Economic equality (level 2)",
+			"badgeImage": {
+				"metadata": {
+					"tags": []
+				},
+				"sys": {
+					"space": {
+						"sys": {
+							"type": "Link",
+							"linkType": "Space",
+							"id": "j0p9a6ql0rn7"
+						}
+					},
+					"id": "62zEUpZbO7qWZPoV1z2pZU",
+					"type": "Asset",
+					"createdAt": "2024-10-08T20:25:01.320Z",
+					"updatedAt": "2024-10-08T20:25:01.320Z",
+					"environment": {
+						"sys": {
+							"id": "development",
+							"type": "Link",
+							"linkType": "Environment"
+						}
+					},
+					"revision": 1,
+					"locale": "en-US"
+				},
+				"fields": {
+					"title": "US Economic Equality Level 2",
+					"description": "",
+					"file": {
+						"url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
+						"details": {
+							"size": 18162550,
+							"image": {
+								"width": 2382,
+								"height": 2382
+							}
+						},
+						"fileName": "US Economic Equality Level 2.svg",
+						"contentType": "image/svg+xml"
+					}
+				}
+			},
+			"thankYouImage": {
+				"metadata": {
+					"tags": []
+				},
+				"sys": {
+					"space": {
+						"sys": {
+							"type": "Link",
+							"linkType": "Space",
+							"id": "j0p9a6ql0rn7"
+						}
+					},
+					"id": "62zEUpZbO7qWZPoV1z2pZU",
+					"type": "Asset",
+					"createdAt": "2024-10-08T20:25:01.320Z",
+					"updatedAt": "2024-10-08T20:25:01.320Z",
+					"environment": {
+						"sys": {
+							"id": "development",
+							"type": "Link",
+							"linkType": "Environment"
+						}
+					},
+					"revision": 1,
+					"locale": "en-US"
+				},
+				"fields": {
+					"title": "US Economic Equality Level 2",
+					"description": "",
+					"file": {
+						"url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
+						"details": {
+							"size": 18162550,
+							"image": {
+								"width": 2382,
+								"height": 2382
+							}
+						},
+						"fileName": "US Economic Equality Level 2.svg",
+						"contentType": "image/svg+xml"
+					}
+				}
+			},
+			"shareFact": "3 in 5 U.S. business owners brought in more income after their Kiva loan.*",
+			"shareFactUrl": "/",
+			"dateTagline": "N/A",
+			"shareFactFootnote": "Kiva borrowers surveyed by 60 Decibels."
+		}
+}
diff --git a/.storybook/stories/MyKivaBadgeCompleted.stories.js b/.storybook/stories/MyKivaBadgeCompleted.stories.js
index 920da61a01..10a0535d9a 100644
--- a/.storybook/stories/MyKivaBadgeCompleted.stories.js
+++ b/.storybook/stories/MyKivaBadgeCompleted.stories.js
@@ -1,4 +1,5 @@
 import BadgeCompleted from '#src/components/MyKiva/BadgeCompleted.vue';
+import contentfulBadge from '../mock-data/contentful-badge-data-mock';
 
 export default {
 	title: 'MyKiva/BadgeCompleted',
@@ -18,191 +19,61 @@ const story = (args = {}) => {
 	return template;
 };
 
-const contentfulBadgeData = {
-  "metadata": {
-      "tags": [],
-      "concepts": []
-    },
-    "sys": {
-      "space": {
-        "sys": {
-          "type": "Link",
-          "linkType": "Space",
-          "id": "j0p9a6ql0rn7"
-        }
-      },
-      "id": "5qVq3IF07C8um3AiQVjLK5",
-      "type": "Entry",
-      "createdAt": "2024-10-08T20:25:25.114Z",
-      "updatedAt": "2024-10-15T23:11:19.111Z",
-      "environment": {
-        "sys": {
-          "id": "development",
-          "type": "Link",
-          "linkType": "Environment"
-        }
-      },
-      "revision": 4,
-      "contentType": {
-        "sys": {
-          "type": "Link",
-          "linkType": "ContentType",
-          "id": "challenge"
-        }
-      },
-      "locale": "en-US"
-    },
-    "fields": {
-      "key": "us-economic-equality-level-2",
-      "challengeName": "U.S. Economic equality (level 2)",
-      "badgeImage": {
-        "metadata": {
-          "tags": []
-        },
-        "sys": {
-          "space": {
-            "sys": {
-              "type": "Link",
-              "linkType": "Space",
-              "id": "j0p9a6ql0rn7"
-            }
-          },
-          "id": "62zEUpZbO7qWZPoV1z2pZU",
-          "type": "Asset",
-          "createdAt": "2024-10-08T20:25:01.320Z",
-          "updatedAt": "2024-10-08T20:25:01.320Z",
-          "environment": {
-            "sys": {
-              "id": "development",
-              "type": "Link",
-              "linkType": "Environment"
-            }
-          },
-          "revision": 1,
-          "locale": "en-US"
-        },
-        "fields": {
-          "title": "US Economic Equality Level 2",
-          "description": "",
-          "file": {
-            "url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
-            "details": {
-              "size": 18162550,
-              "image": {
-                "width": 2382,
-                "height": 2382
-              }
-            },
-            "fileName": "US Economic Equality Level 2.svg",
-            "contentType": "image/svg+xml"
-          }
-        }
-      },
-      "thankYouImage": {
-        "metadata": {
-          "tags": []
-        },
-        "sys": {
-          "space": {
-            "sys": {
-              "type": "Link",
-              "linkType": "Space",
-              "id": "j0p9a6ql0rn7"
-            }
-          },
-          "id": "62zEUpZbO7qWZPoV1z2pZU",
-          "type": "Asset",
-          "createdAt": "2024-10-08T20:25:01.320Z",
-          "updatedAt": "2024-10-08T20:25:01.320Z",
-          "environment": {
-            "sys": {
-              "id": "development",
-              "type": "Link",
-              "linkType": "Environment"
-            }
-          },
-          "revision": 1,
-          "locale": "en-US"
-        },
-        "fields": {
-          "title": "US Economic Equality Level 2",
-          "description": "",
-          "file": {
-            "url": "//images.ctfassets.net/j0p9a6ql0rn7/62zEUpZbO7qWZPoV1z2pZU/f094aa821bdf8a5f8634b28562135594/US_Economic_Equality_Level_2.svg",
-            "details": {
-              "size": 18162550,
-              "image": {
-                "width": 2382,
-                "height": 2382
-              }
-            },
-            "fileName": "US Economic Equality Level 2.svg",
-            "contentType": "image/svg+xml"
-          }
-        }
-      },
-      "shareFact": "3 in 5 U.S. business owners brought in more income after their Kiva loan.*",
-      "shareFactUrl": "/",
-      "dateTagline": "N/A",
-      "shareFactFootnote": "Kiva borrowers surveyed by 60 Decibels."
-    }
-}
-
 export const Default = story({
-  badge: contentfulBadgeData,
-  lendingAchievement: {
-      "id": "us-economic-equality",
-      "tiers": [
-        {
-          "completedDate": "2021-01-01T00:00:00Z",
-          "learnMoreURL": "",
-          "target": 2,
-          "tierStatement": ""
-        },
-        {
-          "completedDate": "2021-01-01T00:00:00Z",
-          "learnMoreURL": "",
-          "target": 3,
-          "tierStatement": ""
-        },
-        {
-          "completedDate": "2021-01-01T00:00:00Z",
-          "learnMoreURL": "",
-          "target": 5,
-          "tierStatement": ""
-        },
-        {
-          "completedDate": "2021-01-01T00:00:00Z",
-          "learnMoreURL": "",
-          "target": 10,
-          "tierStatement": ""
-        },
-        {
-          "completedDate": "2021-04-20T00:00:00Z",
-          "learnMoreURL": "https://www.kiva.org/impact/systemically-marginalized-communities",
-          "target": 20,
-          "tierStatement": "70% of U.S. business owners surveyed were more confident in their business as a result of their loan.*"
-        },
-        {
-          "completedDate": null,
-          "learnMoreURL": "",
-          "target": 50,
-          "tierStatement": ""
-        },
-        {
-          "completedDate": null,
-          "learnMoreURL": "",
-          "target": 100,
-          "tierStatement": ""
-        },
-      ],
-      "description": "description",
-      "totalProgressToAchievement": 0,
-      "status": "PARTIALLY_COMPLETE"
-  },
-  lender: {
-    publicName: 'Christian',
-    public: true,
-    publicId: 'christian78848470'
-  }
+	badge: contentfulBadge,
+	lendingAchievement: {
+			"id": "us-economic-equality",
+			"tiers": [
+				{
+					"completedDate": "2021-01-01T00:00:00Z",
+					"learnMoreURL": "",
+					"target": 2,
+					"tierStatement": ""
+				},
+				{
+					"completedDate": "2021-01-01T00:00:00Z",
+					"learnMoreURL": "",
+					"target": 3,
+					"tierStatement": ""
+				},
+				{
+					"completedDate": "2021-01-01T00:00:00Z",
+					"learnMoreURL": "",
+					"target": 5,
+					"tierStatement": ""
+				},
+				{
+					"completedDate": "2021-01-01T00:00:00Z",
+					"learnMoreURL": "",
+					"target": 10,
+					"tierStatement": ""
+				},
+				{
+					"completedDate": "2021-04-20T00:00:00Z",
+					"learnMoreURL": "https://www.kiva.org/impact/systemically-marginalized-communities",
+					"target": 20,
+					"tierStatement": "70% of U.S. business owners surveyed were more confident in their business as a result of their loan.*"
+				},
+				{
+					"completedDate": null,
+					"learnMoreURL": "",
+					"target": 50,
+					"tierStatement": ""
+				},
+				{
+					"completedDate": null,
+					"learnMoreURL": "",
+					"target": 100,
+					"tierStatement": ""
+				},
+			],
+			"description": "description",
+			"totalProgressToAchievement": 0,
+			"status": "PARTIALLY_COMPLETE"
+	},
+	lender: {
+		publicName: 'Christian',
+		public: true,
+		publicId: 'christian78848470'
+	}
 });
diff --git a/src/components/MyKiva/BadgeCompleted.vue b/src/components/MyKiva/BadgeCompleted.vue
index 4d6dea8fac..80d745acab 100644
--- a/src/components/MyKiva/BadgeCompleted.vue
+++ b/src/components/MyKiva/BadgeCompleted.vue
@@ -8,7 +8,7 @@
 				<div
 					class="tw-absolute tw-h-full tw-z-docked"
 				>
-					<AnimatedStars badge-completed :style="{ minWidth: '16rem'}" class="tw-h-full" />
+					<MyKivaBadgeStars badge-completed :style="{ minWidth: '16rem'}" class="tw-h-full" />
 				</div>
 
 				<img
@@ -35,7 +35,7 @@
 			</h4>
 		</div>
 		<KvSocialShareButton
-			style="max-width: 328px; margin: 0 auto"
+			class="share-button"
 			v-kv-track-event="[
 				'portfolio',
 				'click',
@@ -64,7 +64,7 @@
 <script setup>
 
 import KvSocialShareButton from '#src/components/Kv/KvSocialShareButton';
-import AnimatedStars from '#src/components/Thanks/AnimatedStars';
+import MyKivaBadgeStars from '#src/components/MyKiva/MyKivaBadgeStars';
 import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
 
 import confetti from 'canvas-confetti';
@@ -112,8 +112,13 @@ const badgeImage = computed(() => {
 const badgeCategory = computed(() => badge.value?.challengeName ?? '');
 const tiers = computed(() => lendingAchievement.value?.tiers ?? []);
 
+const sortedTiers = computed(() => {
+	const defaultTiers = [...tiers.value];
+	return defaultTiers.sort((a, b) => b.target - a.target);
+});
+
 const currentTier = computed(() => {
-	return tiers.value?.findLast(tier => tier.completedDate) ?? null;
+	return sortedTiers.value?.findLast(tier => tier.completedDate) ?? null;
 });
 const badgeLevel = computed(() => {
 	return currentTier.value?.target ?? 0;
@@ -147,21 +152,28 @@ onMounted(() => {
 <style lang="postcss" scoped>
 
 .container {
-  @apply tw-mx-auto tw-bg-white tw-p-4.5 tw-rounded;
-  max-width: 888px;
+	@apply tw-mx-auto tw-bg-white tw-p-4.5 tw-rounded;
 }
+
 .badge-container {
-  @apply tw-flex tw-flex-col tw-justify-center tw-items-center;
+	@apply tw-flex tw-flex-col tw-justify-center tw-items-center;
 }
 
 .badge {
 	@apply tw-mx-auto;
-  width: 160px;
-  height: 160px;
 
-  @screen md {
-    width: 211px;
-    height: 211px;
-  }
+	width: 160px;
+	height: 160px;
+
+	@screen md {
+		width: 211px;
+		height: 211px;
+	}
+}
+
+.share-button {
+	@apply tw-mx-auto;
+
+	max-width: 328px;
 }
 </style>
diff --git a/src/components/MyKiva/MyKivaBadgeStars.vue b/src/components/MyKiva/MyKivaBadgeStars.vue
new file mode 100644
index 0000000000..48636a3c11
--- /dev/null
+++ b/src/components/MyKiva/MyKivaBadgeStars.vue
@@ -0,0 +1,53 @@
+<!-- eslint-disable max-len -->
+<template>
+	<div>
+		<svg class="svg first-star tw-bottom-0 tw-left-4" width="20" height="38" viewBox="0 0 20 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M16.3283 8.29768L15.0814 8.47958C11.5591 8.99342 8.82807 11.821 8.4369 15.359L8.27546 16.8191L8.0741 15.364C7.58616 11.838 4.77873 9.08629 1.24365 8.66914L-0.0078125 8.52147L1.23913 8.33956C4.76145 7.82573 7.49246 4.99815 7.88363 1.46011L8.04507 0L8.24644 1.45514C8.73438 4.98114 11.5418 7.73285 15.0769 8.15L16.3283 8.29768Z" fill="#F4B539" />
+			<path d="M19.5009 33.5749C17.4901 33.8682 15.9311 35.4823 15.7078 37.5021L15.697 37.6001L15.6834 37.5024C15.4049 35.4896 13.8022 33.9187 11.7842 33.6806C13.7949 33.3872 15.354 31.7731 15.5773 29.7533L15.5881 29.6553L15.6016 29.753C15.8802 31.7659 17.4828 33.3367 19.5009 33.5749Z" fill="#F4B539" />
+		</svg>
+
+		<svg class="svg second-star tw-top-0 tw-right-0" width="18" height="42" viewBox="0 0 18 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M16.3274 8.6219L15.0804 8.80381C11.5581 9.31764 8.82709 12.1452 8.43591 15.6833L8.27447 17.1434L8.0731 15.6882C7.58516 12.1622 4.77774 9.41052 1.24266 8.99337L-0.00878906 8.84569L1.23815 8.66378C4.76048 8.14995 7.49147 5.32238 7.88264 1.78433L8.04408 0.324219L8.24545 1.77936C8.73339 5.30536 11.5408 8.05707 15.0759 8.47423L16.3274 8.6219Z" fill="#F4B539" />
+			<path d="M17.2021 37.0827C15.1913 37.376 13.6323 38.9902 13.409 41.0099L13.3982 41.108L13.3846 41.0102C13.1061 38.9974 11.5034 37.4265 9.48535 37.1884C11.4961 36.8951 13.0552 35.2809 13.2785 33.2612L13.2893 33.1631L13.3028 33.2608C13.5814 35.2737 15.184 36.8445 17.2021 37.0827Z" fill="#F4B539" />
+		</svg>
+
+		<svg class="svg third-star tw-top-0 tw-left-0" width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M23.128 15.3867C23.2344 18.1277 25.432 20.3253 28.173 20.4317C25.432 20.5381 23.2344 22.7357 23.128 25.4767C23.0216 22.7357 20.824 20.5381 18.083 20.4317C20.824 20.3253 23.0216 18.1277 23.128 15.3867Z" fill="#F4B539" />
+			<path d="M17.0891 8.29668L15.8421 8.47861C12.3198 8.99245 9.5888 11.82 9.19763 15.3581L9.0362 16.8182L8.83483 15.363C8.34689 11.837 5.53946 9.0853 2.00438 8.66815L0.75293 8.52049L1.99987 8.33859C5.52219 7.82476 8.2532 4.99718 8.64437 1.45914L8.8058 -0.000976562L9.00717 1.45416C9.49511 4.98017 12.3025 7.73187 15.8376 8.14902L17.0891 8.29668Z" fill="#F4B539" />
+		</svg>
+	</div>
+</template>
+
+<style lang="postcss" scoped>
+
+.svg {
+	animation: fadeTransition 2s infinite alternate;
+	@apply tw-absolute tw-w-3 tw-h-3 tw-opacity-0;
+}
+
+.first-star {
+	animation-delay: 0s;
+}
+
+.second-star {
+	animation-delay: 0.5s;
+}
+
+.third-star {
+	animation-delay: 1s;
+}
+
+@keyframes fadeTransition {
+	0% {
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+</style>
diff --git a/src/components/Thanks/AnimatedStars.vue b/src/components/Thanks/AnimatedStars.vue
index f301c4ed77..269d289587 100644
--- a/src/components/Thanks/AnimatedStars.vue
+++ b/src/components/Thanks/AnimatedStars.vue
@@ -1,88 +1,58 @@
 <!-- eslint-disable max-len -->
 <template>
 	<div>
-		<template v-if="badgeCompleted">
-			<svg class="svg first-star tw-bottom-0 tw-left-4" width="20" height="38" viewBox="0 0 20 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M16.3283 8.29768L15.0814 8.47958C11.5591 8.99342 8.82807 11.821 8.4369 15.359L8.27546 16.8191L8.0741 15.364C7.58616 11.838 4.77873 9.08629 1.24365 8.66914L-0.0078125 8.52147L1.23913 8.33956C4.76145 7.82573 7.49246 4.99815 7.88363 1.46011L8.04507 0L8.24644 1.45514C8.73438 4.98114 11.5418 7.73285 15.0769 8.15L16.3283 8.29768Z" fill="#F4B539" />
-				<path d="M19.5009 33.5749C17.4901 33.8682 15.9311 35.4823 15.7078 37.5021L15.697 37.6001L15.6834 37.5024C15.4049 35.4896 13.8022 33.9187 11.7842 33.6806C13.7949 33.3872 15.354 31.7731 15.5773 29.7533L15.5881 29.6553L15.6016 29.753C15.8802 31.7659 17.4828 33.3367 19.5009 33.5749Z" fill="#F4B539" />
-			</svg>
+		<svg
+			class="svg first-svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M15.6562 9.56756C10.5937 9.56756 9.32812 5.18919 9.32812 3C9.32812 5.18919 8.0625 9.56756 3 9.56756C8.0625 9.56756 9.32812 14.1892 9.32812 16.5C9.32812 14.1892 10.5937 9.56756 15.6562 9.56756Z"
+				fill="#F4B539"
+				stroke="#F4B539"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M18.75 16.5V21"
+				stroke="#F4B539"
+				stroke-width="1.5"
+				stroke-linecap="round"
+			/>
+			<path
+				d="M21 18.75L16.5 18.75"
+				stroke="#F4B539"
+				stroke-width="1.5"
+				stroke-linecap="round"
+			/>
+			<circle cx="19.875" cy="4.125" r="1.125" fill="#F4B539" />
+		</svg>
 
-			<svg class="svg second-star tw-top-0 tw-right-0" width="18" height="42" viewBox="0 0 18 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M16.3274 8.6219L15.0804 8.80381C11.5581 9.31764 8.82709 12.1452 8.43591 15.6833L8.27447 17.1434L8.0731 15.6882C7.58516 12.1622 4.77774 9.41052 1.24266 8.99337L-0.00878906 8.84569L1.23815 8.66378C4.76048 8.14995 7.49147 5.32238 7.88264 1.78433L8.04408 0.324219L8.24545 1.77936C8.73339 5.30536 11.5408 8.05707 15.0759 8.47423L16.3274 8.6219Z" fill="#F4B539" />
-				<path d="M17.2021 37.0827C15.1913 37.376 13.6323 38.9902 13.409 41.0099L13.3982 41.108L13.3846 41.0102C13.1061 38.9974 11.5034 37.4265 9.48535 37.1884C11.4961 36.8951 13.0552 35.2809 13.2785 33.2612L13.2893 33.1631L13.3028 33.2608C13.5814 35.2737 15.184 36.8445 17.2021 37.0827Z" fill="#F4B539" />
-			</svg>
-
-			<svg class="svg third-star tw-top-0 tw-left-0" width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M23.128 15.3867C23.2344 18.1277 25.432 20.3253 28.173 20.4317C25.432 20.5381 23.2344 22.7357 23.128 25.4767C23.0216 22.7357 20.824 20.5381 18.083 20.4317C20.824 20.3253 23.0216 18.1277 23.128 15.3867Z" fill="#F4B539" />
-				<path d="M17.0891 8.29668L15.8421 8.47861C12.3198 8.99245 9.5888 11.82 9.19763 15.3581L9.0362 16.8182L8.83483 15.363C8.34689 11.837 5.53946 9.0853 2.00438 8.66815L0.75293 8.52049L1.99987 8.33859C5.52219 7.82476 8.2532 4.99718 8.64437 1.45914L8.8058 -0.000976562L9.00717 1.45416C9.49511 4.98017 12.3025 7.73187 15.8376 8.14902L17.0891 8.29668Z" fill="#F4B539" />
-			</svg>
-		</template>
-		<template v-else>
-			<svg
-				class="svg first-star tw-top-0 tw-right-0"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M15.6562 9.56756C10.5937 9.56756 9.32812 5.18919 9.32812 3C9.32812 5.18919 8.0625 9.56756 3 9.56756C8.0625 9.56756 9.32812 14.1892 9.32812 16.5C9.32812 14.1892 10.5937 9.56756 15.6562 9.56756Z"
-					fill="#F4B539"
-					stroke="#F4B539"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				/>
-				<path
-					d="M18.75 16.5V21"
-					stroke="#F4B539"
-					stroke-width="1.5"
-					stroke-linecap="round"
-				/>
-				<path
-					d="M21 18.75L16.5 18.75"
-					stroke="#F4B539"
-					stroke-width="1.5"
-					stroke-linecap="round"
-				/>
-				<circle cx="19.875" cy="4.125" r="1.125" fill="#F4B539" />
-			</svg>
-
-			<svg
-				class="svg second-star tw-bottom-0 tw-left-0"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M15.6562 11.8176C10.5937 11.8176 9.32812 7.43919 9.32812 5.25C9.32812 7.43919 8.0625 11.8176 3 11.8176C8.0625 11.8176 9.32812 16.4392 9.32812 18.75C9.32812 16.4392 10.5937 11.8176 15.6562 11.8176Z"
-					fill="#F4B539"
-					stroke="#F4B539"
-					stroke-width="1.5"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				/>
-				<circle cx="19.875" cy="6.375" r="1.125" fill="#F4B539" />
-			</svg>
-		</template>
+		<svg
+			class="svg second-svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M15.6562 11.8176C10.5937 11.8176 9.32812 7.43919 9.32812 5.25C9.32812 7.43919 8.0625 11.8176 3 11.8176C8.0625 11.8176 9.32812 16.4392 9.32812 18.75C9.32812 16.4392 10.5937 11.8176 15.6562 11.8176Z"
+				fill="#F4B539"
+				stroke="#F4B539"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<circle cx="19.875" cy="6.375" r="1.125" fill="#F4B539" />
+		</svg>
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'AnimatedStars',
-	props: {
-		badgeCompleted: {
-			type: Boolean,
-			default: false,
-		},
-	}
-};
-</script>
-
 <style lang="postcss" scoped>
 
 .svg {
@@ -90,16 +60,14 @@ export default {
 	@apply tw-absolute tw-w-3 tw-h-3 tw-opacity-0;
 }
 
-.first-star {
+.first-svg {
 	animation-delay: 0s;
+	@apply tw-top-0 tw-right-0;
 }
 
-.second-star {
+.second-svg {
 	animation-delay: 0.5s;
-}
-
-.third-star {
-	animation-delay: 1s;
+	@apply tw-bottom-0 tw-left-0;
 }
 
 @keyframes fadeTransition {

From 96741dcf53e4e9d6ef7da359e999879cec28f8f7 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Wed, 16 Oct 2024 17:28:13 -0500
Subject: [PATCH 8/9] refactor: separate lending achievement mock to different
 file

---
 .../stories/MyKivaBadgeCompleted.stories.js   | 52 +------------------
 1 file changed, 2 insertions(+), 50 deletions(-)

diff --git a/.storybook/stories/MyKivaBadgeCompleted.stories.js b/.storybook/stories/MyKivaBadgeCompleted.stories.js
index 10a0535d9a..023f96a369 100644
--- a/.storybook/stories/MyKivaBadgeCompleted.stories.js
+++ b/.storybook/stories/MyKivaBadgeCompleted.stories.js
@@ -1,5 +1,6 @@
 import BadgeCompleted from '#src/components/MyKiva/BadgeCompleted.vue';
 import contentfulBadge from '../mock-data/contentful-badge-data-mock';
+import tieredLendingAchievement from '../mock-data/tiered-lending-achievement-data-mock';
 
 export default {
 	title: 'MyKiva/BadgeCompleted',
@@ -21,56 +22,7 @@ const story = (args = {}) => {
 
 export const Default = story({
 	badge: contentfulBadge,
-	lendingAchievement: {
-			"id": "us-economic-equality",
-			"tiers": [
-				{
-					"completedDate": "2021-01-01T00:00:00Z",
-					"learnMoreURL": "",
-					"target": 2,
-					"tierStatement": ""
-				},
-				{
-					"completedDate": "2021-01-01T00:00:00Z",
-					"learnMoreURL": "",
-					"target": 3,
-					"tierStatement": ""
-				},
-				{
-					"completedDate": "2021-01-01T00:00:00Z",
-					"learnMoreURL": "",
-					"target": 5,
-					"tierStatement": ""
-				},
-				{
-					"completedDate": "2021-01-01T00:00:00Z",
-					"learnMoreURL": "",
-					"target": 10,
-					"tierStatement": ""
-				},
-				{
-					"completedDate": "2021-04-20T00:00:00Z",
-					"learnMoreURL": "https://www.kiva.org/impact/systemically-marginalized-communities",
-					"target": 20,
-					"tierStatement": "70% of U.S. business owners surveyed were more confident in their business as a result of their loan.*"
-				},
-				{
-					"completedDate": null,
-					"learnMoreURL": "",
-					"target": 50,
-					"tierStatement": ""
-				},
-				{
-					"completedDate": null,
-					"learnMoreURL": "",
-					"target": 100,
-					"tierStatement": ""
-				},
-			],
-			"description": "description",
-			"totalProgressToAchievement": 0,
-			"status": "PARTIALLY_COMPLETE"
-	},
+	lendingAchievement: tieredLendingAchievement[0],
 	lender: {
 		publicName: 'Christian',
 		public: true,

From accbc87cd076ad64350ee089d2d0203998eb4431 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Wed, 16 Oct 2024 17:35:59 -0500
Subject: [PATCH 9/9] fix: missing file

---
 .../tiered-lending-achievement-data-mock.js   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 .storybook/mock-data/tiered-lending-achievement-data-mock.js

diff --git a/.storybook/mock-data/tiered-lending-achievement-data-mock.js b/.storybook/mock-data/tiered-lending-achievement-data-mock.js
new file mode 100644
index 0000000000..6e012b9e6f
--- /dev/null
+++ b/.storybook/mock-data/tiered-lending-achievement-data-mock.js
@@ -0,0 +1,50 @@
+export default [{
+  "id": "us-economic-equality",
+  "tiers": [
+    {
+      "completedDate": "2021-01-01T00:00:00Z",
+      "learnMoreURL": "",
+      "target": 2,
+      "tierStatement": ""
+    },
+    {
+      "completedDate": "2021-01-01T00:00:00Z",
+      "learnMoreURL": "",
+      "target": 3,
+      "tierStatement": ""
+    },
+    {
+      "completedDate": "2021-01-01T00:00:00Z",
+      "learnMoreURL": "",
+      "target": 5,
+      "tierStatement": ""
+    },
+    {
+      "completedDate": "2021-01-01T00:00:00Z",
+      "learnMoreURL": "",
+      "target": 10,
+      "tierStatement": ""
+    },
+    {
+      "completedDate": "2021-04-20T00:00:00Z",
+      "learnMoreURL": "https://www.kiva.org/impact/systemically-marginalized-communities",
+      "target": 20,
+      "tierStatement": "70% of U.S. business owners surveyed were more confident in their business as a result of their loan.*"
+    },
+    {
+      "completedDate": null,
+      "learnMoreURL": "",
+      "target": 50,
+      "tierStatement": ""
+    },
+    {
+      "completedDate": null,
+      "learnMoreURL": "",
+      "target": 100,
+      "tierStatement": ""
+    },
+  ],
+  "description": "description",
+  "totalProgressToAchievement": 0,
+  "status": "PARTIALLY_COMPLETE"
+}]