feat: optin and optout modules added to old badge ty page (#5753)

* feat: optin and optout modules added to old badge ty page * fix: optin avatar removed * fix: try changing node version for ui tests action * fix: try node 20 * fix: try removing npm update line --------- Co-authored-by: Casey Dyer <[email protected]>
kiva · Jan 8, 2025 · bb915da · bb915da
1 parent b6230c5
commit bb915da
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/.github/workflows/run-ui-tests.yml b/.github/workflows/run-ui-tests.yml
@@ -20,7 +20,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '16.x'
+        node-version: '20.x'
     - name: Cache dependencies
       uses: actions/cache@v2
       env:
@@ -34,8 +34,6 @@ jobs:
           ${{ runner.os }}-build-${{ env.cache-name }}-
           ${{ runner.os }}-build-
           ${{ runner.os }}-
-    - name: Update NPM to v7
-      run: npm install -g npm@7
     - name: Install dependencies
       run: npm ci --prefer-offline
     - name: Run Lint

diff --git a/src/components/Thanks/Badges/FirstScreen.vue b/src/components/Thanks/Badges/FirstScreen.vue
@@ -2,6 +2,14 @@
 	<div
 		class="tw-relative tw-text-center md:tw-rounded-t hide-for-print"
 	>
+		<!-- Opt In module -->
+		<opt-in-module
+			v-if="!isOptedIn"
+			:loans="loans"
+			:is-guest="isGuest"
+			:number-of-badges="numberOfBadges"
+			class="print:tw-hidden opt-in-module"
+		/>
 		<div
 			class="tw-pt-4 tw-pb-5 bg-gradient"
 		>
@@ -287,6 +295,7 @@ import KvExpandable from '#src/components/Kv/KvExpandable';
 import LoanNextSteps from '#src/components/Thanks/LoanNextSteps';
 import KvButton from '#kv-components/KvButton';
 import KvMaterialIcon from '#kv-components/KvMaterialIcon';
+import OptInModule from '#src/components/Thanks/MyKiva/OptInModule';
 import { metaGlobReader } from '#src/util/importHelpers';
 
 const imageGlob = import.meta.glob('/src/assets/images/thanks-page/*.*', { eager: true, query: '?url' });
@@ -303,6 +312,7 @@ export default {
 		AnimatedStars,
 		KvButton,
 		KvMaterialIcon,
+		OptInModule,
 	},
 	emits: ['show-new-bg', 'show-discover-badges'],
 	props: {
@@ -326,6 +336,14 @@ export default {
 			type: Object,
 			default: () => ({})
 		},
+		isOptedIn: {
+			type: Boolean,
+			default: false,
+		},
+		badgesAchieved: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	data() {
 		return {
@@ -376,6 +394,9 @@ export default {
 		revealBtnCta() {
 			return `${this.isMobileLayout ? 'Tap' : 'Click'} to reveal`;
 		},
+		numberOfBadges() {
+			return this.badgesAchieved.length || 1;
+		},
 	},
 	methods: {
 		toggleBlur() {
@@ -503,4 +524,7 @@ export default {
 	background: linear-gradient(166.92deg, #276A43 4.84%, #4DD083 95.26%);
 }
 
+.opt-in-module :deep(.module-container) {
+	@apply tw-rounded-none tw-pt-4 md:tw-pt-0;
+}
 </style>
diff --git a/src/components/Thanks/BadgesCustomization.vue b/src/components/Thanks/BadgesCustomization.vue
@@ -14,6 +14,8 @@
 				:is-guest="isGuest"
 				:selected-loan="selectedLoan"
 				:receipt="receipt"
+				:is-opted-in="isOptedIn"
+				:badges-achieved="badgesAchieved"
 				@show-discover-badges="showDiscoverBadges"
 				@show-new-bg="showNewBg"
 			/>
@@ -81,6 +83,14 @@ export default {
 			type: Object,
 			default: () => ({})
 		},
+		isOptedIn: {
+			type: Boolean,
+			default: false,
+		},
+		badgesAchieved: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	data() {
 		return {

diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue
@@ -19,6 +19,8 @@
 				:receipt="receipt"
 				:lender="lender"
 				:is-guest="isGuest"
+				:is-opted-in="optedIn"
+				:badges-achieved="badgesAchieved"
 			/>
 		</template>
 		<template v-if="activeView === MY_KIVA_BADGES_VIEW">