@verified-network/verified-custody 0.1.8 → 0.2.0

package/src/pages/contact.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from "react";
+import { useVaultStore } from "../services/store";
+import { errorToast, sendOTPVerification } from "../utils/helpers";
+import PageSlider from "../components/slider";
+import SearchBox from "../components/search";
+import {
+  PrivacyOverlay,
+  TermsAndConditionsOverlay,
+} from "../components/overlays";
+import { imageAssets } from "../utils/constants";
+
+const ContactPage = (props: {
+  setStep: (step: string) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setUserNumberFmt: (number: string) => void;
+  userNumberFmt: string;
+  setUserEmail: (email: string) => void;
+  userEmail: string;
+  setSelectedCountry: (country: {
+    name: string;
+    area: string;
+    flag: string;
+  }) => void;
+  selectedCountry: { name: string; area: string; flag: string };
+  allCountries: any;
+}) => {
+  const [userNumber, setUserNumber] = useState("");
+  const [userInput, setUserInput] = useState("");
+  const [searchActive, setSearchActive] = useState(false);
+  const [sendOtpErrorText, setSendOtpErrorText] = useState("");
+
+  const { pk, vaultContract } = useVaultStore();
+
+  const handleButtonDisplay = () => {
+    const button = document.getElementById("verified-custd-mdl-contact-button");
+    if (button && props.selectedCountry.area && userNumber.length === 10) {
+      setSendOtpErrorText("");
+      button.className = "verified-custd-mdl-startup-button-active";
+    } else if (
+      button &&
+      props.userEmail?.length > 0 &&
+      isNaN(Number(props.userEmail)) &&
+      props.userEmail?.includes("@")
+    ) {
+      setSendOtpErrorText("");
+      button.className = "verified-custd-mdl-startup-button-active";
+    } else {
+      setSendOtpErrorText("");
+      button!.className = "verified-custd-mdl-startup-button";
+    }
+  };
+
+  const handleSendOTP = async () => {
+    if (
+      props.userEmail?.length > 0 &&
+      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(props.userEmail)
+    ) {
+      setSendOtpErrorText("Invalid input, please check your email");
+      return;
+    }
+
+    const vaultId =
+      props.userEmail?.length > 0
+        ? props.userEmail
+        : `+${props.selectedCountry.area}${userNumber}`;
+    const channel = props.userEmail?.length > 0 ? "email" : "sms";
+
+    if (vaultId && channel && pk && vaultContract) {
+      props.setIsLoading(true);
+      await sendOTPVerification(vaultId, channel).then((res: any) => {
+        props.setIsLoading(false);
+        if (res) {
+          setSendOtpErrorText("");
+          props.setStep("3");
+        } else {
+          setSendOtpErrorText(
+            channel === "email"
+              ? "Error while sending otp to your email. Try again later."
+              : "Error while sending otp to your phone number. Try again later."
+          );
+          errorToast(
+            "Oops something went wrong",
+            props.userEmail?.length > 0
+              ? `Input a valid email and try again.`
+              : `Input a valid phone number and try again.`
+          );
+        }
+      });
+    }
+  };
+
+  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 your phone number
+          </p>
+          <div className="verified-custd-mdl-st-contact-input">
+            <div className="verified-custd-mdl-st-contact-content-container">
+              <div
+                onClick={() => {
+                  setSearchActive(!searchActive);
+                }}
+                className="verified-custd-mdl-st-contact-first-section"
+              >
+                <img
+                  onClick={() => {
+                    setSearchActive(!searchActive);
+                  }}
+                  alt="Country Flag"
+                  className="verified-custd-mdl-st-contact-selection-icon"
+                  src={props.selectedCountry.flag}
+                />
+                <p
+                  onClick={() => {
+                    setSearchActive(!searchActive);
+                  }}
+                  className="verified-custd-mdl-st-contact-selection-text"
+                >
+                  + {props.selectedCountry.area}
+                </p>
+                {searchActive && (
+                  <img
+                    onClick={() => {
+                      setSearchActive(!searchActive);
+                    }}
+                    alt="Dropdown Icon"
+                    className="verified-custd-mdl-st-contact-dropdown"
+                    src={imageAssets.arrowUp}
+                  />
+                )}
+                {!searchActive && (
+                  <img
+                    onClick={() => {
+                      setSearchActive(!searchActive);
+                    }}
+                    alt="Dropdown Icon"
+                    className="verified-custd-mdl-st-contact-dropdown"
+                    src={imageAssets.arrowDown}
+                  />
+                )}
+              </div>
+
+              <input
+                onInputCapture={(e: any) => {
+                  if (e.target.value === "") {
+                    setUserInput(userInput + " ");
+                  } else {
+                    setUserInput(e.target.value);
+                  }
+                  const numericInput = e.target.value?.replace(/\D/g, "");
+                  setUserNumber(numericInput);
+                  let formattedNumber = "";
+                  for (let i = 0; i < numericInput?.length; i++) {
+                    formattedNumber += numericInput[i];
+                    if ((i + 1) % 5 === 0 && i + 1 < numericInput?.length) {
+                      formattedNumber += " ";
+                    }
+                  }
+                  props.setUserNumberFmt(formattedNumber);
+                }}
+                onInput={(e) => {
+                  handleButtonDisplay();
+                }}
+                value={props.userNumberFmt}
+                id="phone-input"
+                type="text"
+                className="verified-custd-mdl-st-contact-second-section"
+                placeholder="Enter your phone number"
+              />
+            </div>
+            {searchActive && (
+              <SearchBox
+                pageName="ftu/contact"
+                searchContent={props.allCountries}
+                type="area-code"
+                handleButtonDisplay={handleButtonDisplay}
+                setSelected={props.setSelectedCountry}
+                selected={props.selectedCountry}
+                searchActive={searchActive}
+                setSearchActive={setSearchActive}
+                contentMaxHeight="300"
+                contentbottomMargin="300"
+              />
+            )}
+            {userNumber.length !== 10 && userInput.length > 10 && (
+              <div className="verified-custd-mdl-st-contact-input-error">
+                <p className="verified-custd-mdl-input-error-text">
+                  Invalid input, please check your phone number
+                </p>
+              </div>
+            )}
+            {sendOtpErrorText?.length > 0 && props.userEmail?.length === 0 && (
+              <div className="verified-custd-mdl-st-contact-input-error">
+                <p className="verified-custd-mdl-input-error-text">
+                  {sendOtpErrorText}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+        {!searchActive && (
+          <React.Fragment>
+            <div className="verified-custd-mdl-p-p-payment-portal-amount-info-separator">
+              <div className="verified-custd-mdl-p-p-payment-portal-line"></div>
+              <p className="verified-custd-mdl-p-payment-portal-separator-text">
+                OR
+              </p>
+              <div className="verified-custd-mdl-p-p-payment-portal-line"></div>
+            </div>
+            <div className="verified-custd-mdl-st-contact-input">
+              <input
+                onInputCapture={(e: any) => {
+                  props.setUserEmail(e.target?.value);
+                  props.setUserNumberFmt("");
+                  setUserNumber("");
+                  setUserInput("");
+                }}
+                onInput={(e) => {
+                  handleButtonDisplay();
+                }}
+                type="text"
+                className="verified-custd-mdl-st-contact-second-section"
+                placeholder="Enter your email address"
+              />
+              {sendOtpErrorText?.length > 0 && props.userEmail?.length > 0 && (
+                <div className="verified-custd-mdl-st-contact-input-error">
+                  <p className="verified-custd-mdl-input-error-text">
+                    {sendOtpErrorText}
+                  </p>
+                </div>
+              )}
+            </div>
+          </React.Fragment>
+        )}
+      </div>
+
+      {!searchActive && <div style={{ height: "80px" }}></div>}
+
+      <div className="verified-custd-mdl-startup-contact-footer">
+        <div className="verified-custd-mdl-st-contact-footer-first-section">
+          <TermsAndConditionsOverlay />
+          <button
+            id="verified-custd-mdl-contact-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 handleSendOTP();
+              } 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 handleSendOTP();
+                }
+              }
+            }}
+            className="verified-custd-mdl-startup-button"
+          >
+            Get OTP
+          </button>
+          <div className="verified-custd-mdl-st-contact-footer-second-section">
+            <PrivacyOverlay />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactPage;