Merge pull request #4981 from kiva/CORE-1513_thanks_page_ftds

kiva · Sep 25, 2023 · e906648 · e906648
2 parents 76463d0 + 47cf8f4
commit e906648
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 3 deletions.
diff --git a/src/components/Thanks/ShareStepper.vue b/src/components/Thanks/ShareStepper.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="tw-my-2 tw-px-2">
-		<div style="width: 136px;" class="tw-mx-auto tw-px-1">
+		<div v-if="!isFirstLoan" style="width: 136px;" class="tw-mx-auto tw-px-1">
 			<div class="tw-flex tw-items-center">
 				<template v-for="step in steps">
 					<ShareStepperStep
@@ -17,6 +17,10 @@
 				<span v-if="commentsMode">
 					<span class="data-hj-suppress">{{ lenderName }}</span>, go the extra mile
 				</span>
+				<span v-else-if="isFirstLoan">
+					<!-- eslint-disable-next-line max-len -->
+					<span class="data-hj-suppress">{{ lenderName }}</span>, You’re support means the world to <span class="data-hj-suppress">{{ loanName }}</span>. Let us help you change another life.
+				</span>
 				<span v-else>
 					<!-- eslint-disable-next-line max-len -->
 					<span class="data-hj-suppress">{{ lenderName }}</span>, complete your support by sharing {{ subject }}
