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

package/dist/components/2FA/main-flow.js

@@ -1,273 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React__default, { useContext, useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
-import { AuthContext } from "../../context/AuthContext.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import stdin_default$1 from "../Switch/Switch.js";
-import { Text } from "../Text/Text.styles.js";
-import stdin_default$5 from "./login-with-otp-flow.js";
-import stdin_default$2 from "./enable-2fa-flow.js";
-import stdin_default$3 from "./disable-2fa-flow.js";
-import { colors } from "../../styles/colors.js";
-import { InfoIcon } from "../InfoIcon/InfoIcon.js";
-import { Modal } from "../Modal/Modal.js";
-import stdin_default$4 from "./Sucess2FA.js";
-import { ModalInner } from "../Modal/Modal.styles.js";
-import { showProgress } from "../Modal/SuccessModal/SuccessModal.js";
-const SUPPORT_URL = "https://support.stokr.io/";
-const Main2FAFlow = ({
-  onRequiresRecentLoginError,
-  open2faflow,
-  onLoginAgainClick,
-  openDisable2faflow,
-  allowDisable2FA = false,
-  title = "SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION",
-  subtitle = "Protect your account with an additional layer of security to log in",
-  showSwitch = true,
-  customComponent,
-  onFlowClose,
-  recentLoginTitle = "LOG IN AGAIN",
-  recentLoginSubtitle = "To continue please log in again and set up your two factor authentication",
-  recentLoginCTA = "Log in again",
-  showInlineLoginOnLogout = true
-}) => {
-  const { user, checkMfaEnrollment, userMfaEnrollment, generateTotpSecret, logoutUser } = useContext(AuthContext);
-  const [isFlowopen, setIsFlowOpen] = useState({
-    enable2fa: open2faflow || false,
-    disable2fa: allowDisable2FA && (openDisable2faflow || false),
-    requiresRecentLogin: false
-  });
-  const [is2FAEnabled, setis2FAEnabled] = useState(false);
-  const [successMessage, setsuccessMessage] = useState();
-  const [isLoginRequired, setisLoginRequired] = useState(false);
-  const [totpData, settotpData] = useState();
-  const [awaitingReauthFor2fa, setAwaitingReauthFor2fa] = useState(false);
-  const enable2faCompletedRef = useRef(false);
-  const disable2faCompletedRef = useRef(false);
-  const onRequiresRecentLoginErrorHandler = () => {
-    setIsFlowOpen({
-      requiresRecentLogin: true,
-      enable2fa: false,
-      disable2fa: false
-    });
-    onRequiresRecentLoginError?.();
-  };
-  const generateTotp = async () => {
-    try {
-      const response = await generateTotpSecret();
-      settotpData(response);
-    } catch (error) {
-      if (error.code === "auth/requires-recent-login" || error.code === "auth/unsupported-first-factor") {
-        setisLoginRequired(true);
-        if (isFlowopen.enable2fa && !isFlowopen.requiresRecentLogin) {
-          onRequiresRecentLoginErrorHandler();
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    if (userMfaEnrollment?.length > 0) {
-      setis2FAEnabled(true);
-    } else if (user && !awaitingReauthFor2fa) {
-      checkMfaEnrollment();
-      generateTotp();
-    }
-  }, [user, userMfaEnrollment, awaitingReauthFor2fa]);
-  useEffect(() => {
-    if (!user || !awaitingReauthFor2fa) return;
-    setAwaitingReauthFor2fa(false);
-    setisLoginRequired(false);
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      requiresRecentLogin: false,
-      enable2fa: true
-    }));
-    checkMfaEnrollment();
-    generateTotp();
-  }, [user, awaitingReauthFor2fa]);
-  useEffect(() => {
-    let timeoutId;
-    if (successMessage) {
-      timeoutId = setTimeout(setsuccessMessage, 400);
-    }
-    return () => {
-      if (timeoutId != null) clearTimeout(timeoutId);
-    };
-  }, [successMessage]);
-  const switchOpenFlow = (prevFlowId, nextFlowId) => {
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      [prevFlowId]: false,
-      [nextFlowId]: true
-    }));
-  };
-  const showDisable2faBlockedModal = () => showProgress({
-    title: "TWO-FACTOR AUTHENTICATION REQUIRED",
-    subtitle: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Under our security policy, two-factor authentication is required on all accounts and cannot be turned off. To reset your method, contact our",
-      " ",
-      /* @__PURE__ */ jsx("a", { href: SUPPORT_URL, target: "_blank", rel: "noreferrer", style: { textDecoration: "underline" }, children: /* @__PURE__ */ jsx("u", { children: "support team" }) }),
-      "."
-    ] }),
-    maxWidth: "820px"
-  });
-  const handleFlowClose = (flowId, completed = false) => {
-    setIsFlowOpen((prev) => ({ ...prev, [flowId]: false }));
-    if (onFlowClose) onFlowClose({ flow: flowId, completed });
-  };
-  const onEnable2FASuccess = async () => {
-    enable2faCompletedRef.current = true;
-    setis2FAEnabled(true);
-    checkMfaEnrollment();
-    setsuccessMessage("Your log in 2FA authentication is now set");
-  };
-  const onDisable2FASuccess = async () => {
-    disable2faCompletedRef.current = true;
-    setis2FAEnabled(false);
-    checkMfaEnrollment();
-    setsuccessMessage("Your log in 2FA authentication is removed");
-  };
-  const handleLoginAgain = async () => {
-    setIsFlowOpen((prev) => ({
-      ...prev,
-      requiresRecentLogin: false,
-      enable2fa: false,
-      disable2fa: false
-    }));
-    await logoutUser();
-    setAwaitingReauthFor2fa(true);
-    onLoginAgainClick?.();
-  };
-  const flowActions = {
-    openEnable2FA: () => switchOpenFlow("disable2fa", "enable2fa"),
-    openDisable2FA: () => {
-      if (!is2FAEnabled) return;
-      if (!allowDisable2FA) {
-        void showDisable2faBlockedModal();
-        return;
-      }
-      switchOpenFlow("enable2fa", "disable2fa");
-    },
-    closeFlows: () => {
-      const wasOpen = Object.keys(isFlowopen).find((key) => isFlowopen[key]);
-      setIsFlowOpen({
-        enable2fa: false,
-        disable2fa: false,
-        requiresRecentLogin: false
-      });
-      if (wasOpen) {
-        onFlowClose?.(wasOpen);
-      }
-    },
-    is2FAEnabled,
-    isFlowOpen: isFlowopen
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ComponentWrapper, { alignVertically: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("h5", { children: title }) }) }),
-    /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: subtitle }) }),
-    showSwitch && /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, children: [
-      /* @__PURE__ */ jsx(
-        InfoIcon,
-        {
-          position: "top",
-          html: is2FAEnabled ? "Enabled" : "Disabled",
-          noIcon: true,
-          noMarginLeft: true,
-          disabled: isFlowopen.enable2fa || isFlowopen.disable2fa,
-          children: /* @__PURE__ */ jsx(
-            stdin_default$1,
-            {
-              dataCy: "2fa-settings-toggle",
-              value1: "disabled",
-              value2: "enabled",
-              value1Color: colors.orangishRed,
-              value2Color: colors.freshGreen,
-              value: is2FAEnabled ? "enabled" : "disabled",
-              revertToPrevious: true,
-              hideValues: true,
-              indicatorStyle: { margin: 0 },
-              handleChange: (value) => {
-                if (isLoginRequired && value === "enabled") {
-                  setIsFlowOpen({
-                    requiresRecentLogin: true,
-                    enable2fa: false,
-                    disable2fa: false
-                  });
-                } else if (value === "enabled") {
-                  switchOpenFlow("disable2fa", "enable2fa");
-                } else if (value === "disabled") {
-                  if (!allowDisable2FA) {
-                    void showDisable2faBlockedModal();
-                    return;
-                  }
-                  switchOpenFlow("enable2fa", "disable2fa");
-                }
-              }
-            }
-          )
-        }
-      ),
-      successMessage && /* @__PURE__ */ jsx(Text, { small: true, success: true, style: { position: "absolute", bottom: 0, left: 0 }, children: /* @__PURE__ */ jsx("p", { children: successMessage }) })
-    ] }),
-    customComponent && (typeof customComponent === "function" ? customComponent(flowActions) : React__default.isValidElement(customComponent) ? React__default.createElement(customComponent.type, {
-      ...customComponent.props,
-      flowActions
-    }) : customComponent),
-    isFlowopen.enable2fa && /* @__PURE__ */ jsx(
-      stdin_default$2,
-      {
-        showFlow: isFlowopen.enable2fa,
-        setShowFlow: (value) => {
-          if (!value) {
-            handleFlowClose("enable2fa", enable2faCompletedRef.current);
-          } else {
-            setIsFlowOpen({ ...isFlowopen, enable2fa: value });
-          }
-        },
-        totpData,
-        onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
-        onSuccess: onEnable2FASuccess
-      }
-    ),
-    allowDisable2FA && isFlowopen.disable2fa && /* @__PURE__ */ jsx(
-      stdin_default$3,
-      {
-        showFlow: isFlowopen.disable2fa,
-        setShowFlow: (value) => {
-          if (!value) {
-            handleFlowClose("disable2fa", disable2faCompletedRef.current);
-          } else {
-            setIsFlowOpen({ ...isFlowopen, disable2fa: value });
-          }
-        },
-        onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
-        onSuccess: onDisable2FASuccess
-      }
-    ),
-    isFlowopen.requiresRecentLogin && /* @__PURE__ */ jsx(Modal, { isOpen: isFlowopen.requiresRecentLogin, onClose: () => handleFlowClose("requiresRecentLogin"), children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: /* @__PURE__ */ jsx(
-      stdin_default$4,
-      {
-        continueButtonId: "2fa-requires-recent-login-btn",
-        continueButtonDataCy: "2fa-requires-recent-login-submit",
-        onClick: () => {
-          void handleLoginAgain();
-        },
-        titleText: recentLoginTitle,
-        subTitleLeft: recentLoginSubtitle,
-        buttonText: recentLoginCTA
-      }
-    ) }) }),
-    !showInlineLoginOnLogout ? null : !user && /* @__PURE__ */ jsx(stdin_default$5, {})
-  ] });
-};
-Main2FAFlow.propTypes = {
-  onRequiresRecentLoginError: PropTypes.func,
-  allowDisable2FA: PropTypes.bool,
-  /** Called when any flow/modal is closed. Receives the flowId: 'enable2fa' | 'disable2fa' | 'requiresRecentLogin' */
-  onFlowClose: PropTypes.func
-};
-var stdin_default = Main2FAFlow;
-export {
-  Main2FAFlow,
-  stdin_default as default
-};

