gistfile1.txt

/* eslint-disable react/no-array-index-key */
import React, { useEffect, useState } from 'react';
import {
  Typography,
  TextField,
  Button,
  Container,
  Grid,
  styled,
  Box,
  FormControl,
  FormHelperText,
} from '@mui/material';
import { connect } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { operations } from 'ducks/Join/';
import { getDataFromAction } from 'utils/helpers';
import JoinCodeHintModal from './JoinCodeHintModal';

const TitleGrid = styled(Grid)(({ theme }) => ({
  margin: `${theme.spacing(3)} ${theme.spacing(8)} ${theme.spacing(1)}`,
  [theme.breakpoints.down('sm')]: {
    margin: `${theme.spacing(3)} ${theme.spacing(2)} ${theme.spacing(1)}`,
  },
}));
const TitleTypography = styled(Typography)(() => ({
  fontFamily: 'Helvetica Neue',
  fontWeight: 700,
  textAlign: 'center',
}));

const SubtitleTypography = styled(Typography)(() => ({
  fontFamily: 'Helvetica Neue',
  fontWeight: 500,
  lineHeight: '31px',
  letterSpacing: 0,
  textAlign: 'center',
  color: 'rgba(61, 180, 229, 1)',
}));

const StyledFormControl = styled(FormControl)(() => ({
  '& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
    borderColor: '#CD4040',
  },
}));

const StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({
  color: '#CD4040',
  marginTop: theme.spacing(1),
  fontFamily: 'Roboto',
  fontSize: '16px',
  lineHeight: '13px',
  fontWeight: 400,
  textAlign: 'left',
}));

const VerticalTextField = styled(TextField)(({ theme }) => ({
  '& input': {
    textTransform: 'uppercase',
    height: '84px',
    fontFamily: 'Helvetica Neue',
    fontSize: '50px',
    fontWeight: 700,
    lineHeight: '61px',
    letterSpacing: '0em',
    textAlign: 'center',
    background: '#F6F6F6',
  },
  marginRight: theme.spacing(1),
}));
const ClickableGridItem = styled(Grid)({
  cursor: 'pointer',
  '&:hover': {
    textDecoration: 'underline',
  },
});

interface JoinCodePageProps {
  verifyCompanyJoinCode: (joinCode: string) => any;
}

const JoinCodePage = ({ verifyCompanyJoinCode }: JoinCodePageProps) => {
  const { t } = useTranslation();
  const history = useHistory();
  const [wrongJoinCode, setWrongJoinCode] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const [inputs, setInputs] = useState<string[]>(['', '', '', '', '', '']);

  const getNextFocus = (currentIndex: number): number => {
    const nextIndex =
      currentIndex < inputs.length - 1 ? currentIndex + 1 : currentIndex;
    return nextIndex;
  };
  const isSubmitDisabled = inputs.some((input) => input === '');

  useEffect(() => {
    if (wrongJoinCode) {
      setTimeout(() => {
        inputs.forEach((_, arrIndex) => {
          const input = document.getElementById(
            `join-code-input-${arrIndex}`
          ) as HTMLInputElement;
          if (input) {
            input.blur();
          }
        });
      }, 0);
    }
  }, [wrongJoinCode]);

  const handleInputChange = (index: number, value: string) => {
    // reset wrongcode
    if (wrongJoinCode) setWrongJoinCode(false);

    const newInputs = [...inputs];
    const characters = value.split('');
    if (value === '') {
      newInputs[index] = '';
    } else {
      characters.forEach((char, i) => {
        if (index + i < newInputs.length) {
          newInputs[index + i] = char;
        }
      });
    }
    setInputs(newInputs);

    const nextIndex = getNextFocus(index + characters.length - 1);

    const nextInput = document.getElementById(
      `join-code-input-${nextIndex}`
    ) as HTMLInputElement;
    if (nextInput && value !== '') {
      nextInput.focus();
    }
  };

  const handleSubmit = () => {
    const joinCode = inputs.join('').toLocaleUpperCase();
    verifyCompanyJoinCode(joinCode).then((result: any) => {
      const { isValid } = getDataFromAction(result);
      if (isValid) {
        history.push('/join-company/create-account');
      } else {
        setWrongJoinCode(true);
      }
    });
  };

  const SubmuitButton = styled(Button)(({ theme }) => ({
    marginTop: theme.spacing(2),
  }));

  return (
    <Container>
      <Grid container spacing={3} alignItems="center" justifyContent="center">
        <TitleGrid item xs={12}>
          <TitleTypography variant="h3">
            {t('JoinCompany.JoinCodeStep.Title')}
          </TitleTypography>
        </TitleGrid>
        <ClickableGridItem item xs={12} onClick={handleOpenModal}>
          <SubtitleTypography variant="subtitle1">
            {t('JoinCompany.JoinCodeStep.SubTitle')}
          </SubtitleTypography>
        </ClickableGridItem>
        <Grid
          display="flex"
          justifyContent="center"
          item
          xs={12}
          sm={10}
          lg={6}
        >
          <StyledFormControl error={wrongJoinCode}>
            <Box display="flex" justifyContent="center">
              {inputs.map((value, index) => (
                <VerticalTextField
                  key={`join-code-input-${index}`}
                  id={`join-code-input-${index}`}
                  value={value}
                  onChange={(e) => handleInputChange(index, e.target.value)}
                  variant="outlined"
                  size="small"
                  error={wrongJoinCode}
                />
              ))}
            </Box>

            <StyledFormHelperText
              style={{ visibility: wrongJoinCode ? 'visible' : 'hidden' }}
            >
              {t('JoinCompany.JoinCodeStep.ErrorMessage')}
            </StyledFormHelperText>
          </StyledFormControl>
        </Grid>
        <Grid item display="flex" justifyContent="center" xs={12}>
          <SubmuitButton
            variant="contained"
            color="primary"
            disabled={isSubmitDisabled}
            onClick={handleSubmit}
          >
            {t('JoinCompany.JoinCodeStep.SubmitButton')}
          </SubmuitButton>
        </Grid>
      </Grid>
      <JoinCodeHintModal open={isModalOpen} onClose={handleCloseModal} />
    </Container>
  );
};
const mapDispatchToProps = {
  verifyCompanyJoinCode: operations.verifyCompanyJoinCode,
};

export default connect(null, mapDispatchToProps)(JoinCodePage);