@akinon/pz-flow-payment 2.0.7 → 2.0.8-rc.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-flow-payment
 
+## 2.0.8-rc.0
+
+### Patch Changes
+
+- b02e7a7a: BRDG-16653: Re-init wallet selection when loyalty amount changes
+
 ## 2.0.7
 
 ## 2.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "2.0.7",
+  "version": "2.0.8-rc.0",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -76,7 +76,10 @@ export default function FlowPayment({
   const dispatch = useAppDispatch();
   const flowComponentRef = useRef<any>(null);
   const lastAmountRef = useRef<string | null>(null);
+  const lastSessionRef = useRef<unknown>(null);
+  const prevUnpaidRef = useRef(parseFloat(preOrder.unpaid_amount || '0') || 0);
   const isInitializingRef = useRef<boolean>(false);
+  const walletInitInFlightRef = useRef<boolean>(false);
   const [errors, setErrors] = useState<any>(null);
   const [walletSelectionReady, setWalletSelectionReady] =
     useState<boolean>(false);
@@ -88,45 +91,51 @@ export default function FlowPayment({
   }, [preOrder.total_amount]);
 
   const initWalletSelection = async () => {
-    const walletSelectionPageResponse = await dispatch(
-      checkoutApi.endpoints.setWalletSelectionPage.initiate({
-        payment_option: preOrder.payment_option?.pk
-      })
-    ).unwrap();
-
-    const walletPaymentPageContext =
-      walletSelectionPageResponse.context_list.find(
-        (c) => c.page_name === 'WalletPaymentPage'
-      );
-
-    if (!walletPaymentPageContext) {
-      setErrors(
-        'Payment method not available. Please try a different payment option.'
-      );
-      setWalletSelectionReady(false);
-      return;
-    }
+    if (walletInitInFlightRef.current) return;
+    walletInitInFlightRef.current = true;
+    setWalletSelectionReady(false);
 
-    // Initialize wallet payment page to get payment session data
-    const walletPaymentPageResponse = await dispatch(
-      checkoutApi.endpoints.setWalletPaymentPage.initiate({
-        payment_method: 'checkout_flow',
-        wallet_method: preOrder.wallet_method
-      })
-    ).unwrap();
-
-    if (walletPaymentPageResponse.errors) {
-      setErrors(walletPaymentPageResponse.errors);
-      setWalletSelectionReady(false);
-      return;
-    }
+    try {
+      const walletSelectionPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletSelectionPage.initiate({
+          payment_option: preOrder.payment_option?.pk
+        })
+      ).unwrap();
 
-    // Store the order number from the wallet payment page response
-    if (walletPaymentPageResponse.pre_order?.number) {
-      setOrderNumber(walletPaymentPageResponse.pre_order.number);
-    }
+      const walletPaymentPageContext =
+        walletSelectionPageResponse.context_list.find(
+          (c) => c.page_name === 'WalletPaymentPage'
+        );
+
+      if (!walletPaymentPageContext) {
+        setErrors(
+          'Payment method not available. Please try a different payment option.'
+        );
+        return;
+      }
+
+      // Initialize wallet payment page to get payment session data
+      const walletPaymentPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletPaymentPage.initiate({
+          payment_method: 'checkout_flow',
+          wallet_method: preOrder.wallet_method
+        })
+      ).unwrap();
+
+      if (walletPaymentPageResponse.errors) {
+        setErrors(walletPaymentPageResponse.errors);
+        return;
+      }
+
+      // Store the order number from the wallet payment page response
+      if (walletPaymentPageResponse.pre_order?.number) {
+        setOrderNumber(walletPaymentPageResponse.pre_order.number);
+      }
 
-    setWalletSelectionReady(true);
+      setWalletSelectionReady(true);
+    } finally {
+      walletInitInFlightRef.current = false;
+    }
   };
 
   // Reset payment state and get a fresh orderNumber + payment session for retry
@@ -193,9 +202,13 @@ export default function FlowPayment({
       return;
     }
 
-    // Check if amount has actually changed
-    if (lastAmountRef.current === currentAmount && flowComponentRef.current) {
-      return; // Don't recreate component if amount hasn't changed
+    // Skip if neither amount nor payment session has changed
+    if (
+      lastAmountRef.current === currentAmount &&
+      lastSessionRef.current === preOrder.context_extras &&
+      flowComponentRef.current
+    ) {
+      return;
     }
 
     isInitializingRef.current = true;
@@ -228,8 +241,9 @@ export default function FlowPayment({
         return;
       }
 
-      // Update the last amount reference after getting fresh data
+      // Update tracking refs after getting fresh data
       lastAmountRef.current = currentAmount;
+      lastSessionRef.current = paymentSession;
 
       const checkout = await loadCheckoutWebComponents({
         publicKey,
@@ -267,6 +281,14 @@ export default function FlowPayment({
     initWalletSelection();
   }, []);
 
+  // Re-init wallet selection when unpaid amount actually changes
+  useEffect(() => {
+    const current = parseFloat(preOrder.unpaid_amount || '0') || 0;
+    if (prevUnpaidRef.current === current) return;
+    prevUnpaidRef.current = current;
+    initWalletSelection();
+  }, [preOrder.unpaid_amount]);
+
   useEffect(() => {
     if (
       !preOrder.wallet_method ||