scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Donate button works as toggle

Browse source
This commit is contained in:
Ben Grant 2021-06-06 21:39:31 +10:00
parent 144e1fcd7c
commit acdf932773
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
crabfit-frontend/src/components/Donate/Donate.tsx
View file

@ -20,6 +20,7 @@ const Donate = () => {
const firstLinkRef = useRef(); const firstLinkRef = useRef();
const modalRef = useRef(); const modalRef = useRef();
const [isOpen, _setIsOpen] = useState(false); const [isOpen, _setIsOpen] = useState(false);
const [closed, setClosed] = useState(false);
const setIsOpen = open => { const setIsOpen = open => {
_setIsOpen(open); _setIsOpen(open);
@ -100,6 +101,10 @@ const Donate = () => {
small small
title={t('donate.title')} title={t('donate.title')}
onClick={event => { onClick={event => {
if (closed) {
event.preventDefault();
return setClosed(false);
}
if (store.TWA) { if (store.TWA) {
gtag('event', 'donate', { 'event_category': 'donate' }); gtag('event', 'donate', { 'event_category': 'donate' });
event.preventDefault(); event.preventDefault();
@ -116,6 +121,7 @@ const Donate = () => {
href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5" href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
id="donate_button"
style={{ whiteSpace: 'nowrap' }} style={{ whiteSpace: 'nowrap' }}
>{t('donate.button')}</Button> >{t('donate.button')}</Button>
@ -125,6 +131,9 @@ const Donate = () => {
onBlur={e => { onBlur={e => {
if (modalRef.current.contains(e.relatedTarget)) return; if (modalRef.current.contains(e.relatedTarget)) return;
setIsOpen(false); setIsOpen(false);
if (e.relatedTarget && e.relatedTarget.id === 'donate_button') {
setClosed(true);
}
}} }}
> >
<img src={paypal_logo} alt="Donate with PayPal" /> <img src={paypal_logo} alt="Donate with PayPal" />