@verified-network/verified-custody 0.2.0 → 0.2.2

package/src/pages/otp.tsx

@@ -1,410 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useVaultStore } from "../services/store";
-import {
-  checkOTPVerification,
-  errorToast,
-  sendOTPVerification,
-} from "../utils/helpers";
-import PageSlider from "../components/slider";
-import { PrivacyOverlay } from "../components/overlays";
-import { imageAssets } from "../utils/constants";
-
-const OTPPage = (props: {
-  setStep: (step: string) => void;
-  setIsLoading: (isLoading: boolean) => void;
-  setUserNumberFmt: (number: string) => void;
-  setUserEmail: (email: string) => void;
-  selectedCountry: { name: string; area: string; flag: string };
-  userNumberFmt: string;
-  userEmail: string;
-}) => {
-  const [searchActive, setSearchActive] = useState(false);
-  const [countdown, setCountdown] = useState(60);
-  const [otpIncorrect, setOtpIncorrect] = useState(false);
-
-  const { pk, vaultContract } = useVaultStore();
-
-  useEffect(() => {
-    if (countdown === 0) return;
-
-    const reduceCountdown = setInterval(() => {
-      setCountdown((prevCountdown) => prevCountdown - 1);
-    }, 1000);
-
-    return () => clearInterval(reduceCountdown);
-  }, [countdown]);
-
-  //todo: add key actions to input focus change
-  const handlleInputFocus = (currentInput: any) => {
-    if (currentInput.value.length > 0) {
-      const nextInput = currentInput.nextElementSibling;
-      if (nextInput) {
-        nextInput.focus();
-      }
-    } else if (currentInput.value.length === 0) {
-      currentInput.focus();
-    }
-  };
-
-  const handleOtpPaste = (e: any) => {
-    const pastedText = e.clipboardData.getData("text");
-    const numbersFromText = pastedText?.replace(/\D/g, "");
-    const allOptInputs: any = document.getElementsByClassName("otp-input");
-    if (allOptInputs?.length === 4 && numbersFromText?.length > 0) {
-      for (let i = 0; i < allOptInputs.length; i++) {
-        if (numbersFromText[i]) {
-          allOptInputs[i].value = numbersFromText[i];
-          allOptInputs[i].focus();
-        }
-      }
-    }
-  };
-
-  const handleOtpBackspace = (e: any) => {
-    const previousInpput = e.target.previousElementSibling;
-    if (previousInpput) {
-      previousInpput.focus();
-    }
-  };
-
-  const handleButtonDisplay = () => {
-    const button: any = document.getElementById(
-      "verified-custd-mdl-otp-button"
-    );
-    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
-    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
-    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
-    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
-    if (
-      button &&
-      otp1?.value.length > 0 &&
-      otp2?.value.length > 0 &&
-      otp3?.value.length > 0 &&
-      otp4?.value.length > 0 &&
-      !otpIncorrect
-    ) {
-      button.className = "verified-custd-mdl-startup-button-active";
-    } else {
-      button.className = "verified-custd-mdl-startup-button";
-    }
-  };
-
-  const handleVerifyOtp = async () => {
-    const vaultId =
-      props.userEmail?.length > 0
-        ? props.userEmail
-        : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
-            " ",
-            ""
-          )}`;
-    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
-    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
-    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
-    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
-    if (
-      otp1?.value?.length > 0 &&
-      otp2?.value?.length > 0 &&
-      otp3?.value?.length > 0 &&
-      otp4?.value?.length > 0 &&
-      vaultId &&
-      pk &&
-      vaultContract
-    ) {
-      props.setIsLoading(true);
-      const fullOtp = otp1?.value + otp2?.value + otp3?.value + otp4?.value;
-      await checkOTPVerification(vaultId, fullOtp).then((res) => {
-        props.setIsLoading(false);
-        if (res) {
-          props.setStep("4");
-        } else {
-          setOtpIncorrect(true);
-        }
-      });
-    }
-  };
-
-  const handleResendOtp = async () => {
-    const vaultId =
-      props.userEmail?.length > 0
-        ? props.userEmail
-        : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
-            " ",
-            ""
-          )}`;
-
-    const channel = props.userEmail?.length > 0 ? "email" : "sms";
-
-    if (vaultId && channel) {
-      props.setIsLoading(true);
-      await sendOTPVerification(vaultId, channel).then((res) => {
-        props.setIsLoading(false);
-        if (res) {
-          setCountdown(60);
-          setOtpIncorrect(false);
-          const otp1: any = document.getElementById(
-            "verified-custd-mdl-otp-input-1"
-          );
-          const otp2: any = document.getElementById(
-            "verified-custd-mdl-otp-input-2"
-          );
-          const otp3: any = document.getElementById(
-            "verified-custd-mdl-otp-input-3"
-          );
-          const otp4: any = document.getElementById(
-            "verified-custd-mdl-otp-input-4"
-          );
-          (otp1!.value = ""),
-            (otp2!.value = ""),
-            (otp3!.value = ""),
-            (otp4!.value = "");
-        } else {
-          errorToast("Oops something went wrong", "Unexpected error");
-        }
-      });
-    }
-  };
-
-  return (
-    <div className="verified-custd-mdl-startup-language">
-      <div className="verified-custd-mdl-startup-contact">
-        <PageSlider sliderCount={[1, 2, 3]} currentSlider="0" />
-        <div className="verified-custd-mdl-startup-contact-content">
-          <p className="verified-custd-mdl-startup-contact-text">Enter OTP</p>
-          <div className="verified-custd-mdl-startup-otp-text">
-            <p className="verified-custd-mdl-startup-otp-header-text">
-              Enter <span style={{ color: "#0C0C0E" }}>4-Digit OTP</span> (One
-              Time Password) sent to your{" "}
-              {props.userNumberFmt?.length > 0
-                ? "phone number"
-                : "email address"}
-            </p>
-            <div className="verified-custd-mdl-startup-otp-footer">
-              <p className="verified-custd-mdl-startup-otp-footer-text">
-                {props.userNumberFmt?.length > 0 && (
-                  <React.Fragment>
-                    <span>(+{props.selectedCountry?.area})</span>{" "}
-                    <span> {props.userNumberFmt?.split(" ")[0]}</span>{" "}
-                    <span> {props.userNumberFmt?.split(" ")[1]}</span>
-                  </React.Fragment>
-                )}
-                {props.userEmail?.length > 0 && <span>{props.userEmail}</span>}
-              </p>
-              <img
-                onClick={() => {
-                  props.setUserNumberFmt("");
-                  props.setUserEmail("");
-                  props.setStep("2");
-                }}
-                src={imageAssets.editBlue}
-                alt="edit-icon"
-                className="verified-custd-mdl-st-otp-icon"
-              />
-            </div>
-          </div>
-        </div>
-        <div className="verified-custd-mdl-otp-input-container">
-          <div className="verified-custd-mdl-otp-input-group">
-            <input
-              onInputCapture={(e: any) => {
-                e.target.value = e.target.value?.replace(/\D/g, "");
-                setOtpIncorrect(false);
-              }}
-              onInput={(e) => {
-                handlleInputFocus(e.target);
-                handleButtonDisplay();
-              }}
-              onKeyDown={(e: any) => {
-                if (e.key === "Backspace" && e.target.value === "") {
-                  handleOtpBackspace(e);
-                }
-              }}
-              onPaste={(e) => {
-                handleOtpPaste(e);
-              }}
-              className={
-                otpIncorrect
-                  ? "verified-custd-mdl-otp-input-red"
-                  : "verified-custd-mdl-otp-input"
-              }
-              type="text"
-              maxLength={1}
-              id="verified-custd-mdl-otp-input-1"
-            />
-            <input
-              onInputCapture={(e: any) => {
-                e.target.value = e.target.value?.replace(/\D/g, "");
-                setOtpIncorrect(false);
-              }}
-              onInput={(e) => {
-                handlleInputFocus(e.target);
-                handleButtonDisplay();
-              }}
-              onKeyDown={(e: any) => {
-                if (e.key === "Backspace" && e.target.value === "") {
-                  handleOtpBackspace(e);
-                }
-              }}
-              className={
-                otpIncorrect
-                  ? "verified-custd-mdl-otp-input-red"
-                  : "verified-custd-mdl-otp-input"
-              }
-              type="text"
-              maxLength={1}
-              id="verified-custd-mdl-otp-input-2"
-            />
-            <input
-              onInputCapture={(e: any) => {
-                e.target.value = e.target.value?.replace(/\D/g, "");
-                setOtpIncorrect(false);
-              }}
-              onInput={(e) => {
-                handlleInputFocus(e.target);
-                handleButtonDisplay();
-              }}
-              onKeyDown={(e: any) => {
-                if (e.key === "Backspace" && e.target.value === "") {
-                  handleOtpBackspace(e);
-                }
-              }}
-              className={
-                otpIncorrect
-                  ? "verified-custd-mdl-otp-input-red"
-                  : "verified-custd-mdl-otp-input"
-              }
-              type="text"
-              maxLength={1}
-              id="verified-custd-mdl-otp-input-3"
-            />
-            <input
-              onInputCapture={(e: any) => {
-                e.target.value = e.target.value?.replace(/\D/g, "");
-                setOtpIncorrect(false);
-              }}
-              onInput={(e) => {
-                handlleInputFocus(e.target);
-                handleButtonDisplay();
-              }}
-              onKeyDown={(e: any) => {
-                if (e.key === "Backspace" && e.target.value === "") {
-                  handleOtpBackspace(e);
-                }
-              }}
-              className={
-                otpIncorrect
-                  ? "verified-custd-mdl-otp-input-red"
-                  : "verified-custd-mdl-otp-input"
-              }
-              type="text"
-              maxLength={1}
-              id="verified-custd-mdl-otp-input-4"
-            />
-          </div>
-          <div className="verified-custd-mdl-otp-timer">
-            {!otpIncorrect && countdown > 5 && (
-              <p className="verified-custd-mdl-otp-timer-text">
-                <span style={{ color: "#717286", fontWeight: 400 }}>00:</span>
-                {countdown}
-              </p>
-            )}
-            {!otpIncorrect && countdown <= 5 && countdown > 0 && (
-              <p className="verified-custd-mdl-otp-timer-text-red">
-                <span style={{ fontWeight: 400 }}>00:</span>
-                {countdown}
-              </p>
-            )}
-            {!otpIncorrect && countdown === 0 && (
-              <p className="verified-custd-mdl-otp-resend-text">
-                Didn't receive an OTP ?
-              </p>
-            )}
-            {otpIncorrect && (
-              <p className="verified-custd-mdl-otp-incorrect-text">
-                Please enter the correct OTP
-              </p>
-            )}
-            {!otpIncorrect && countdown > 0 && (
-              <p className="verified-custd-mdl-otp-resend-text">Resend OTP</p>
-            )}
-            {!otpIncorrect && countdown === 0 && (
-              <p
-                onClick={async () => {
-                  //clear input content
-                  const inputs: any =
-                    document.getElementsByClassName("otp-input");
-                  if (inputs) {
-                    for (let i = 0; i < inputs.length; i++) {
-                      inputs[i].value = "";
-                    }
-                  }
-
-                  await handleResendOtp();
-                }}
-                className="verified-custd-mdl-otp-resend-text-active"
-              >
-                Resend OTP
-              </p>
-            )}
-            {otpIncorrect && (
-              <p
-                onClick={async () => {
-                  //clear input content
-                  const inputs: any =
-                    document.getElementsByClassName("otp-input");
-                  if (inputs) {
-                    for (let i = 0; i < inputs.length; i++) {
-                      inputs[i].value = "";
-                    }
-                  }
-
-                  await handleResendOtp();
-                }}
-                className="verified-custd-mdl-otp-resend-text-active"
-              >
-                Resend OTP
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {!searchActive && <div style={{ height: "100px" }}></div>}
-
-      <div className="verified-custd-mdl-startup-contact-footer">
-        <div className="verified-custd-mdl-st-contact-footer-first-section">
-          <button
-            id="verified-custd-mdl-otp-button"
-            onClick={async (e: any) => {
-              if (
-                e.target.className.includes(
-                  "verified-custd-mdl-startup-button"
-                ) &&
-                e.target.className !== "verified-custd-mdl-startup-button"
-              ) {
-                e.target.className = "verified-custd-mdl-startup-button-click";
-                await handleVerifyOtp();
-              } else {
-                const buttonElement = document.getElementsByClassName(
-                  "verified-custd-mdl-startup-button-active"
-                );
-                if (buttonElement.length > 0) {
-                  buttonElement[0].className =
-                    "verified-custd-mdl-startup-button-click";
-                  await handleVerifyOtp();
-                }
-              }
-            }}
-            className="verified-custd-mdl-startup-button"
-          >
-            Proceed
-          </button>
-          <div className="verified-custd-mdl-st-contact-footer-second-section">
-            <PrivacyOverlay />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OTPPage;