feat: implement optional async checkout muatations and status check

kiva · Feb 12, 2024 · 52f2d29 · 52f2d29
1 parent 922a543
commit 52f2d29
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 36 deletions.
diff --git a/src/components/Checkout/CheckoutDropInPaymentWrapper.vue b/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
@@ -130,6 +130,7 @@ import * as Sentry from '@sentry/vue';
 
 import checkoutUtils from '@/plugins/checkout-utils-mixin';
 import braintreeDropInError from '@/plugins/braintree-dropin-error-mixin';
+import { pollForCheckoutStatus } from '@/util/checkoutUtils';
 
 import braintreeDepositAndCheckout from '@/graphql/mutation/braintreeDepositAndCheckout.graphql';
 import braintreeDepositAndCheckoutAsync from '@/graphql/mutation/braintreeDepositAndCheckoutAsync.graphql';
@@ -339,39 +340,61 @@ export default {
 					},
 				})
 				.then(kivaBraintreeResponse => {
+					// extract transaction saga id or transaction id from response
+					const transactionResult = this.useAsyncCheckout
+						? kivaBraintreeResponse?.data?.shop?.doNoncePaymentDepositAndCheckoutAsync
+						: kivaBraintreeResponse?.data?.shop?.doNoncePaymentDepositAndCheckout;
+
+					if (this.useAsyncCheckout && typeof transactionResult !== 'object') {
+						pollForCheckoutStatus(this.apollo, transactionResult)
+							.then(checkoutStatusResponse => {
+								this.handleSuccessfulCheckout(checkoutStatusResponse?.receipt?.checkoutId);
+							}).catch(errorResponse => {
+								this.handleFailedCheckout([
+									{
+										error: errorResponse.errorCode,
+										message: `${errorResponse?.errorMessage}, ${errorResponse?.status}`,
+									}
+								]);
+							});
+
+						return kivaBraintreeResponse;
+					}
+
 					// Check for errors in transaction
 					if (kivaBraintreeResponse.errors) {
-						this.$emit('updating-totals', false);
-						this.processBraintreeDropInError('basket', kivaBraintreeResponse);
-						// Payment method failed, unselect attempted payment method
-						this.$refs.braintreeDropInInterface.btDropinInstance.clearSelectedPaymentMethod();
-						// Initialize a refresh of basket state
-						this.$emit('refreshtotals');
-						// exit
+						this.handleFailedCheckout(kivaBraintreeResponse);
 						return kivaBraintreeResponse;
 					}
 
-					// Transaction is complete
-					const transactionId = _get(
-						kivaBraintreeResponse,
-						'data.shop.doNoncePaymentDepositAndCheckout'
-					);
-					// redirect to thanks with KIVA transaction id
-					if (transactionId) {
-						// fire BT Success event
-						this.$kvTrackEvent(
-							'basket',
-							`${paymentType} Braintree DropIn Payment`,
-							'Success',
-							transactionId,
-							transactionId
-						);
-						// Complete transaction handles additional analytics + redirect
-						this.$emit('complete-transaction', transactionId);
-					}
+					this.handleSuccessfulCheckout(transactionResult, paymentType);
+
 					return kivaBraintreeResponse;
 				});
 		},
+		handleSuccessfulCheckout(transactionId, paymentType) {
+			// redirect to thanks with KIVA transaction id
+			if (transactionId) {
+				// fire BT Success event
+				this.$kvTrackEvent(
+					'basket',
+					`${paymentType} Braintree DropIn Payment`,
+					'Success',
+					transactionId,
+					transactionId
+				);
+				// Complete transaction handles additional analytics + redirect
+				this.$emit('complete-transaction', transactionId);
+			}
+		},
+		handleFailedCheckout(kivaBraintreeResponse) {
+			this.$emit('updating-totals', false);
+			this.processBraintreeDropInError('basket', kivaBraintreeResponse);
+			// Payment method failed, unselect attempted payment method
+			this.$refs.braintreeDropInInterface.btDropinInstance.clearSelectedPaymentMethod();
+			// Initialize a refresh of basket state
+			this.$emit('refreshtotals');
+		},
 	},
 };
 </script>
diff --git a/src/components/Checkout/KivaCreditPayment.vue b/src/components/Checkout/KivaCreditPayment.vue
@@ -13,6 +13,7 @@
 
 <script>
 import checkoutUtils from '@/plugins/checkout-utils-mixin';
