ASUB-8002 Update payment method (#1813)

* changes * payments * remove env file * update payment method - stripe Intents * update payment method * fixing typo * solving conflict --------- Co-authored-by: Vito Galatro <[email protected]>
WPMedia · Dec 6, 2023 · b21fc0b · b21fc0b
1 parent 56fd4d1
commit b21fc0b
Show file tree

Hide file tree

Showing 11 changed files with 262 additions and 107 deletions.
diff --git a/blocks/identity-block/components/login/index.jsx b/blocks/identity-block/components/login/index.jsx
@@ -1,9 +1,17 @@
 import { useEffect, useState } from "react";
 import { useIdentity } from "@wpmedia/arc-themes-components";
+import appendURLParams from "../../utils/append-url-params";
 import validateURL from "../../utils/validate-redirect-url";
 import useOIDCLogin from "../../utils/useOIDCLogin";
 
-const useLogin = ({ isAdmin, redirectURL, redirectToPreviousPage, loggedInPageLocation, isOIDC }) => {
+const useLogin = ({
+	isAdmin,
+	redirectURL,
+	redirectToPreviousPage,
+	loggedInPageLocation,
+	isOIDC,
+}) => {
+
 	const { Identity } = useIdentity();
 	const validatedRedirectURL = validateURL(redirectURL);
 	const [redirectToURL, setRedirectToURL] = useState(validatedRedirectURL);
@@ -13,7 +21,18 @@ const useLogin = ({ isAdmin, redirectURL, redirectToPreviousPage, loggedInPageLo
 	useEffect(() => {
 		if (window?.location?.search) {
 			const searchParams = new URLSearchParams(window.location.search.substring(1));
-			const validatedRedirectParam = validateURL(searchParams.get("redirect"));
+
+			//redirectURL could have additional params
+			const params = ["paymentMethodID"];
+			const aditionalParams = params.map((p) => {
+				const paramExist = searchParams.has(p)
+				if(paramExist){
+					return {[p]:searchParams.get(p)}
+				}
+			})
+
+			const fullURL = searchParams.get("redirect") ? appendURLParams(searchParams.get("redirect"), aditionalParams.filter(item => item !== undefined)) : null;
+			const validatedRedirectParam = validateURL(fullURL);
 			setRedirectQueryParam(validatedRedirectParam);
 		}
 

diff --git a/blocks/identity-block/utils/append-url-params.js b/blocks/identity-block/utils/append-url-params.js
@@ -0,0 +1,13 @@
+// Funtion to append additional parameters as part of URL
+const appendURLParams = (initURL, params) => {
+
+	let fullURL = initURL;
+	if (params.length) {
+		const allParams = params.map((x) => Object.keys(x) + "=" + Object.values(x)).join("&");
+		fullURL = initURL.includes("?") ? `${initURL}&${allParams}` : `${initURL}?${allParams}`;
+	}
+
+	return fullURL;
+};
+
+export default appendURLParams;
diff --git a/blocks/subscriptions-block/components/PayPal/index.jsx b/blocks/subscriptions-block/components/PayPal/index.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { usePaymentRedirect } from "../usePaymentRedirect";
 import { usePhrases } from "@wpmedia/arc-themes-components";
 
-export const PaypalCheckout = ({ labelOrderNumber, paypal, orderNumber, successURL, isInitialized }) => {
+export const PaypalCheckout = ({ labelOrderNumber, paypal, orderNumber, successURL }) => {
 	const phrases = usePhrases();
 	const params = new URLSearchParams(window.location.search);
 	const token = params.get("token");
@@ -14,7 +14,7 @@ export const PaypalCheckout = ({ labelOrderNumber, paypal, orderNumber, successU
 		orderNumber = localStorage[labelOrderNumber];
 	}
 
-	const { error } = usePaymentRedirect(paypal, orderNumber, token, "parameter1", successURL, isInitialized);
+	const { error } = usePaymentRedirect(paypal, orderNumber, token, "parameter1", successURL);
 
 	return (
 		<>
@@ -26,4 +26,4 @@ export const PaypalCheckout = ({ labelOrderNumber, paypal, orderNumber, successU
 
 PaypalCheckout.displayName = "PaypalCheckout";
 
-export default PaypalCheckout;
+export default PaypalCheckout;
diff --git a/blocks/subscriptions-block/components/PaymentForm/index.jsx b/blocks/subscriptions-block/components/PaymentForm/index.jsx
@@ -35,6 +35,10 @@ function PaymentForm({
 	submitText,
 	formErrorText,
 	className,
+	paymentID,
+	isPaymentMethodUpdate,
+	updateText,
+	successUpdateURL,
 }) {
 	const [formStatus, setFormStatus] = useState(FORM_STATUS.IDLE);
 	const [cardName, setCardName] = useState("");
@@ -63,13 +67,20 @@ function PaymentForm({
 			setFormStatus(FORM_STATUS.ERROR);
 			return;
 		}
-		const totalOrder = Sales.currentOrder.total;
+
+		// if order of $0 there's a different stripe logic,
+		let totalOrder;
+		if (!isPaymentMethodUpdate) {
+			totalOrder = Sales.currentOrder.total;
+		}
+
 		let result;
-		if (totalOrder && totalOrder > 0) {
+		if (totalOrder && totalOrder > 0 && !isPaymentMethodUpdate) {
 			result = await stripeInstance.confirmCardPayment(clientSecret, {
 				payment_method: paymentMethod.id,
 			});
 		} else {
+			// User is updating the payment method OR totalOder <= 0
 			result = await stripeInstance.confirmCardSetup(clientSecret, {
 				payment_method: paymentMethod.id,
 			});
@@ -80,31 +91,45 @@ function PaymentForm({
 			return;
 		}
 
-		if (totalOrder > 0) {
-			const nonZeroPriceOutput = await Sales.finalizePayment(
-				orderNumber,
-				paymentMethodID,
-				// using paymentIntent here for greater than 0
-				result.paymentIntent.id,
-			);
-			if (nonZeroPriceOutput.status === "Paid") {
-				setFormStatus(FORM_STATUS.SUCCESS);
-				window.location.href = successURL;
+		if (!isPaymentMethodUpdate) {
+			if (totalOrder > 0) {
+				const nonZeroPriceOutput = await Sales.finalizePayment(
+					orderNumber,
+					paymentMethodID,
+					// using paymentIntent here for greater than 0
+					result.paymentIntent.id,
+				);
+				if (nonZeroPriceOutput.status === "Paid") {
+					setFormStatus(FORM_STATUS.SUCCESS);
+					window.location.href = successURL;
+				} else {
+					setFormStatus(FORM_STATUS.ERROR);
+				}
 			} else {
-				setFormStatus(FORM_STATUS.ERROR);
+				const zeroPriceOutput = await Sales.finalizePayment(
+					orderNumber,
+					paymentMethodID,
+					// using setupIntent here for 0
+					result.setupIntent.id,
+				);
+				// even if no money changes hands, still shows status 'Paid'
+				if (zeroPriceOutput.status === "Paid") {
+					setFormStatus(FORM_STATUS.SUCCESS);
+					window.location.href = successURL;
+				} else {
+					setFormStatus(FORM_STATUS.ERROR);
+				}
 			}
 		} else {
-			const zeroPriceOutput = await Sales.finalizePayment(
-				orderNumber,
-				paymentMethodID,
-				// using setupIntent here for 0
-				result.setupIntent.id,
-			);
-			// even if no money changes hands, still shows status 'Paid'
-			if (zeroPriceOutput.status === "Paid") {
+			try {
+				await Sales.finalizePaymentUpdate(
+					paymentID,
+					paymentMethodID,
+					result.setupIntent.id,
+				);
 				setFormStatus(FORM_STATUS.SUCCESS);
-				window.location.href = successURL;
-			} else {
+				window.location.href = successUpdateURL;
+			} catch (e) {
 				setFormStatus(FORM_STATUS.ERROR);
 			}
 		}
@@ -156,9 +181,13 @@ function PaymentForm({
 					variant="primary"
 					fullWidth
 					type="submit"
-					disabled={(formStatus === FORM_STATUS.PROCESSING || formStatus === FORM_STATUS.SUCCESS) ? true : null}
+					disabled={
+						formStatus === FORM_STATUS.PROCESSING || formStatus === FORM_STATUS.SUCCESS
+							? true
+							: null
+					}
 				>
-					{submitText}
+					{!isPaymentMethodUpdate ? submitText : updateText}
 				</Button>
 				{formStatus === FORM_STATUS.ERROR ? (
 					<section role="alert">

diff --git a/blocks/subscriptions-block/components/usePaymentOptions.jsx b/blocks/subscriptions-block/components/usePaymentOptions.jsx
@@ -63,4 +63,4 @@ export const usePaymentOptions = (stripeIntentsDefaultID, paypalDefaultID) => {
 	};
 };
 
-export default usePaymentOptions;
+export default usePaymentOptions;
diff --git a/blocks/subscriptions-block/components/usePaymentRedirect.jsx b/blocks/subscriptions-block/components/usePaymentRedirect.jsx
@@ -7,7 +7,7 @@ export const usePaymentRedirect = (
 	orderNumber,
 	token,
 	redirectURLParameterName = "parameter1",
-  successURL,
+  	successURL,
 ) => {
 	const { Sales } = useSales();
 
@@ -20,7 +20,7 @@ export const usePaymentRedirect = (
 			try {
 				const orderDetails = await Sales.getOrderDetails(orderNumber);
 				setCurrentOrder(orderDetails);
-				setCurrentMerchantId(paymentMethodType.paymentMethodID);
+				setCurrentMerchantId(paymentMethodType?.paymentMethodID);
 			} catch (e) {
 				setError(e);
 			}
@@ -34,7 +34,7 @@ export const usePaymentRedirect = (
 		const initPayment = async () => {
 			try {
 				const payment = await Sales.initializePayment(
-					currentOrder.orderNumber,
+					currentOrder?.orderNumber,
 					currentMerchantId,
 				);
 				window.location.href = payment[redirectURLParameterName];
@@ -64,4 +64,4 @@ export const usePaymentRedirect = (
 	}, [currentOrder, currentMerchantId, token]);
 
 	return { error };
-};
+};
-Original file line number
+Diff line change
@@ Expand Up @@
     	};
     };
-    export default usePaymentOptions;
+    export default usePaymentOptions;