feat: ftd message added to checkout page for first time lenders

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>

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>

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

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
 		}

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() {