done checkout page

src/components/BillingForm/BillingForm.jsx

@@ -8,6 +8,8 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
+  Link,
+  Checkbox
 } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -16,6 +18,9 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Grid from '@mui/material/Grid2';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+
 
 const BillingForm = () => {
 
@@ -49,94 +54,343 @@ const BillingForm = () => {
 
   return (
     <Box
-     
+
       onSubmit={handleSubmit}
       sx={{
         width: '100%',
       }}
     >
-      
-      {/* Product List */}
+
+      {/* Product TableList */}
+      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>1. YOUR ORDER SUMMARY</Typography>
+
       <TableContainer>
-          <Table sx={{ minWidth: 650, mb: 5, backgroundColor:"#F7FBFF" }}>
-            <TableHead>
-              <TableRow>
-                <TableCell width={150}>
-                  <Typography variant='body1'>Item</Typography>
+        <Table sx={{ minWidth: 650, backgroundColor: "#F7FBFF" }}>
+          <TableHead>
+            <TableRow>
+              <TableCell width={150}>
+                <Typography variant='body1'>Item</Typography>
+              </TableCell>
+              <TableCell width={150}>
+                {/* This is just for table offset */}
+                <Typography variant='body1'></Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Colour</Typography>
+              </TableCell>
+              <TableCell align='center'>
+
+                <Typography variant='body1'>Quantity</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Unit Price</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Shipping</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Tax</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Duties</Typography>
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.id}
+                sx={{
+                  '& td, & th': { border: 0 },
+                  '&:last-child td, &:last-child th': { border: 0 }
+                }}
+              >
+                <TableCell component="th" scope="row">
+                  <img
+                    src={row.img_src}
+                    alt={row.img_src}
+                    style={{
+                      width: 100,
+                      height: 100,
+                      aspectRatio: '4 / 4',
+                      objectFit: 'cover',
+                    }}
+                  />
                 </TableCell>
-                <TableCell width={150}>
-                  {/* This is just for table offset */}
-                  <Typography variant='body1'></Typography>
+                <TableCell>
+                  <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
+                  <Typography variant='body2'>{row.description}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Colour</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-
-                  <Typography variant='body1'>Quantity</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Unit Price</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Shipping</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Tax</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Duties</Typography>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                 </TableCell>
               </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => (
-                <TableRow
-                  key={row.id}
+            ))}
+          </TableBody>
+        </Table>
+        <Box sx={{
+          backgroundColor: "#F7FBFF",
+          borderTop: "1px solid rgba(0,0,0,0.1)",
+          borderBottom: "1px solid rgba(0,0,0,0.1)",
+          pl: 2,
+          pr: 6,
+          py: 2,
+          mb: 5,
+          display: "flex",
+          justifyContent: "space-between"
+
+        }}>
+          <Link variant='body2' sx={{ textDecoration: "underline", color: "#000", fontWeight: "200", letterSpacing: 1 }}>ADD A GIFT CARD OR PROMOTION CODE</Link>
+          <Typography variant='body2'> Total <span style={{ fontWeight: "bold" }}>{`RM ${parseFloat(250).toFixed(2)}`}</span> </Typography>
+        </Box>
+      </TableContainer>
+
+      {/* Shipping Data */}
+      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>2. REVIEW SHIPPING AND BILLING ADDRESS</Typography>
+      <Grid container sx={{
+        backgroundColor: "#F7FBFF",
+        borderTop: "1px solid rgba(0,0,0,0.1)",
+        borderBottom: "1px solid rgba(0,0,0,0.1)",
+        p: 2,
+        mb: 10
+      }}>
+        <Grid size={6}>
+          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>SHIPPING ADDRESS</Typography>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>4220 Raintree Boulevard</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Montezuma</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Indiana</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>47862</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>USA</Typography>
+            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>CHANGE SHIPPING ADDRESS</Link>
+          </Box>
+        </Grid>
+        <Grid size={6}>
+          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>4220 Raintree Boulevard</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Montezuma</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Indiana</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>47862</Typography>
+            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>USA</Typography>
+            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>CHANGE SHIPPING ADDRESS</Link>
+          </Box>
+        </Grid>
+      </Grid>
+
+      {/* Delivery Data */}
+      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>3. DELIVERY METHOD</Typography>
+      <Grid container sx={{
+        backgroundColor: "#F7FBFF",
+        borderTop: "1px solid rgba(0,0,0,0.1)",
+        borderBottom: "1px solid rgba(0,0,0,0.1)",
+        p: 2,
+        mb: 10
+      }}>
+        <Grid size={6}>
+          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>EXPRESS DELIVERY (Free)</Typography>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="body2" sx={{ fontWeight: "400" }}>Delivered in 3-4 business days</Typography>
+          </Box>
+        </Grid>
+        <Grid size={6}>
+          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>Caibre Premium Packaging</Typography>
+            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>GIFT MESSAGE & PERSONALISED LABELS AVAILABLE</Link>
+          </Box>
+        </Grid>
+      </Grid>
+
+      {/* PAYMENT Data */}
+      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>4. PAYMENT DETAILS</Typography>
+      <Grid container sx={{
+        backgroundColor: "#F7FBFF",
+        borderTop: "1px solid rgba(0,0,0,0.1)",
+        borderBottom: "1px solid rgba(0,0,0,0.1)",
+        p: 2,
+        mb: 5
+      }}>
+        <Grid size={6}>
+          <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>PAYMENT METHOD</Typography>
+          <Grid container spacing={2}>
+
+            {/* PAYMENT METHOD */}
+            <Grid item size={12}>
+              <Box>
+                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
+                  PAYMENT METHOD
+                </Typography>
+                <RadioGroup row>
+                  <FormControlLabel
+                    value="credit"
+                    control={<Radio />}
+                    label={
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                        <CreditCardIcon />
+                      </Box>
+                    }
+                  />
+                  <FormControlLabel
+                    value="wallet"
+                    control={<Radio />}
+                    label={
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                        <AccountBalanceWalletIcon />
+                      </Box>
+                    }
+                  />
+                </RadioGroup>
+              </Box>
+            </Grid>
+
+            {/* Cardholder Name Input */}
+            <Grid item size={12}>
+              <Box>
+                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
+                  CARDHOLDER NAME
+                </Typography>
+                <TextField
+                  variant="outlined"
+                  sx={{
+                    width: "100%",
+                    backgroundColor: "#FFF",
+                  }}
+                />
+              </Box>
+            </Grid>
+
+            {/* Card Number Input */}
+            <Grid item size={12}>
+              <Box>
+                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
+                  CARD NUMBER
+                </Typography>
+                <Box
                   sx={{
-                    '& td, & th': { border: 0 },
-                    '&:last-child td, &:last-child th': { border: 0 }
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: 1,
                   }}
                 >
