103 lines
3.6 KiB
JavaScript
103 lines
3.6 KiB
JavaScript
import React, { useEffect, useCallback, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Card, CardBody, Row, Col } from 'reactstrap';
|
|
import FalconCardHeader from '../common/FalconCardHeader';
|
|
import { useTranslation } from 'react-i18next';
|
|
import JKAffiliatePayeeAddress from './JKAffiliatePayeeAddress';
|
|
import JKAffiliatePayeeVenmo from './JKAffiliatePayeeVenmo';
|
|
import JKAffiliatePayeeTax from './JKAffiliatePayeeTax';
|
|
import { useAuth } from '../../context/UserAuth';
|
|
import { getAffiliatePartnerData } from '../../helpers/rest';
|
|
import { useIsMounted } from '../../hooks/useIsMounted';
|
|
import { postAffiliatePartnerData } from '../../helpers/rest';
|
|
import { toast } from 'react-toastify';
|
|
|
|
const JKAffiliatePayee = () => {
|
|
const { t } = useTranslation('affiliate');
|
|
const { currentUser } = useAuth();
|
|
const [affiliateUser, setAffiliateUser] = useState(null);
|
|
const [notAffiliate, setNotAffiliate] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const isMounted = useIsMounted();
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
const fetchAffiliatePartnerData = useCallback(async userId => {
|
|
if (!userId) {
|
|
return;
|
|
}
|
|
try {
|
|
setLoading(true);
|
|
const response = await getAffiliatePartnerData(userId);
|
|
const affiliate = await response.json();
|
|
setAffiliateUser(affiliate.account);
|
|
} catch (error) {
|
|
console.error('Error fetching affiliate partner data:', error);
|
|
if (error && error.status === 400) {
|
|
// If the affiliate partner data is not found, set the affiliate user to null
|
|
setAffiliateUser(null);
|
|
setNotAffiliate(true);
|
|
}
|
|
}finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const onSubmit = data => {
|
|
//post
|
|
setSubmitting(true);
|
|
const params = { ...affiliateUser, ...data};
|
|
setAffiliateUser(params);
|
|
postAffiliatePartnerData(currentUser.id, params).then(response => {
|
|
if(response.ok) {
|
|
// Show success message
|
|
console.log('Affiliate partner data updated successfully');
|
|
toast.success(t('payee.save_success'));
|
|
}
|
|
|
|
}).catch(error => {
|
|
console.error('Error updating affiliate partner data:', error);
|
|
toast.error(t('payee.save_error'));
|
|
|
|
}).finally(() => {
|
|
setSubmitting(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Fetch affiliate payee data
|
|
if (currentUser) {
|
|
fetchAffiliatePartnerData(currentUser.id);
|
|
}
|
|
}, [currentUser]);
|
|
|
|
return (
|
|
<Card>
|
|
<FalconCardHeader title={t('payee.page_title')} titleClass="font-weight-bold" />
|
|
<CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
|
|
{!isMounted || loading ? <p>Loading...</p> : notAffiliate ? (
|
|
<Row>
|
|
<Col>
|
|
<p>{t('payee.not_affiliate')}</p>
|
|
<Link to="/affiliate/program">Learn how you can earn cash simply by telling your friends and followers about JamKazam.</Link>
|
|
</Col>
|
|
</Row>
|
|
) : (
|
|
<Row>
|
|
<Col className='mb-2 col-12 col-md-6 col-lg-4'>
|
|
<JKAffiliatePayeeAddress affiliateUser={affiliateUser} onSubmit={onSubmit} submitting={submitting} />
|
|
</Col>
|
|
<Col>
|
|
<JKAffiliatePayeeVenmo affiliateUser={affiliateUser} onSubmit={onSubmit} submitting={submitting} />
|
|
<div className='mb-2' />
|
|
<JKAffiliatePayeeTax affiliateUser={affiliateUser} onSubmit={onSubmit} submitting={submitting} />
|
|
</Col>
|
|
<Col className='d-none d-lg-block' />
|
|
</Row>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default JKAffiliatePayee;
|