diff --git a/components/CheckoutForm.tsx b/components/CheckoutForm.tsx index 3dd7884..3e600a4 100644 --- a/components/CheckoutForm.tsx +++ b/components/CheckoutForm.tsx @@ -7,8 +7,16 @@ import { } from "@stripe/react-stripe-js"; import { Button } from "@cheapreats/react-ui"; import styled from "styled-components"; +import { process } from "../index"; -export const CheckoutForm = (): React.ReactElement => { +interface CheckoutFormProps { + orderId: string; +} + +export const CheckoutForm: React.VFC = ({ + orderId, + ...props +}) => { const stripe = useStripe(); const elements = useElements(); @@ -23,10 +31,12 @@ export const CheckoutForm = (): React.ReactElement => { return; } + const successURL = `${process.env.BASE_URL} /checkout?id= ${orderId}`; + const result = await stripe.confirmPayment({ elements, confirmParams: { - return_url: "http://localhost:8080/success", + return_url: successURL, // shipping: {Shipping Object} }, }); diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..78d91f4 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,6 @@ +export declare var process: { + env: { + BASE_URL: string; + }; + }; + diff --git a/pages/checkout.tsx b/pages/checkout.tsx index 9e7384d..390bb20 100644 --- a/pages/checkout.tsx +++ b/pages/checkout.tsx @@ -76,7 +76,7 @@ export const Checkout: React.VFC = () => {
Payment
{clientSecret && ( - + {!!cart && } )} diff --git a/pages/success.tsx b/pages/success.tsx index 3a5ee9e..5d6fbc5 100644 --- a/pages/success.tsx +++ b/pages/success.tsx @@ -1,10 +1,32 @@ -import { Card, Heading, SmallText } from "@cheapreats/react-ui"; +import { Card, Heading, SmallText, Button } from "@cheapreats/react-ui"; import React from "react"; import styled from "styled-components"; import Image from "next/image"; import Snowfall from "react-snowfall"; +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; + +const SESSION_EXPIRY_TIMEOUT = 7000; export const Success: React.VFC = () => { + const [orderId, setOrderId] = useState(""); + const router = useRouter(); + + useEffect(() => { + if (!!router.query.id) { + setOrderId(router.query.id as string); + } + }, [router.query]); + + function newOrder() { + window.location.replace("/order"); + } + + useEffect(() => { + const timer = setTimeout(newOrder, SESSION_EXPIRY_TIMEOUT); + return () => clearTimeout(timer); + }, []); + const headingProps = { color: "green", textAlign: "center", @@ -30,9 +52,13 @@ export const Success: React.VFC = () => { Thanks for your order! - We appreciate your business! If you have any questions, please email + Your order id is {orderId}. We appreciate your business! If you have + any questions, please email hello@cheapreats.com + + Start New Order + ); @@ -43,9 +69,12 @@ export default Success; const StyledCard = styled(Card)` width: 60%; text-align: center; - margin-top: 10em; - margin-left: auto; - margin-right: auto; + margin: 10em auto auto; postion: relative; padding: 3em; `; + +const StyledButton = styled(Button)` + margin: 1em auto auto; + text-align: center; +`;