@akinon/pz-flow-payment 2.0.6-rc.2 → 2.0.7-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -8
- package/package.json +1 -1
- package/src/views/index.tsx +40 -62
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
package/src/views/index.tsx
CHANGED
|
@@ -76,10 +76,7 @@ export default function FlowPayment({
|
|
|
76
76
|
const dispatch = useAppDispatch();
|
|
77
77
|
const flowComponentRef = useRef<any>(null);
|
|
78
78
|
const lastAmountRef = useRef<string | null>(null);
|
|
79
|
-
const lastSessionRef = useRef<unknown>(null);
|
|
80
|
-
const prevUnpaidRef = useRef(parseFloat(preOrder.unpaid_amount || '0') || 0);
|
|
81
79
|
const isInitializingRef = useRef<boolean>(false);
|
|
82
|
-
const walletInitInFlightRef = useRef<boolean>(false);
|
|
83
80
|
const [errors, setErrors] = useState<any>(null);
|
|
84
81
|
const [walletSelectionReady, setWalletSelectionReady] =
|
|
85
82
|
useState<boolean>(false);
|
|
@@ -91,51 +88,45 @@ export default function FlowPayment({
|
|
|
91
88
|
}, [preOrder.total_amount]);
|
|
92
89
|
|
|
93
90
|
const initWalletSelection = async () => {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
)
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
'Payment method not available. Please try a different payment option.'
|
|
113
|
-
);
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// Initialize wallet payment page to get payment session data
|
|
118
|
-
const walletPaymentPageResponse = await dispatch(
|
|
119
|
-
checkoutApi.endpoints.setWalletPaymentPage.initiate({
|
|
120
|
-
payment_method: 'checkout_flow',
|
|
121
|
-
wallet_method: preOrder.wallet_method
|
|
122
|
-
})
|
|
123
|
-
).unwrap();
|
|
124
|
-
|
|
125
|
-
if (walletPaymentPageResponse.errors) {
|
|
126
|
-
setErrors(walletPaymentPageResponse.errors);
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
91
|
+
const walletSelectionPageResponse = await dispatch(
|
|
92
|
+
checkoutApi.endpoints.setWalletSelectionPage.initiate({
|
|
93
|
+
payment_option: preOrder.payment_option?.pk
|
|
94
|
+
})
|
|
95
|
+
).unwrap();
|
|
96
|
+
|
|
97
|
+
const walletPaymentPageContext =
|
|
98
|
+
walletSelectionPageResponse.context_list.find(
|
|
99
|
+
(c) => c.page_name === 'WalletPaymentPage'
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
if (!walletPaymentPageContext) {
|
|
103
|
+
setErrors(
|
|
104
|
+
'Payment method not available. Please try a different payment option.'
|
|
105
|
+
);
|
|
106
|
+
setWalletSelectionReady(false);
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
129
109
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
110
|
+
// Initialize wallet payment page to get payment session data
|
|
111
|
+
const walletPaymentPageResponse = await dispatch(
|
|
112
|
+
checkoutApi.endpoints.setWalletPaymentPage.initiate({
|
|
113
|
+
payment_method: 'checkout_flow',
|
|
114
|
+
wallet_method: preOrder.wallet_method
|
|
115
|
+
})
|
|
116
|
+
).unwrap();
|
|
117
|
+
|
|
118
|
+
if (walletPaymentPageResponse.errors) {
|
|
119
|
+
setErrors(walletPaymentPageResponse.errors);
|
|
120
|
+
setWalletSelectionReady(false);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
134
123
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
124
|
+
// Store the order number from the wallet payment page response
|
|
125
|
+
if (walletPaymentPageResponse.pre_order?.number) {
|
|
126
|
+
setOrderNumber(walletPaymentPageResponse.pre_order.number);
|
|
138
127
|
}
|
|
128
|
+
|
|
129
|
+
setWalletSelectionReady(true);
|
|
139
130
|
};
|
|
140
131
|
|
|
141
132
|
// Reset payment state and get a fresh orderNumber + payment session for retry
|
|
@@ -202,13 +193,9 @@ export default function FlowPayment({
|
|
|
202
193
|
return;
|
|
203
194
|
}
|
|
204
195
|
|
|
205
|
-
//
|
|
206
|
-
if (
|
|
207
|
-
|
|
208
|
-
lastSessionRef.current === preOrder.context_extras &&
|
|
209
|
-
flowComponentRef.current
|
|
210
|
-
) {
|
|
211
|
-
return;
|
|
196
|
+
// Check if amount has actually changed
|
|
197
|
+
if (lastAmountRef.current === currentAmount && flowComponentRef.current) {
|
|
198
|
+
return; // Don't recreate component if amount hasn't changed
|
|
212
199
|
}
|
|
213
200
|
|
|
214
201
|
isInitializingRef.current = true;
|
|
@@ -241,9 +228,8 @@ export default function FlowPayment({
|
|
|
241
228
|
return;
|
|
242
229
|
}
|
|
243
230
|
|
|
244
|
-
// Update
|
|
231
|
+
// Update the last amount reference after getting fresh data
|
|
245
232
|
lastAmountRef.current = currentAmount;
|
|
246
|
-
lastSessionRef.current = paymentSession;
|
|
247
233
|
|
|
248
234
|
const checkout = await loadCheckoutWebComponents({
|
|
249
235
|
publicKey,
|
|
@@ -281,14 +267,6 @@ export default function FlowPayment({
|
|
|
281
267
|
initWalletSelection();
|
|
282
268
|
}, []);
|
|
283
269
|
|
|
284
|
-
// Re-init wallet selection when unpaid amount actually changes
|
|
285
|
-
useEffect(() => {
|
|
286
|
-
const current = parseFloat(preOrder.unpaid_amount || '0') || 0;
|
|
287
|
-
if (prevUnpaidRef.current === current) return;
|
|
288
|
-
prevUnpaidRef.current = current;
|
|
289
|
-
initWalletSelection();
|
|
290
|
-
}, [preOrder.unpaid_amount]);
|
|
291
|
-
|
|
292
270
|
useEffect(() => {
|
|
293
271
|
if (
|
|
294
272
|
!preOrder.wallet_method ||
|