seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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 2025-08-20 20:31:44 +05:30
parent a84a55f178
commit d424026f17
1 changed files with 36 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
jam-ui/src/components/page/JKPaymentMethod.js
View File

@ -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,30 +126,19 @@ 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;
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);
}
setIsCardValid(event.complete && !event.error);
});
//then load paypal:
@ -162,12 +149,13 @@ const JKPaymentMethod = () => {
elementsRef.current = elements;
recurlyConfigured.current = true;
clearInterval(interval);
}
}, 100);
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
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
@ -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>