Skip to content

Commit

Permalink
Added status checking for merch routes
Browse files Browse the repository at this point in the history
  • Loading branch information
limivann committed Mar 12, 2024
1 parent 2d0ed3a commit 135d5d5
Show file tree
Hide file tree
Showing 7 changed files with 278 additions and 193 deletions.
43 changes: 43 additions & 0 deletions apps/web/features/layout/components/MerchLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from "react";
import { Flex, Heading } from "@chakra-ui/react";
import { QueryKeys } from "features/merch/constants";
import { useQuery } from "@tanstack/react-query";
import { api } from "features/merch/services/api";
import { MerchListSkeleton, Page } from "ui/components/merch";

interface MerchLayoutProps {
children: React.ReactNode;
}

export const MerchLayout = ({ children }: MerchLayoutProps) => {
const { data: status, isLoading: isStatusLoading } = useQuery(
[QueryKeys.STATUS],
() => api.getMerchSaleStatus(),
{}
);

const displayText = status?.displayText;
const disabled = status?.disabled;

if (isStatusLoading) {
return (
<Page>
<MerchListSkeleton />
</Page>
);
}

return (
<>
{disabled ? (
<Flex justifyContent="center" alignItems="center" height="85vh">
<Heading textAlign="center" maxWidth="1260px">
{displayText}
</Heading>
</Flex>
) : (
<>{children}</>
)}
</>
);
};
3 changes: 2 additions & 1 deletion apps/web/features/layout/components/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { WebLayout } from './WebLayout';
export { WebLayout } from "./WebLayout";
export { MerchLayout } from "./MerchLayout";
12 changes: 7 additions & 5 deletions apps/web/pages/merch/cart/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable */
/* eslint-disable @typescript-eslint/no-misused-promises */


import React, { useRef, useState, FC, useEffect } from "react";
import Link from "next/link";
import {
Expand Down Expand Up @@ -38,6 +37,7 @@ import { routes, QueryKeys } from "features/merch/constants";
import { displayPrice } from "features/merch/functions";
import { calculatePricing } from "merch-helpers";
import { useRouter } from "next/router";
import { MerchLayout } from "@/features/layout/components";

type ValidationType = {
error: boolean;
Expand Down Expand Up @@ -369,10 +369,12 @@ const Cart: FC = () => {
}, [reroute]);

return (
<Page>
{CartHeading}
{renderCartContent()}
</Page>
<MerchLayout>
<Page>
{CartHeading}
{renderCartContent()}
</Page>
</MerchLayout>
);
};

Expand Down
143 changes: 74 additions & 69 deletions apps/web/pages/merch/checkout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { displayPrice } from "@/features/merch/functions";
import { useRouter } from "next/router";
import StripeForm from "@/features/merch/components/checkout/StripeForm";
import { CheckoutResponse } from "types";
import { MerchLayout } from "@/features/layout/components";

const CheckoutPage = () => {
const [isLoading, setIsLoading] = useState<boolean>(true);
Expand Down Expand Up @@ -111,79 +112,83 @@ const OrderSummary = () => {
);

return (
<Box borderWidth={1} borderRadius="lg" p={[4, 6]} boxShadow="md">
<Flex justifyContent="space-between" alignItems="center">
<Heading fontSize={["xl", "2xl", "3xl"]}>Order Summary</Heading>
<Link href={routes.CART}>
<Text fontSize={["md", "l"]}>{`${noOfItems} item(s) Edit`}</Text>
</Link>
</Flex>
<Text fontSize="sm">{`Name: ${cartState.name}`}</Text>
<Text fontSize="sm">{`Billing email: ${cartState.billingEmail}`}</Text>
{cartState.cart.items?.map((item) => {
const product = products?.find(({ id }) => id === item.id);
const subtotal = (product?.price ?? -1) * item.quantity;
return (
<Flex key={item.id.toString()} mt={[4, 6]}>
<Image
src={product?.images?.[0]}
fallbackSrc="https://via.placeholder.com/100"
boxSize="70"
objectFit="contain"
borderRadius="md"
alt={product?.name}
/>
<Flex flexDirection="column" flex={1} ml={2}>
<Flex justifyContent="space-between" alignItems="flex-start">
<Text fontWeight={500} noOfLines={2}>
{product?.name}
</Text>
<Text fontWeight={500}>{displayPrice(subtotal)}</Text>
</Flex>
<Flex color="gray.600" alignItems="center">
<Text fontSize="sm">{`Color: ${item.color}`}</Text>
</Flex>
<Flex
justifyContent="space-between"
color="gray.600"
alignItems="center"
>
<Flex alignItems="center">
<Text fontSize="sm">{`Qty x${item.quantity}`}</Text>
<Badge h="fit-content" w="fit-content" ml={2}>
<Text textTransform="uppercase">{item.size}</Text>
</Badge>
<MerchLayout>
<Page>
<Box borderWidth={1} borderRadius="lg" p={[4, 6]} boxShadow="md">
<Flex justifyContent="space-between" alignItems="center">
<Heading fontSize={["xl", "2xl", "3xl"]}>Order Summary</Heading>
<Link href={routes.CART}>
<Text fontSize={["md", "l"]}>{`${noOfItems} item(s) Edit`}</Text>
</Link>
</Flex>
<Text fontSize="sm">{`Name: ${cartState.name}`}</Text>
<Text fontSize="sm">{`Billing email: ${cartState.billingEmail}`}</Text>
{cartState.cart.items?.map((item) => {
const product = products?.find(({ id }) => id === item.id);
const subtotal = (product?.price ?? -1) * item.quantity;
return (
<Flex key={item.id.toString()} mt={[4, 6]}>
<Image
src={product?.images?.[0]}
fallbackSrc="https://via.placeholder.com/100"
boxSize="70"
objectFit="contain"
borderRadius="md"
alt={product?.name}
/>
<Flex flexDirection="column" flex={1} ml={2}>
<Flex justifyContent="space-between" alignItems="flex-start">
<Text fontWeight={500} noOfLines={2}>
{product?.name}
</Text>
<Text fontWeight={500}>{displayPrice(subtotal)}</Text>
</Flex>
<Flex color="gray.600" alignItems="center">
<Text fontSize="sm">{`Color: ${item.color}`}</Text>
</Flex>
<Flex
justifyContent="space-between"
color="gray.600"
alignItems="center"
>
<Flex alignItems="center">
<Text fontSize="sm">{`Qty x${item.quantity}`}</Text>
<Badge h="fit-content" w="fit-content" ml={2}>
<Text textTransform="uppercase">{item.size}</Text>
</Badge>
</Flex>
<Text>{displayPrice(product?.price ?? 0)} each</Text>
</Flex>
</Flex>
<Text>{displayPrice(product?.price ?? 0)} each</Text>
</Flex>
);
})}

<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 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 fontSize="lg">
{displayPrice(checkoutState?.price?.grandTotal ?? 0)}
</Text>
</Flex>
</Flex>
);
})}

<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 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 fontSize="lg">
{displayPrice(checkoutState?.price?.grandTotal ?? 0)}
</Text>
</Flex>
</Flex>
</Box>
</Box>
</Page>
</MerchLayout>
);
};

Expand Down
Loading

0 comments on commit 135d5d5

Please sign in to comment.