@stokr/components-library 3.0.77 → 3.1.0-alpha.1

package/dist/components/headerHo/HeaderHo.js

@@ -1,707 +0,0 @@
-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 stdin_default$2 from "../2FA/EnterCode.js";
-import stdin_default$3 from "../2FA/ResetCode.js";
-import { authenticationApi } from "../../api/authenticationApi.js";
-import fetchDataPublic from "../../api/fetchDataPublic.js";
-import { AuthContext } from "../../context/AuthContext.js";
-import { withRouter } from "../../utils/withRouter.js";
-import { cooldownHOC } from "../../utils/customHooks.js";
-import { checkActionCode } from "firebase/auth";
-import { auth } from "../../firebase-config.js";
-import { getConfig } from "../../runtime-config.js";
-import { getBackofficeAppUrl } from "../../utils/app-urls-analytics-backoffice.js";
-import { track } from "../../analytics/index.js";
-import { isAccountLockedError, showAccountLockedModal } from "../../utils/show-account-locked-modal.js";
-import { navigateToHref } from "../../routing/navigate-app.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");
-    }
-    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 (isAccountLockedError(error)) {
-                this.setOpenModalStatus("login", false);
-                setIsLoginModalOpen?.(false);
-                this.clearPopupError();
-                this.setIsActionLoading(void 0);
-                await showAccountLockedModal();
-                this.setOpenModalStatus("login", true);
-                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"
-                });
-              }
-              track("signup_account_created", { newsletter_opt_in: !!_userInfo.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 authenticationApi.post("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") {
-              navigateToHref(this.props.navigate, getBackofficeAppUrl());
-            } 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: `${getConfig("onboardingUrl")}/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
-};