Added features to success page

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<CheckoutFormProps> = ({
+  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}
       },
     });

index.d.ts

@@ -0,0 +1,6 @@
+export declare var process: {
+    env: {
+      BASE_URL: string;
+    };
+  };
+

pages/checkout.tsx

@@ -76,7 +76,7 @@ export const Checkout: React.VFC = () => {
         <Header>Payment</Header>
         {clientSecret && (
           <Elements stripe={stripePromise} options={options}>
-            <CheckoutForm />
+            {!!cart && <CheckoutForm orderId={cart._id} />}
           </Elements>
         )}
       </StyledCard>

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 = () => {
         <Image src={require("../images/logo.jpg")} />
         <Heading {...headingProps}>Thanks for your order!</Heading>
         <SmallText {...smallTextProps}>
-          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
           <a href="mailto:[email protected]"> [email protected]</a>
         </SmallText>
+        <StyledButton primary onClick={newOrder}>
+          Start New Order
+        </StyledButton>
       </StyledCard>
     </div>
   );
@@ -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;
+`;