feat: guest username passed to auth flow (#5815)

* feat: guest username passed to auth flow * fix: optional chaining added to payload * fix: router call fixed
kiva · Feb 19, 2025 · 7eaebb8 · 7eaebb8
1 parent 1766cb6
commit 7eaebb8
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 7 deletions.
diff --git a/server/auth-router.js b/server/auth-router.js
@@ -135,6 +135,11 @@ export default function authRouter(config = {}) {
 			options.login_hint = 'signUp';
 		}
 
+		// Guest Username
+		if (req.query.username) {
+			options.username = req.query.username;
+		}
+
 		info(`LoginUI: attempt login, session id:${req.sessionID}, cookie:${getSyncCookie(req)}, done url:${req.query.doneUrl}`); // eslint-disable-line max-len
 		passport.authenticate('auth0', options)(req, res, next);
 	});

diff --git a/src/components/Checkout/CheckoutDropInPaymentWrapper.vue b/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
@@ -455,7 +455,7 @@ export default {
 					transactionId
 				);
 				// Complete transaction handles additional analytics + redirect
-				this.$emit('complete-transaction', transactionId);
+				this.$emit('complete-transaction', { transactionId, username: this.email });
 			}
 		},
 		handleFailedCheckout(kivaBraintreeResponse) {

diff --git a/src/components/Forms/GuestAccountCreation.vue b/src/components/Forms/GuestAccountCreation.vue
@@ -86,7 +86,11 @@ export default {
 		eventValue: {
 			type: Number,
 			default: 0
-		}
+		},
+		guestUsername: {
+			type: String,
+			default: ''
+		},
 	},
 	data() {
 		return {
@@ -129,10 +133,14 @@ export default {
 					if (result?.errors?.length > 0) {
 						throw result.errors;
 					}
-					const resetUrl = result?.data?.general?.startGuestAccountClaim;
+					let resetUrl = result?.data?.general?.startGuestAccountClaim;
 					if (!resetUrl) {
 						throw new Error('Missing reset url');
 					}
+					if (this.guestUsername) {
+						resetUrl += `&username=${this.guestUsername}`;
+					}
+
 					window.location = resetUrl;
 				}).catch(err => {
 					this.serverError = true;

diff --git a/src/components/Thanks/CommentAsk.vue b/src/components/Thanks/CommentAsk.vue
@@ -112,7 +112,9 @@
 						</p>
 
 						<div class="tw-mt-3 tw-max-w-sm tw-mx-auto">
-							<guest-account-creation />
+							<guest-account-creation
+								:guest-username="guestUsername"
+							/>
 						</div>
 					</div>
 				</kv-grid>
@@ -155,6 +157,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		guestUsername: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {

diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -163,6 +163,7 @@
 				event-label="create-new-account"
 				event-property="guest"
 				:event-value="numberOfBadges"
+				:guest-username="guestUsername"
 			/>
 		</KvLightbox>
 	</div>
@@ -226,6 +227,10 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
+	guestUsername: {
+		type: String,
+		default: '',
+	},
 });
 
 const {

diff --git a/src/components/Thanks/SingleVersion/AccountReceiptShare.vue b/src/components/Thanks/SingleVersion/AccountReceiptShare.vue
@@ -30,6 +30,7 @@
 						event-label="create-new-account-from-drawer"
 						:event-property="userType"
 						:event-value="numberOfBadges"
+						:guest-username="guestUsername"
 					/>
 				</div>
 			</KvExpandable>
@@ -132,6 +133,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	guestUsername: {
+		type: String,
+		default: ''
+	},
 });
 
 const POST_CHECKOUT_EVENT_CATEGORY = 'post-checkout';

diff --git a/src/components/Thanks/ThanksPageCommentAndShare.vue b/src/components/Thanks/ThanksPageCommentAndShare.vue
@@ -114,6 +114,7 @@
 			:loan-name="loan.name"
 			:loan-id="loan.id"
 			:is-guest="isGuest"
+			:guest-username="guestUsername"
 		/>
 		<!-- Share Section -->
 		<kv-page-container v-if="!hideShareSection">
@@ -273,6 +274,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		guestUsername: {
+			type: String,
+			default: '',
+		},
 	},
 	mixins: [socialSharingMixin],
 	head() {

diff --git a/src/components/Thanks/ThanksPageSingleVersion.vue b/src/components/Thanks/ThanksPageSingleVersion.vue
@@ -58,6 +58,7 @@
 				:loans="loans"
 				:show-receipt="showReceipt"
 				:only-donations="onlyDonations"
+				:guest-username="guestUsername"
 			/>
 		</div>
 		<KvLightbox
@@ -69,6 +70,7 @@
 				event-label="create-new-account"
 				:event-property="userType"
 				:event-value="numberOfBadges"
+				:guest-username="guestUsername"
 			/>
 		</KvLightbox>
 	</div>
@@ -131,7 +133,11 @@ const props = defineProps({
 	myKivaEnabled: {
 		type: Boolean,
 		default: false,
-	}
+	},
+	guestUsername: {
+		type: String,
+		default: '',
+	},
 });
 
 const receiptSection = ref(null);

diff --git a/src/components/Thanks/WhatIsNextTemplate.vue b/src/components/Thanks/WhatIsNextTemplate.vue
@@ -85,6 +85,7 @@
 									class="tw-pt-3 account-creation"
 									event-category="thanks"
 									event-label="open-account-creation-drawer"
