Skip to content

Commit

Permalink
feat: add cart loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@pooriaset
pooriaset committed Dec 9, 2024
1 parent 1457c20 commit 4074d3f
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 121 deletions.
38 changes: 38 additions & 0 deletions src/app/[locale]/(main)/(container)/cart/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Card, CardContent, Grid, Skeleton, Stack } from '@mui/material';

const Loading = () => {
return (
<Grid container spacing={2} position="relative">
<Grid item lg={9} md={6} xs={12}>
<Card variant="outlined">
<CardContent>
<Stack direction="row" spacing={1}>
<Skeleton width={100} height={100} variant="rectangular" />
<Stack width="60%" spacing={2}>
<Skeleton width="80%" variant="rectangular" />
<Skeleton width="40%" variant="rectangular" />
</Stack>
</Stack>
</CardContent>
</Card>
</Grid>

<Grid item lg={3} md={6} xs={12}>
<Card variant="outlined">
<CardContent>
{new Array(4).fill(1).map((key) => {
return (
<Stack direction="row" key={key} justifyContent="space-between">
<Skeleton width="40%" />
<Skeleton width="40%" />
</Stack>
);
})}
</CardContent>
</Card>
</Grid>
</Grid>
);
};

export default Loading;
225 changes: 109 additions & 116 deletions src/app/[locale]/(main)/(container)/cart/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
Typography,
} from '@mui/material';
import { useTranslations } from 'next-intl';
import Loading from '../loading';

import CheckoutBox from './components/CheckoutBox';
import EmptyCart from './components/EmptyCart';
import Header from './components/Header';
Expand All @@ -36,139 +36,132 @@ const Page = () => {
const t = useTranslations();
const { loading, data } = useCartQuery();

if (loading) return <Loading />;

const content = getFragmentData(CartContentFragmentDoc, data?.cart);

if (!content?.contents?.itemCount) return <EmptyCart />;

return (
<>
<Grid container spacing={2} position="relative">
<Grid item lg={9} md={6} xs={12}>
<Card variant="outlined">
<Header />
<CardContent>
<Grid container spacing={2}>
{content?.contents?.nodes?.map((item, index) => {
const isLast = content?.contents?.nodes?.length === index + 1;
const _item = getFragmentData(
CartItemContentFragmentDoc,
item,
);
<Grid container spacing={2} position="relative">
<Grid item lg={9} md={6} xs={12}>
<Card variant="outlined">
<Header />
<CardContent>
<Grid container spacing={2}>
{content?.contents?.nodes?.map((item, index) => {
const isLast = content?.contents?.nodes?.length === index + 1;
const _item = getFragmentData(CartItemContentFragmentDoc, item);

const variant = getFragmentData(
ProductVariationContentSliceFragmentDoc,
_item.variation?.node,
)!;
const variant = getFragmentData(
ProductVariationContentSliceFragmentDoc,
_item.variation?.node,
)!;

const product = getFragmentData(
ProductContentSliceFragmentDoc,
_item.product?.node,
);
const product = getFragmentData(
ProductContentSliceFragmentDoc,
_item.product?.node,
);

const isOutOfStock =
variant.stockStatus === StockStatusEnum.OutOfStock;

return (
<Grid item xs={12} key={_item?.key}>
<Stack spacing={2}>
<CartItem
value={variant}
href={`/products/${product?.databaseId}`}
/>
<Stack direction="row" spacing={1}>
<Box width={200}>
<CartItemController
item={_item}
disabled={isOutOfStock}
/>
</Box>
{isOutOfStock && (
<OutOfStock
sx={{
color: 'red',
borderColor: 'error',
width: 'fit-content',
}}
/>
)}
const isOutOfStock =
variant.stockStatus === StockStatusEnum.OutOfStock;

{!isOutOfStock && (
<Stack justifyContent="end">
{!!_item.totalOnSaleDiscount && (
<PriceLabel
value={_item.totalOnSaleDiscount}
TypographyProps={{
fontWeight: 600,
color: 'error',
}}
suffix={
<Typography
variant="caption"
color="error"
fontWeight={600}
>
{t('discounts.off')}
</Typography>
}
/>
)}
return (
<Grid item xs={12} key={_item?.key}>
<Stack spacing={2}>
<CartItem
value={variant}
href={`/products/${product?.databaseId}`}
/>
<Stack direction="row" spacing={1}>
<Box width={200}>
<CartItemController
item={_item}
disabled={isOutOfStock}
/>
</Box>
{isOutOfStock && (
<OutOfStock
sx={{
color: 'red',
borderColor: 'error',
width: 'fit-content',
}}
/>
)}

{!isOutOfStock && (
<Stack justifyContent="end">
{!!_item.totalOnSaleDiscount && (
<PriceLabel
value={_item.total}
value={_item.totalOnSaleDiscount}
TypographyProps={{
sx: {
fontWeight: 600,
},
fontWeight: 600,
color: 'error',
}}
suffix={
<Typography
variant="caption"
color="error"
fontWeight={600}
>
{t('discounts.off')}
</Typography>
}
/>
</Stack>
)}
</Stack>
{!isLast && <Divider />}
)}

<PriceLabel
value={_item.total}
TypographyProps={{
sx: {
fontWeight: 600,
},
}}
/>
</Stack>
)}
</Stack>
</Grid>
);
})}
</Grid>
{!isLast && <Divider />}
</Stack>
</Grid>
);
})}
</Grid>
</CardContent>
</Card>
</Grid>

<Grid item lg={3} md={6} xs={12}>
<Stack
spacing={2}
sx={{
position: 'sticky',
top: 196,
zIndex: Z_INDEX_VALUES.cartPageDetailsBox,
}}
>
<Card variant="outlined">
<CardContent>
<CheckoutBox content={content} />
</CardContent>
<CardActions>
<Button
component={Link}
href="/checkout"
fullWidth
color="primary"
size="large"
variant="contained"
>
{t('pages.cart.buttons.registerAndNextStep')}
</Button>
</CardActions>
</Card>
</Grid>

<Grid item lg={3} md={6} xs={12}>
<Stack
spacing={2}
sx={{
position: 'sticky',
top: 196,
zIndex: Z_INDEX_VALUES.cartPageDetailsBox,
}}
>
<Card variant="outlined">
<CardContent>
<CheckoutBox content={content} />
</CardContent>
<CardActions>
<Button
component={Link}
href="/checkout"
fullWidth
color="primary"
size="large"
variant="contained"
>
{t('pages.cart.buttons.registerAndNextStep')}
</Button>
</CardActions>
</Card>
<Typography variant="body2" color="gray">
{t('messages.cart.reserveMessage')}
</Typography>
</Stack>
</Grid>
<Typography variant="body2" color="gray">
{t('messages.cart.reserveMessage')}
</Typography>
</Stack>
</Grid>
</>
</Grid>
);
};

Expand Down
5 changes: 0 additions & 5 deletions src/app/[locale]/(main)/(container)/loading.tsx
View file

This file was deleted.

0 comments on commit 4074d3f

Please sign in to comment.