diff --git a/package.json b/package.json index ff85667..497df0a 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "@mitchemmc/dexie-export-import": "^1.0.1", "@msgpack/msgpack": "^2.8.0", "@react-spring/konva": "9.4.4", - "@stripe/stripe-js": "^1.44.1", "@tensorflow/tfjs": "^3.15.0", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^13.0.0", diff --git a/src/routes/Donate.tsx b/src/routes/Donate.tsx deleted file mode 100644 index 2470764..0000000 --- a/src/routes/Donate.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { ChangeEvent, FormEvent, useEffect, useState } from "react"; -import { - Box, - Flex, - Text, - Message, - Button, - Input, - Label, - Radio, -} from "theme-ui"; -import { useLocation } from "react-router-dom"; - -import Footer from "../components/Footer"; -import ErrorBanner from "../components/banner/ErrorBanner"; -import LoadingOverlay from "../components/LoadingOverlay"; - -import { Stripe } from "@stripe/stripe-js"; - -type Price = { price?: string; name: string; value: number }; - -const prices: Price[] = [ - { price: "$5.00", name: "Small", value: 5 }, - { price: "$15.00", name: "Medium", value: 15 }, - { price: "$30.00", name: "Large", value: 30 }, -]; - -function Donate() { - const location = useLocation(); - const query = new URLSearchParams(location.search); - const hasDonated = query.has("success"); - - const [loading, setLoading] = useState(true); - const [error, setError] = useState(undefined); - - const [stripe, setStripe] = useState(); - useEffect(() => { - import("@stripe/stripe-js").then(({ loadStripe }) => { - loadStripe(process.env.REACT_APP_STRIPE_API_KEY as string) - .then((stripe) => { - if (stripe) { - setStripe(stripe); - setLoading(false); - } - }) - .catch((error) => { - // TODO: check setError -> cannot work with value as a string - setError(error.message); - setLoading(false); - }); - }); - }, []); - - async function handleSubmit(event: FormEvent) { - event.preventDefault(); - if (loading) { - return; - } - - const response = await fetch( - process.env.REACT_APP_STRIPE_URL + "/create-checkout-session", - { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - body: JSON.stringify({ currency: "usd", amount: value * 100 }), - } - ); - const session = await response.json(); - const result = await stripe?.redirectToCheckout({ sessionId: session.id }); - - if (result?.error) { - const stripeError = new Error(result.error.message); - setError(stripeError); - } - } - - const [selectedPrice, setSelectedPrice] = useState("Medium"); - const [value, setValue] = useState(15); - - function handlePriceChange(price: Price) { - setValue(price.value); - setSelectedPrice(price.name); - } - - return ( - - - - Donate - - {hasDonated ? ( - Thanks for donating! - ) : ( - - In order to keep Owlbear Rodeo running any donation is greatly - appreciated. - - )} - - - One time donation (USD) - - - {prices.map((price) => ( - - ))} - - - {selectedPrice === "Custom" && ( - - - ) => - setValue(parseInt(e.target.value)) - } - /> - - )} - - -