+									:guest-username="guestUsername"
 								/>
 							</template>
 							<template v-else>
@@ -175,6 +176,7 @@
 								class="tw-pt-3 account-creation"
 								event-category="thanks"
 								event-label="open-account-creation-drawer"
+								:guest-username="guestUsername"
 							/>
 						</div>
 					</kv-expandable>
@@ -309,6 +311,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		guestUsername: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {

diff --git a/src/pages/Checkout/CheckoutPage.vue b/src/pages/Checkout/CheckoutPage.vue
@@ -850,7 +850,8 @@ export default {
 				this.setUpdatingTotals(false);
 			});
 		},
-		completeTransaction(transactionId) {
+		completeTransaction(payload) {
+			const transactionId = typeof payload === 'object' ? payload.transactionId : payload;
 			// compile transaction data
 			const transactionData = formatTransactionData(
 				numeral(transactionId).value(),
@@ -875,6 +876,9 @@ export default {
 				if (this.checkingOutAsGuest) {
 					checkoutAdditionalQueryParams += `&optedIn=${this.userOptedIn}`;
 				}
+				if (payload?.username) {
+					checkoutAdditionalQueryParams += `&username=${payload.username}`;
+				}
 
 				// redirect to thanks
 				window.setTimeout(

diff --git a/src/pages/Checkout/PostPurchase.vue b/src/pages/Checkout/PostPurchase.vue
@@ -21,6 +21,7 @@ export default {
 					const transactionId = numeral(currentRoute.query?.kiva_transaction_id).value();
 					const valetInviter = currentRoute.query?.valet_inviter ?? '';
 					const optedIn = currentRoute.query?.optedIn ?? '';
+					const username = currentRoute.query?.username ?? '';
 					if (!transactionId) {
 						// redirect to thanks page if no transaction id was provided
 						// currently resolves to portfolio via ThanksView getCheckoutId method
@@ -54,6 +55,10 @@ export default {
 							successRoute.query.optedIn = optedIn;
 						}
 
+						if (username) {
+							successRoute.query.username = username;
+						}
+
 						// track the transaction event
 						client.mutate({
 							mutation: trackTransactionMutation,

diff --git a/src/pages/LoginAndRegister/GuestAccountRedirect.vue b/src/pages/LoginAndRegister/GuestAccountRedirect.vue
@@ -9,7 +9,7 @@ import { GUEST_COMMENT_COMMENT, GUEST_COMMENT_LOANID } from '#src/plugins/guest-
 export default {
 	name: 'GuestAccountRedirect',
 	apollo: {
-		preFetch(config, client, { cookieStore }) {
+		preFetch(config, client, { cookieStore, route }) {
 			return client.query({
 				query: gql`query guestRedirect($basketId: String) {
 					shop (basketId: $basketId) {
@@ -45,13 +45,17 @@ export default {
 
 				// Check to see if user is authenticated
 				if (!data?.my?.userAccount?.id) {
+					const currentRoute = route.value ?? route ?? {};
+					const username = currentRoute.query?.username ?? '';
+
 					return Promise.reject({
 						path: '/ui-login',
 						query: {
 							loginHint: `login|${JSON.stringify({
 								guest: true,
 							})}`,
 							doneUrl: `${path}?${queryString}`,
+							username,
 						},
 					});
 				}

diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue
@@ -13,6 +13,7 @@
 				:monthly-donation-amount="monthlyDonationAmount"
 				:badges-achieved="badgesAchieved"
 				:my-kiva-enabled="myKivaExperimentEnabled"
+				:guest-username="guestUsername"
 			/>
 		</template>
 		<template v-if="activeView === DONATION_ONLY_VIEW">
@@ -30,6 +31,7 @@
 				:receipt="receipt"
 				:badges-achieved="badgesAchieved"
 				:router="$router"
+				:guest-username="guestUsername"
 			/>
 		</template>
 		<template v-if="activeView === MARKETING_OPT_IN_VIEW">
@@ -40,6 +42,7 @@
 				:lender="lender"
 				:is-guest="isGuest"
 				:opted-in="optedIn"
+				:guest-username="guestUsername"
 			/>
 		</template>
 		<div v-if="challengeHeaderVisible" class="tw-bg-secondary">
@@ -164,6 +167,7 @@
 			:ftd-credit-amount="ftdCreditAmount"
 			@guest-create-account="createGuestAccount"
 			:ask-for-comments="askForComments"
+			:guest-username="guestUsername"
 		/>
 	</www-page>
 </template>
@@ -291,6 +295,7 @@ export default {
 			badgesAchieved: [],
 			thanksSingleVersionEnabled: false,
 			SINGLE_VERSION_VIEW,
+			guestUsername: '',
 		};
 	},
 	apollo: {
@@ -612,6 +617,7 @@ export default {
 		this.enableMayChallengeHeader = shareChallengeExpData?.version === 'b';
 
 		this.optedIn = data?.my?.communicationSettings?.lenderNews || this.$route.query?.optedIn === 'true';
+		this.guestUsername = this.$route.query?.username ?? '';
 
 		// MyKiva Badges Experiment
 		this.myKivaExperimentEnabled = getIsMyKivaEnabled(