|
@@ -1,4 +1,4 @@
|
1
|
|
-import React from 'react'
|
|
1
|
+import { useEffect, useState } from 'react'
|
2
|
2
|
import { Box, Button, IconButton } from '@mui/material'
|
3
|
3
|
import SocialMedia from '../components/SocialMedia'
|
4
|
4
|
import Feature from '../components/Feature'
|
|
@@ -12,31 +12,24 @@ import TableHead from '@mui/material/TableHead';
|
12
|
12
|
import TableRow from '@mui/material/TableRow';
|
13
|
13
|
import AddIcon from '@mui/icons-material/Add';
|
14
|
14
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
15
|
+import { useSelector, useDispatch } from 'react-redux';
|
15
|
16
|
|
16
|
17
|
const Cart = () => {
|
17
|
18
|
|
18
|
|
- function createData(img_src, description, colour, quantity, price) {
|
19
|
|
- return { img_src, description, colour, quantity, price };
|
20
|
|
- }
|
21
|
|
-
|
22
|
|
- const rows = [
|
23
|
|
- {
|
24
|
|
- img_src: 'https://via.placeholder.com/300',
|
25
|
|
- name: 'MELUR',
|
26
|
|
- description: 'Atma Sari New Raya Collection 2024',
|
27
|
|
- colour: 'black',
|
28
|
|
- quantity: 1,
|
29
|
|
- price: 335.50
|
30
|
|
- },
|
31
|
|
- {
|
32
|
|
- img_src: 'https://via.placeholder.com/300',
|
33
|
|
- name: 'MELUR2',
|
34
|
|
- description: 'Atma Sari New Raya Collection 2025',
|
35
|
|
- colour: 'red',
|
36
|
|
- quantity: 2,
|
37
|
|
- price: 665.00
|
38
|
|
- },
|
39
|
|
- ];
|
|
19
|
+ const dispatch = useDispatch()
|
|
20
|
+ const cart = useSelector((state) => state.cart.cart)
|
|
21
|
+ const [cartProducts, setCartProducts] = useState([]) // this is being used as view only, will not used as a way to manipulate cart in any way
|
|
22
|
+
|
|
23
|
+ useEffect(() => {
|
|
24
|
+
|
|
25
|
+ console.log(cart)
|
|
26
|
+
|
|
27
|
+ }, [])
|
|
28
|
+
|
|
29
|
+ useEffect(() => {
|
|
30
|
+ setCartProducts(cart?.lines?.nodes || [])
|
|
31
|
+ }, [cart])
|
|
32
|
+
|
40
|
33
|
|
41
|
34
|
return (
|
42
|
35
|
<>
|
|
@@ -51,21 +44,14 @@ const Cart = () => {
|
51
|
44
|
md: 5,
|
52
|
45
|
lg: 10
|
53
|
46
|
},
|
54
|
|
- mt:10
|
|
47
|
+ mt: 10
|
55
|
48
|
}}>
|
56
|
49
|
|
57
|
50
|
|
58
|
51
|
{/* Header */}
|
59
|
|
- <Grid container spacing={2} alignItems="center" sx={{ mb: 5, flexDirection: { xs: 'column-reverse', lg: 'row' } }}>
|
60
|
|
-
|
61
|
|
- {/* Type */}
|
62
|
|
- <Grid item size={{xs:12, lg:2}}>
|
63
|
|
- <Typography variant="body2">
|
64
|
|
- <p>Mens Fashion <span style={{ fontWeight: "bold", display: "inline-block" }}>Shopping Bag</span></p>
|
65
|
|
- </Typography>
|
66
|
|
- </Grid>
|
|
52
|
+ <Grid container spacing={2} alignItems="center" sx={{ mb: 5, flexDirection: { xs: 'column-reverse', lg: 'row' } }}>
|
67
|
53
|
|
68
|
|
- <Grid item size={{xs:12, md:4}}>
|
|
54
|
+ <Grid item size={{ xs: 12, md: 4 }}>
|
69
|
55
|
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
|
70
|
56
|
SHOPPING BAG
|
71
|
57
|
</Typography>
|
|
@@ -85,7 +71,7 @@ const Cart = () => {
|
85
|
71
|
<Typography variant='body1'>Description</Typography>
|
86
|
72
|
</TableCell>
|
87
|
73
|
<TableCell align='center'>
|
88
|
|
- <Typography variant='body1'>Colour</Typography>
|
|
74
|
+ <Typography variant='body1'>Variant</Typography>
|
89
|
75
|
</TableCell>
|
90
|
76
|
<TableCell align='center'>
|
91
|
77
|
|
|
@@ -97,49 +83,59 @@ const Cart = () => {
|
97
|
83
|
</TableRow>
|
98
|
84
|
</TableHead>
|
99
|
85
|
<TableBody>
|
100
|
|
- {rows.map((row) => (
|
101
|
|
- <TableRow
|
102
|
|
- key={row.id}
|
103
|
|
- sx={{
|
104
|
|
- '& td, & th': { border: 0 },
|
105
|
|
- '&:last-child td, &:last-child th': { border: 0 }
|
106
|
|
- }}
|
107
|
|
- >
|
108
|
|
- <TableCell component="th" scope="row">
|
109
|
|
- <img
|
110
|
|
- src={row.img_src}
|
111
|
|
- alt={row.img_src}
|
112
|
|
- style={{
|
113
|
|
- width: 100,
|
114
|
|
- height: 100,
|
115
|
|
- aspectRatio: '4 / 4',
|
116
|
|
- objectFit: 'cover',
|
117
|
|
- }}
|
118
|
|
- />
|
119
|
|
- </TableCell>
|
120
|
|
- <TableCell>
|
121
|
|
- <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
|
122
|
|
- <Typography variant='body2'>{row.description}</Typography>
|
123
|
|
- </TableCell>
|
124
|
|
- <TableCell align='center'>
|
125
|
|
- <Typography variant='h6' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
|
126
|
|
- </TableCell>
|
127
|
|
- <TableCell align='center'>
|
128
|
|
- <Box sx={{ display: "flex", justifyContent: "center" }}>
|
129
|
|
- <IconButton>
|
130
|
|
- <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
|
131
|
|
- </IconButton>
|
132
|
|
- <p style={{ fontSize: 20, fontWeight: "bold" }}>{row.quantity}</p>
|
133
|
|
- <IconButton >
|
134
|
|
- <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
|
135
|
|
- </IconButton>
|
136
|
|
- </Box>
|
137
|
|
- </TableCell>
|
138
|
|
- <TableCell align='center'>
|
139
|
|
- <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
|
140
|
|
- </TableCell>
|
141
|
|
- </TableRow>
|
142
|
|
- ))}
|
|
86
|
+ {cartProducts?.map(({ cost, merchandise, quantity }) => {
|
|
87
|
+
|
|
88
|
+ let {amount, currencyCode} = cost.totalAmount
|
|
89
|
+ let {id, image, product, title } = merchandise // the title here is actually the variant title name
|
|
90
|
+
|
|
91
|
+ return (
|
|
92
|
+ <TableRow
|
|
93
|
+ key={id}
|
|
94
|
+ sx={{
|
|
95
|
+ '& td, & th': { border: 0 },
|
|
96
|
+ '&:last-child td, &:last-child th': { border: 0 }
|
|
97
|
+ }}
|
|
98
|
+ >
|
|
99
|
+ <TableCell component="th" scope="row">
|
|
100
|
+ <img
|
|
101
|
+ src={image.src}
|
|
102
|
+ alt={image.src}
|
|
103
|
+ style={{
|
|
104
|
+ width: 100,
|
|
105
|
+ height: 100,
|
|
106
|
+ aspectRatio: '4 / 4',
|
|
107
|
+ objectFit: 'cover',
|
|
108
|
+ objectPosition:"top center"
|
|
109
|
+ }}
|
|
110
|
+ />
|
|
111
|
+ </TableCell>
|
|
112
|
+ <TableCell>
|
|
113
|
+ <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{product.title}</Typography>
|
|
114
|
+
|
|
115
|
+ {product?.collections?.nodes?.map(({title}) => (<Typography variant='body2'>{title}</Typography>) )}
|
|
116
|
+
|
|
117
|
+ </TableCell>
|
|
118
|
+ <TableCell align='center'>
|
|
119
|
+ <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
|
|
120
|
+ </TableCell>
|
|
121
|
+ <TableCell align='center'>
|
|
122
|
+ <Box sx={{ display: "flex", justifyContent: "center" }}>
|
|
123
|
+ <IconButton>
|
|
124
|
+ <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
|
|
125
|
+ </IconButton>
|
|
126
|
+ <p style={{ fontSize: 20, fontWeight: "bold" }}>{quantity}</p>
|
|
127
|
+ <IconButton >
|
|
128
|
+ <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
|
|
129
|
+ </IconButton>
|
|
130
|
+ </Box>
|
|
131
|
+ </TableCell>
|
|
132
|
+ <TableCell align='center'>
|
|
133
|
+ <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`${currencyCode} ${parseFloat(amount).toFixed(2)}`}</Typography>
|
|
134
|
+ </TableCell>
|
|
135
|
+ </TableRow>
|
|
136
|
+ )
|
|
137
|
+
|
|
138
|
+ })}
|
143
|
139
|
</TableBody>
|
144
|
140
|
</Table>
|
145
|
141
|
</TableContainer>
|
|
@@ -147,7 +143,7 @@ const Cart = () => {
|
147
|
143
|
{/* INVOICES */}
|
148
|
144
|
<Grid container spacing={2} sx={{ mb: 5 }}>
|
149
|
145
|
|
150
|
|
- <Grid item size={{xs:12, sm:4, md:3}} sx={{ ml: "auto" }}>
|
|
146
|
+ <Grid item size={{ xs: 12, sm: 4, md: 3 }} sx={{ ml: "auto" }}>
|
151
|
147
|
<Box
|
152
|
148
|
display="flex"
|
153
|
149
|
justifyContent="space-between"
|
|
@@ -155,16 +151,12 @@ const Cart = () => {
|
155
|
151
|
sx={{ mb: 2 }}
|
156
|
152
|
>
|
157
|
153
|
<Typography variant="body1" sx={{ fontWeight: "400" }}>Subtotal</Typography>
|
158
|
|
- <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
|
159
|
|
- </Box>
|
160
|
|
- <Box
|
161
|
|
- display="flex"
|
162
|
|
- justifyContent="space-between"
|
163
|
|
- alignItems="center"
|
164
|
|
- sx={{ mb: 2 }}
|
165
|
|
- >
|
166
|
|
- <Typography variant="body1" sx={{ fontWeight: "400" }}>Shipping</Typography>
|
167
|
|
- <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
|
|
154
|
+ <Typography variant="body1" sx={{ fontWeight: "400" }}>
|
|
155
|
+ {`
|
|
156
|
+ ${cart?.cost?.subtotalAmount?.currencyCode}
|
|
157
|
+ ${parseFloat(cart?.cost?.subtotalAmount?.amount).toFixed(2)}
|
|
158
|
+ `}
|
|
159
|
+ </Typography>
|
168
|
160
|
</Box>
|
169
|
161
|
<Box
|
170
|
162
|
display="flex"
|
|
@@ -173,7 +165,12 @@ const Cart = () => {
|
173
|
165
|
sx={{ mb: 2 }}
|
174
|
166
|
>
|
175
|
167
|
<Typography variant="body1" sx={{ fontWeight: "400" }}>Taxes</Typography>
|
176
|
|
- <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
|
|
168
|
+ <Typography variant="body1" sx={{ fontWeight: "400" }}>
|
|
169
|
+ {`
|
|
170
|
+ ${cart?.cost?.totalTaxAmount?.currencyCode}
|
|
171
|
+ ${parseFloat(cart?.cost?.totalTaxAmount?.amount).toFixed(2)}
|
|
172
|
+ `}
|
|
173
|
+ </Typography>
|
177
|
174
|
</Box>
|
178
|
175
|
<Box
|
179
|
176
|
display="flex"
|
|
@@ -182,7 +179,12 @@ const Cart = () => {
|
182
|
179
|
sx={{ mb: 2 }}
|
183
|
180
|
>
|
184
|
181
|
<Typography variant="body1" sx={{ fontWeight: "400" }}>Total</Typography>
|
185
|
|
- <Typography variant="body1" sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
|
|
182
|
+ <Typography variant="body1" sx={{ fontWeight: "bold" }}>
|
|
183
|
+ {`
|
|
184
|
+ ${cart?.cost?.totalAmount?.currencyCode}
|
|
185
|
+ ${parseFloat(cart?.cost?.totalAmount?.amount).toFixed(2)}
|
|
186
|
+ `}
|
|
187
|
+ </Typography>
|
186
|
188
|
</Box>
|
187
|
189
|
</Grid>
|
188
|
190
|
|
|
@@ -190,7 +192,7 @@ const Cart = () => {
|
190
|
192
|
|
191
|
193
|
{/* BUY NOW */}
|
192
|
194
|
<Box sx={{ mb: 15 }}>
|
193
|
|
- <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection:{xs:"column-reverse", md:"row" } }}>
|
|
195
|
+ <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: { xs: "column-reverse", md: "row" } }}>
|
194
|
196
|
<Typography variant='body2'><span style={{ fontWeight: "bolder" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES</Typography>
|
195
|
197
|
<Button
|
196
|
198
|
variant="contained"
|
|
@@ -203,8 +205,8 @@ const Cart = () => {
|
203
|
205
|
px: 8,
|
204
|
206
|
py: 2,
|
205
|
207
|
mb: {
|
206
|
|
- xs:5,
|
207
|
|
- md:0
|
|
208
|
+ xs: 5,
|
|
209
|
+ md: 0
|
208
|
210
|
},
|
209
|
211
|
"&:hover": {
|
210
|
212
|
backgroundColor: (theme) => theme.palette.grey[900],
|