package/dist/components/Footer/Footer.js

@@ -1,69 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import "react";
-import { Wrapper } from "../Grid/Grid.styles.js";
-import { StyledFooter, FooterInner, PartnerWrap, Partner, PartnerLine, PartnerLineBreak, LogoWrap, PoweredWrap, Copyright } from "./Footer.styles.js";
-import MangoPayLogo from "../../static/images/mangopay.svg.js";
-const Footer = ({ color = "primary", hasSidebar = false, isSidebarExpanded }) => /* @__PURE__ */ jsx(StyledFooter, { color, isSidebarExpanded, hasSidebar, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(FooterInner, { hasSidebar, children: [
-  /* @__PURE__ */ jsx(PartnerWrap, { children: /* @__PURE__ */ jsxs(Partner, { children: [
-    /* @__PURE__ */ jsxs(PartnerLine, { children: [
-      "STOKR is a crypto asset service provider (",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079114?lng=en&q=&st=advanced&entType=CASP&entDate=2020-08-01",
-          title: "CASP",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { textDecoration: "underline", color: "white" },
-          children: "CASP"
-        }
-      ),
-      ") ",
-      /* @__PURE__ */ jsx(PartnerLineBreak, {}),
-      "and payment institution (",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079119?lng=en&q=&st=advanced&entType=PI&entDate=2020-08-01",
-          title: "PI",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { textDecoration: "underline", color: "white" },
-          children: "PI"
-        }
-      ),
-      "),"
-    ] }),
-    /* @__PURE__ */ jsx(PartnerLine, { children: "registered with the Luxembourg regulator CSSF." })
-  ] }) }),
-  /* @__PURE__ */ jsx(LogoWrap, { children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      style: {
-        verticalAlign: "middle",
-        minWidth: 44,
-        maxWidth: 120
-      },
-      loading: "lazy",
-      src: MangoPayLogo,
-      alt: "Mangopay logo"
-    }
-  ) }),
-  /* @__PURE__ */ jsx(PoweredWrap, { children: /* @__PURE__ */ jsxs(Copyright, { children: [
-    "Copyright ",
-    (/* @__PURE__ */ new Date()).getFullYear(),
-    " STOKR. All rights reserved."
-  ] }) })
-] }) }) });
-Footer.propTypes = {
-  color: PropTypes.oneOf(["primary", "red"]),
-  lemonwayLogo: PropTypes.string,
-  hasSidebar: PropTypes.bool,
-  isSidebarExpanded: PropTypes.bool
-};
-var stdin_default = Footer;
-export {
-  Footer,
-  stdin_default as default
-};

