coffee/components/shipping-content/ShippingContent.jsx

import {
  Breadcrumbs,
  Button,
  Checkbox,
  Divider,
  FormControlLabel,
  Grid,
  Typography,
} from '@mui/material';
import { Box } from '@mui/system';
import { useCheckoutData } from '../../store/checkout-context';
import DataCard from '../cards/data-card/DataCard';

const ShippingContent = () => {
  const { checkoutStorage } = useCheckoutData();
  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 color="red">Shipping</Typography>
        </Breadcrumbs>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Typography sx={{ pl: 12, fontSize: 20 }}>
          The following fields will be used as the shipping details for your
          order
        </Typography>
      </Grid>
      <Grid item xs={8}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            backgroundColor: '#f2f2f2',
            alignItems: 'center',
            mt: 2,
            ml: 12,
            mb: 2,
            width: '90%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Contact
          </Typography>
          <Typography>{checkoutStorage?.userInfo.email}</Typography>
          <Button
            sx={{
              height: 35,

              width: 125,
              fontSize: 15,
              textTransform: 'none',
              backgroundColor: '#CBA213',
              color: 'white',
            }}
          >
            Change
          </Button>
        </Box>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            backgroundColor: '#f2f2f2',
            alignItems: 'center',
            ml: 12,
            mb: 2,
            width: '90%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Shipping to
          </Typography>
          <Typography>
            {checkoutStorage?.userInfo.address} |{' '}
            {checkoutStorage?.userInfo.city}{' '}
            {checkoutStorage?.userInfo.postcode}
          </Typography>
          <Button
            sx={{
              height: 35,
              width: 125,
              fontSize: 15,
              textTransform: 'none',
              backgroundColor: '#CBA213',
              color: 'white',
            }}
          >
            Change
          </Button>
        </Box>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            backgroundColor: '#f2f2f2',
            alignItems: 'center',
            ml: 12,
            mb: 2,
            width: '30%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <FormControlLabel
            control={<Checkbox checked disabled />}
            label="Free Shipping"
            sx={{ color: 'black', ml: 2 }}
          />
        </Box>
        <Box
          sx={{
            display: 'flex',
            ml: 12,
            mb: 2,
            borderRadius: 2,
            p: 1,
          }}
        >
          <Button
            variant="contained"
            sx={{
              mt: 3,
              mb: 2,
              height: 50,
              width: 150,
              textTransform: 'none',
              backgroundColor: 'primary.main',
              color: 'white',
              mr: 2,
            }}
          >
            Back to cart
          </Button>
          <Button
            type="submit"
            variant="contained"
            sx={{
              mt: 3,
              mb: 2,
              backgroundColor: '#CBA213',
              height: 50,
              width: 200,
              textTransform: 'none',
              color: 'white',
            }}
          >
            Continue to payment
          </Button>
        </Box>
      </Grid>
      <Grid item xs={4}>
        <Box sx={{ width: '80%', mt: 2 }}>
          {checkoutStorage?.products.map((entry, i) => {
            return (
              <DataCard
                key={i}
                data={entry.product}
                quantity={entry.quantity}
              ></DataCard>
            );
          })}
        </Box>
      </Grid>
    </Grid>
  );
};

export default ShippingContent;