Apollo Otp Timer

OtpModal.jsx

const OtpModal = ({ modal, toggle, phoneNumber = '', successCb }) => {
  const [otp, setOtp] = useState('');
  const [timer, setTimer] = useState(10);
  const [hasResendOtp, setHasResendOtp] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      setTimer((timer) => {
        if (timer === 1 || timer === 0) {
          setHasResendOtp(true);

          return 0;
        } else {
          return timer - 1;
        }
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  function handleDismiss() {
    setOtp('');
  }
  const resendOtp = () => {
    if (hasResendOtp) {
      API.post('v2/auth/login/', { phone_number: phoneNumber })
        .then(() => {
          setHasResendOtp(false);
          setTimer(10);
        })
        .catch((e) => {
          alert('gagal mengirim otp kode');
        });
    }

    return null;
  };

  const handleChange = async (otp) => {
    setOtp(otp);

    if (otp.length !== 6) {
      return;
    }

    const payload = { phone_number: phoneNumber, otp_code: otp };
    try {
      const tokenV2 = await getTokenV2(payload);
      const tokenV1 = await getTokenV1(tokenV2);
      const cookies = new Cookies();
      cookies.set('oto-token', tokenV1, { domain: process.env.COOKIES_DOMAIN, path: '/' });

      if (typeof successCb === 'function') {
        successCb(tokenV2);
      }

    } catch (error) {
      setOtp('');
      setErrorMessage('Kode OTP Salah')
    }
  };

  return (
    <>
      <Modal
        onClosed={handleDismiss}
        isOpen={modal}
        toggle={toggle}
        className="oi-modal"
        centered={true}
        keyboard={false}>
        <div className="modal-title-otp">
          <div
            className="box-icon-40 cursor-pointer-all mri-8"
            style={{
              width: '48px',
              height: '48px',
              backgroundColor: '#F7F7FC'
            }}>
            <div
              onClick={toggle}
              style={{
                width: '48px',
                height: '48px',
                background: 'url("/icon/oi-arrow.svg") no-repeat center center'
              }}></div>
          </div>
          <span className="mle-4">Verifikasi OTP</span>
        </div>
        <div className="modal-close-button " onClick={toggle}>
          <CloseIconLarge />
        </div>
        <div className="modal-subtitle-otp">
          Masukkan 6 digit Kode OTP yang terkirim ke nomor Kamu.
        </div>
        {/* Subsection */}
        <div className="my-32 mx-auto">
          <OtpInput
            isInputNum={true}
            containerStyle="containers"
            inputStyle={{
              height: '48px',
              width: '40px',
              background: '#FCFCFC',
              border: '1px solid #D6D8E7',
              borderRadius: '12px',
              fontSize: '16px',
              color: '#2C59D1'
            }}
            value={otp}
            onChange={handleChange}
            numInputs={6}
            separator={<span className="w-8">&nbsp;</span>}
          />
        </div>
        <div
          className="countdown"
          style={{
            margin: '0px auto 274px'
          }}>
          {errorMessage && <div>{errorMessage}</div>}
          {hasResendOtp ? (
            <a className="cursor-pointer-all" onClick={() => resendOtp()}>
              Kirim Ulang Kode Otp
            </a>
          ) : (
            <>
              <span>Kirim ulang kode otp dalam&nbsp;</span>
              <span className="text-orange-300">{timer}&nbsp;</span>
              <span>detik</span>
            </>
          )}
        </div>
      </Modal>
    </>
  );
};