@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/ToDoList/ToDoListTask.styles.js

@@ -0,0 +1,119 @@
+import styled from "styled-components";
+import { Icon as Icon$1 } from "../Icon/Icon.style.js";
+import { ToDoTaskState } from "./ToDoList.js";
+import { colors } from "../../styles/colors.js";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["disabled", "link"].includes(props)
+})`
+  display: flex;
+  height: 56px;
+  align-items: center;
+
+  ${(props) => props.disabled && `
+    opacity:0.5;
+    cursor: context-menu;
+  `}
+  ${(props) => props.link && `
+    cursor:pointer;
+  `}
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const Title = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state", "link"].includes(props)
+})`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  text-align: left;
+
+  ${(props) => (props.state === ToDoTaskState.IN_PROGRESS || props.state === ToDoTaskState.APPROVED || props.state === ToDoTaskState.NOT_AVAILABLE) && `
+    opacity: 0.3;
+  `}
+
+  ${(props) => props.link && `
+    opacity: 1;
+  `}
+`;
+styled.div`
+  position: relative;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  background-color: #ee220d;
+  border-radius: 50%;
+  padding-left: 0;
+`;
+const State = styled.p`
+  margin-top: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  font-weight: 300;
+  text-align: left;
+  opacity: 0.6;
+`;
+const IconContainer = styled.div`
+  flex-shrink: 0;
+  width: 23px;
+  text-align: center;
+  /* margin: auto 0 auto auto; */
+
+  margin-right: 10px;
+  position: relative;
+  top: -10px;
+`;
+styled.div`
+  max-width: 240px;
+  text-align: left;
+`;
+const Icon = styled(Icon$1).withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  font-size: 20px;
+  width: 18px;
+  text-align: center;
+
+  ${(props) => props.state === ToDoTaskState.APPROVED && `
+    font-size: 13px;
+    color: ${colors.freshGreen};
+  `}
+
+  ${(props) => props.state === ToDoTaskState.REJECTED && `
+    color: ${colors.orangishRed};
+  `}
+
+  ${(props) => props.state === ToDoTaskState.IN_PROGRESS && `
+    opacity: 0.3;
+  `}
+
+  ${(props) => props.state === ToDoTaskState.SKIPPED && `
+    font-size: 13px;
+  `}
+
+  ${(props) => props.state === ToDoTaskState.NOT_AVAILABLE && `
+    font-size: 13px;
+    opacity: 0.3;
+  `}
+`;
+export {
+  Container,
+  Content,
+  Icon,
+  IconContainer,
+  State,
+  Title,
+  TitleContainer
+};

package/dist/components/TransactionDetails/TransactionDetails.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import stdin_default from "../BasicTable/BasicTable.js";
+import { Container, Toggle, DetailsCollapse } from "./TransactionDetails.styles.js";
+const TransactionDetails = (props) => {
+  const { data } = props;
+  const [showDetails, setShowDetails] = useState(false);
+  const toggleDetails = () => {
+    setShowDetails(!showDetails);
+  };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    data.length > 0 ? /* @__PURE__ */ jsx(Toggle, { onClick: toggleDetails, children: showDetails ? "hide details" : "view details" }) : /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(DetailsCollapse, { isOpened: showDetails, children: /* @__PURE__ */ jsx(stdin_default, { data }) })
+  ] });
+};
+TransactionDetails.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    })
+  ).isRequired
+};
+export {
+  TransactionDetails
+};

package/dist/components/TransactionDetails/TransactionDetails.styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { Collapse } from "react-collapse";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  display: block;
+  position: relative;
+  text-align: center;
+  padding-top: 8px;
+`;
+const Toggle = styled.button`
+  display: inline-block;
+  font-size: 11px;
+  line-height: 16px;
+  color: ${() => theme.cGrey2};
+  transition: color 0.2s;
+  outline: 0;
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+const DetailsCollapse = styled(Collapse).withConfig({
+  shouldForwardProp: (props) => !["isOpened"].includes(props)
+})`
+  opacity: 0;
+  transition: opacity 0.2s;
+  margin-top: 12px;
+
+  ${(props) => props.isOpened && `
+    opacity: 1;
+    border-bottom: 1px solid ${theme.cLightGrey};
+  `}
+`;
+export {
+  Container,
+  DetailsCollapse,
+  Toggle
+};

