houston-fe/src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam.tsx

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Typography } from '@navi/web-ui/lib/primitives';
import { AlertOutlineIcon } from '@navi/web-ui/lib/icons';
import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives';
import { toast } from '@navi/web-ui/lib/primitives/Toast';
import { AppDispatch } from '@src/store';
import { ApiService } from '@src/services/api';
import {
  fetchTeamDetails,
  fetchTeams,
  selectSearchTeamData,
  setModalOpen,
  setNewTeam,
} from '@src/slices/team1Slice';
import { CREATE_TEAM } from '@src/Pages/TeamRevamp/constants';
import {
  regularExpression,
  emailRegularExpression,
  validEmail,
  CreateTeamProps,
} from '@src/Pages/TeamRevamp/constants';
import styles from './CreateTeam.module.scss';

const CreateTeam: React.FC<CreateTeamProps> = ({ setTeam }) => {
  const dispatch = useDispatch<AppDispatch>();
  const { modalOpen } = useSelector(selectSearchTeamData);
  const [teamName, setTeamName] = useState('');
  const [teamNameError, setTeamNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [email, setEmail] = useState('');
  const validateTeamName = (value: string): void => {
    value = value.trim();
    setTeamNameError(
      !regularExpression.test(value)
        ? 'Min. 3 characters required. Use spaces, ‘_’, or ‘-’ only'
        : '',
    );
  };

  const validateEmail = (value: string): void => {
    setEmailError(
      validEmail.test(value)
        ? !emailRegularExpression.test(value)
          ? 'Please enter a Navi email ID'
          : ''
        : '',
    );
  };
  const handleTeamNameChange = (
    e: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    const inputValue = e.target.value;
    setTeamName(inputValue);
    validateTeamName(inputValue);
  };

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const inputValue = e.target.value;
    setEmail(inputValue);
    validateEmail(inputValue);
  };

  const addTeamHandler = (): void => {
    ApiService.post(CREATE_TEAM, { name: teamName, manager_email: email })
      .then(response => {
        const toastMessage = `${response?.data?.data?.message}`;
        const createdTeamId = response?.data?.data?.id;
        const createdTeamName = response?.data?.data?.name;
        toast.success(toastMessage);
        clearErrors();
        dispatch(fetchTeamDetails(createdTeamId.toString()));
        setTeam({ label: createdTeamName, value: createdTeamId });
        dispatch(setNewTeam(createdTeamId));
        dispatch(fetchTeams());
      })
      .catch(error => {
        const toastMessage = `${
          error?.response?.data?.error?.message
            ? `${error?.response?.data?.error?.message}`
            : ''
        }`;
        toast.error(toastMessage);
      });
  };

  const clearErrors = (): void => {
    dispatch(setModalOpen(false));
    setTeamNameError('');
    setEmailError('');
    setTeamName('');
    setEmail('');
  };

  return (
    <div className={styles['team-wrapper']}>
      {modalOpen && (
        <ModalDialog
          open={modalOpen}
          footerButtons={[
            {
              label: 'Cancel',
              onClick: clearErrors,
            },
            {
              label: 'Submit',
              onClick: addTeamHandler,
              disabled: !!teamNameError || !!emailError || !teamName || !email,
            },
          ]}
          header="Set up new team "
          onClose={clearErrors}
        >
          <div className={styles['input-wrapper']}>
            <Typography variant="p4">
              <BorderedInput
                inputLabel="Team name"
                inputSize="full-width"
                type="text"
                value={teamName}
                onChange={handleTeamNameChange}
                error={teamNameError}
                Icon={<AlertOutlineIcon color="var(--navi-color-red-base)" />}
                placeholder="E.g. NaviPay_Operations"
              />
            </Typography>
          </div>

          <div className={styles['email-wrapper']}>
            <Typography variant="p4" color="#F98600">
              <BorderedInput
                inputLabel="Manager e-mail ID"
                inputSize="full-width"
                type="text"
                value={email}
                onChange={handleEmailChange}
                placeholder="name@navi.com"
                error={emailError}
                Icon={<AlertOutlineIcon color="var(--navi-color-red-base)" />}
              />
            </Typography>
          </div>
        </ModalDialog>
      )}
    </div>
  );
};
export default CreateTeam;