From a9b00b9a86126f27308ecfdb06abd618d63792f4 Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <rogelio.gutierrez@contractors.kiva.org>
Date: Mon, 30 Oct 2023 11:18:55 -0600
Subject: [PATCH] feat: ftd message added to checkout page for first time
 lenders

---
 src/assets/images/checkout/ftds_sparkle.svg   |  6 ++++
 src/components/Checkout/FtdsDisclaimer.vue    | 22 ++++++++++++++
 src/components/Checkout/FtdsMessage.vue       | 21 +++++++++++++
 .../query/checkout/initializeCheckout.graphql | 15 ++++++++++
 src/graphql/query/thanksPage.graphql          |  4 +--
 src/pages/Checkout/CheckoutPage.vue           | 30 ++++++++++++++++++-
 6 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/checkout/ftds_sparkle.svg
 create mode 100644 src/components/Checkout/FtdsDisclaimer.vue
 create mode 100644 src/components/Checkout/FtdsMessage.vue

diff --git a/src/assets/images/checkout/ftds_sparkle.svg b/src/assets/images/checkout/ftds_sparkle.svg
new file mode 100644
index 0000000000..0a2b27f250
--- /dev/null
+++ b/src/assets/images/checkout/ftds_sparkle.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.2332 21.8957C22.7287 21.8957 21.6026 17.9999 21.6026 16.052C21.6026 17.9999 20.4765 21.8957 15.972 21.8957C20.4765 21.8957 21.6026 26.0079 21.6026 28.064C21.6026 26.0079 22.7287 21.8957 27.2332 21.8957Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.986 28.064V32.068" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M31.988 30.066L27.984 30.066" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="30.987" cy="17.053" r="1.001" fill="black"/>
+</svg>
diff --git a/src/components/Checkout/FtdsDisclaimer.vue b/src/components/Checkout/FtdsDisclaimer.vue
new file mode 100644
index 0000000000..2702853a71
--- /dev/null
+++ b/src/components/Checkout/FtdsDisclaimer.vue
@@ -0,0 +1,22 @@
+<template>
+	<p class="tw-text-small tw-text-black">
+		<!-- eslint-disable-next-line max-len -->
+		1. Disclaimer: While funds last, one ${{ ftdCreditAmount }} free credit will be applied to your account after you complete your first loan between now and {{ ftdValidDate }}.You will receive a notification email when your free credit has been applied to your account. Free credits expire after 14 days. Free credits have no cash value and repayments will return to Kiva.
+	</p>
+</template>
+
+<script>
+export default {
+	name: 'FtdsDisclaimer',
+	props: {
+		ftdCreditAmount: {
+			type: String,
+			default: ''
+		},
+		ftdValidDate: {
+			type: String,
+			default: ''
+		},
+	},
+};
+</script>
diff --git a/src/components/Checkout/FtdsMessage.vue b/src/components/Checkout/FtdsMessage.vue
new file mode 100644
index 0000000000..2f15ddf0fe
--- /dev/null
+++ b/src/components/Checkout/FtdsMessage.vue
@@ -0,0 +1,21 @@
+<template>
+	<div class="tw-bg-brand-100 tw-rounded-sm tw-py-1 tw-px-1.5 tw-flex tw-justify-center tw-items-center">
+		<img src="@/assets/images/checkout/ftds_sparkle.svg" alt="FTDs Sparkle">
+		<p>
+			<!-- eslint-disable-next-line max-len -->
+			You’ll earn <span class="tw-font-medium">${{ ftdCreditAmount }} in lending credits</span> after checkout to help support another borrower. <sup>1</sup>
+		</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FtdsMessage',
+	props: {
+		ftdCreditAmount: {
+			type: String,
+			default: ''
+		},
+	},
+};
+</script>
diff --git a/src/graphql/query/checkout/initializeCheckout.graphql b/src/graphql/query/checkout/initializeCheckout.graphql
index e4dd9d7ba6..21775cc7a1 100644
--- a/src/graphql/query/checkout/initializeCheckout.graphql
+++ b/src/graphql/query/checkout/initializeCheckout.graphql
@@ -20,6 +20,9 @@ query initializeCheckout($basketId: String) {
 				}
 			}
 		}
