Donate options

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -62,7 +62,7 @@ const AvailabilityViewer = ({
           onSegmentFocus={count => setFocusCount(count)}
         />
         <Center>Hover or tap the calendar below to see who is available</Center>
-        {!!people.length && (
+        {people.length > 1 && (
           <>
             <Center>Click the names below to view people individually</Center>
             <People>

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&currency_code=AUD"
+        href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5"
         target="_blank"
         rel="noreferrer"
       >

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 (
+    <Wrapper id="donate" donateMode={donateMode}>
+      {donateMode ? (
+        <>
+          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=2" target="_blank">Donate $2</Link>
+          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5" target="_blank"><strong>Donate $5</strong></Link>
+          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=10" target="_blank">Donate $10</Link>
+          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank">Choose an amount</Link>
+        </>
+      ) : (
+        <>
+          <span>Thank you for using Crab Fit. If you like it, consider donating.</span>
+          <Donate onDonate={() => setDonateMode(true)} />
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+export default Footer;

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;
+  }
+`;

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';

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) => {
 				</>
 			)}
 
-			<Footer id="donate">
+			<Footer />
-				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
-				<Donate />
-			</Footer>
 		</>
 	);
 };

crabfit-frontend/src/pages/Event/eventStyle.ts

@@ -6,15 +6,6 @@ export const StyledMain = styled.div`
 	max-width: calc(100% - 60px);
 `;
 
-export const Footer = styled.footer`
-	width: 600px;
-	margin: 50px auto 20px;
-	max-width: calc(100% - 60px);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-`;
-
 export const Logo = styled.img`
 	width: 2.5rem;
 	margin-right: 16px;

crabfit-frontend/src/pages/Help/Help.tsx

@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
 import {
 	Button,
 	Center,
-	Donate,
+	Footer,
   AvailabilityViewer,
   Legend,
 } from 'components';
@@ -14,7 +14,6 @@ import {
 	Logo,
   Title,
 	AboutSection,
-	Footer,
 	P,
   Step,
   FakeCalendar,
@@ -94,10 +93,7 @@ const Help = () => {
 				</StyledMain>
 			</AboutSection>
 
-			<Footer id="donate">
+			<Footer />
-				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
-				<Donate />
-			</Footer>
 		</>
 	);
 };

crabfit-frontend/src/pages/Help/helpStyle.ts

@@ -27,15 +27,6 @@ export const AboutSection = styled.section`
 	padding: 20px 0;
 `;
 
-export const Footer = styled.footer`
-	width: 600px;
-	margin: 20px auto;
-	max-width: calc(100% - 60px);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-`;
-
 export const P = styled.p`
 	font-weight: 500;
 	line-height: 1.6em;

crabfit-frontend/src/pages/Home/Home.tsx

@@ -14,8 +14,8 @@ import {
 	SelectField,
 	Button,
 	Center,
-	Donate,
 	Error,
+  Footer,
 } from 'components';
 
 import {
@@ -26,7 +26,6 @@ import {
 	Logo,
 	Links,
 	AboutSection,
-	Footer,
 	P,
 	Stats,
 	Stat,
@@ -245,18 +244,15 @@ const Home = ({ offline }) => {
 					</Stats>
 					<P>Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<br /><Link to="/how-to">Learn more about how to Crab Fit</Link>.</P>
 					{/* eslint-disable-next-line */}
-					<P>Create a lot of Crab Fits? Get the <a href="https://chrome.google.com/webstore/detail/crab-fit/pnafiibmjbiljofcpjlbonpgdofjhhkj" target="_blank">Chrome extension</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/crab-fit/" target="_blank">Firefox extension</a> for your browser!</P>
+					<P>Create a lot of Crab Fits? Get the <a href="https://chrome.google.com/webstore/detail/crab-fit/pnafiibmjbiljofcpjlbonpgdofjhhkj" target="_blank">Chrome extension</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/crab-fit/" target="_blank">Firefox extension</a> for your browser! You can also download the <a href="https://play.google.com/store/apps/details?id=fit.crab" target="_blank">Android app</a> to Crab Fit on the go.</P>
           {/* eslint-disable-next-line */}
 					<P>Created by <a href="https://bengrant.dev" target="_blank">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</P>
-					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>.</P>
+					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>. By using Crab Fit you agree to the <Link to="/privacy">privacy policy</Link>.</P>
           <P>Crab Fit costs more than <strong>$100 per month</strong> to run. Consider donating below if it helped you out so it can stay free for everyone. 🦀</P>
 				</StyledMain>
 			</AboutSection>
 
-			<Footer id="donate">
+			<Footer />
-				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
-				<Donate />
-			</Footer>
 		</>
 	);
 };

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -51,15 +51,6 @@ export const AboutSection = styled.section`
 	padding: 20px 0;
 `;
 
-export const Footer = styled.footer`
-	width: 600px;
-	margin: 20px auto;
-	max-width: calc(100% - 60px);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-`;
-
 export const P = styled.p`
 	font-weight: 500;
 	line-height: 1.6em;

crabfit-frontend/src/pages/Privacy/Privacy.tsx

@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
 import {
 	Button,
 	Center,
-	Donate,
+	Footer,
 } from 'components';
 
 import {
@@ -12,7 +12,6 @@ import {
 	Logo,
   Title,
 	AboutSection,
-	Footer,
 	P,
 } from '../Help/helpStyle';
 
@@ -95,10 +94,7 @@ const Privacy = () => {
 				</StyledMain>
 			</AboutSection>
 
-			<Footer id="donate">
+			<Footer />
-				<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
-				<Donate />
-			</Footer>
 		</>
 	);
 };