diff --git a/package.json b/package.json index 168bc2a..4464fcf 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "homepage": "https://owlbear.rodeo", "dependencies": { + "@stripe/stripe-js": "^1.3.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/src/modals/DonationModal.js b/src/modals/DonationModal.js new file mode 100644 index 0000000..e205cb9 --- /dev/null +++ b/src/modals/DonationModal.js @@ -0,0 +1,133 @@ +import React, { useState, useEffect } from "react"; +import { loadStripe } from "@stripe/stripe-js"; +import { Box, Label, Button, Flex, Radio, Text } from "theme-ui"; +import { useLocation, useHistory } from "react-router-dom"; + +import Modal from "../components/Modal"; +import LoadingOverlay from "../components/LoadingOverlay"; +import Banner from "../components/Banner"; + +const skus = [ + { sku: "sku_H6DhHS1MimRPR9", price: "$5.00 AUD", name: "Small" }, + { sku: "sku_H6DhiQfHUkYUKd", price: "$15.00 AUD", name: "Medium" }, + { sku: "sku_H6DhbO2oUn9Sda", price: "$30.00 AUD", name: "Large" }, +]; + +function DonationModal({ isOpen, onRequestClose }) { + // Handle callback from stripe + const location = useLocation(); + const history = useHistory(); + const query = new URLSearchParams(location.search); + const hasDonated = query.has("donated"); + const showDonationForm = isOpen || query.get("donated") === "false"; + + const [loading, setLoading] = useState(showDonationForm); + const [error, setError] = useState(null); + + const [stripe, setStripe] = useState(); + useEffect(() => { + if (showDonationForm) { + loadStripe("pk_live_MJjzi5djj524Y7h3fL5PNh4e00a852XD51") + .then((stripe) => { + setStripe(stripe); + setLoading(false); + }) + .catch((err) => { + setError(err.message); + setLoading(false); + }); + } + }, [showDonationForm]); + + function handleClose() { + if (hasDonated) { + history.push(location.pathname); + } + onRequestClose(); + } + + function handleSubmit(event) { + event.preventDefault(); + if (!stripe) { + return; + } + setLoading(true); + stripe + .redirectToCheckout({ + items: [{ sku: selectedSku, quantity: 1 }], + successUrl: `${window.location.href}?donated=true`, + cancelUrl: `${window.location.href}?donated=false`, + submitType: "donate", + }) + .then((response) => { + setLoading(false); + if (response.error) { + setError(response.error.message); + } + }); + } + + const [selectedSku, setSelectedSku] = useState("sku_H6DhiQfHUkYUKd"); + function handleSkuChange(event) { + setSelectedSku(event.target.value); + } + + const donationSuccessful = ( + + + Thanks for donating! ʕ•ᴥ•ʔ + + + ); + + const donationForm = ( + + + + One time donation + + {skus.map((sku) => ( + + ))} + + + + + ); + + return ( + + + {query.get("donated") === "true" ? donationSuccessful : donationForm} + {loading && } + setError(null)}> + + + {error} + + + + + + ); +} + +export default DonationModal; diff --git a/src/routes/Home.js b/src/routes/Home.js index 7a3b8d3..9feea48 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -1,10 +1,11 @@ import React, { useState, useEffect, useContext } from "react"; -import { Flex, Button, Image, Text } from "theme-ui"; +import { Flex, Button, Image, Text, Box } from "theme-ui"; import Footer from "../components/Footer"; import StartModal from "../modals/StartModal"; import JoinModal from "../modals/JoinModal"; +import DonateModal from "../modals/DonationModal"; import AuthContext from "../contexts/AuthContext"; @@ -13,6 +14,7 @@ import owlington from "../images/Owlington.png"; function Home() { const [isStartModalOpen, setIsStartModalOpen] = useState(false); const [isJoinModalOpen, setIsJoinModalOpen] = useState(false); + const [isDonateModalOpen, setIsDonateModalOpen] = useState(false); // Reset password on visiting home const { setPassword } = useContext(AuthContext); @@ -51,6 +53,14 @@ function Home() { Alpha v0.10.2 + + setIsJoinModalOpen(false)} @@ -59,6 +69,10 @@ function Home() { isOpen={isStartModalOpen} onRequestClose={() => setIsStartModalOpen(false)} /> + setIsDonateModalOpen(false)} + />