Order Login Modal

orderFind

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import React, { useContext, useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { ProductContext } from '../context';

const LoginModal = props => {
  const [transactionID, settransactionID] = useState(1);
  const [orderNum, setorderNum] = useState(1);
  const [adminLogin, setadminLogin] = useState('');
  const [modalExit, setExit] = useState(null);
  const [transError, setError] = useState(false);
  const [orderError, setOrderError] = useState(false);
  const [adminError, setAdminError] = useState(false);

  const productConsumer = useContext(ProductContext);
  let { modalLogin, loginModalfunc } = productConsumer;

  useEffect(() => {
    console.log(modalLogin, 'Modal');
  }, [modalLogin, productConsumer.singleOrder]);

  const handleChange = name => event => {
    switch (name) {
      case 'order':
        setorderNum(event.target.value);

        break;

      case 'admin':
        setadminLogin(event.target.value);
       
        break;

      case 'transaction':
        settransactionID(event.target.value);
        
        break;
      default:
        alert('Fail');
        break;
    }
  };

  let handleTransaction = () => {
    if (!productConsumer.singleOrder && transactionID > 1) {
      productConsumer.getTransaction(transactionID);
    }

    setTimeout(() => {
      if (productConsumer.singleOrder === null) {
        setError(true);
      } else if (productConsumer.singleOrder.transactionID) {
        let { transactionID } = productConsumer.singleOrder;

        console.log(transactionID, 'TID');
        loginModalfunc();
        props.history.push(`/transaction/${Number(transactionID)}`);
      }
    }, 300);
  };

  let handleAdmin = () => {
    let admins = [];
    if (productConsumer.productionEnv) {
      admins = [
        process.env.ADMIN_LOGIN,
        process.env.ADMIN_LOGIN1,
        process.env.ADMIN_LOGIN2
      ];
    } else {
      admins = [123, 12345, 123456];
    }
    if (adminLogin) {
      let searchAdmin = () => {
        admins.map(adminID => {
          if (adminLogin.trim() === String(adminID)) {
            alert('passed');
            setAdminError(false);
            setExit('slit-out-vertical');
            loginModalfunc();
          } else {
            setAdminError(true);
          }
          return admins;
        });
      };
      searchAdmin();
    }
  };

  let handleOrderNum = () => {
    if (!productConsumer.singleOrderClient && orderNum > 1) {
      productConsumer.getOrder(orderNum);
    }
    setTimeout(() => {
      if (productConsumer.singleOrderClient === null) {
        setOrderError(true);
      } else if (productConsumer.singleOrderClient.orderID) {
        let order = productConsumer.singleOrderClient;

        // setExit('slit-out-vertical');
        console.log(order, 'TID');
        loginModalfunc();
        props.history.push(`/ordersClient/${Number(order.orderID)}`);
      }
    }, 300);
  };
  if (!modalLogin) {
    return null;
  } else {
    return (
      <div>
        <ModalContainer>
          <div className="container">
            <div className="row">
              <div
                id="modal"
                className={` col-8 mx-auto col-md-6 col-lg-4 text-center text-capitalize p-5 ${modalExit}`}
              >
                <form>
                  {/* //!TRACKINGNUMBER */}
                  <TextField
                    id="outlined-number"
                    label={
                      productConsumer.singleOrder === null
                        ? 'Enter Transaction ID'
                        : `ID Found `
                    }
                    value={transactionID}
                    error={
                      transError && productConsumer.singleOrder === null
                        ? true
                        : false
                    }
                    placeholder={
                      productConsumer.singleOrder === null
                        ? 'No Transaction ID Found'
                        : `${productConsumer.singleOrder.transactionID}`
                    }
                    onChange={handleChange('transaction')}
                    type="number"
                    InputLabelProps={{
                      shrink: true
                    }}
                    margin="normal"
                    variant="outlined"
                  />

                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() => handleTransaction()}
                  >
                    {' '}
                    <span style={{ color: 'white' }}>
                      {productConsumer.singleOrder === null
                        ? 'Find Transaction'
                        : 'To Transaction'}
                    </span>
                  </Button>
                  {/* //!ORDER */}
                  <TextField
                    id="outlined-number"
                    label={
                      productConsumer.singleOrderClient === null
                        ? 'Enter Order Number '
                        : `Order Found `
                    }
                    error={
                      orderError && productConsumer.singleOrderClient === null
                        ? true
                        : false
                    }
                    value={orderNum}
                    placeholder={
                      productConsumer.singleOrderClient === null
                        ? 'No Transaction ID Found'
                        : `${productConsumer.singleOrderClient.orderID}`
                    }
                    onChange={handleChange('order')}
                    type="number"
                    InputLabelProps={{
                      shrink: true
                    }}
                    margin="normal"
                    variant="outlined"
                  />

                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() => handleOrderNum()}
                  >
                    {' '}
                    {productConsumer.singleOrderClient === null
                      ? 'Find Order'
                      : 'To Order'}
                  </Button>
                  {/* //!ADMIN */}
                  <TextField
                    id="outlined-number"
                    label={adminError ? 'Wrong Admin Code' : `Admin Code`}
                    value={adminLogin}
                    error={adminError ? true : false}
                    placeholder={
                      !adminError ? 'Please Enter Your Admin Code' : `Success`
                    }
                    onChange={handleChange('admin')}
                    type="text"
                    InputLabelProps={{
                      shrink: true
                    }}
                    margin="normal"
                    variant="outlined"
                  />
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() => handleAdmin()}
                  >
                    {' '}
                    <span style={{ color: 'white' }}>Administration Login</span>
                  </Button>
                </form>
              </div>
            </div>
          </div>
        </ModalContainer>
      </div>
    );
  }
};

export default withRouter(LoginModal);

const ModalContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 26, 26, 0.99);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;

  #modal {
    background: white;
    border-radius: 0.5rem;
  }
  .close:before {
    content: 'x';
  }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    margin-right: 0.5em;
    margin-top: 0.5em;
    color: rgb(255, 51, 51);
  }
`;