package/dist/components/Footer/Footer.styles.js

@@ -1,277 +0,0 @@
-import rwd from "../../styles/rwd.js";
-import grid from "../../styles/grid.js";
-import { colors } from "../../styles/colors.js";
-import spacing from "../../styles/spacing.js";
-import styled, { css } from "styled-components";
-const StyledFooter = styled.footer.withConfig({
-  shouldForwardProp: (props) => !["color", "hasSidebar", "isSidebarExpanded"].includes(props)
-})`
-  z-index: 15;
-  position: relative;
-
-  ${(props) => props.color === "primary" && css`
-      color: ${colors.white};
-      background-color: ${colors.blue};
-
-      ${rwd.Medium`
-      box-shadow: inset 0 1px 0 0 ${colors.blueDark};
-    `}
-    `}
-
-  ${(props) => props.color === "red" && css`
-      color: ${colors.white};
-      background-color: ${colors.rustyRed};
-      padding: 0 25px;
-
-      ${rwd.Medium`
-        box-shadow: inset 0 1px 0 0 ${colors.rustyRed};
-      `}
-
-      ${rwd.XLarge`
-        padding: 0 50px;
-      `}
-    `}
-
-  ${rwd.Medium`
-    width: 100%;
-    min-height: ${spacing.footerHeight}px;
-  `}
-
-  @media screen and (max-width: 991px) {
-    height: auto;
-  }
-
-  ${(props) => props.hasSidebar && `
- padding: 0px !important;
-  transition: 0.3s padding;
-  `}
-
-  ${(props) => props.isSidebarExpanded && `
-    padding-left:200px !important;
-  `}
-`;
-const FooterInner = styled.div.withConfig({
-  shouldForwardProp: (props) => !["hasSidebar"].includes(props)
-})`
-  padding: 24px 0;
-  justify-content: space-between;
-
-  ${(props) => props.hasSidebar && `
-    padding: 24px ${grid(1)};
-  `}
-
-  ${rwd.Medium`
-    padding: 14px 0;
-    display: flex;
-    align-items: center;
-    min-height: ${spacing.footerHeight}px;
-
-     ${(props) => props.hasSidebar && `
-      padding: 20px ${grid(1)};
-      `}
-  `}
-
-  @media screen and (max-width: 991px) {
-    flex-direction: column;
-    padding: 56px 32px;
-  }
-`;
-const LogoWrap = styled.div`
-  margin-bottom: 25px;
-  text-align: center;
-
-  ${rwd.MLarge`
-    margin-bottom:0px;
-  `}
-`;
-styled.div`
-  text-align: center;
-
-  ${rwd.Medium`
-    flex: 2;
-  `}
-`;
-const PartnerWrap = styled.div`
-  text-align: center;
-
-  ${rwd.MLarge`
-    text-align: left;
-  `}
-
-  @media screen and (max-width: 991px) {
-    text-align: center;
-    margin-bottom: 25px;
-  }
-`;
-const PoweredWrap = styled.div`
-  text-align: center;
-
-  text-transform: uppercase;
-  letter-spacing: 2.1px;
-  line-height: 1.8;
-  font-weight: 400;
-  font-size: 10px;
-
-  ${rwd.Medium`
-    text-align: left;
-    //margin-top: 10px;
-  `}
-
-  @media screen and (max-width: 991px) {
-    text-align: center;
-
-    div {
-      margin-top: 10px;
-    }
-  }
-`;
-styled.nav`
-  display: block;
-  font-size: 0;
-  padding-top: 6px;
-  padding-bottom: 30px;
-
-  ${rwd.Medium`
-    padding-top: 0;
-    padding-bottom: 0;
-  `}
-
-  ul {
-    display: block;
-    margin: 0;
-    padding: 0;
-    margin-left: -32px;
-  }
-
-  li {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 32px;
-  }
-
-  a {
-    position: relative;
-    display: block;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    padding: 2px 0;
-
-    &:before {
-      content: '';
-      display: block;
-      height: 2px;
-      width: 100%;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      background-color: ${colors.white};
-      opacity: 0;
-      transform: translateY(8px);
-      transition:
-        opacity 0.2s,
-        transform 0.2s;
-    }
-
-    &:hover {
-      &:before {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    ${rwd.Medium`
-      font-size: 9px;
-      line-height: 16px;
-    `}
-  }
-`;
-const Partner = styled.span`
-  display: block;
-  text-transform: uppercase;
-
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 1.8;
-  letter-spacing: 1.8px;
-
-  img {
-    margin-bottom: 4px;
-  }
-
-  @media screen and (max-width: 560px) {
-    line-height: 16px;
-  }
-`;
-const PartnerLine = styled.span`
-  display: block;
-
-  ${rwd.MLarge`
-    white-space: nowrap;
-  `}
-`;
-const PartnerLineBreak = styled.span`
-  display: block;
-
-  ${rwd.XLarge`
-    display: none;
-  `}
-`;
-const Copyright = styled.span`
-  img {
-    margin-bottom: 4px;
-  }
-`;
-styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: self-start;
-
-  span {
-    vertical-align: middle;
-    text-transform: uppercase;
-    -webkit-letter-spacing: 2.1px;
-    -moz-letter-spacing: 2.1px;
-    -ms-letter-spacing: 2.1px;
-    letter-spacing: 2.1px;
-    line-height: 10x;
-    white-space: nowrap;
-    color: inherit;
-  }
-
-  a {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 4px;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  img {
-    /* display: block;
-    max-height: 12px;
-    width: auto; */
-    /* margin-left: 6px; */
-    position: relative;
-    //width: 42px;
-  }
-
-  @media screen and (max-width: 991px) {
-    align-items: center;
-  }
-`;
-export {
-  Copyright,
-  FooterInner,
-  LogoWrap,
-  Partner,
-  PartnerLine,
-  PartnerLineBreak,
-  PartnerWrap,
-  PoweredWrap,
-  StyledFooter
-};