Remove donate page
This commit is contained in:
Mitchell McCaffrey
parent
812ca7eab3
commit
b62099a655
@ -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",
|
||||
|
||||
@ -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<Error | undefined>(undefined);
|
||||
|
||||
const [stripe, setStripe] = useState<Stripe>();
|
||||
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<HTMLDivElement>) {
|
||||
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 (
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
minHeight: "100%",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
maxWidth: "350px",
|
||||
width: "100%",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
m={4}
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Text my={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
|
||||
Donate
|
||||
</Text>
|
||||
{hasDonated ? (
|
||||
<Message my={2}>Thanks for donating!</Message>
|
||||
) : (
|
||||
<Text variant="body2" as="p">
|
||||
In order to keep Owlbear Rodeo running any donation is greatly
|
||||
appreciated.
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
my={4}
|
||||
variant="heading"
|
||||
as="h1"
|
||||
sx={{ fontSize: 5, alignSelf: "center" }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
|
||||
</Text>
|
||||
<Text as="p" mb={2} variant="caption">
|
||||
One time donation (USD)
|
||||
</Text>
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap" }}>
|
||||
{prices.map((price) => (
|
||||
<Label mx={1} key={price.name} sx={{ width: "initial" }}>
|
||||
<Radio
|
||||
name="donation"
|
||||
checked={selectedPrice === price.name}
|
||||
onChange={() => handlePriceChange(price)}
|
||||
/>
|
||||
{price.price}
|
||||
</Label>
|
||||
))}
|
||||
<Label mx={1} sx={{ width: "initial" }}>
|
||||
<Radio
|
||||
name="donation"
|
||||
checked={selectedPrice === "Custom"}
|
||||
onChange={() => handlePriceChange({ value, name: "Custom" })}
|
||||
/>
|
||||
Custom
|
||||
</Label>
|
||||
</Box>
|
||||
{selectedPrice === "Custom" && (
|
||||
<Box>
|
||||
<Label htmlFor="donation">Amount ($)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
name="donation"
|
||||
min={1}
|
||||
value={value}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setValue(parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Button my={3} disabled={loading || !value}>
|
||||
Go to Payment
|
||||
</Button>
|
||||
</Flex>
|
||||
<Footer />
|
||||
{loading && <LoadingOverlay />}
|
||||
<ErrorBanner error={error} onRequestClose={() => setError(undefined)} />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Donate;
|
||||
@ -2462,11 +2462,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
|
||||
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
|
||||
|
||||
"@stripe/stripe-js@^1.44.1":
|
||||
version "1.44.1"
|
||||
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.44.1.tgz#376fdbed2b394c84deaa2041b8029b97e7eab3a7"
|
||||
integrity sha512-DKj3U6tS+sCNsSXsoZbOl5gDrAVD3cAZ9QCiVSykLC3iJo085kkmw/3BAACRH54Bq2bN34yySuH6G1SLh2xHXA==
|
||||
|
||||
"@styled-system/background@^5.1.2":
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user