coffee/components/review-content/ReviewContent.jsx

import { Button, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useRouter } from 'next/router';
import { destroyCookie } from 'nookies';

import { useEffect, useState } from 'react';
import { postOrder } from '../../requests/products/postOrderRequest';
import { useStoreUpdate } from '../../store/cart-context';
import { useCheckoutDataUpdate } from '../../store/checkout-context';
import StepTitle from '../layout/steps-title/StepTitle';

let initialRender = true;

const ReviewContent = () => {
  const { parseCheckoutValue, clearCheckout } = useCheckoutDataUpdate();
  const { clearCart } = useStoreUpdate();
  const [orderData, setOrderData] = useState(parseCheckoutValue());

  const router = useRouter();

  useEffect(() => {
    if (initialRender) {
      postOrder(orderData);
      initialRender = false;
      return () => {
        clearCheckout();
        clearCart();
        destroyCookie(null, 'checkout-session', {
          path: '/',
        });
        destroyCookie(null, 'shipping-session', {
          path: '/',
        });
        destroyCookie(null, 'review-session', {
          path: '/',
        });
      };
    }
  }, []);
  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <StepTitle
        title="Review"
        breadcrumbsArray={['Cart', 'Checkout', 'Shipping', 'Payment', 'Review']}
      />
      <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: {orderData.time}
          </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: {orderData?.shippingAddress?.email}
          </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: ${orderData?.totalPrice}
          </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: {orderData?.shippingAddress?.address},{' '}
            {orderData?.shippingAddress?.city},{' '}
            {orderData?.shippingAddress?.country},{' '}
            {orderData?.shippingAddress?.postcode}
          </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,
            }}
            onClick={() => {
              router.push('/');
            }}
          >
            Back to Home
          </Button>
        </Box>
      </Grid>
    </Grid>
  );
};

export default ReviewContent;