Skip to content

Commit 629003b

Browse files
pooriasetpooriaset
committed
feat: complete checkout page
1 parent 3b6c168 commit 629003b

File tree

15 files changed

+298
-102
lines changed

15 files changed

+298
-102
lines changed

‎src/app/[locale]/(auth)/account/signup/page.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,12 +125,11 @@ const Page = () => {
125125
value={value}
126126
variant="outlined"
127127
fullWidth
128-
placeholder={labels[name]}
128+
label={labels[name]}
129129
error={!!error?.message}
130130
helperText={error?.message?.toString()}
131-
inputProps={{
131+
InputProps={{
132132
autoComplete: 'new-password',
133-
dir: 'ltr',
134133
}}
135134
/>
136135
);
@@ -152,12 +151,11 @@ const Page = () => {
152151
value={value}
153152
variant="outlined"
154153
fullWidth
155-
placeholder={labels[name]}
154+
label={labels[name]}
156155
error={!!error?.message}
157156
helperText={error?.message?.toString()}
158157
inputProps={{
159158
autoComplete: 'new-password',
160-
dir: 'ltr',
161159
}}
162160
/>
163161
);
@@ -179,7 +177,7 @@ const Page = () => {
179177
value={value}
180178
variant="outlined"
181179
fullWidth
182-
placeholder={labels[name]}
180+
label={labels[name]}
183181
error={!!error?.message}
184182
helperText={error?.message?.toString()}
185183
inputProps={{
@@ -207,7 +205,7 @@ const Page = () => {
207205
value={value}
208206
variant="outlined"
209207
fullWidth
210-
placeholder={labels[name]}
208+
label={labels[name]}
211209
error={!!error?.message}
212210
helperText={error?.message?.toString()}
213211
inputProps={{
@@ -235,7 +233,7 @@ const Page = () => {
235233
value={value}
236234
variant="outlined"
237235
fullWidth
238-
placeholder={labels[name]}
236+
label={labels[name]}
239237
error={!!error?.message}
240238
helperText={error?.message?.toString()}
241239
inputProps={{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const DiscountCode: FC<DiscountCodeProps> = () => {
5454
width: 60,
5555
}}
5656
>
57-
اعمال
57+
{t('buttons.apply')}
5858
</ButtonWithLoading>
5959
</Stack>
6060
</Stack>

‎src/app/[locale]/(main)/(container)/checkout/components/AvailablePaymentGateways.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { GetPaymentGatewaysQuery } from '@/graphql/types/graphql';
2+
import {
3+
Card,
4+
CardContent,
5+
CardHeader,
6+
Grid,
7+
Radio,
8+
Stack,
9+
Typography,
10+
} from '@mui/material';
11+
import { useTranslations } from 'next-intl';
12+
import { FC } from 'react';
13+
import MethodItem from './MethodItem';
14+
15+
export interface AvailablePaymentGatewaysProps {
16+
value: string;
17+
onChange: (string: string) => void;
18+
items: GetPaymentGatewaysQuery | undefined;
19+
}
20+
const AvailablePaymentGateways: FC<AvailablePaymentGatewaysProps> = ({
21+
value,
22+
onChange,
23+
items,
24+
}) => {
25+
const t = useTranslations();
26+
27+
return (
28+
<Card variant="outlined">
29+
<CardHeader
30+
title={t('pages.checkout.paymentGateway')}
31+
titleTypographyProps={{
32+
variant: 'h6',
33+
}}
34+
/>
35+
<CardContent>
36+
<Grid container spacing={2}>
37+
{items?.paymentGateways?.nodes.map((gateway) => {
38+
const selected = gateway.id === value;
39+
40+
const src = gateway.icon || '';
41+
42+
return (
43+
<Grid item key={gateway.id}>
44+
<MethodItem
45+
selected={selected}
46+
onClick={() => onChange(gateway.id)}
47+
>
48+
<Stack
49+
direction="row"
50+
spacing={1}
51+
alignItems="center"
52+
height={40}
53+
>
54+
<Radio disableRipple checked={selected} size="small" />
55+
56+
<img src={src} alt="Gateway" />
57+
58+
<Typography variant="body2">{gateway.title}</Typography>
59+
</Stack>
60+
</MethodItem>
61+
</Grid>
62+
);
63+
})}
64+
</Grid>
65+
</CardContent>
66+
</Card>
67+
);
68+
};
69+
70+
export default AvailablePaymentGateways;

‎src/app/[locale]/(main)/(container)/checkout/components/AvailableShippingMethods.tsx‎

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import PriceLabel from '@/components/common/PriceLabel';
22
import { ShippingRate } from '@/graphql/types/graphql';
3-
import { Radio, Stack, Typography } from '@mui/material';
3+
import {
4+
Card,
5+
CardContent,
6+
CardHeader,
7+
Radio,
8+
Stack,
9+
Typography,
10+
} from '@mui/material';
11+
import { useTranslations } from 'next-intl';
412
import { FC, useState } from 'react';
5-
import ShippingMethodItem from './ShippingMethodItem';
13+
import MethodItem from './MethodItem';
614

715
export interface AvailableShippingMethodsProps {
816
rates: ShippingRate[];
@@ -27,35 +35,47 @@ const AvailableShippingMethods: FC<AvailableShippingMethodsProps> = ({
2735
}
2836
};
2937

38+
const t = useTranslations();
39+
3040
return (
31-
<Stack spacing={0.5}>
32-
{rates?.map((rate) => {
33-
if (!rate) {
34-
return null;
35-
}
36-
const selected = rate.id === value;
37-
return (
38-
<ShippingMethodItem
39-
key={rate.id}
40-
selected={selected}
41-
onClick={() => handleChange(rate.id)}
42-
>
43-
<Stack direction="row" spacing={1} alignItems="center">
44-
<Radio disableRipple checked={selected} size="small" />
41+
<Card variant="outlined">
42+
<CardHeader
43+
title={t('pages.checkout.shippingMethodTitle')}
44+
titleTypographyProps={{
45+
variant: 'h6',
46+
}}
47+
/>
48+
<CardContent>
49+
<Stack spacing={0.5}>
50+
{rates?.map((rate) => {
51+
if (!rate) {
52+
return null;
53+
}
54+
const selected = rate.id === value;
55+
return (
56+
<MethodItem
57+
key={rate.id}
58+
selected={selected}
59+
onClick={() => handleChange(rate.id)}
60+
>
61+
<Stack direction="row" spacing={1} alignItems="center">
62+
<Radio disableRipple checked={selected} size="small" />
4563

46-
<Typography variant="body2">{rate.label}</Typography>
47-
</Stack>
64+
<Typography variant="body2">{rate.label}</Typography>
65+
</Stack>
4866

49-
{!!rate.cost && !isFree && <PriceLabel value={rate.cost} />}
50-
{isFree && (
51-
<Typography color="primary" fontWeight={600}>
52-
رایگان
53-
</Typography>
54-
)}
55-
</ShippingMethodItem>
56-
);
57-
})}
58-
</Stack>
67+
{!!rate.cost && !isFree && <PriceLabel value={rate.cost} />}
68+
{isFree && (
69+
<Typography color="primary" fontWeight={600}>
70+
رایگان
71+
</Typography>
72+
)}
73+
</MethodItem>
74+
);
75+
})}
76+
</Stack>
77+
</CardContent>
78+
</Card>
5979
);
6080
};
6181

‎src/app/[locale]/(main)/(container)/checkout/components/ShippingMethodItem.tsx‎ renamed to ‎src/app/[locale]/(main)/(container)/checkout/components/MethodItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Stack, lighten, styled } from '@mui/material';
22

3-
export const ShippingMethodItem = styled(Stack)<{ selected?: boolean }>(
3+
export const MethodItem = styled(Stack)<{ selected?: boolean }>(
44
({ theme, selected }) => ({
55
width: '100%',
66
flexDirection: 'row',
@@ -23,4 +23,4 @@ export const ShippingMethodItem = styled(Stack)<{ selected?: boolean }>(
2323
}),
2424
);
2525

26-
export default ShippingMethodItem;
26+
export default MethodItem;

0 commit comments

Comments
 (0)