Improvement update payment method - missing message (#1839)

improvement update payment method- missing message
WPMedia · Dec 7, 2023 · 0d88d63 · 0d88d63
1 parent 31693a8
commit 0d88d63
Showing 1 changed file with 27 additions and 9 deletions.
diff --git a/blocks/subscriptions-block/features/checkout/_children/PaymentInfo/index.jsx b/blocks/subscriptions-block/features/checkout/_children/PaymentInfo/index.jsx
@@ -6,7 +6,13 @@ import useSales from "../../../../components/useSales";
 import PayPal from "../../../../components/PayPal";
 import { LABEL_ORDER_NUMBER_PAYPAL } from "../../default";
 
-import { usePhrases, Heading, HeadingSection, Paragraph, useIdentity } from "@wpmedia/arc-themes-components";
+import {
+	usePhrases,
+	Heading,
+	HeadingSection,
+	Paragraph,
+	useIdentity,
+} from "@wpmedia/arc-themes-components";
 
 import PaymentForm from "../../../../components/PaymentForm";
 import usePaymentOptions from "../../../../components/usePaymentOptions";
@@ -20,16 +26,16 @@ const PaymentInfo = ({
 	isInitialized,
 	successUpdateURL,
 	isPaymentMethodUpdate = false,
-	loginURL
+	loginURL,
 }) => {
-
 	const { Sales } = useSales();
 	const { Identity } = useIdentity();
 	const { stripeIntents, paypal, error } = usePaymentOptions(stripeIntentsID);
 
 	const [stripeInstance, setStripeInstance] = useState(null);
 
 	const [isStripeInitialized, setIsStripeInitialized] = useState(false);
+	const [errorInitialize, setErrorInitialize] = useState();
 	const [isPayPal, setIsPayPal] = useState(false);
 
 	const [orderNumber, setOrderNumber] = useState();
@@ -53,7 +59,12 @@ const PaymentInfo = ({
 		if (isPaymentMethodUpdate) {
 			const urlParams = new URLSearchParams(window.location.href);
 			const pmID = urlParams.get("paymentMethodID");
-			setPaymentID(pmID);
+
+			if (!!pmID) {
+				setPaymentID(pmID);
+			}else{
+				setErrorInitialize({message: "paymentMethodID is required"});
+			}
 		}
 	}, [isPaymentMethodUpdate]);
 
@@ -73,21 +84,23 @@ const PaymentInfo = ({
 								Sales.initializePayment(order.orderNumber, stripeIntents?.paymentMethodID).then(
 									(paymentObject) => {
 										setPayment(paymentObject);
+										setErrorInitialize();
 									},
 								);
 							})
-							.catch((e) => console.error(e));
+							.catch((e) => setErrorInitialize(e));
 					}
 				});
 			}
 
 			//Update payment method
 			if (stripeIntents?.paymentMethodID && isPaymentMethodUpdate && paymentID) {
-				Sales.initializePaymentUpdate(paymentID, stripeIntents?.paymentMethodID).then(
-					(paymentObject) => {
+				Sales.initializePaymentUpdate(paymentID, stripeIntents?.paymentMethodID)
+					.then((paymentObject) => {
 						setPayment(paymentObject);
-					},
-				);
+						setErrorInitialize();
+					})
+					.catch((e) => setErrorInitialize(e));
 			}
 		}
 	}, [stripeIntents, isPaymentMethodUpdate, paymentID, error, isInitialized]);
@@ -205,6 +218,11 @@ const PaymentInfo = ({
 					<Paragraph>{error}</Paragraph>
 				</section>
 			)}
+			{errorInitialize && (
+				<section role="alert">
+					<Paragraph>{errorInitialize?.message}</Paragraph>
+				</section>
+			)}
 		</div>
 	);
 };