From 6ad94724346042378237af84457aa576bffa0b8d Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Wed, 5 May 2021 22:21:27 +1000 Subject: [PATCH] Donate options --- .../AvailabilityViewer/AvailabilityViewer.tsx | 2 +- .../src/components/Donate/Donate.tsx | 7 +++-- .../src/components/Footer/Footer.tsx | 28 +++++++++++++++++++ .../src/components/Footer/footerStyle.ts | 23 +++++++++++++++ crabfit-frontend/src/components/index.ts | 1 + crabfit-frontend/src/pages/Event/Event.tsx | 8 ++---- .../src/pages/Event/eventStyle.ts | 9 ------ crabfit-frontend/src/pages/Help/Help.tsx | 8 ++---- crabfit-frontend/src/pages/Help/helpStyle.ts | 9 ------ crabfit-frontend/src/pages/Home/Home.tsx | 12 +++----- crabfit-frontend/src/pages/Home/homeStyle.ts | 9 ------ .../src/pages/Privacy/Privacy.tsx | 8 ++---- 12 files changed, 68 insertions(+), 56 deletions(-) create mode 100644 crabfit-frontend/src/components/Footer/Footer.tsx create mode 100644 crabfit-frontend/src/components/Footer/footerStyle.ts diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index 81dfabe..fad5a09 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -62,7 +62,7 @@ const AvailabilityViewer = ({ onSegmentFocus={count => setFocusCount(count)} />
Hover or tap the calendar below to see who is available
- {!!people.length && ( + {people.length > 1 && ( <>
Click the names below to view people individually
diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index 5d0b194..db42fb3 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -5,7 +5,7 @@ import { useTWAStore } from 'stores'; const PAYMENT_METHOD = 'https://play.google.com/billing'; const SKU = 'crab_donation'; -const Donate = () => { +const Donate = ({ onDonate = null }) => { const store = useTWAStore(); useEffect(() => { @@ -80,9 +80,12 @@ const Donate = () => { alert('Cannot make donation through Google. Please try donating through the website crab.fit 🦀'); } } + } else if (onDonate !== null) { + event.preventDefault(); + onDonate(); } }} - href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD" + href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer" > diff --git a/crabfit-frontend/src/components/Footer/Footer.tsx b/crabfit-frontend/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..388a484 --- /dev/null +++ b/crabfit-frontend/src/components/Footer/Footer.tsx @@ -0,0 +1,28 @@ +import { useState } from 'react'; + +import { Donate } from 'components'; +import { Wrapper, Link } from './footerStyle'; + +const Footer = () => { + const [donateMode, setDonateMode] = useState(false); + + return ( + + ); +}; + +export default Footer; diff --git a/crabfit-frontend/src/components/Footer/footerStyle.ts b/crabfit-frontend/src/components/Footer/footerStyle.ts new file mode 100644 index 0000000..b15a9e1 --- /dev/null +++ b/crabfit-frontend/src/components/Footer/footerStyle.ts @@ -0,0 +1,23 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.footer` + width: 600px; + margin: 20px auto; + max-width: calc(100% - 60px); + display: flex; + align-items: center; + justify-content: space-between; + + ${props => props.donateMode && ` + flex-wrap: wrap; + `} +`; + +export const Link = styled.a` + padding: 11px 10px; + white-space: nowrap; + + & strong { + font-weight: 800; + } +`; diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts index ada1a57..0d60028 100644 --- a/crabfit-frontend/src/components/index.ts +++ b/crabfit-frontend/src/components/index.ts @@ -15,3 +15,4 @@ export { default as Center } from './Center/Center'; export { default as Donate } from './Donate/Donate'; export { default as Settings } from './Settings/Settings'; export { default as Egg } from './Egg/Egg'; +export { default as Footer } from './Footer/Footer'; diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index 2d4c8e8..a0184e1 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/crabfit-frontend/src/pages/Event/Event.tsx @@ -9,7 +9,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat'; import { Center, - Donate, + Footer, TextField, SelectField, Button, @@ -20,7 +20,6 @@ import { import { StyledMain, - Footer, Logo, Title, EventName, @@ -442,10 +441,7 @@ const Event = (props) => { )} -
- Thank you for using Crab Fit. If you like it, consider donating. - -
+