Added features to success page

components/CheckoutForm.tsx

@@ -8,7 +8,14 @@ import {
 import { Button } from "@cheapreats/react-ui";
 import styled from "styled-components";
 
-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 +30,12 @@ export const CheckoutForm = (): React.ReactElement => {
       return;
     }
 
+    const successURL = "http://localhost:8080/checkout?id=".concat(orderId);
+
     const result = await stripe.confirmPayment({
       elements,
       confirmParams: {
-        return_url: "http://localhost:8080/success",
+        return_url: successURL,
         // shipping: {Shipping Object}
       },
     });

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,28 @@
-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";
 
 export const Success: React.VFC = () => {
+  const [orderId, setOrderId] = useState<string>("");
+  const router = useRouter();
+
+  useEffect(() => {
+    const orderIdString: string = router.query.id as string;
+
+    if (!!router.query) {
+      setOrderId(orderIdString);
+    }
+  }, [router.query]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => window.location.replace("/order"), 7000);
+    return () => clearTimeout(timer);
+  }, []);
+
   const headingProps = {
     color: "green",
     textAlign: "center",
@@ -16,6 +34,11 @@ export const Success: React.VFC = () => {
     textAlign: "center",
   };
 
+  const buttonProps = {
+    color: "red",
+    onClick: () => window.location.replace("/order"),
+  };
+
   return (
     <div
       style={{
@@ -30,9 +53,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 {...buttonProps}>
+          Start New Order
+        </StyledButton>
       </StyledCard>
     </div>
   );
@@ -49,3 +76,10 @@ const StyledCard = styled(Card)`
   postion: relative;
   padding: 3em;
 `;
+
+const StyledButton = styled(Button)`
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  margin-top: 1em;
+`;