package/dist/components/TransactionInfo/TransactionInfo.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, Account, Name, Value, TransferIcon } from "./TransactionInfo.styles.js";
+const TransactionInfo = ({
+  value1 = "",
+  unit1 = "",
+  name1 = "",
+  owner1 = "",
+  value2 = "",
+  unit2 = "",
+  name2 = "",
+  owner2 = "",
+  green = false,
+  red = false
+}) => /* @__PURE__ */ jsxs(Container, { children: [
+  /* @__PURE__ */ jsxs(Account, { children: [
+    /* @__PURE__ */ jsx(Name, { green, red, children: `${name1} ${owner1}` }),
+    /* @__PURE__ */ jsx(Value, { green, red, children: `${unit1} ${value1}` })
+  ] }),
+  /* @__PURE__ */ jsx(TransferIcon, {}),
+  /* @__PURE__ */ jsxs(Account, { children: [
+    /* @__PURE__ */ jsx(Name, { green, red, children: `${name2} ${owner2}` }),
+    /* @__PURE__ */ jsx(Value, { green, red, children: `${unit2} ${value2}` })
+  ] })
+] });
+TransactionInfo.propTypes = {
+  value1: PropTypes.string,
+  unit1: PropTypes.string,
+  name1: PropTypes.string,
+  owner1: PropTypes.string,
+  value2: PropTypes.string,
+  unit2: PropTypes.string,
+  name2: PropTypes.string,
+  owner2: PropTypes.string,
+  green: PropTypes.bool,
+  red: PropTypes.bool
+};
+export {
+  TransactionInfo
+};

package/dist/components/TransactionInfo/TransactionInfo.styles.js

@@ -0,0 +1,75 @@
+import styled, { css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const Account = styled.div``;
+const TransferIcon = styled.div.attrs({
+  className: "ion"
+})`
+  width: 16px;
+  height: 19px;
+  position: relative;
+  margin: auto;
+
+  &::before,
+  &::after {
+    font-size: 28px;
+    position: absolute;
+    left: 0;
+  }
+
+  &::before {
+    content: '\f117';
+    color: ${() => theme.cSuccess};
+    top: -7px;
+  }
+
+  &::after {
+    content: '\f119';
+    color: ${() => theme.cWarning};
+    top: 2px;
+  }
+`;
+const Value = styled.div.withConfig({
+  shouldForwardProp: (props) => !["green", "red"].includes(props)
+})`
+  font-size: 22px;
+  font-weight: 300;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+
+  ${(props) => props.green && css`
+      color: ${colors.progressGreen};
+    `}
+
+  ${(props) => props.red && css`
+      color: ${colors.orangishRed};
+    `}
+`;
+const Name = styled.div.withConfig({
+  shouldForwardProp: (props) => !["green", "red"].includes(props)
+})`
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  font-style: italic;
+  margin-bottom: 3px;
+
+  ${(props) => props.green && css`
+      color: ${colors.progressGreen};
+    `}
+
+  ${(props) => props.red && css`
+      color: ${colors.orangishRed};
+    `}
+`;
+export {
+  Account,
+  Container,
+  Name,
+  TransferIcon,
+  Value
+};

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -0,0 +1,122 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { Modal } from "../Modal/Modal.js";
+import { Text } from "../Text/Text.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+import { Button } from "../Button/Button.styles.js";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import stdin_default$2 from "../Form/Form.js";
+import { Input } from "../Input/Input.js";
+import { useCooldown } from "../../utils/customHooks.js";
+import "../../styles/rwd.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
+import "react-qr-code";
+import "../CryptoAddress/CryptoAddress.js";
+import "../StepController/StepController.js";
+import "../StepController/StepControllerContext.js";
+import "../Input/OtpInput.js";
+import "../../context/AuthContext.js";
+import stdin_default$1 from "../2FA/Sucess2FA.js";
+import "js-cookie";
+import "../../model/axios.js";
+import "../Layout/Layout.js";
+import "../LoginModal/LoginModal.js";
+import "../ForgotPasswordModal/ForgotPasswordModal.js";
+import "../2FA/main-flow.js";
+import { emailRegex } from "../../constants/globalVariables.js";
+const renderSuccessModal = (continueUrl) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  stdin_default$1,
+  {
+    onClick: () => {
+      window.open(continueUrl, "_self");
+    },
+    textRight: "We have successfully verified your email!"
+  }
+) });
+const RenderErrorModal = (props) => {
+  const { error, isActionLoading, popupError, onResend } = props;
+  const { isDisabled, secondsRemaining, startCooldown } = useCooldown(60);
+  const userEmail = error && error.email;
+  React__default.useEffect(() => {
+    if (error?.email && !isDisabled) {
+      startCooldown();
+      onResend({ email: error.email });
+    }
+  }, [error]);
+  const validationSchema = Yup.object().shape({
+    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can‘t be blank")
+  });
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "Oops..." }),
+        /* @__PURE__ */ jsx("p", { children: error?.message || "Something went wrong." })
+      ] }) }),
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Formik,
+      {
+        initialValues: {
+          email: userEmail || ""
+        },
+        validationSchema,
+        validateOnBlur: true,
+        validateOnChange: true,
+        onSubmit: (values) => {
+          startCooldown();
+          onResend(values);
+        },
+        children: ({ values, errors, touched, handleBlur, handleChange }) => {
+          const submitDisabled = !values.email || !!errors.email || isDisabled || isActionLoading === "resend";
+          return /* @__PURE__ */ jsxs(stdin_default$2, { children: [
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "verify-email",
+                  name: "email",
+                  type: "email",
+                  label: "Your email",
+                  value: values.email,
+                  onChange: handleChange,
+                  onBlur: handleBlur,
+                  error: !!errors.email,
+                  touched: !!touched.email
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "verify-email-submit-btn", disabled: submitDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resend", children: popupError.message }) }),
+            isDisabled && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: isDisabled, children: `You can try again in ${secondsRemaining} seconds` }) })
+          ] });
+        }
+      }
+    ) }) }) })
+  ] });
+};
+const VerifyEmailModal = ({ id, isModalOpen, onModalClose, continueUrl, isSuccess, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen: isModalOpen,
+      onClose: onModalClose,
+      id,
+      children: isSuccess ? renderSuccessModal(continueUrl) : RenderErrorModal(props)
+    }
+  );
+};
+VerifyEmailModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+var stdin_default = VerifyEmailModal;
+export {
+  VerifyEmailModal,
+  stdin_default as default
+};