@@ -51,7 +55,15 @@ export default {
 		calculatePeopleQtyToGoal: {
 			type: Number,
 			default: 0
-		}
+		},
+		isFirstLoan: {
+			type: Boolean,
+			default: false
+		},
+		loanName: {
+			type: String,
+			default: ''
+		},
 	},
 	data() {
 		return {

diff --git a/src/components/Thanks/ThanksPageCommentAndShare.vue b/src/components/Thanks/ThanksPageCommentAndShare.vue
@@ -5,6 +5,8 @@
 			:calculate-people-qty-to-goal="calculatePeopleQtyToGoal()"
 			:show-lender-name="!isGuest"
 			:comments-mode="askForComments"
+			:is-first-loan="isFirstLoan"
+			:loan-name="loan.name"
 		/>
 		<!-- Image Section -->
 		<kv-page-container>
@@ -66,6 +68,44 @@
 				</div>
 			</kv-grid>
 		</kv-page-container>
+		<!-- First Time Deposit Section -->
+		<kv-page-container v-if="isFirstLoan">
+			<kv-grid class="tw-grid-cols-12">
+				<div class="tw-col-span-12 lg:tw-col-span-8 lg:tw-col-start-3 tw-mb-4 hide-for-print">
+					<h1	class="tw-mt-1 tw-mb-3 tw-text-left">
+						Here’s ${{ ftdCreditAmount }} on us <span class="tw-text-brand">toward your next loan</span>.
+					</h1>
+					<p class="tw-m-0 tw-text-subhead">
+						<!-- eslint-disable-next-line max-len -->
+						As a reward for joining the Kiva community we’d like to give you a leg up on your next loan in your inbox 🥇.
+					</p>
+				</div>
+			</kv-grid>
+			<div class="tw-flex tw-flex-col tw-gap-y-2 tw-mt-2 tw-mb-4 tw-max-w-sm tw-mx-auto">
+				<kv-button
+					variant="primary"
+					to="/portfolio"
+					v-kv-track-event="['post-checkout', 'click', 'ftd-portfolio', null, loanId]"
+				>
+					Continue to portfolio
+				</kv-button>
+				<kv-button
+					variant="secondary"
+					:href="shareLink"
+					v-kv-track-event="['post-checkout', 'share', 'ftd-sharing', null, loanId]"
+				>
+					Share this loan with others
+				</kv-button>
+				<kv-button
+					variant="ghost"
+					to="/lend-by-category"
+					v-kv-track-event="['post-checkout', 'click', 'ftd-lending-home', null, loanId]"
+				>
+					Go to lending home
+				</kv-button>
+			</div>
+			<hr>
+		</kv-page-container>
 		<!-- Comments Section -->
 		<CommentAsk
 			class="hide-for-print"
@@ -185,6 +225,7 @@ import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
 import KvProgressBar from '~/@kiva/kv-components/vue/KvProgressBar';
 import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+import KvButton from '~/@kiva/kv-components/vue/KvButton';
 
 const thanksImgRequire = require.context('@/assets/images/thanks-page', true);
 
@@ -200,6 +241,7 @@ export default {
 		CommentAsk,
 		KvGrid,
 		KvPageContainer,
+		KvButton
 	},
 	props: {
 		receipt: {
@@ -222,6 +264,14 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		isFirstLoan: {
+			type: Boolean,
+			default: false
+		},
+		ftdCreditAmount: {
+			type: String,
+			default: ''
+		},
 	},
 	mixins: [socialSharingMixin],
 	metaInfo() {

diff --git a/src/graphql/query/thanksPage.graphql b/src/graphql/query/thanksPage.graphql
@@ -132,6 +132,14 @@ query checkoutReceipt($checkoutId: Int!, $visitorId: String) {
 			key
 			value
 		}
+		ftd_message_enable: uiConfigSetting(key: "thanks_page_ftd_message_enable") {
+			key
+			value
+		}
+		ftd_amount: uiConfigSetting(key: "thanks_page_ftd_amount") {
+			key
+			value
+		}
 	}
 	mySubscriptions(includeDisabled: false) {
 		values {

diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue
@@ -88,6 +88,8 @@
 				:lender="lender"
 				:loan="selectedLoan"
 				:is-guest="isGuest"
+				:is-first-loan="showFtdMessage"
+				:ftd-credit-amount="ftdCreditAmount"
 				@guest-create-account="createGuestAccount"
 				:ask-for-comments="askForComments"
 			/>
@@ -150,7 +152,10 @@ export default {
 			isGuest: false,
 			pageData: {},
 			jumpToGuestUpsell: false,
-			monthlyDonationAmount: ''
+			monthlyDonationAmount: '',
+			isFirstLoan: false,
+			isFtdMessageEnable: false,
+			ftdCreditAmount: ''
 		};
 	},
 	apollo: {
@@ -246,6 +251,9 @@ export default {
 			// Is a guest checking out only with US loans?
 			// eslint-disable-next-line no-underscore-dangle
 			return this.isGuest && this.loans.every(loan => loan?.__typename === 'LoanDirect');
+		},
+		showFtdMessage() {
+			return this.isFirstLoan && this.enableFtdMessage && this.ftdCreditAmount;
 		}
 	},
 	created() {
@@ -284,6 +292,13 @@ export default {
 		this.receipt = data?.shop?.receipt ?? null;
 		this.isGuest = this.receipt && !data?.my?.userAccount;
 
+		// Enable FTDs message from settings
+		const enableFtdMessageData = data?.general?.ftd_message_enable ?? null;
+		this.enableFtdMessage = enableFtdMessageData ? enableFtdMessageData.value : false;
+		// Credit amount for FTD message from settings
+		const ftdCreditAmountData = data?.general?.ftd_amount ?? null;
+		this.ftdCreditAmount = ftdCreditAmountData ? ftdCreditAmountData.value : '';
+
 		const loansResponse = this.receipt?.items?.values ?? [];
 		this.loans = loansResponse
 			.filter(item => item.basketItemType === 'loan_reservation')
@@ -307,6 +322,7 @@ export default {
 
 		const totalLoans = data?.my?.loans?.totalCount ?? 0;
 		const isFirstLoan = this.loans.length && totalLoans === this.loans.length;
+		this.isFirstLoan = isFirstLoan;
 		const hasDirectLoan = this.loans.findIndex(loan => loan.distributionModel === 'direct') > -1;
 		const hasCoreLoan = this.loans.findIndex(loan => loan.distributionModel === 'fieldPartner') > -1;