feat: review page

components/review-content/ReviewContent.jsx

@@ -0,0 +1,165 @@
+import { Breadcrumbs, Button, Divider, Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+const ReviewContent = () => {
+  return (
+    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+      <Grid item xs={12}>
+        <Typography
+          variant="h3"
+          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
+        >
+          Shipping
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Divider sx={{ backgroundColor: 'primary.main', mx: 12 }} />
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 4 }}>
+        <Breadcrumbs
+          aria-label="breadcrumb"
+          separator="›"
+          sx={{ pl: 12, fontSize: 20 }}
+        >
+          <Typography>Cart</Typography>
+          <Typography>Checkout</Typography>
+          <Typography>Shipping</Typography>
+          <Typography>Payment</Typography>
+          <Typography color="red">Review</Typography>
+        </Breadcrumbs>
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <Typography
+          sx={{
+            width: '100%',
+            textAlign: 'center',
+            color: 'primary.main',
+            fontWeight: 600,
+            fontSize: 22,
+          }}
+        >
+          ORDER COMPLETE SUCCESSFULLY
+        </Typography>
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <Typography
+          sx={{
+            width: '100%',
+            fontWeight: 600,
+            mt: 2,
+            textAlign: 'center',
+          }}
+        >
+          Thank you for placing your order with us. We wll get to work on
+          sending your order as soon as possible
+        </Typography>
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <Typography
+          sx={{
+            width: '100%',
+            textAlign: 'center',
+            mt: 2,
+            fontSize: 44,
+            fontWeight: 600,
+          }}
+        >
+          Order Summary
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            backgroundColor: '#f2f2f2',
+            mt: 4,
+            ml: 12,
+            width: '85%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Order placed on: 05/09/2022
+          </Typography>
+        </Box>
+      </Grid>
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            backgroundColor: '#f2f2f2',
+            ml: 12,
+            width: '85%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Email: johndoe@test
+          </Typography>
+        </Box>
+      </Grid>
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            backgroundColor: '#f2f2f2',
+            ml: 12,
+            width: '85%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Total: $60
+          </Typography>
+        </Box>
+      </Grid>
+      <Grid item xs={12}>
+        <Box
+          sx={{
+            backgroundColor: '#f2f2f2',
+            ml: 12,
+            width: '85%',
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+            Shipping Address: 1684 Upton Avenue, Locke Mills, United Kingdom,
+            04255
+          </Typography>
+        </Box>
+      </Grid>
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            mt: 2,
+            borderRadius: 2,
+            p: 1,
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              mt: 3,
+              mb: 2,
+              height: 50,
+              width: 150,
+              textTransform: 'none',
+              backgroundColor: '#CBA213',
+              color: 'white',
+              mr: 2,
+              fontSize: 16,
+            }}
+          >
+            Back to Home
+          </Button>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ReviewContent;

constants/pages.js

@@ -1,5 +1,8 @@
 export const BASE_PAGE = '/';
 export const CHECKOUT_PAGE = '/checkout';
+export const CART_PAGE = '/cart';
+export const SHIPPING_PAGE = '/shipping';
+export const REVIEW_PAGE = '/review';
 export const LOGIN_PAGE = '/auth';
 export const PROFILE_PAGE = '/profile';
 export const REGISTER_PAGE = '/auth/register';

pages/review/index.js

@@ -0,0 +1,7 @@
+import ReviewContent from '../../components/review-content/ReviewContent';
+
+const ReviewPage = () => {
+  return <ReviewContent></ReviewContent>;
+};
+
+export default ReviewPage;