fix payment method page element loading
this resolves the race condition issue when loading recurly payment element and hence sometimes it wasn't showing
This commit is contained in:
Nuwan
parent
a84a55f178
commit
d424026f17
|
|
@ -16,7 +16,7 @@ import iconPaypalFull from '../../assets/img/icons/icon-paypal-full.png';
|
|||
import { toast } from 'react-toastify';
|
||||
import { updatePayment } from '../../helpers/rest';
|
||||
import { useAuth } from '../../context/UserAuth';
|
||||
import { getBillingInfo, updateBillingInfo, getUserDetail, getCountries } from '../../helpers/rest';
|
||||
import { getBillingInfo, getUserDetail, getCountries } from '../../helpers/rest';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import Select from 'react-select';
|
||||
import { useResponsive } from '@farfetch/react-context-responsive';
|
||||
|
|
@ -30,7 +30,6 @@ const JKPaymentMethod = () => {
|
|||
const [countries, setCountries] = useState([]);
|
||||
const labelClassName = 'ls text-600 font-weight-semi-bold mb-0';
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [billingDataLoaded, setBillingDataLoaded] = useState(false);
|
||||
const [isCardValid, setIsCardValid] = useState(false);
|
||||
const { greaterThan } = useResponsive();
|
||||
|
||||
|
|
@ -74,7 +73,6 @@ const JKPaymentMethod = () => {
|
|||
if (userData.has_recurly_account) {
|
||||
setHasStoredCreditCard(userData['has_stored_credit_card?']);
|
||||
await populateBillingAddress();
|
||||
setBillingDataLoaded(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get user details:', error);
|
||||
|
|
@ -128,46 +126,36 @@ const JKPaymentMethod = () => {
|
|||
setValue('country', selectedOption.value);
|
||||
};
|
||||
|
||||
const recurlyContainerRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.recurly) return;
|
||||
if (!recurlyContainerRef.current || !window.recurly || recurlyConfigured.current) return;
|
||||
|
||||
if (recurlyConfigured.current) return;
|
||||
window.recurly.configure({ publicKey: process.env.REACT_APP_RECURLY_PUBLIC_API_KEY });
|
||||
const elements = window.recurly.Elements();
|
||||
const cardElement = elements.CardElement();
|
||||
|
||||
const interval = setInterval(() => {
|
||||
const container = document.querySelector('#recurly-elements');
|
||||
console.log('Checking for Recurly Elements container:', container);
|
||||
if (container && window.recurly) {
|
||||
console.log('Initializing Recurly Elements...');
|
||||
window.recurly.configure({ publicKey: process.env.REACT_APP_RECURLY_PUBLIC_API_KEY });
|
||||
const elements = window.recurly.Elements();
|
||||
const cardElement = elements.CardElement();
|
||||
cardElement.attach('#recurly-elements');
|
||||
cardElement.attach(recurlyContainerRef.current);
|
||||
|
||||
cardElement.on('change', (event) => {
|
||||
if (event.complete) {
|
||||
setIsCardValid(true);
|
||||
} else if (event.error) {
|
||||
setIsCardValid(false);
|
||||
} else {
|
||||
setIsCardValid(false);
|
||||
}
|
||||
});
|
||||
cardElement.on('change', (event) => {
|
||||
setIsCardValid(event.complete && !event.error);
|
||||
});
|
||||
|
||||
//then load paypal:
|
||||
const paypalInst = window.recurly.PayPal({ braintree: { clientAuthorization: process.env.REACT_APP_BRAINTREE_TOKEN } })
|
||||
paypal.current = paypalInst;
|
||||
paypal.current.on('error', onPayPalError);
|
||||
paypal.current.on('token', onPayPalToken);
|
||||
//then load paypal:
|
||||
const paypalInst = window.recurly.PayPal({ braintree: { clientAuthorization: process.env.REACT_APP_BRAINTREE_TOKEN } })
|
||||
paypal.current = paypalInst;
|
||||
paypal.current.on('error', onPayPalError);
|
||||
paypal.current.on('token', onPayPalToken);
|
||||
|
||||
elementsRef.current = elements;
|
||||
recurlyConfigured.current = true;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 100);
|
||||
elementsRef.current = elements;
|
||||
recurlyConfigured.current = true;
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
return () => {
|
||||
// Optional cleanup if the component unmounts
|
||||
recurlyContainerRef.current.innerHTML = '';
|
||||
recurlyConfigured.current = false;
|
||||
};
|
||||
}, [recurlyContainerRef.current]);
|
||||
|
||||
const onPayPalError = (error) => {
|
||||
console.error('PayPal Error:', error);
|
||||
|
|
@ -196,67 +184,9 @@ const JKPaymentMethod = () => {
|
|||
});
|
||||
};
|
||||
|
||||
// const onSubmit = async (data) => {
|
||||
// //first update billing address
|
||||
// setSubmitting(true);
|
||||
// const resp = await updateBillingInfo(data)
|
||||
// if (!resp.ok) {
|
||||
// setSubmitting(false);
|
||||
// const errorData = await resp.json();
|
||||
// console.error('Error updating billing info:', errorData);
|
||||
// toast.error(errorData.message || t('payment_method.alerts.billing_update_error'));
|
||||
// return;
|
||||
// }
|
||||
// if (paymentMethod === 'paypal') {
|
||||
// handoverToPaypal();
|
||||
// return;
|
||||
// } else {
|
||||
|
||||
// if (!elementsRef.current) {
|
||||
// console.error('Recurly elementsRef.current is not ready');
|
||||
// setSubmitting(false);
|
||||
// return;
|
||||
// }
|
||||
// if (!formRef.current) {
|
||||
// console.error('formRef.current is not ready');
|
||||
// setSubmitting(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // if (!isCardValid) {
|
||||
// // console.error('Card is not valid');
|
||||
// // toast.error(t('payment_method.validations.card.invalid'));
|
||||
// // setSubmitting(false);
|
||||
// // return;
|
||||
// // }
|
||||
|
||||
// window.recurly.token(elementsRef.current, formRef.current, (err, token) => {
|
||||
// if (err) {
|
||||
// console.error('Recurly token error:', err);
|
||||
// toast.error(err.message || t('payment_method.alerts.card_processing_error'));
|
||||
// setSubmitting(false);
|
||||
// } else {
|
||||
// console.log('Recurly token:', token.id);
|
||||
// // send token.id to backend
|
||||
// handleUpdatePayment(token);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// };
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
//first update billing address
|
||||
const onSubmit = async (data) => {
|
||||
setSubmitting(true);
|
||||
// const resp = await updateBillingInfo(data)
|
||||
// if (!resp.ok) {
|
||||
// setSubmitting(false);
|
||||
// const errorData = await resp.json();
|
||||
// console.error('Error updating billing info:', errorData);
|
||||
// toast.error(errorData.message || t('payment_method.alerts.billing_update_error'));
|
||||
// return;
|
||||
// }
|
||||
if (paymentMethod === 'paypal') {
|
||||
if (paymentMethod === 'paypal') { // PayPal payment method
|
||||
handoverToPaypal();
|
||||
return;
|
||||
} else { // Credit Card payment method
|
||||
|
|
@ -319,7 +249,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="first_name" className={labelClassName}>
|
||||
{t('payment_method.first_name')}
|
||||
{t('payment_method.first_name')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -334,7 +264,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="last_name" className={labelClassName}>
|
||||
{t('payment_method.last_name')}
|
||||
{t('payment_method.last_name')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -349,7 +279,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="address1" className={labelClassName}>
|
||||
{t('payment_method.address1')}
|
||||
{t('payment_method.address1')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -364,7 +294,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="address2" className={labelClassName}>
|
||||
{t('payment_method.address2')}
|
||||
{t('payment_method.address2')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -379,7 +309,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="city" className={labelClassName}>
|
||||
{t('payment_method.city')}
|
||||
{t('payment_method.city')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -394,7 +324,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="state" className={labelClassName}>
|
||||
{t('payment_method.state')}
|
||||
{t('payment_method.state')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -409,7 +339,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="zip" className={labelClassName}>
|
||||
{t('payment_method.zip_code')}
|
||||
{t('payment_method.zip_code')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -427,7 +357,7 @@ const JKPaymentMethod = () => {
|
|||
<Row className="mb-2">
|
||||
<Col xs={12} md={5} lg={4} className="text-md-right">
|
||||
<Label for="country" className={labelClassName}>
|
||||
{t('payment_method.country')}
|
||||
{t('payment_method.country')}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -490,7 +420,7 @@ const JKPaymentMethod = () => {
|
|||
</Row>
|
||||
<Row>
|
||||
<Col sm={8}>
|
||||
<div id="recurly-elements"></div>
|
||||
<div id="recurly-elements" ref={recurlyContainerRef}></div>
|
||||
{!isCardValid && errors.recurly && (
|
||||
<div className="text-danger">
|
||||
<small>{errors.recurly.message}</small>
|
||||
|
|
@ -522,7 +452,7 @@ const JKPaymentMethod = () => {
|
|||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={ submitting }
|
||||
disabled={submitting}
|
||||
className="mt-3"
|
||||
>
|
||||
{submitting ? t('payment_method.submitting') : t('payment_method.save_payment_info')}
|
||||
|
|
|
|||
Loading…
Reference in New Issue