package/dist/components/breakdown/Breakdown.js

@@ -0,0 +1,126 @@
+import styled, { css } from "styled-components";
+import dropdown from "../../static/images/arrow-down-black.svg.js";
+import { rwdMax } from "../../styles/rwd.js";
+const Breakdown = styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "fontSize",
+    "withWordWrap",
+    "is101",
+    "mobile",
+    "nomobile",
+    "withPadding",
+    "red",
+    "alignCenter",
+    "menuWithArrow",
+    "mobileMenu",
+    "asLink",
+    "withIcon",
+    "active"
+  ].includes(props)
+})`
+  text-transform: uppercase;
+  letter-spacing: 2.1px;
+  font-size: ${({ fontSize }) => fontSize ? `${fontSize}px` : "11px"};
+  white-space: ${({ withWordWrap }) => withWordWrap ? "unset" : "nowrap"};
+  line-height: 2.18;
+  color: inherit;
+  font-weight: bolder;
+  strong {
+    font-weight: bold;
+  }
+
+  ${({ is101 }) => is101 && css`
+      text-transform: unset;
+    `}
+
+  ${({ mobile }) => mobile && css`
+      display: none;
+
+      ${rwdMax.Mobile`
+        display: block;
+      `}
+    `}
+
+  ${({ nomobile }) => nomobile && css`
+      display: block;
+
+      ${rwdMax.Mobile`
+        display: none;
+      `}
+    `}
+
+      ${(props) => props.withPadding && `
+        padding:18px 16px;
+      `}
+      ${(props) => props.red && `
+    background: #D2200D;
+    color:white;
+        border-bottom: 1px solid #979797;
+  `}
+
+  ${({ alignCenter }) => alignCenter && css`
+      display: flex;
+      justify-content: center;
+    `}
+
+  @media screen and (max-width: 991px) {
+    ${({ menuWithArrow }) => menuWithArrow && css`
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+      `}
+  }
+
+  ${({ mobileMenu }) => mobileMenu && css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `}
+  ${(props) => props.asLink && `
+      cursor:pointer;
+      &:hover {
+        opacity: .6;
+      }
+    `}
+
+    ${(props) => props.withIcon && `
+      ${rwdMax.Medium`
+
+        span {
+
+
+        position:relative;
+        
+        &: before {
+          content: url(${dropdown});
+          position:absolute;
+          top: -4px;
+          right: -2em;
+          width:12px;
+          transition: transform 0.7s;
+
+        }
+        }
+
+        
+       
+      `}
+    `}
+
+     ${(props) => props.active && `
+       ${rwdMax.Medium`
+
+         &:before {
+           
+           transform: rotate(180deg);
+          }
+       `}
+
+      
+        `}
+`;
+export {
+  Breakdown,
+  Breakdown as default
+};