coffee/components/shipping-content/ShippingContent.jsx

import { Checkbox, FormControlLabel, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useRouter } from 'next/router';
import { setCookie } from 'nookies';
import { useEffect, useState } from 'react';
import {
  useCheckoutData,
  useCheckoutDataUpdate,
} from '../../store/checkout-context';
import { stripe } from '../../utils/helpers/stripe';
import DataCard from '../cards/data-card/DataCard';
import StepTitle from '../layout/steps-title/StepTitle';
import ButtonGroup from './shipping-btnGroup/ButtonGroup';
import ShippingData from './shipping-data/ShippingData';
import ShippingModal from './shipping-modal/ShippingModal';

const ShippingContent = () => {
  const { checkoutStorage } = useCheckoutData();
  const { changeContact, changeShippingData } = useCheckoutDataUpdate();
  const [open, setOpen] = useState({ isOpen: false, type: '' });
  const [checkoutData, setCheckoutData] = useState({});

  const router = useRouter();

  useEffect(() => {
    setCheckoutData(checkoutStorage);
  }, [checkoutStorage]);

  const handleOpen = (type) => setOpen({ isOpen: true, type });
  const handleClose = () => setOpen({ isOpen: false, type: '' });

  const handleChangeShipping = (values) => {
    changeShippingData(values);
    handleClose();
  };

  const handleChangeContact = (values) => {
    changeContact(values);
    handleClose();
  };

  const handleStripePayment = () => {
    stripe({
      lineItems: checkoutData.products.map((el) => ({
        price: el.product.stripeID,
        quantity: el.quantity,
      })),
      userInfo: checkoutData.userInfo,
    });
    setCookie(null, 'review-session', 'active', {
      maxAge: 3600,
      expires: new Date(Date.now() + 3600),
      path: '/',
    });
  };

  const handleBackToCart = () => {
    router.replace('/cart');
  };

  const mapProductsToDom = () => {
    return checkoutData?.products?.map((entry, i) => (
      <DataCard
        key={i}
        data={entry.product}
        quantity={entry.quantity}
      ></DataCard>
    ));
  };

  return (
    <Box container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <StepTitle
        title="Shipping"
        breadcrumbsArray={['Cart', 'Checkout', 'Shipping']}
      />
      <Box sx={{ ml: { xs: 2, md: 12 }, my: 2 }}>
        <Typography sx={{ fontSize: 20 }}>
          The following fields will be used as the shipping details for your
          order
        </Typography>
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', lg: 'row' },
          mr: { xs: 2, md: 12 },
        }}
      >
        <Box flexGrow={1} sx={{ minWidth: '65%', ml: { xs: 2, md: 12 } }}>
          <ShippingData
            email={checkoutData?.userInfo?.email}
            address={checkoutData?.userInfo?.address}
            city={checkoutData?.userInfo?.city}
            postcode={checkoutData?.userInfo?.postcode}
            handleOpen={handleOpen}
          />
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              backgroundColor: '#f2f2f2',
              alignItems: 'center',
              mb: 2,
              width: { sm: '200px' },
              borderRadius: 2,
              p: 1,
            }}
          >
            <FormControlLabel
              control={<Checkbox checked disabled />}
              label="Free Shipping"
              sx={{ color: 'black', ml: 2 }}
            />
          </Box>
          <ButtonGroup
            handleStripePayment={handleStripePayment}
            handleBackToCart={handleBackToCart}
          />
        </Box>
        <Box
          sx={{
            ml: { xs: 2, md: 12, lg: 2 },
            mt: { xs: 5, md: 5, lg: 2 },
            display: 'flex',
            flexDirection: { xs: 'column', sm: 'row', lg: 'column' },
            justifyContent: { sm: 'flex-start' },
            flexWrap: 'wrap',
          }}
        >
          {mapProductsToDom()}
        </Box>
      </Box>
      <ShippingModal
        open={open}
        handleClose={handleClose}
        handleChangeShipping={handleChangeShipping}
        handleChangeContact={handleChangeContact}
      />
    </Box>
  );
};

export default ShippingContent;