+import { pollForCheckoutStatus } from '@/util/checkoutUtils';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 
 export default {
@@ -47,29 +48,48 @@ export default {
 					}
 				}).catch(errorResponse => {
 					this.$emit('updating-totals', false);
-					console.error(errorResponse);
+					this.showCheckoutError(errorResponse);
 				});
 		},
 		checkoutCreditBasket() {
 			this.checkoutBasket(false, this.useAsyncCheckout)
 				.then(transactionResult => {
-					if (typeof transactionResult !== 'object') {
-						// succesful validation
-						this.$kvTrackEvent('basket', 'Kiva Checkout', 'Success', transactionResult);
-						// Complete transaction handles additional analytics + redirect
-						this.$emit('complete-transaction', transactionResult);
+					if (this.useAsyncCheckout && typeof transactionResult !== 'object') {
+						pollForCheckoutStatus(this.apollo, transactionResult)
+							.then(checkoutStatusResponse => {
+								this.handleSuccessfulCheckout(checkoutStatusResponse?.receipt?.checkoutId);
+							}).catch(errorResponse => {
+								this.handleFailedCheckout([
+									{
+										error: errorResponse.errorCode,
+										message: `${errorResponse?.errorMessage}, ${errorResponse?.status}`,
+									}
+								]);
+							});
+					} else if (typeof transactionResult !== 'object') {
+						this.handleSuccessfulCheckout(transactionResult);
 					} else {
 						// checkout failed
-						this.$emit('updating-totals', false);
 						const errorResult = transactionResult?.errors ?? [];
-						this.showCheckoutError(errorResult);
-						this.$emit('checkout-failure', errorResult);
+						this.handleFailedCheckout(errorResult);
 					}
 				}).catch(errorResponse => {
 					this.$emit('updating-totals', false);
-					console.error(errorResponse);
+					this.handleFailedCheckout(errorResponse);
 				});
 		},
+		handleSuccessfulCheckout(transactionResult) {
+			// succesful validation
+			this.$kvTrackEvent('basket', 'Kiva Checkout', 'Success', transactionResult);
+			// Complete transaction handles additional analytics + redirect
+			this.$emit('complete-transaction', transactionResult);
+		},
+		handleFailedCheckout(errorResult) {
+			// checkout failed
+			this.$emit('updating-totals', false);
+			this.showCheckoutError(errorResult);
+			this.$emit('checkout-failure', errorResult);
+		}
 	}
 };
 </script>
diff --git a/src/graphql/query/checkout/checkoutStatus.graphql b/src/graphql/query/checkout/checkoutStatus.graphql
@@ -3,6 +3,9 @@ query checkoutStatus($transactionId: String!, $visitorId: String) {
 		basketId
 		errorCode
 		errorMessage
+		receipt {
+		checkoutId
+		}
 		requestedAt
 		status
 		transactionId

diff --git a/src/plugins/checkout-utils-mixin.js b/src/plugins/checkout-utils-mixin.js
@@ -134,7 +134,7 @@ export default {
 			}
 			return new Promise((resolve, reject) => {
 				this.apollo.mutate(mutObj).then(data => {
-					const transactionId = _get(data, 'data.shop.checkout');
+					const transactionId = useAsync ? data?.data?.shop?.checkoutAsync : data?.data?.shop?.checkout;
 					if (transactionId !== null) {
 						// succesful transaction;
 						resolve(transactionId);

diff --git a/src/util/checkoutUtils.js b/src/util/checkoutUtils.js
@@ -1,5 +1,6 @@
 import numeral from 'numeral';
 import myFTD from '@/graphql/query/myFTD.graphql';
+import checkoutStatus from '@/graphql/query/checkout/checkoutStatus.graphql';
 import removeCreditByTypeMutation from '@/graphql/mutation/shopRemoveCreditByType.graphql';
 
 /** Format Transaction Data for Analtyics events
@@ -120,3 +121,68 @@ export function removeCredit(apollo, creditType) {
 		}
 	});
 }
+
+/**
+ * Poll the checkoutStatus endpoint until the checkout is complete
+ * Note: We only operate on the COMPLETED or results with errors
+ *
+ * Possible status values:
+ * - BASKET_MANIFEST
+ * - BASKET_VALID
+ * - CHECKOUT_FAILED
+ * - CHECKOUT_RECORDED
+ * - CHECKOUT_ROLLED_BACK
+ * - COMPLETED
+ * - CREDIT_ADDED
+ * - DEPOSIT_RECORDED
+ * - FAILED
+ * - MANIFEST_FAILED
+ * - RECORD_CHECKOUT_FAILED
+ * - REQUEST_RECEIVED
+ * - RESERVATIONS_COMPLETED
+ * - STARTED
+ * - TRANSIENT_PAYMENT_METHOD_CHARGED
+ *
+ * @param {Object} apollo Apollo Client instance
+ * @param {Number} transactionId
+ * @param {Number} interval How often to poll
+ * @param {Number} timeout How long to allow polling to continue
+ * @returns {Promise}
+ */
+export async function pollForCheckoutStatus(
+	apollo = null,
+	transactionSagaId = 0,
+	interval = 1000,
+	timeout = 60000
+) {
+	if (!apollo) {
+		throw new Error('Apollo instance missing');
+	}
+
+	// establish endtime based on timeout
+	const endTime = Date.now() + timeout;
+
+	const checkStatus = async () => {
+		// check for timeout
+		if (Date.now() > endTime) {
+			throw new Error('Polling timed out');
+		}
+		// query checkoutStatus
+		const result = await apollo.query({
+			query: checkoutStatus,
+			variables: {
+				transactionId: transactionSagaId
+			}
+		});
+		// extract fields to check for a completed status or errors
+		const { status, errorCode, errorMessage } = result?.data?.checkoutStatus;
+		// Check for completed status, or errors and return if present
+		if (status === 'COMPLETED' || errorCode || errorMessage) {
+			return result?.data?.checkoutStatus;
+		}
+		// Check again
+		setTimeout(checkStatus, interval);
+	};
+
+	return checkStatus();
+}