fix: Add pending payment notice on order summary

ntuscse · Feb 23, 2023 · f282b19 · f282b19
1 parent b912d75
commit f282b19
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 62 deletions.
diff --git a/src/pages/Checkout/StripeForm.tsx b/src/pages/Checkout/StripeForm.tsx
@@ -49,17 +49,17 @@ const PaymentForm = () => {
         status:'error',
         isClosable: true,
       });
-	  return;
+      return;
     }
-	if (result.paymentIntent.status === "requires_payment_method") {
-	  toast({
+    if (result.paymentIntent.status === "requires_payment_method") {
+      toast({
         title:'Error',
         description: "Payment was not successful. Please try again.",
         status:'error',
         isClosable: true,
-	  });
-	  return;
-	}
+      });
+      return;
+    }
     setIsLoading(true);
     const checkoutCart = await api.postCheckoutCart(cartState.items, cartState.billingEmail, cartState.voucher)
     const payload : CartAction = {

diff --git a/src/pages/OrderSummary/OrderSummary.tsx b/src/pages/OrderSummary/OrderSummary.tsx
@@ -31,7 +31,6 @@ export const OrderSummary: FC = () => {
   const isMobile: boolean =
     useBreakpointValue({ base: true, md: false }) || false;
   const { slug: orderSlug = "" } = useParams();
-  const [showThankYou, setShowThankYou] = useState<boolean>(false);
   const [orderState, setOrderState] = useState<OrderType | null>(null);
   // TODO: Fetch subtotal and total from server.
   const [total, setTotal] = useState(0);
@@ -48,15 +47,19 @@ export const OrderSummary: FC = () => {
             return item.price * item.quantity + acc;
           }, 0)
         );
