Skip to content

Commit 463acba

Browse files
mFlaifelmFlaifel
authored
Merge pull request #123 from GSG-G9/payment-page
payment page
2 parents 65574ae + 0a1df6a commit 463acba

6 files changed

Lines changed: 376 additions & 19 deletions

File tree

‎client/src/component/CardContainer/CardContainer.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@
3131
position: absolute;
3232
width: 100px;
3333
height: 4px;
34-
background: linear-gradient(135deg, #8a6c60, #E24928);
34+
background: linear-gradient(135deg, #8a6c60, #e24928);
3535
bottom: 0;
3636
}
3737

3838
.moreBtn {
3939
position: absolute;
4040
left: 35px;
4141
top: 20px;
42-
text-decoration: 'none';
42+
text-decoration: none;
4343
}
4444

4545
.title {

‎client/src/component/ProductCard/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ const useStyles = makeStyles((theme) => ({
6060
avatar: {
6161
backgroundColor: red[500],
6262
},
63+
linkStyle: {
64+
textDecoration: 'none',
65+
},
6366
}));
6467

6568
export default function ProductCard(props) {
@@ -101,7 +104,7 @@ export default function ProductCard(props) {
101104
/>
102105
}
103106
/>
104-
<Link to={`/product/${data.id}`}>
107+
<Link to={`/product/${data.id}`} className={classes.linkStyle}>
105108
<CardMedia
106109
className={classes.media}
107110
image={data.img_url}

‎client/src/pages/User/paymentPage/AddressForm.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from 'react';
2+
import Grid from '@material-ui/core/Grid';
3+
import Typography from '@material-ui/core/Typography';
4+
import TextField from '@material-ui/core/TextField';
5+
import FormControlLabel from '@material-ui/core/FormControlLabel';
6+
import Checkbox from '@material-ui/core/Checkbox';
7+
8+
export default function AddressForm({ userData }) {
9+
return (
10+
<>
11+
<Typography variant="h6" gutterBottom>
12+
عنوان الشحن
13+
</Typography>
14+
<Grid container spacing={3}>
15+
<Grid item xs={12} sm={6}>
16+
<TextField
17+
required
18+
defaultValue={userData.profileData.first_name}
19+
variant="outlined"
20+
id="firstName"
21+
name="firstName"
22+
label="الأسم الاول "
23+
fullWidth
24+
/>
25+
</Grid>
26+
<Grid item xs={12} sm={6}>
27+
<TextField
28+
required
29+
defaultValue={userData.profileData.last_name}
30+
variant="outlined"
31+
id="lastName"
32+
name="lastName"
33+
label="الأسم الثاني"
34+
fullWidth
35+
/>
36+
</Grid>
37+
<Grid item xs={12}>
38+
<TextField
39+
required
40+
defaultValue={userData.profileData.shipping_address1}
41+
variant="outlined"
42+
id="address1"
43+
name="address1"
44+
label="العنوان الأول"
45+
fullWidth
46+
/>
47+
</Grid>
48+
<Grid item xs={12}>
49+
<TextField
50+
variant="outlined"
51+
defaultValue={userData.profileData.shipping_address2}
52+
id="address2"
53+
name="address2"
54+
label=" العنوان الثاني"
55+
fullWidth
56+
autoComplete="shipping address-line2"
57+
/>
58+
</Grid>
59+
<Grid item xs={12} sm={6}>
60+
<TextField
61+
required
62+
defaultValue={userData.profileData.city}
63+
variant="outlined"
64+
id="city"
65+
name="city"
66+
label="المدينة"
67+
fullWidth
68+
autoComplete="shipping address-level2"
69+
/>
70+
</Grid>
71+
<Grid item xs={12} sm={6}>
72+
<TextField
73+
variant="outlined"
74+
id="state"
75+
name="state"
76+
label="المحافظة"
77+
fullWidth
78+
/>
79+
</Grid>
80+
<Grid item xs={12} sm={6}>
81+
<TextField
82+
variant="outlined"
83+
id="zip"
84+
name="zip"
85+
label="Zip / الرمز البريدي"
86+
fullWidth
87+
autoComplete="shipping postal-code"
88+
/>
89+
</Grid>
90+
<Grid item xs={12} sm={6}>
91+
<TextField
92+
variant="outlined"
93+
id="country"
94+
name="country"
95+
label="البلد "
96+
fullWidth
97+
autoComplete="shipping country"
98+
/>
99+
</Grid>
100+
<Grid item xs={12}>
101+
<FormControlLabel
102+
control={
103+
<Checkbox color="primary" name="saveAddress" value="yes" />
104+
}
105+
label="
106+
استخدم هذا العنوان للحصول على تفاصيل الدفع"
107+
/>
108+
</Grid>
109+
</Grid>
110+
</>
111+
);
112+
}

‎client/src/pages/User/paymentPage/PaymentForm.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import Typography from '@material-ui/core/Typography';
3+
import Grid from '@material-ui/core/Grid';
4+
import TextField from '@material-ui/core/TextField';
5+
import FormControlLabel from '@material-ui/core/FormControlLabel';
6+
import Checkbox from '@material-ui/core/Checkbox';
7+
8+
export default function PaymentForm({ userData }) {
9+
return (
10+
<>
11+
<Typography variant="h6" gutterBottom>
12+
طريقة الدفع
13+
</Typography>
14+
<Grid container spacing={3}>
15+
<Grid item xs={12} md={6}>
16+
<TextField
17+
required
18+
defaultValue={userData.profileData.payment_card_name}
19+
variant="outlined"
20+
id="cardName"
21+
label="الاسم علي البطاقة"
22+
fullWidth
23+
/>
24+
</Grid>
25+
<Grid item xs={12} md={6}>
26+
<TextField
27+
required
28+
defaultValue={userData.profileData.payment_card_number}
29+
variant="outlined"
30+
id="cardNumber"
31+
label=" رقم البطاقة"
32+
fullWidth
33+
/>
34+
</Grid>
35+
<Grid item xs={12} md={6}>
36+
<TextField
37+
required
38+
variant="outlined"
39+
id="expDate"
40+
label="تاريخ الإنتهاء"
41+
defaultValue={userData.profileData.payment_card_expire_date}
42+
fullWidth
43+
/>
44+
</Grid>
45+
<Grid item xs={12} md={6}>
46+
<TextField
47+
required
48+
variant="outlined"
49+
id="cvv"
50+
label="CVV"
51+
helperText="الأرقام الثلاثة الأخيرة على شريط التوقيع"
52+
fullWidth
53+
/>
54+
</Grid>
55+
<Grid item xs={12}>
56+
<FormControlLabel
57+
control={<Checkbox color="primary" name="saveCard" value="yes" />}
58+
label="تذكر تفاصيل بطاقة الائتمان في المرة القادمة"
59+
/>
60+
</Grid>
61+
</Grid>
62+
</>
63+
);
64+
}

‎client/src/pages/User/paymentPage/Review.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import Grid from '@material-ui/core/Grid';
8+
import { useHistory } from 'react-router-dom';
9+
10+
const useStyles = makeStyles((theme) => ({
11+
listItem: {
12+
padding: theme.spacing(1, 0),
13+
},
14+
total: {
15+
fontWeight: 700,
16+
},
17+
title: {
18+
marginTop: theme.spacing(2),
19+
},
20+
}));
21+
22+
export default function Review({ userData }) {
23+
const history = useHistory();
24+
console.log(history.location.state.checkedProducts);
25+
const products = history.location.state.checkedProducts;
26+
const totalPrice = products.reduce(
27+
(prevProduct, newProduct) => prevProduct.new_price + newProduct.new_price
28+
);
29+
30+
const classes = useStyles();
31+
32+
return (
33+
<>
34+
<Typography variant="h6" gutterBottom>
35+
ملخص الطلبية
36+
</Typography>
37+
<List disablePadding>
38+
{products.map((product) => (
39+
<ListItem className={classes.listItem} key={product.name}>
40+
<ListItemText primary={product.name} secondary={product.desc} />
41+
<Typography variant="body2">{product.new_price}</Typography>
42+
</ListItem>
43+
))}
44+
<ListItem className={classes.listItem}>
45+
<ListItemText primary="Total" />
46+
<Typography variant="subtitle1" className={classes.total}>
47+
{totalPrice}
48+
</Typography>
49+
</ListItem>
50+
</List>
51+
</>
52+
);
53+
}

0 commit comments

Comments
 (0)