Skip to content

Commit c0d352e

Browse files
pooriasetpooriaset
committed
chore: complete loading and i18n of cart page
1 parent fcd7289 commit c0d352e

File tree

7 files changed

+103
-32
lines changed

7 files changed

+103
-32
lines changed

‎src/app/[locale]/(main)/(container)/cart/page.tsx‎

Lines changed: 62 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
'use client';
22

33
import CartItem from '@/components/CartItem/CartItem';
4+
import CartItemSkeleton from '@/components/CartItem/components/CartItemSkeleton';
45
import CartItemController from '@/components/CartItemController/CartItemController';
6+
import OutOfStock from '@/components/common/OutOfStock';
7+
import PriceLabel from '@/components/common/PriceLabel';
58
import { getFragmentData } from '@/graphql/types';
69
import {
710
CartItemContentFragmentDoc,
@@ -27,11 +30,8 @@ import {
2730
import { useAtomValue } from 'jotai';
2831
import { useTranslations } from 'next-intl';
2932
import Image from 'next/image';
30-
import Header from './components/Header';
31-
import CartItemSkeleton from '@/components/CartItem/components/CartItemSkeleton';
32-
import OutOfStock from '@/components/common/OutOfStock';
3333
import CheckoutBox, { CheckoutBoxProps } from './components/CheckoutBox';
34-
import PriceLabel from '@/components/common/PriceLabel';
34+
import Header from './components/Header';
3535

3636
const Page = () => {
3737
const t = useTranslations();
@@ -67,7 +67,22 @@ const Page = () => {
6767
<Stack spacing={2}>
6868
<Card variant="outlined">
6969
<CardContent>
70-
<Skeleton variant="rectangular" height={400} />
70+
<Stack spacing={1}>
71+
{new Array(3).fill(1).map((item, index) => {
72+
return (
73+
<Stack
74+
key={index}
75+
direction="row"
76+
spacing={1}
77+
justifyContent="space-between"
78+
>
79+
<Skeleton variant="text" width={80} />
80+
<Skeleton variant="text" width={80} />
81+
</Stack>
82+
);
83+
})}
84+
<Skeleton variant="rectangular" height={45} />
85+
</Stack>
7186
</CardContent>
7287
</Card>
7388
</Stack>
@@ -141,7 +156,7 @@ const Page = () => {
141156
{
142157
key: (
143158
<Typography variant="body2" color="gray" sx={{ fontWeight: 600 }}>
144-
قیمت کالاها ({cart?.contents?.itemCount})
159+
{t('pages.cart.box.subTotal')} ({cart?.contents?.itemCount})
145160
</Typography>
146161
),
147162
value: (
@@ -157,7 +172,7 @@ const Page = () => {
157172
{
158173
key: (
159174
<Typography variant="body2" sx={{ fontWeight: 600 }}>
160-
جمع سبد خرید
175+
{t('pages.cart.box.total')}
161176
</Typography>
162177
),
163178
value: (
@@ -172,7 +187,7 @@ const Page = () => {
172187
{
173188
key: (
174189
<Typography color="error" variant="body2" sx={{ fontWeight: 600 }}>
175-
سود شما از خرید
190+
{t('pages.cart.box.yourProfit')}
176191
</Typography>
177192
),
178193
value: (
@@ -189,7 +204,7 @@ const Page = () => {
189204

190205
return (
191206
<>
192-
<Grid container spacing={2}>
207+
<Grid container spacing={2} position="relative">
193208
<Grid item lg={9} md={6} xs={12}>
194209
<Card variant="outlined">
195210
<Header />
@@ -238,15 +253,37 @@ const Page = () => {
238253
}}
239254
/>
240255
)}
256+
241257
{!isOutOfStock && (
242-
<PriceLabel
243-
value={_item.total}
244-
TypographyProps={{
245-
sx: {
246-
fontWeight: 600,
247-
},
248-
}}
249-
/>
258+
<Stack justifyContent="end">
259+
{!!_item.totalOnSaleDiscount && (
260+
<PriceLabel
261+
value={_item.totalOnSaleDiscount}
262+
TypographyProps={{
263+
fontWeight: 600,
264+
color: 'error',
265+
}}
266+
suffix={
267+
<Typography
268+
variant="caption"
269+
color="error"
270+
fontWeight={600}
271+
>
272+
{t('discounts.off')}
273+
</Typography>
274+
}
275+
/>
276+
)}
277+
278+
<PriceLabel
279+
value={_item.total}
280+
TypographyProps={{
281+
sx: {
282+
fontWeight: 600,
283+
},
284+
}}
285+
/>
286+
</Stack>
250287
)}
251288
</Stack>
252289
{!isLast && <Divider />}
@@ -260,7 +297,14 @@ const Page = () => {
260297
</Grid>
261298

262299
<Grid item lg={3} md={6} xs={12}>
263-
<Stack spacing={2}>
300+
<Stack
301+
spacing={2}
302+
sx={{
303+
position: 'sticky',
304+
top: 196,
305+
zIndex: 1299,
306+
}}
307+
>
264308
<Card variant="outlined">
265309
<CardContent>
266310
<CheckoutBox items={checkoutBoxItems} />

‎src/components/common/PriceLabel.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { FC } from 'react';
1+
import { FC, ReactNode } from 'react';
22

3-
import PriceUnit from './PriceUnit';
4-
import { Box, Typography, TypographyProps } from '@mui/material';
53
import { extractNumbers, getMinOfRangePrice } from '@/utils/price';
4+
import { Stack, Typography, TypographyProps } from '@mui/material';
65
import { useTranslations } from 'next-intl';
6+
import PriceUnit from './PriceUnit';
77

88
export interface PriceLabelProps {
99
value?: string | number | null;
1010
TypographyProps?: Partial<TypographyProps>;
11+
prefix?: ReactNode;
12+
suffix?: ReactNode;
1113
}
1214

1315
const PriceLabel: FC<PriceLabelProps> = ({
@@ -17,6 +19,8 @@ const PriceLabel: FC<PriceLabelProps> = ({
1719
fontWeight: 300,
1820
},
1921
},
22+
suffix,
23+
prefix,
2024
}) => {
2125
const t = useTranslations();
2226

@@ -26,10 +30,12 @@ const PriceLabel: FC<PriceLabelProps> = ({
2630
: value;
2731

2832
return (
29-
<Box display="flex" alignItems="center">
33+
<Stack alignItems="center" spacing={0.25} direction="row">
34+
{prefix}
3035
<Typography {...TypographyProps}>{_value?.toLocaleString()}</Typography>
3136
<PriceUnit title={t('units.price')} TypographyProps={TypographyProps} />
32-
</Box>
37+
{suffix}
38+
</Stack>
3339
);
3440
};
3541

‎src/data/i18n/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@
8686
}
8787
}
8888
},
89+
"discounts": {
90+
"off": "Off"
91+
},
8992
"pages": {
9093
"cart": {
9194
"confirm": {
@@ -100,6 +103,11 @@
100103
"title": "Your Cart",
101104
"buttons": {
102105
"registerAndNextStep": "Register and Next"
106+
},
107+
"box": {
108+
"yourProfit": "Your profit",
109+
"total": "Total",
110+
"subTotal": "Subtotal"
103111
}
104112
},
105113
"product": {

‎src/data/i18n/fa.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@
8686
}
8787
}
8888
},
89+
"discounts": {
90+
"off": "تخفیف"
91+
},
8992
"pages": {
9093
"cart": {
9194
"confirm": {
@@ -100,6 +103,11 @@
100103
"title": "سبد خرید شما",
101104
"buttons": {
102105
"registerAndNextStep": "ثبت و مرحله بعد"
106+
},
107+
"box": {
108+
"yourProfit": "سود شما از خرید",
109+
"total": "جمع سبد خرید",
110+
"subTotal": "قیمت کالاها"
103111
}
104112
},
105113
"product": {

‎src/graphql/queries/cart.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export const CartItemContent = gql`
7878
total
7979
subtotal
8080
subtotalTax
81+
totalOnSaleDiscount
8182
extraData {
8283
key
8384
value

‎src/graphql/types/gql.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
1515
const documents = {
1616
"\n fragment ProductContentSlice on Product {\n id\n databaseId\n name\n slug\n type\n image {\n id\n sourceUrl(size: WOOCOMMERCE_THUMBNAIL)\n altText\n }\n ... on SimpleProduct {\n price\n regularPrice\n soldIndividually\n }\n ... on VariableProduct {\n price\n regularPrice\n soldIndividually\n }\n }\n": types.ProductContentSliceFragmentDoc,
1717
"\n fragment ProductVariationContentSlice on ProductVariation {\n id\n databaseId\n name\n slug\n attributes {\n nodes {\n id\n label\n value\n name\n }\n }\n image {\n id\n sourceUrl(size: WOOCOMMERCE_THUMBNAIL)\n altText\n }\n price\n regularPrice\n salePrice\n discountAmount\n discountPercentage\n stockStatus\n }\n": types.ProductVariationContentSliceFragmentDoc,
18-
"\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n extraData {\n key\n value\n }\n }\n \n \n": types.CartItemContentFragmentDoc,
18+
"\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n totalOnSaleDiscount\n extraData {\n key\n value\n }\n }\n \n \n": types.CartItemContentFragmentDoc,
1919
"\n fragment CartContent on Cart {\n contents(first: 100) {\n itemCount\n nodes {\n ...CartItemContent\n }\n }\n appliedCoupons {\n code\n discountAmount\n discountTax\n }\n needsShippingAddress\n availableShippingMethods {\n packageDetails\n supportsShippingCalculator\n rates {\n id\n instanceId\n methodId\n label\n cost\n }\n }\n subtotal\n subtotalTax\n shippingTax\n shippingTotal\n total\n totalTax\n feeTax\n feeTotal\n discountTax\n discountTotal\n }\n \n": types.CartContentFragmentDoc,
2020
"\n mutation AddToCart(\n $productId: Int!\n $variationId: Int\n $quantity: Int\n $extraData: String\n ) {\n addToCart(\n input: {\n productId: $productId\n variationId: $variationId\n quantity: $quantity\n extraData: $extraData\n }\n ) {\n cart {\n ...CartContent\n }\n cartItem {\n ...CartItemContent\n }\n }\n }\n \n \n": types.AddToCartDocument,
2121
"\n mutation RemoveItemsFromCart($keys: [ID], $all: Boolean) {\n removeItemsFromCart(input: { keys: $keys, all: $all }) {\n cart {\n ...CartContent\n }\n cartItems {\n ...CartItemContent\n }\n }\n }\n \n \n": types.RemoveItemsFromCartDocument,
@@ -58,7 +58,7 @@ export function graphql(source: "\n fragment ProductVariationContentSlice on Pr
5858
/**
5959
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
6060
*/
61-
export function graphql(source: "\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n extraData {\n key\n value\n }\n }\n \n \n"): (typeof documents)["\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n extraData {\n key\n value\n }\n }\n \n \n"];
61+
export function graphql(source: "\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n totalOnSaleDiscount\n extraData {\n key\n value\n }\n }\n \n \n"): (typeof documents)["\n fragment CartItemContent on CartItem {\n key\n product {\n node {\n ...ProductContentSlice\n }\n }\n variation {\n node {\n ...ProductVariationContentSlice\n }\n }\n quantity\n total\n subtotal\n subtotalTax\n totalOnSaleDiscount\n extraData {\n key\n value\n }\n }\n \n \n"];
6262
/**
6363
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
6464
*/

0 commit comments

Comments
 (0)