-                  <TableCell component="th" scope="row">
-                    <img
-                      src={row.img_src}
-                      alt={row.img_src}
-                      style={{
-                        width: 100,
-                        height: 100,
-                        aspectRatio: '4 / 4',
-                        objectFit: 'cover',
+                  {[...Array(4)].map((_, index) => (
+                    <TextField
+                      key={index}
+                      variant="outlined"
+                      inputProps={{ maxLength: 4 }}
+                      sx={{
+                        width: "100px",
+                        backgroundColor: "#FFF",
+                        textAlign: "center",
                       }}
                     />
-                  </TableCell>
-                  <TableCell>
-                    <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
-                    <Typography variant='body2'>{row.description}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
+                  ))}
+                </Box>
+              </Box>
+            </Grid>
+
+
+
+
+            {/* Expiration Date Input */}
+            <Grid item size={12}>
+              <Box>
+                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
+                  EXPIRATION DATE
+                </Typography>
+                <Box>
+                  <Grid container spacing={2}>
+                    <Grid item size={6}>
+                      <TextField
+                        select
+                        fullWidth
+                        variant="outlined"
+                        defaultValue={1}
+                        sx={{ backgroundColor: "#FFF" }}
+                      >
+                        {[...Array(12)].map((_, index) => (
+                          <MenuItem key={index} value={index + 1}>
+                            {index + 1}
+                          </MenuItem>
+                        ))}
+                      </TextField>
+                    </Grid>
+                    <Grid item size={3}>
+                      <TextField
+                        select
+                        fullWidth
+                        variant="outlined"
+                        defaultValue={2023}
+                        sx={{ backgroundColor: "#FFF" }}
+                      >
+                        {[...Array(10)].map((_, index) => (
+                          <MenuItem key={index} value={2023 + index}>
+                            {2023 + index}
+                          </MenuItem>
+                        ))}
+                      </TextField>
+                    </Grid>
+                    <Grid item size={3}>
+                      <TextField
+                        variant="outlined"
+                        inputProps={{ maxLength: 4 }}
+                        sx={{ backgroundColor: "#FFF" }}
+                      />
+                    </Grid>
+                  </Grid>
+                </Box>
+              </Box>
+            </Grid>
+
+            {/* Securely Store Payment Details */}
+            <Grid item size={12}>
+              <Box>
+                <FormControlLabel
+                  control={<Checkbox />}
+                  label="Securely store payment details for next purchase."
+                />
+              </Box>
+            </Grid>
+
+          </Grid>
+        </Grid>
+      </Grid>
+
+      <Box sx={{display:"flex", flexDirection:"row"}}>
+        <Button
+          variant="contained"
+          color="common.black"
+          onClick={() => { window.location.href = "/checkout" }}
+          sx={{
+            backgroundColor: (theme) => theme.palette.common.black,
+            color: "white",
+            textTransform: "none",
+            ml: "auto",
+            px: 8,
+            py: 2,
+            width: "fit-content",
+            "&:hover": {
+              backgroundColor: (theme) => theme.palette.grey[900],
+            },
+          }}>CONFIRM PURCHASE</Button>
+      </Box>
 
     </Box>
   );

src/components/ConfirmOrder/ConfirmOrder.jsx

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Link,
+} from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Grid from '@mui/material/Grid2';
+import ProductSuggestion from '../../components/ProductSuggestion';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+
+
+const ConfirmOrder = () => {
+
+  const rows = [
+    {
+      img_src: 'https://via.placeholder.com/300',
+      name: 'MELUR',
+      description: 'Atma Sari New Raya Collection 2024',
+      colour: 'black',
+      quantity: 1,
+      price: 335.50
+    }
+  ];
+
+  const [shippingMethod, setShippingMethod] = useState('COD');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission logic
+    console.log('Form submitted');
+  };
+
+  const FieldContainer = ({ label, children }) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+
+  return (
+    <Box
+
+      onSubmit={handleSubmit}
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Box sx={{ mt: 5, mb: 3 }}>
+        <Typography variant='body1' sx={{ fontWeight: "500", mb: 3 }}>THANK YOU MR. OLSON</Typography>
+        <Typography variant='body2'>Thank you for your order. Your order number is 347982. <br />A confirmation email has also been sent to the email address provided.</Typography>
+      </Box>
+
+      {/* Product TableList */}
+      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>ORDER CONFIRMATION</Typography>
+
+      <TableContainer>
+        <Table sx={{ minWidth: 650, backgroundColor: "#F7FBFF" }}>
+          <TableHead>
+            <TableRow>
+              <TableCell width={150}>
+                <Typography variant='body1'>Item</Typography>
+              </TableCell>
+              <TableCell width={150}>
+                {/* This is just for table offset */}
+                <Typography variant='body1'></Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Colour</Typography>
+              </TableCell>
+              <TableCell align='center'>
+
+                <Typography variant='body1'>Quantity</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Unit Price</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Shipping</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Tax</Typography>
+              </TableCell>
+              <TableCell align='center'>
+                <Typography variant='body1'>Duties</Typography>
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.id}
+                sx={{
+                  '& td, & th': { border: 0 },
+                  '&:last-child td, &:last-child th': { border: 0 }
+                }}
+              >
+                <TableCell component="th" scope="row">
+                  <img
+                    src={row.img_src}
+                    alt={row.img_src}
+                    style={{
+                      width: 100,
+                      height: 100,
+                      aspectRatio: '4 / 4',
+                      objectFit: 'cover',
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
+                  <Typography variant='body2'>{row.description}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Box sx={{
+          backgroundColor: "#F7FBFF",
+          borderTop: "1px solid rgba(0,0,0,0.1)",
+          borderBottom: "1px solid rgba(0,0,0,0.1)",
+          pl: 2,
+          pr: 6,
+          py: 2,
+          mb: 5,
+          display: "flex",
+          justifyContent: "space-between"
+
+        }}>
+          <Link variant='body2' sx={{ textDecoration: "underline", color: "#000", fontWeight: "200", letterSpacing: 1 }}>ADD A GIFT CARD OR PROMOTION CODE</Link>
+          <Typography variant='body2'> Total <span style={{ fontWeight: "bold" }}>{`RM ${parseFloat(250).toFixed(2)}`}</span> </Typography>
+        </Box>
+      </TableContainer>
+
+      <Box>
+        <Grid container>
+          <Grid size={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)" }}>
+            <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>PAYMENT METHOD</Typography>
+            <Box sx={{ display: "flex", flexDirection: "row" }}>
+              <Typography variant='body2' sx={{ mr: 5 }}>PAYMENT METHOD</Typography>
+              <Typography variant="body2" sx={{ display: 'flex' }}>
+                {[...Array(12)].map((_, index) => (
+                  <FiberManualRecordIcon sx={{ fontSize: 'inherit', verticalAlign: 'middle', mr: ((index + 1) % 4 == 0) ? 2 : 0 }} />
+                ))}
+                <span>0046</span>
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid size={6}>
+            <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>SHIPPING DETAILS</Typography>
+            <Button
+              variant="contained"
+              color="common.black"
+              onClick={() => { window.location.href = "/checkout" }}
+              sx={{
+                backgroundColor: (theme) => theme.palette.common.black,
+                color: "white",
+                textTransform: "none",
+                px: 8,
+                py: 2,
+                width: "fit-content",
+                "&:hover": {
+                  backgroundColor: (theme) => theme.palette.grey[900],
+                },
+              }}>TRACK ORDER</Button>
+
+          </Grid>
+        </Grid>
+      </Box>
+
+      <Box sx={{
+        width: "100%",
+        borderTop: "1px solid rgba(0,0,0,0.2)",
+        borderBottom: "1px solid rgba(0,0,0,0.2)",
+        py: 4,
+        textAlign: "center"
+      }}>
+        <Typography variant='body1' sx={{ fontWeight: "500", mb: 4 }}>
+          THE ESSENTIALS BASED ON YOUR LAST PURCHASE
+        </Typography>
+
+        <ProductSuggestion />
+
+      </Box>
+
+      <Typography variant='body2' sx={{ mb: 4, color: "#AEAEAE", letterSpacing: 1, textAlign:"center", mt:3, mb:6 }}>
+        <span style={{ color: "#000", fontWeight: "bold" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES
+      </Typography>
+
+
+    </Box>
+  );
+};
+
+export default ConfirmOrder;

src/components/ConfirmOrder/index.js

@@ -0,0 +1 @@
+export { default } from './ConfirmOrder'

src/components/ProductDetails/ProductDetails.jsx

@@ -83,6 +83,7 @@ const ProductDetails = () => {
           {/* Buy Now Button */}
           <Grid item size={12}>
             <Button
+              onClick={()=>{window.location.href ="/cart"}}
               variant="contained"
               color="common.black"
               fullWidth

src/pages/Checkout.jsx

@@ -5,7 +5,8 @@ import Feature from '../components/Feature'
 import LoginForm from '../components/LoginForm'
 import SignUpForm from '../components/SignUpForm'
 import ShippingForm from '../components/ShippingForm'
-import BillingForm from '../components/BillingForm/BillingForm'
+import BillingForm from '../components/BillingForm'
+import ConfirmOrder from '../components/ConfirmOrder'
 
 import Grid from '@mui/material/Grid2';
 
@@ -92,6 +93,12 @@ const Checkout = () => {
         </Grid>
       </Grid>}
 
+      {(content == 3) && <Grid container sx={{ mb: 5 }}>
+        <Grid item size={12}>
+          <ConfirmOrder/>
+        </Grid>
+      </Grid>}
+
 
       <SocialMedia />
       <Feature />