-        setShowThankYou(true);
       },
     }
   );
 
   const renderThankYouMessage = () => (
     <>
       <Heading size="xl">THANK YOU</Heading>
-      <Text>Thank you for your purchase. We have received your order.</Text>
+      <Text>
+        Thank you for your purchase.
+        {orderState?.status === OrderStatusType.PAYMENT_COMPLETED
+          ? " We have received your order."
+          : " Your order has been collected."}
+      </Text>
       <Link to={routes.HOME}>
         <Button borderRadius={0} size="sm">
           CONTINUE SHOPPING
@@ -66,10 +69,72 @@ export const OrderSummary: FC = () => {
     </>
   );
 
+  const renderPendingMessage = () => (
+    <>
+      <Heading size="xl">PAYMENT PENDING</Heading>
+      <Text>
+        We are currently pending confirmation for your payment from our payment
+        processor. If you have paid, please check back later.
+      </Text>
+      <Text>
+        Should the issue persist, please contact us at merch@ntuscse.com with
+        proof of payment. We apologize for the inconvenience.
+      </Text>
+      <Link to={routes.HOME}>
+        <Button borderRadius={0} size="sm">
+          CONTINUE SHOPPING
+        </Button>
+      </Link>
+      <Divider my={8} />
+    </>
+  );
+
+  const renderStatusMessage = () => {
+    if (!orderState) return null;
+    switch (orderState?.status) {
+      case OrderStatusType.PAYMENT_COMPLETED:
+      case OrderStatusType.ORDER_COMPLETED:
+        return renderThankYouMessage();
+      case OrderStatusType.PENDING_PAYMENT:
+        return renderPendingMessage();
+      default:
+        return null;
+    }
+  };
+
+  const renderCollectionQR = () =>
+      <Flex
+        mt={6}
+        alignItems="center"
+        py={3}
+        borderRadius="lg"
+        borderWidth="1px"
+        flexDirection="column"
+        rowGap={4}
+      >
+        {/* TODO: QR Code generator based on Param. */}
+        <Image
+          maxWidth={40}
+          src={
+            orderState
+              ? `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://dev.merch.ntuscse.com/order-summary/${orderState?.orderID}`
+              : ""
+          }
+        />
+        <Text fontWeight="bold">
+          Please screenshot this QR code and show it at SCSE Lounge to collect
+          your order. Alternatively, show the email receipt you have received.
+        </Text>
+        <Text>
+          For any assistance, please contact our email address:
+          merch@ntuscse.com
+        </Text>
+      </Flex>
+
   const renderOrderSummary = () => (
     <>
       <Flex flexDirection="column" alignItems="center" rowGap={3}>
-        {showThankYou && renderThankYouMessage()}
+        {orderState && renderStatusMessage()}
       </Flex>
 
       <Flex
@@ -82,13 +147,13 @@ export const OrderSummary: FC = () => {
         <Show below="md">
           <Flex justifyContent="space-between">
             <Flex flexDir="column" w="100%">
-              <Badge 
-                width="fit-content" 
-                fontSize="sm" 
-                mb={2} 
-                color={getOrderStatusColor(orderState?.status ?? OrderStatusType.DELAY)}
+              <Badge
+                width="fit-content"
+                fontSize="sm"
+                mb={2}
+                color={getOrderStatusColor(orderState?.status ?? OrderStatusType.PENDING_PAYMENT)}
               >
-                {renderOrderStatus(orderState?.status ?? OrderStatusType.DELAY)}
+                {renderOrderStatus(orderState?.status ?? OrderStatusType.PENDING_PAYMENT)}
               </Badge>
               <Heading size="md">Order Number</Heading>
               <Heading size="lg">
@@ -116,12 +181,12 @@ export const OrderSummary: FC = () => {
             <Flex flexDir="column">
               <Flex alignItems="center" gap={6}>
                 <Heading size="md">Order Number</Heading>
-                <Badge 
-                  width="fit-content" 
-                  fontSize="sm" 
-                  color={getOrderStatusColor(orderState?.status ?? OrderStatusType.DELAY)}
+                <Badge
+                  width="fit-content"
+                  fontSize="sm"
+                  color={getOrderStatusColor(orderState?.status ?? OrderStatusType.PENDING_PAYMENT)}
                 >
-                  {renderOrderStatus(orderState?.status ?? OrderStatusType.DELAY)}
+                  {renderOrderStatus(orderState?.status ?? OrderStatusType.PENDING_PAYMENT)}
                 </Badge>
               </Flex>
               <Heading size="lg" mb={2}>
@@ -168,33 +233,7 @@ export const OrderSummary: FC = () => {
         </Flex>
       </Flex>
 
-      <Flex
-        mt={6}
-        alignItems="center"
-        py={3}
-        borderRadius="lg"
-        borderWidth="1px"
-        flexDirection="column"
-        rowGap={4}
-      >
-        {/* TODO: QR Code generator based on Param. */}
-        <Image
-          maxWidth={40}
-          src={
-            orderState
-              ? `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://dev.merch.ntuscse.com/order-summary/${orderState?.orderID}`
-              : ""
-          }
-        />
-        <Text fontWeight="bold">
-          Please screenshot this QR code and show it at SCSE Lounge to collect your order. 
-          Alternatively, show the email receipt you have received.
-        </Text>
-        <Text>
-          For any assistance, please contact our email address:
-          merch@ntuscse.com
-        </Text>
-      </Flex>
+      {orderState?.status === OrderStatusType.PAYMENT_COMPLETED && renderCollectionQR()}
     </>
   );
 

diff --git a/src/typings/order.tsx b/src/typings/order.tsx
@@ -1,10 +1,8 @@
 // eslint-disable-next-line no-shadow
 export enum OrderStatusType {
-  RECEIVED,
-  PROCESSING,
-  READY_TO_COLLECT,
-  DELAY,
-  COLLECTED,
+  PENDING_PAYMENT = 1,
+  PAYMENT_COMPLETED,
+  ORDER_COMPLETED,
 }
 
 export type OrderItemType = {

diff --git a/src/utils/constants/order-status.ts b/src/utils/constants/order-status.ts
@@ -2,24 +2,24 @@ import { OrderStatusType } from "../../typings/order";
 
 export const renderOrderStatus = (status: OrderStatusType) => {
   switch (status) {
-    case OrderStatusType.COLLECTED:
-      return "Order Collected";
-    case OrderStatusType.PROCESSING:
-      return "Processing";
-    case OrderStatusType.RECEIVED:
-      return "Order Received";
+    case OrderStatusType.PENDING_PAYMENT:
+      return "Pending Payment";
+    case OrderStatusType.PAYMENT_COMPLETED:
+      return "Payment Completed";
+    case OrderStatusType.ORDER_COMPLETED:
+      return "Order Delivered";
     default:
       return "Item Delayed";
   }
 };
 
 export const getOrderStatusColor = (status: OrderStatusType) => {
   switch (status) {
-    case OrderStatusType.COLLECTED:
+    case OrderStatusType.ORDER_COMPLETED:
       return "green.500";
-    case OrderStatusType.PROCESSING:
+    case OrderStatusType.PAYMENT_COMPLETED:
       return "primary.400";
-    case OrderStatusType.RECEIVED:
+    case OrderStatusType.PENDING_PAYMENT:
       return "primary.600";
     default:
       return "red.500";