+		loans {
+			totalCount
+		}
 	}
 	general {
 		activeLoginDuration: configSetting(key: "login_timeouts.www.active_login") {
@@ -31,6 +34,18 @@ query initializeCheckout($basketId: String) {
 			value
 			description
 		}
+		ftd_message_enable: uiConfigSetting(key: "ftd_message_enable") {
+			key
+			value
+		}
+		ftd_amount: uiConfigSetting(key: "ftd_message_amount") {
+			key
+			value
+		}
+		ftd_date_time: uiConfigSetting(key: "ftd_message_valid_date") {
+			key
+			value
+		}
 	}
 	shop (basketId: $basketId) {
 		id
diff --git a/src/graphql/query/thanksPage.graphql b/src/graphql/query/thanksPage.graphql
index 298272b2a6..1123bee1c4 100644
--- a/src/graphql/query/thanksPage.graphql
+++ b/src/graphql/query/thanksPage.graphql
@@ -132,11 +132,11 @@ query checkoutReceipt($checkoutId: Int!, $visitorId: String) {
 			key
 			value
 		}
-		ftd_message_enable: uiConfigSetting(key: "thanks_page_ftd_message_enable") {
+		ftd_message_enable: uiConfigSetting(key: "ftd_message_enable") {
 			key
 			value
 		}
-		ftd_amount: uiConfigSetting(key: "thanks_page_ftd_amount") {
+		ftd_amount: uiConfigSetting(key: "ftd_message_amount") {
 			key
 			value
 		}
diff --git a/src/pages/Checkout/CheckoutPage.vue b/src/pages/Checkout/CheckoutPage.vue
index 87ecce4949..2ab50d0aa2 100644
--- a/src/pages/Checkout/CheckoutPage.vue
+++ b/src/pages/Checkout/CheckoutPage.vue
@@ -24,6 +24,12 @@
 						Your basket
 					</h1>
 					<hr class="tw-border-tertiary tw-my-3">
+
+					<ftds-message
+						class="tw-mb-2"
+						v-if="showFtdMessage"
+						:ftd-credit-amount="ftdCreditAmount"
+					/>
 				</div>
 				<div class="tw-relative">
 					<div class="basket-container tw-mx-auto tw-my-0">
@@ -195,6 +201,12 @@
 						id="updating-overlay"
 						class="updating-totals-overlay tw-z-overlay tw-bg-white"
 					/>
+
+					<ftds-disclaimer
+						v-if="showFtdMessage"
+						:ftd-credit-amount="ftdCreditAmount"
+						:ftd-valid-date="ftdValidDate"
+					/>
 				</div>
 			</div>
 			<campaign-verification-form
@@ -309,6 +321,8 @@ import { isLoanFundraising } from '@/util/loanUtils';
 import MatchedLoansLightbox from '@/components/Checkout/MatchedLoansLightbox';
 import experimentAssignmentQuery from '@/graphql/query/experimentAssignment.graphql';
 import fiveDollarsTest, { FIVE_DOLLARS_NOTES_EXP } from '@/plugins/five-dollars-test-mixin';
+import FtdsMessage from '@/components/Checkout/FtdsMessage';
+import FtdsDisclaimer from '@/components/Checkout/FtdsDisclaimer';
 import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
@@ -354,7 +368,9 @@ export default {
 		UpsellModule,
 		MatchedLoansLightbox,
 		CampaignJoinTeamForm,
-		KvLoadingPlaceholder
+		KvLoadingPlaceholder,
+		FtdsMessage,
+		FtdsDisclaimer,
 	},
 	inject: ['apollo', 'cookieStore', 'kvAuth0'],
 	mixins: [checkoutUtils, fiveDollarsTest],
@@ -403,6 +419,10 @@ export default {
 			continueButtonState: 'loading',
 			challengeRedirectQueryParam: '',
 			asyncCheckoutActive: false,
+			lenderTotalLoans: 0,
+			isFtdMessageEnable: false,
+			ftdCreditAmount: '',
+			ftdValidDate: ''
 		};
 	},
 	apollo: {
@@ -472,6 +492,11 @@ export default {
 
 			// general data
 			this.activeLoginDuration = parseInt(_get(data, 'general.activeLoginDuration.value'), 10) || 3600;
+
+			this.lenderTotalLoans = _get(data, 'my.loans.totalCount') ?? 0;
+			this.isFtdMessageEnable = _get(data, 'general.ftd_message_enable')?.value ?? false;
+			this.ftdCreditAmount = _get(data, 'general.ftd_amount')?.value ?? '';
+			this.ftdValidDate = _get(data, 'general.ftd_date')?.value ?? '';
 		}
 	},
 	beforeRouteEnter(to, from, next) {
@@ -719,6 +744,9 @@ export default {
 		loanIdsInBasket() {
 			return this.loans.map(loan => loan.id);
 		},
+		showFtdMessage() {
+			return !this.lenderTotalLoans && this.enableFtdMessage && this.ftdCreditAmount && this.ftdValidDate;
+		}
 	},
 	methods: {
 		openMatchedLoansLightbox() {