@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/headerHo/HeaderHo.js

@@ -0,0 +1,709 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import styled, { css } from "styled-components";
+import { MAX_WIDTH, GRAY_BASE_HEX } from "../../constants/style.js";
+import stdin_default$4 from "../RegisterModal/RegisterModal.js";
+import stdin_default$6 from "../RegisterConfirmModal/RegisterConfirmModal.js";
+import stdin_default$5 from "../TermsModal/TermsModal.js";
+import stdin_default$7 from "../ForgotPasswordModal/ForgotPasswordModal.js";
+import stdin_default$8 from "../ResetPasswordModal/ResetPasswordModal.js";
+import stdin_default$9 from "../ResetConfirmModal/ResetConfirmModal.js";
+import stdin_default$1 from "../LoginModal/LoginModal.js";
+import stdin_default$a from "../VerifyEmailModal/VerifyEmailModal.js";
+import stdin_default from "../Header/Header.js";
+import "../../styles/rwd.js";
+import "../Text/Text.styles.js";
+import "../Button/Button.styles.js";
+import "../ComponentWrapper/ComponentWrapper.styles.js";
+import "../Modal/Modal.styles.js";
+import "react-qr-code";
+import "../Grid/Grid.styles.js";
+import "../CryptoAddress/CryptoAddress.js";
+import { cooldownHOC } from "../../utils/customHooks.js";
+import "../Modal/Modal.js";
+import "../StepController/StepController.js";
+import "../StepController/StepControllerContext.js";
+import stdin_default$2 from "../2FA/EnterCode.js";
+import { AuthContext } from "../../context/AuthContext.js";
+import "../2FA/Sucess2FA.js";
+import "js-cookie";
+import "../../model/axios.js";
+import "../Layout/Layout.js";
+import stdin_default$3 from "../2FA/ResetCode.js";
+import { authAPI } from "../../api/auth.js";
+import "../2FA/main-flow.js";
+import fetchDataPublic from "../../api/fetchDataPublic.js";
+import { withRouter } from "../../utils/withRouter.js";
+import { checkActionCode } from "firebase/auth";
+import { auth } from "../../firebase-config.js";
+const Outer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["fixed"].includes(props)
+})`
+  position: relative;
+  ${({ fixed }) => fixed && css`
+      position: fixed;
+      z-index: 99;
+      top: 0;
+      left: 50%;
+      width: 100%;
+      background: white;
+      max-width: ${MAX_WIDTH}px;
+      transform: translateX(-50%);
+      border-left: 1px solid ${GRAY_BASE_HEX};
+      border-right: 1px solid ${GRAY_BASE_HEX};
+    `}
+`;
+const _HeaderHoClass = class _HeaderHoClass extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      mobileMenuOpen: false,
+      isModalOpen: {
+        login: false,
+        signUp: false,
+        terms: false,
+        confirm: false,
+        forgot: false,
+        resetPassword: false,
+        confirmReset: false,
+        enter2fa: false,
+        resetCode: false,
+        verifyEmail: false
+      },
+      userInfo: {
+        email: void 0,
+        password: void 0,
+        newsletter: void 0,
+        terms: void 0
+      },
+      popupError: {
+        popup: void 0,
+        message: void 0,
+        field: void 0
+      },
+      popupSuccess: {
+        popup: void 0,
+        message: void 0
+      },
+      isActionLoading: void 0,
+      termsData: void 0,
+      isResettingExpiredToken: false
+    };
+    this.checkForModals = () => {
+      const { isLogin, isSignUp, isResetPassword, isVerifyEmail } = this.props;
+      const { user } = this.context;
+      const { isModalOpen } = this.state;
+      const { login, signUp, resetPassword, verifyEmail } = isModalOpen;
+      const isAnyModalOpen = Object.values(isModalOpen).some((value) => value === true);
+      if (isAnyModalOpen) return;
+      if (isLogin && !user && !login) {
+        this.setState((prevState) => ({
+          ...prevState,
+          isModalOpen: {
+            ...isModalOpen,
+            login: true
+          }
+        }));
+      }
+      if (isSignUp && !user && !signUp) {
+        this.setState((prevState) => ({
+          ...prevState,
+          isModalOpen: {
+            ...isModalOpen,
+            signUp: true
+          }
+        }));
+      }
+      if (isResetPassword && !user && !resetPassword) {
+        this.setState((prevState) => ({
+          ...prevState,
+          isModalOpen: {
+            ...isModalOpen,
+            resetPassword: true
+          }
+        }));
+      }
+      if (isVerifyEmail && !verifyEmail) {
+        this.setState((prevState) => ({
+          ...prevState,
+          isModalOpen: {
+            ...isModalOpen,
+            verifyEmail: true
+          }
+        }));
+      }
+    };
+    this.setOpenModalStatus = (modalId, status) => {
+      const { isModalOpen } = this.state;
+      const { onSignupModalClose, navigate } = this.props;
+      if (!onSignupModalClose) {
+        window.history.pushState("", "", modalId === "login" ? "/login" : modalId === "signUp" ? "/signup" : "/");
+        if ((modalId === "login" || modalId === "signUp" || modalId === "resetPassword" || modalId === "verifyEmail") && !status) {
+          navigate("/");
+        }
+      }
+      this.setState((prevState) => ({
+        ...prevState,
+        isModalOpen: {
+          ...isModalOpen,
+          [modalId]: status
+        },
+        // we need to reset the expired token flag when closing forgot password modal
+        ...modalId === "forgot" && !status && { isResettingExpiredToken: false }
+      }));
+    };
+    this.switchOpenModal = (prevModalId, nextModalId) => {
+      const { isModalOpen } = this.state;
+      if (nextModalId === "login" || nextModalId === "signUp") {
+        window.history.pushState("", "", nextModalId === "login" ? "/login" : nextModalId === "signUp" ? "/signup" : "/");
+      }
+      this.setState((prevState) => ({
+        ...prevState,
+        isModalOpen: {
+          ...isModalOpen,
+          [prevModalId]: false,
+          [nextModalId]: true
+        }
+      }));
+    };
+    this.setUserInfo = (userInfo) => {
+      this.setState((prevState) => ({
+        ...prevState,
+        userInfo
+      }));
+    };
+    this.setPopupError = (popup, message, field = null) => {
+      this.setState((prevState) => ({
+        ...prevState,
+        popupError: {
+          popup,
+          message,
+          field
+        }
+      }));
+    };
+    this.clearPopupError = () => {
+      this.setState((prevState) => ({
+        ...prevState,
+        popupError: {
+          popup: void 0,
+          message: void 0,
+          field: void 0
+        }
+      }));
+    };
+    this.setPopupSuccess = (popup, message) => {
+      this.setState((prevState) => ({
+        ...prevState,
+        popupSuccess: {
+          popup,
+          message
+        }
+      }));
+    };
+    this.clearPopupSuccess = () => {
+      this.setState((prevState) => ({
+        ...prevState,
+        popupSuccess: {
+          popup: void 0,
+          message: void 0
+        }
+      }));
+    };
+    this.setIsActionLoading = (popup) => {
+      this.setState({
+        isActionLoading: popup
+      });
+    };
+  }
+  componentWillUnmount() {
+    document.body.style.overflow = "unset";
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const isOpenCurrent = Object.values(this.state.isModalOpen).some((popup) => popup);
+    const isOpenPrev = Object.values(prevState.isModalOpen).some((popup) => popup);
+    const { mobileMenuOpen } = this.state;
+    const { isFetchingUser, verifyEmailError } = this.context;
+    if (!mobileMenuOpen) {
+      if (isOpenCurrent) {
+        document.body.style.overflow = "hidden";
+      } else if (isOpenPrev) {
+        document.body.style.overflow = "unset";
+      }
+    }
+    if (verifyEmailError?.code === "auth/invalid-action-code" && !window.location.href.includes("login")) {
+      this.props.navigate("/login");
+      this.props.navigate(0);
+    }
+    if (!isFetchingUser) {
+      this.checkForModals();
+    }
+  }
+  render() {
+    const { isModalOpen, userInfo, isActionLoading, termsData, isResettingExpiredToken } = this.state;
+    const {
+      fixed,
+      activateMenu,
+      activeMenu,
+      withoutLoginSignupButton,
+      useRelativePathForMenu,
+      isLoginModalOpen,
+      setIsLoginModalOpen,
+      cooldown
+    } = this.props;
+    const {
+      getUser,
+      user = {},
+      avatar,
+      logoutUser,
+      loginUser,
+      waitingFor2fa,
+      firebaseError,
+      loginUserWithTotp,
+      createUser,
+      handleResetPassword,
+      resendActivationEmail,
+      verifyEmailError,
+      isVerifyingEmail
+    } = this.context;
+    return /* @__PURE__ */ jsxs(Outer, { fixed, children: [
+      /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          user,
+          activeMenu,
+          activateMenu,
+          useRelativePathForMenu,
+          userPhoto: avatar,
+          logoutUser,
+          noFixedPosition: true,
+          withoutLoginSignupButton,
+          onLoginClick: () => {
+            this.setOpenModalStatus("login", true);
+          },
+          onSignUpClick: () => {
+            this.setOpenModalStatus("signUp", true);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$1,
+        {
+          isActionLoading,
+          popupError: this.state.popupError,
+          isModalOpen: !!(isModalOpen.login || isLoginModalOpen),
+          onModalClose: () => {
+            this.setOpenModalStatus("login", false);
+            setIsLoginModalOpen?.(false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalSwitch: () => {
+            this.switchOpenModal("login", "signUp");
+            setIsLoginModalOpen?.(false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onForgotPassword: () => {
+            this.switchOpenModal("login", "forgot");
+            setIsLoginModalOpen?.(false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onFormSend: async ({ email, password }) => {
+            this.clearPopupError();
+            this.setIsActionLoading("login");
+            try {
+              if (password.length > 128) {
+                this.setPopupError("login", "Your password cannot exceed 128 characters");
+                this.setIsActionLoading(void 0);
+                return;
+              }
+              await loginUser(email, password);
+              await getUser();
+              this.setOpenModalStatus("login", false);
+              setIsLoginModalOpen?.(false);
+              this.clearPopupError();
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              const errorMessage = error?.message;
+              if (error?.code === "auth/multi-factor-auth-required") {
+                this.switchOpenModal("login", "enter2fa");
+                this.clearPopupError();
+                this.setIsActionLoading(void 0);
+                return;
+              }
+              if (errorMessage) {
+                this.setPopupError("login", errorMessage);
+              } else {
+                this.setPopupError("login", "Oops. Something's not right there. Try again?");
+              }
+              this.setIsActionLoading(void 0);
+            }
+          }
+        }
+      ),
+      waitingFor2fa && /* @__PURE__ */ jsx(
+        stdin_default$2,
+        {
+          isModal: true,
+          popupError: this.state.popupError,
+          isActionLoading,
+          isModalOpen: isModalOpen.enter2fa,
+          onModalClose: () => {
+            this.setOpenModalStatus("enter2fa", false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalSwitch: () => {
+            this.switchOpenModal("enter2fa", "resetCode");
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onFormSend: async ({ otpInput }) => {
+            this.setIsActionLoading("enter2fa");
+            try {
+              await loginUserWithTotp(otpInput, firebaseError);
+              await getUser();
+              this.setOpenModalStatus("enter2fa", false);
+              this.clearPopupError();
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log("🚀 ~ file: HeaderHo.jsx:364 ~ error:", error);
+              if (error?.code === "auth/invalid-verification-code") {
+                this.setPopupError("enter2fa", "That’s not the right 2FA code. Try again");
+              } else if (error?.code === "auth/code-expired") {
+                this.setPopupError("enter2fa", "Time out. Please restart the flow and log in again");
+              } else {
+                this.setPopupError("enter2fa", error?.message);
+              }
+            }
+            this.setIsActionLoading(void 0);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$3,
+        {
+          isModalOpen: isModalOpen.resetCode,
+          onModalClose: () => {
+            this.setOpenModalStatus("resetCode", false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalSwitch: () => {
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+            this.switchOpenModal("resetCode", "enter2fa");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$4,
+        {
+          isActionLoading,
+          popupError: this.state.popupError,
+          clearPopupError: this.clearPopupError,
+          setPopupError: this.setPopupError,
+          isModalOpen: isModalOpen.signUp,
+          onModalClose: () => {
+            const { location, navigate, onSignupModalClose } = this.props;
+            var body = document.getElementsByTagName("body")[0];
+            body.style.overflow = "unset";
+            this.setOpenModalStatus("signUp", false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+            onSignupModalClose?.();
+            if (location?.state?.isHowStokrWorksRedirect) {
+              navigate("/how-stokr-works/for-investors");
+            }
+          },
+          onTermsClicked: (_termsData) => {
+            this.setState((prevState) => ({
+              ...prevState,
+              termsData: _termsData
+            }));
+            this.switchOpenModal("signUp", "terms");
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalSwitch: () => {
+            this.switchOpenModal("signUp", "login");
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+            const { onSignupModalClose } = this.props;
+            onSignupModalClose?.();
+          },
+          onFormSend: async (_userInfo) => {
+            this.clearPopupError();
+            this.setIsActionLoading("signUp");
+            try {
+              if (_userInfo.password.length > 128) {
+                this.setPopupError("register", "Your password cannot exceed 128 characters", "password");
+                this.setIsActionLoading(void 0);
+                return;
+              }
+              await createUser(_userInfo.email, _userInfo.password);
+              cooldown?.startCooldown();
+              if (_userInfo.newsletter) {
+                await fetchDataPublic("emails/subscribe", {
+                  email: _userInfo.email,
+                  listName: "newsletter"
+                });
+              }
+              this.setUserInfo(_userInfo);
+              this.switchOpenModal("signUp", "confirm");
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log(error);
+              let errorMessage = "Oops, something went wrong";
+              if (error?.response?.status === 429) {
+                errorMessage = error.response.data?.message;
+              }
+              this.setIsActionLoading(void 0);
+              if (error?.code === "auth/email-already-in-use") {
+                this.setPopupError("register", "This email address is already taken", "email");
+              } else if (error?.code === "auth/weak-password") {
+                this.setPopupError("register", "The password is too weak. Please try again.", "password");
+              } else if (error?.code === "auth/error-code:-47") {
+                this.setPopupError("register", "Too many signup attempts. Please try again later.");
+              } else {
+                this.setPopupError("register", errorMessage);
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$5,
+        {
+          isModalOpen: isModalOpen.terms,
+          termsData,
+          onModalClose: () => {
+            this.setOpenModalStatus("terms", false);
+          },
+          onModalSwitch: () => {
+            this.switchOpenModal("terms", "signUp");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$6,
+        {
+          id: "form-submitted-popup",
+          isActionLoading,
+          userInfo,
+          cooldown,
+          popupError: this.state.popupError,
+          popupSuccess: this.state.popupSuccess,
+          isModalOpen: isModalOpen.confirm,
+          onModalClose: () => {
+            this.setOpenModalStatus("confirm", false);
+            this.clearPopupSuccess();
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onResend: async () => {
+            this.clearPopupSuccess();
+            this.clearPopupError();
+            this.setIsActionLoading("resend");
+            try {
+              const email = this.state.userInfo.email;
+              await resendActivationEmail(email);
+              cooldown?.startCooldown();
+              this.setPopupSuccess("resend", "Email sent.");
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log(error);
+              this.setPopupError("resend", "Something went wrong.");
+              this.setIsActionLoading(void 0);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$7,
+        {
+          isActionLoading,
+          popupError: this.state.popupError,
+          popupSuccess: this.state.popupSuccess,
+          isModalOpen: isModalOpen.forgot,
+          isResettingExpiredToken,
+          onModalClose: () => {
+            this.setOpenModalStatus("forgot", false);
+            this.clearPopupError();
+            this.clearPopupSuccess();
+            this.setIsActionLoading(void 0);
+            if (isResettingExpiredToken) {
+              this.setOpenModalStatus("resetPassword", false);
+            }
+          },
+          onModalSwitch: () => {
+            this.switchOpenModal("forgot", "login");
+            this.clearPopupError();
+            this.clearPopupSuccess();
+            this.setIsActionLoading(void 0);
+          },
+          onFormSend: async ({ email }) => {
+            this.clearPopupError();
+            this.setIsActionLoading("forgot");
+            const payload = { email };
+            if (isResettingExpiredToken) {
+              console.log("isResettingExpiredToken: ", isResettingExpiredToken);
+              payload.ventureInvite = true;
+            }
+            try {
+              await authAPI("forgotPass", payload);
+              this.setPopupSuccess(
+                "forgot",
+                `We sent a message to ${email} (you might need to check your junk or spam folder) — tap the link inside to create a new password.`
+              );
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log(error);
+              let errorMessage = `Too many requests. Please try again later.`;
+              console.log(error?.response);
+              if (error?.response?.status === 429 || error?.includes("429")) {
+                errorMessage = error.response.data?.message;
+              }
+              this.setPopupError("forgot", errorMessage);
+              this.setIsActionLoading(void 0);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$8,
+        {
+          isActionLoading,
+          popupError: this.state.popupError,
+          isModalOpen: isModalOpen.resetPassword,
+          onModalClose: () => {
+            const url = new URL(window.location);
+            url.searchParams.delete("oobCode");
+            url.searchParams.delete("mode");
+            window.history.replaceState({}, "", url.toString());
+            this.setOpenModalStatus("resetPassword", false);
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalSwitch: () => {
+            window.history.pushState({}, null, "/login");
+            this.switchOpenModal("resetPassword", "login");
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onFormSend: async ({ password }) => {
+            this.clearPopupError();
+            this.setIsActionLoading("resetPassword");
+            try {
+              await handleResetPassword(password);
+              this.switchOpenModal("resetPassword", "confirmReset");
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log(error);
+              this.setPopupError("resetPassword", error?.message || "Something went wrong.");
+              this.setIsActionLoading(void 0);
+            }
+          },
+          onLoad: async () => {
+            const { location } = this.props;
+            const query = new URLSearchParams(location?.search);
+            const oobCode = query.get("oobCode");
+            if (oobCode && oobCode !== "") {
+              this.setIsActionLoading("resetPassword");
+              try {
+                await checkActionCode(auth, oobCode);
+                this.setIsActionLoading(void 0);
+              } catch (error) {
+                console.log("Password reset code error:", error);
+                if (error?.code === "auth/expired-action-code") {
+                  this.setState((prevState) => ({
+                    ...prevState,
+                    isResettingExpiredToken: true
+                  }));
+                  const url = new URL(window.location);
+                  url.searchParams.delete("oobCode");
+                  url.searchParams.delete("mode");
+                  window.history.replaceState({}, "", url.toString());
+                  this.switchOpenModal("resetPassword", "forgot");
+                } else {
+                  this.setPopupError(
+                    "resetPassword",
+                    "Something went wrong with the password reset link. Please try again."
+                  );
+                }
+              }
+              this.setIsActionLoading(void 0);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        stdin_default$9,
+        {
+          isModalOpen: isModalOpen.confirmReset,
+          onModalClose: () => {
+            this.setOpenModalStatus("confirmReset", false);
+          },
+          onModalSwitch: () => {
+            const { location } = this.props;
+            const query = new URLSearchParams(location?.search);
+            let userType = query.get("user_type");
+            if (userType && userType === "sa") {
+              window.open(`https://backoffice.${"stokr.info"}`);
+            } else {
+              this.switchOpenModal("confirmReset", "login");
+            }
+          }
+        }
+      ),
+      !isVerifyingEmail && /* @__PURE__ */ jsx(
+        stdin_default$a,
+        {
+          id: "verify-email-popup",
+          isActionLoading,
+          popupError: this.state.popupError,
+          popupSuccess: this.state.popupSuccess,
+          isModalOpen: isModalOpen.verifyEmail,
+          continueUrl: `https://signup.${"stokr.info"}/welcome`,
+          error: verifyEmailError,
+          isSuccess: !verifyEmailError,
+          onModalSwitch: () => {
+            this.switchOpenModal("verifyEmail", "login");
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onModalClose: () => {
+            this.setOpenModalStatus("verifyEmail", false);
+            this.clearPopupSuccess();
+            this.clearPopupError();
+            this.setIsActionLoading(void 0);
+          },
+          onResend: async (values) => {
+            this.clearPopupSuccess();
+            this.clearPopupError();
+            this.setIsActionLoading("resend");
+            try {
+              const email = values?.email;
+              await resendActivationEmail(email);
+              this.setPopupSuccess("resend", "Email sent.");
+              this.setIsActionLoading(void 0);
+            } catch (error) {
+              console.log(error);
+              this.setPopupError("resend", error?.message || "Something went wrong.");
+              this.setIsActionLoading(void 0);
+            }
+          }
+        }
+      )
+    ] });
+  }
+};
+_HeaderHoClass.propTypes = {};
+_HeaderHoClass.contextType = AuthContext;
+let HeaderHoClass = _HeaderHoClass;
+const HeaderHo = withRouter(cooldownHOC(HeaderHoClass, 90));
+export {
+  HeaderHo
+};