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",
|
"@mitchemmc/dexie-export-import": "^1.0.1",
|
||||||
"@msgpack/msgpack": "^2.8.0",
|
"@msgpack/msgpack": "^2.8.0",
|
||||||
"@react-spring/konva": "9.4.4",
|
"@react-spring/konva": "9.4.4",
|
||||||
"@stripe/stripe-js": "^1.44.1",
|
|
||||||
"@tensorflow/tfjs": "^3.15.0",
|
"@tensorflow/tfjs": "^3.15.0",
|
||||||
"@testing-library/jest-dom": "^5.16.3",
|
"@testing-library/jest-dom": "^5.16.3",
|
||||||
"@testing-library/react": "^13.0.0",
|
"@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"
|
resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
|
||||||
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
|
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":
|
"@styled-system/background@^5.1.2":
|
||||||
version "5.1.2"
|
version "5.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
|
resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user