react jsx voucher

import React, { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import CardGiftcardIcon from '@mui/icons-material/CardGiftcard';
import Typography from '@mui/material/Typography';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import { isEmptyArray } from 'helpers/CheckEmpty';
import { useHistory } from 'react-router-dom';
import Swal from 'sweetalert2';
import { useSelector, useDispatch } from 'react-redux';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import { PaymentAction } from 'redux/actions/PaymentAction';
import { CustomerAction } from 'redux/actions/CustomerAction';

const RenderVoucher = ({ handleRemoveVoucher, isDeletingVoucher }) => {
  const history = useHistory();
  const dispatch = useDispatch();
  const [isFilteredVoucher, setIsFilteredVoucher] = useState(false);
  const [myVouchers, setMyVouchers] = useState([]);

  const color = useSelector((state) => state.theme.color);
  const selectedVouchers = useSelector(
    (state) => state.payment.selectedVoucher
  );
  const dataVoucher = useSelector((state) => state.voucher.indexVoucer);
  const basket = useSelector((state) => state.order.basket);

  useEffect(() => {
    const loadData = async () => {
      const vouchers = await dispatch(CustomerAction.getVoucher());
      setMyVouchers(vouchers.data);
    };
    loadData();
  }, []);

  const calculateVoucher = async () => {
    const payload = {
      details: basket?.details,
      outletId: basket?.outletID,
      total: basket?.totalNettAmount,
      customerId: basket?.customerId,
      payments: selectedVouchers.map((item) => ({
        isVoucher: item.isVoucher,
        serialNumber: item.serialNumber,
        voucherId: item.voucherId,
      })),
    };
    Swal.fire({
      title: 'Please Wait !',
      html: 'Voucher will be applied',
      allowOutsideClick: false,
      onBeforeOpen: () => {
        Swal.showLoading();
      },
    });

    const dataVoucher = await dispatch(PaymentAction.calculateVoucher(payload));
    const isVoucherCannotApplied = dataVoucher.data.message;

    if (isVoucherCannotApplied) {
      setIsFilteredVoucher(true);
      const filterSelectedVoucher = selectedVouchers.filter((itemData) => {
        const isSerialNumber = dataVoucher?.data.payments.some(
          (item) => item.serialNumber === itemData.serialNumber
        );
        if (isSerialNumber) {
          return itemData;
        }
      });

      dispatch(PaymentAction.setData(filterSelectedVoucher, 'SELECT_VOUCHER'));
      dispatch({ type: 'INDEX_VOUCHER', payload: dataVoucher.data });
    }

    if (isVoucherCannotApplied) {
      Swal.fire({
        icon: 'info',
        title: dataVoucher.data.message,
        allowOutsideClick: false,
        confirmButtonText: 'OK',
        confirmButtonColor: color.primary,
      });
    } else {
      Swal.fire({
        icon: 'success',
        title: 'Success',
        text: 'successfully applied the voucher!',
        confirmButtonColor: color.primary,
      });
    }
  };

  useEffect(() => {
    if (
      !isEmptyArray(selectedVouchers) &&
      !isDeletingVoucher &&
      !isFilteredVoucher
    ) {
      calculateVoucher();
    }
  }, [selectedVouchers]);

  const styles = {
    paperVoucher: {
      width: '100%',
      marginBottom: 10,
      padding: 10,
      backgroundColor: color.background,
    },
    buttonVoucher: {
      width: '100%',
      height: 40,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    displayFlexAndAlignCenter: { display: 'flex', alignItems: 'center' },
    icon: {
      color: color.primary,
      fontSize: 16,
      marginRight: 5,
    },
    typography: {
      color: color.primary,
      fontSize: 13,
      textTransform: 'none',
      fontWeight: 'bold',
    },
    iconArrow: {
      fontSize: 13,
      color: color.primary,
    },
  };

  const handleSelectVoucher = () => {
    if (
      !isEmptyArray(selectedVouchers) &&
      !selectedVouchers[0]?.applyToLowestItem
    ) {
      Swal.fire({
        icon: 'error',
        title: 'This voucher cannot use multiple voucher',
        allowOutsideClick: false,
        confirmButtonText: 'OK',
        confirmButtonColor: color.primary,
      });
    } else if (
      !isEmptyArray(selectedVouchers) &&
      selectedVouchers[0]?.cannotBeMixed
    ) {
      Swal.fire({
        icon: 'error',
        title: 'This voucher cannot be mixed with other voucher',
        allowOutsideClick: false,
        confirmButtonText: 'Switch to another voucher',
        confirmButtonColor: color.primary,
        showCancelButton: true,
      });
    } else {
      history.push('/my-voucher');
    }
  };

  const renderSelectedVoucher = () => {
    if (!isEmptyArray(dataVoucher?.payments)) {
      return dataVoucher?.payments?.map((selectedVoucher, index) => {
        return (
          <div key={index}>
            <div style={styles.buttonVoucher} variant='outlined'>
              <Typography style={styles.typography}>
                {selectedVoucher.voucherName}
              </Typography>

              <IconButton
                onClick={() => {
                  handleRemoveVoucher(selectedVoucher.serialNumber);
                }}
              >
                <CloseIcon style={styles.iconRemoveVoucherSelected} />
              </IconButton>
            </div>
            <div style={styles.divider} />
          </div>
        );
      });
    }
  };

  return (
    <React.Fragment>
      {!isEmptyArray(myVouchers) && (
        <Paper variant='outlined' style={styles.paperVoucher}>
          <Button
            style={styles.buttonVoucher}
            variant='outlined'
            // disabled={handleDisableButton()}
            onClick={() => {
              handleSelectVoucher();
            }}
          >
            <div style={styles.displayFlexAndAlignCenter}>
              <CardGiftcardIcon style={styles.icon} />
              <Typography style={styles.typography}>Use Voucher</Typography>
            </div>
            <ArrowForwardIosIcon style={styles.iconArrow} />
          </Button>

          {renderSelectedVoucher()}
        </Paper>
      )}
    </React.Fragment>
  );
};

export default RenderVoucher;