[SCSE-213] Duplicate stripe payment intents are created by fe

src/App.tsx

@@ -13,6 +13,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import Routes from "./routes";
 import chakraTheme from "./config/theme";
 import { CartProvider } from "./context/cart";
+import { CheckoutProvider } from "./context/checkout";
 
 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
 
@@ -22,7 +23,9 @@ const App = () => {
       <ChakraProvider theme={chakraTheme}>
         <BrowserRouter>
           <CartProvider>
-            <Routes />
+            <CheckoutProvider>
+              <Routes />
+            </CheckoutProvider>
           </CartProvider>
         </BrowserRouter>
       </ChakraProvider>

src/context/checkout/index.tsx

@@ -0,0 +1,28 @@
+import React, { useContext, useMemo, useState } from "react";
+import { CheckoutResponseDto } from "../../typings/cart";
+
+type ContextType = {
+    state: CheckoutResponseDto | null;
+    setState:  React.Dispatch<React.SetStateAction<CheckoutResponseDto | null>>
+} | null
+
+const CheckoutContext = React.createContext<ContextType>(null)
+
+export const useCheckoutStore = () => {
+    const context = useContext(CheckoutContext);
+    if (context === null){
+        throw new Error("useCheckoutStore must be used within a CheckoutProvider.")
+    }
+    return context
+}
+
+export const CheckoutProvider: React.FC = ({ children }) => {
+    const [checkoutState, setCheckoutState] = useState<CheckoutResponseDto | null>(null)
+
+    const value = useMemo(() => ({
+        state: checkoutState,
+        setState: setCheckoutState
+    }), [checkoutState])
+    return <CheckoutContext.Provider value={value}>{children}</CheckoutContext.Provider>
+
+}

src/pages/Checkout/Checkout.tsx

@@ -12,13 +12,14 @@ import CheckoutSkeleton from "./Skeleton";
 import StripeForm from "./StripeForm";
 import { QueryKeys } from "../../utils/constants/queryKeys";
 import { displayPrice } from "../../utils/functions/currency";
+import { useCheckoutStore } from "../../context/checkout";
 
 export const Checkout: FC = () => {
   // Cart Context Hook.
   const cartContext = useCartStore();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const { state: cartState, dispatch: cartDispatch } = cartContext;
-  const [checkoutState, setCheckoutState] = useState<CheckoutResponseDto | null>(null);
+  const { state: checkoutState, setState: setCheckoutState } = useCheckoutStore()
 
   // For mapping between cart item and info
   // const [productInfo, setProductInfo] = useState<ProductInfoMapType>({});
@@ -72,12 +73,12 @@ export const Checkout: FC = () => {
           const subtotal = (product?.price ?? -1) * item.quantity;
           return (
             <Flex key={item.productId.toString()} mt={[4, 6]}>
-              <Image 
-                src={product?.images?.[0]} 
-                fallbackSrc="https://via.placeholder.com/100" 
+              <Image
+                src={product?.images?.[0]}
+                fallbackSrc="https://via.placeholder.com/100"
                 boxSize="70"
                 objectFit="contain"
-                borderRadius="md" 
+                borderRadius="md"
               />
               <Flex flexDirection="column" flex={1} ml={2}>
                 <Flex justifyContent="space-between" alignItems="flex-start">
@@ -106,13 +107,13 @@ export const Checkout: FC = () => {
         <Divider mt={[4, 8]} mb={[2, 4]} />
         <Flex justifyContent="flex-end" mt={2} fontWeight={500} fontSize={["sm", "md", "l"]} gap={2} color="gray.700">
           <Flex flexDir="column">
-            {/*<Text>Subtotal:</Text>*/}
-            {/*<Text>Discount:</Text>*/}
+            {/* <Text>Subtotal:</Text> */}
+            {/* <Text>Discount:</Text> */}
             <Text fontSize="lg">Grand total:</Text>
           </Flex>
           <Flex flexDir="column" textAlign="end">
-            {/*<Text>{displayPrice(checkoutState?.price?.subtotal ?? 0)}</Text>*/}
-            {/*<Text>{displayPrice(checkoutState?.price?.discount ?? 0)}</Text>*/}
+            {/* <Text>{displayPrice(checkoutState?.price?.subtotal ?? 0)}</Text> */}
+            {/* <Text>{displayPrice(checkoutState?.price?.discount ?? 0)}</Text> */}
             <Text fontSize="lg">{displayPrice(checkoutState?.price?.grandTotal ?? 0)}</Text>
           </Flex>
         </Flex>

src/pages/Checkout/StripeForm.tsx

@@ -7,6 +7,7 @@ import { CartAction,CartActionType, useCartStore } from "../../context/cart";
 import routes from "../../utils/constants/routes";
 import { OrderStatusType } from "../../typings/order";
 import { api } from "../../services/api";
+import { useCheckoutStore } from "../../context/checkout";
 
 
 
@@ -25,6 +26,9 @@ const PaymentForm = () => {
   const { dispatch: cartDispatch, state: cartState } = cartContext;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const toast = useToast();
+
+  const { state: checkoutState } = useCheckoutStore()
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     // We don't want to let default form submission happen here,
     // which would refresh the page.
@@ -55,13 +59,13 @@ const PaymentForm = () => {
       // TODO: remove userId as we do not have a login
       // TODO: order ID to be generated iteratively with api call
       setIsLoading(true);
-      const checkoutCart = await api.postCheckoutCart(cartState.items, cartState.billingEmail, cartState.voucher)
+
       const payload : CartAction = {
        type: CartActionType.RESET_CART
       }
       cartDispatch(payload);
       setIsLoading(false);
-      navigate(`${routes.ORDER_SUMMARY}/${checkoutCart.orderId}`);
+      navigate(`${routes.ORDER_SUMMARY}/${checkoutState?.orderId}`);
     }
   };
   return (

src/typings/cart.tsx

@@ -51,6 +51,7 @@ export type CartResponseDto = {
 };
 
 export type CheckoutResponseDto = {
+  orderId: string;
   items: [
     {
       id: string;
@@ -73,6 +74,7 @@ export type CheckoutResponseDto = {
     paymentGateway: string;
     clientSecret: string;
   };
+  email: string;
 };
 
 export type ProductInfoMapType = Record<string, ProductInfoType>;

yarn.lock

@@ -63,7 +63,7 @@
     "@aws-amplify/api-graphql" "2.2.24"
     "@aws-amplify/api-rest" "2.0.35"
 
-"@aws-amplify/auth@4.4.4", "@aws-amplify/auth@^4.4.4":
+"@aws-amplify/auth@4.4.4":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@aws-amplify/auth/-/auth-4.4.4.tgz#b1c78a3bc0f80bd5303de91bf836eb2b543d2fa0"
   integrity sha512-/iQB8teOXxb6XkOK2nPBxldU5YZjMLy6vTpihWMOPP96TWqldgnKSZykYtsrTb6uYK8iF1VWr7DI9OE7UpKONQ==