@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Timeline/Timeline.styles.js

@@ -0,0 +1,147 @@
+import styled, { css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+const iconSize = 20;
+const TimelineContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth"].includes(props)
+})`
+  position: relative;
+  width: 100%;
+  max-width: ${(props) => props.maxWidth || "100%"};
+`;
+const TimelineStepWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isLast"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: ${(props) => props.isLast ? "0" : "10px"};
+`;
+const IconContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 24px;
+  width: 24px;
+  margin-right: 16px;
+  align-self: stretch;
+  gap: 4px;
+`;
+const StepIcon = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  ${(props) => {
+  switch (props.state) {
+    case "completed":
+      return css`
+          background-color: ${colors.freshGreen};
+          color: ${colors.white};
+        `;
+    case "pending":
+      return css`
+          background-color: ${colors.warningOrange};
+          color: ${colors.white};
+        `;
+    case "failed":
+    case "cancelled":
+      return css`
+          background-color: ${colors.darkRed};
+          color: ${colors.white};
+        `;
+    case "inactive":
+    default:
+      return css`
+          background-color: transparent;
+          border: 1.5px solid ${colors.lightGrey};
+          color: ${colors.grey2};
+        `;
+  }
+}}
+
+  svg path {
+    stroke: ${colors.white};
+  }
+`;
+const ConnectingLine = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  width: 2px;
+  flex: 1;
+  min-height: 10px;
+  align-self: center;
+
+  ${(props) => {
+  const lineColor = props.state === "completed" ? colors.freshGreen : props.state === "pending" ? colors.warningOrange : props.state === "failed" || props.state === "cancelled" ? colors.darkRed : colors.lightGrey;
+  return css`
+      background-color: ${lineColor};
+    `;
+}}
+`;
+const StepContent = styled.div`
+  flex: 1;
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const StepHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StepDate = styled.span`
+  color: ${colors.black};
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 15px;
+  letter-spacing: 2px;
+  word-wrap: break-word;
+`;
+const StepTitle = styled.span.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  color: ${(props) => {
+  switch (props.state) {
+    case "inactive":
+    case "pending":
+      return colors.grey2;
+    default:
+      return colors.black;
+  }
+}};
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  word-wrap: break-word;
+`;
+const StepCaption = styled.div`
+  color: ${colors.grey2};
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  word-wrap: break-word;
+`;
+export {
+  ConnectingLine,
+  IconContainer,
+  StepCaption,
+  StepContent,
+  StepDate,
+  StepHeader,
+  StepIcon,
+  StepTitle,
+  TimelineContainer,
+  TimelineStepWrapper
+};

package/dist/components/Timeline/TimelineStep.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { TimelineStepWrapper, IconContainer, StepIcon, ConnectingLine, StepContent, StepDate, StepHeader, StepTitle, StepCaption } from "./Timeline.styles.js";
+import SvgCrossIcon from "../../static/images/cross-icon.svg.js";
+import SvgCheckIcon from "../../static/images/check-icon.svg.js";
+import { format } from "date-fns";
+const TimelineStep = ({
+  state = "inactive",
+  date,
+  title,
+  tooltip,
+  caption,
+  isLast = false,
+  customIcon,
+  showInfoIcon = true,
+  infoIconPosition = "right",
+  // Style props
+  stepStyle,
+  iconStyle,
+  contentStyle,
+  className
+}) => {
+  const getIcon = () => {
+    if (customIcon) return customIcon;
+    switch (state) {
+      case "completed":
+        return /* @__PURE__ */ jsx(SvgCheckIcon, { width: 12, height: 12 });
+      case "pending":
+        return /* @__PURE__ */ jsx(Icon, { icon: iconsMap.inProgress, size: 12, style: { marginLeft: 1 } });
+      case "failed":
+      case "cancelled":
+        return /* @__PURE__ */ jsx(SvgCrossIcon, { width: 8, height: 8 });
+      case "inactive":
+      default:
+        return null;
+    }
+  };
+  const formattedDate = date ? format(new Date(date), "dd. MMM yyyy HH:mm") : null;
+  return /* @__PURE__ */ jsxs(TimelineStepWrapper, { isLast, style: stepStyle, className, children: [
+    /* @__PURE__ */ jsxs(IconContainer, { children: [
+      /* @__PURE__ */ jsx(StepIcon, { state, style: iconStyle, children: getIcon() }),
+      !isLast && /* @__PURE__ */ jsx(ConnectingLine, { state })
+    ] }),
+    /* @__PURE__ */ jsxs(StepContent, { style: contentStyle, children: [
+      formattedDate && /* @__PURE__ */ jsx(StepDate, { children: formattedDate }),
+      /* @__PURE__ */ jsxs(StepHeader, { children: [
+        /* @__PURE__ */ jsx(StepTitle, { state, children: title }),
+        showInfoIcon && tooltip && /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: infoIconPosition, noMargin: true, containerStyle: { marginTop: 1 } })
+      ] }),
+      caption && /* @__PURE__ */ jsx(StepCaption, { children: caption })
+    ] })
+  ] });
+};
+export {
+  TimelineStep
+};

package/dist/components/ToDoList/ToDoList.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { iconsMap, TooltipIcon } from "../Icon/Icon.style.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Container, TitleContainer, PendingCounter, Title, Subtitle } from "./ToDoList.styles.js";
+import stdin_default from "./ToDoListTask.js";
+import { Icon } from "./ToDoListTask.styles.js";
+import { Tooltip } from "react-tippy";
+const ToDoTaskState = {
+  REJECTED: "rejected",
+  DENIED: "rejected",
+  DRAFT: "draft",
+  IN_PROGRESS: "in_progress",
+  APPROVED: "approved",
+  SKIPPED: "skipped",
+  REAPPLY: "reapply",
+  NOT_AVAILABLE: "not_available"
+};
+const ToDoTaskMessage = {
+  [ToDoTaskState.REJECTED]: "Rejected. Please re-apply.",
+  [ToDoTaskState.DENIED]: "Rejected. Please re-apply.",
+  [ToDoTaskState.DRAFT]: "Draft",
+  [ToDoTaskState.IN_PROGRESS]: "In progress",
+  [ToDoTaskState.APPROVED]: "Verified",
+  [ToDoTaskState.SKIPPED]: "Skipped"
+};
+const ToDoModal = {
+  TAX_ID: "taxid"
+};
+const ToDoTaskIcons = {
+  [ToDoTaskState.REJECTED]: iconsMap.warning,
+  [ToDoTaskState.DENIED]: iconsMap.warning,
+  [ToDoTaskState.DRAFT]: iconsMap.edit,
+  [ToDoTaskState.IN_PROGRESS]: iconsMap.inProgress,
+  [ToDoTaskState.APPROVED]: iconsMap.check,
+  [ToDoTaskState.SKIPPED]: iconsMap.arrowRight,
+  [ToDoTaskState.NOT_AVAILABLE]: iconsMap.arrowRight
+};
+const ToDoList = ({
+  mandatoryTasks = [],
+  walletsTasks = [],
+  optionalTasks = [],
+  mandatoryTasksCount,
+  walletsTasksCount,
+  pendingTasksCount,
+  additionalTasks,
+  redirectCookie,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { children: [
+      pendingTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: pendingTasksCount }) : /* @__PURE__ */ jsx(
+        Icon,
+        {
+          state: "approved",
+          checklist: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Title, { children: "Checklist" })
+    ] }) }),
+    mandatoryTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { marginBottom: "10px", children: [
+        mandatoryTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: mandatoryTasksCount }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            state: "approved",
+            checklist: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Subtitle, { children: "Mandatory" })
+      ] }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: mandatoryTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          tooltip: task.tooltip,
+          redirectCookie,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    walletsTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { marginBottom: "10px", children: [
+        walletsTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: walletsTasksCount }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            state: "approved",
+            checklist: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Subtitle, { children: "Register Wallets" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            position: "right",
+            title: "Before you invest you must have registered the wallet that can hold your purchased securities. Click below and register it to proceed with your investment.",
+            theme: "light",
+            arrow: true,
+            duration: 200,
+            size: 40,
+            style: { cursor: "help", fontSize: 16 },
+            children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: walletsTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          disabled: task.disabled,
+          tooltip: task.tooltip,
+          openModal: task.openModal,
+          redirectCookie,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    optionalTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(TitleContainer, { marginBottom: "10px", children: /* @__PURE__ */ jsx(Subtitle, { marginLeft: "32px", children: "Optional" }) }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: optionalTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          tooltip: task.tooltip,
+          redirectCookie,
+          openModal: task.openModal,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    additionalTasks && additionalTasks
+  ] });
+};
+const taskListPropType = PropTypes.arrayOf(
+  PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    // message: PropTypes.string.isRequired,
+    state: PropTypes.oneOf([...Object.values(ToDoTaskState)]).isRequired,
+    link: PropTypes.any,
+    tooltip: PropTypes.string
+  })
+);
+ToDoList.propTypes = {
+  mandatoryTasks: taskListPropType,
+  optionalTasks: taskListPropType,
+  successText: PropTypes.string,
+  additionalTasks: PropTypes.node,
+  mandatoryTasksCount: PropTypes.number,
+  walletsTasksCount: PropTypes.number
+};
+export {
+  ToDoList,
+  ToDoModal,
+  ToDoTaskMessage,
+  ToDoTaskState
+};

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

@@ -0,0 +1,122 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { colors } from "../../styles/colors.js";
+const Container = styled.div`
+  display: inline-block;
+`;
+const TitleContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["marginBottom"].includes(props)
+})`
+  display: flex;
+  align-items: center;
+
+  ${({ marginBottom }) => marginBottom && css`
+      margin-bottom: ${marginBottom};
+    `}
+`;
+const Title = styled.div`
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+`;
+const Subtitle = styled.div.withConfig({
+  shouldForwardProp: (props) => !["centerVertically", "marginLeft"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  // margin-bottom: 10px;
+
+  ${({ centerVertically }) => centerVertically && css`
+      margin-bottom: 0;
+    `}
+
+  ${({ marginLeft }) => marginLeft && css`
+      margin-left: ${marginLeft};
+    `}
+`;
+const PendingCounter = styled.span`
+  width: 16px;
+  height: 16px;
+  margin-left: 3px;
+  margin-right: 13px;
+  color: ${colors.white};
+  background: ${colors.orangishRed};
+  border-radius: 50%;
+  font-size: 9px;
+  font-weight: 600;
+  text-align: center;
+  line-height: 16px;
+  padding-left: 1px;
+`;
+styled.div`
+  padding: 28px 0;
+`;
+styled.div`
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+  padding-bottom: 14px;
+  margin-bottom: 16px;
+  text-align: left;
+  border-bottom: 1px solid ${colors.lightGrey};
+`;
+styled.div`
+  ${rwd.Medium`
+    margin-top: auto;
+  `}
+`;
+styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${rwd.Medium`
+    flex-direction: row;
+  `}
+`;
+styled.div`
+  width: 102px;
+  height: 102px;
+  display: flex;
+  border: 1px dashed ${colors.blue};
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+
+  ${rwd.Medium`
+    margin-right: 26px;
+    margin-bottom: 0;
+  `}
+`;
+styled.i.withConfig({
+  shouldForwardProp: (props) => !["green"].includes(props)
+}).attrs({
+  className: "ion ion-md-checkmark"
+})`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${colors.blue};
+  color: ${colors.white};
+  font-size: 18px;
+  padding: 12px;
+  border-radius: 50%;
+  margin: auto;
+  ${(props) => props.green && `
+  background-color: ${colors.freshGreen};`}
+`;
+export {
+  Container,
+  PendingCounter,
+  Subtitle,
+  Title,
+  TitleContainer
+};

package/dist/components/ToDoList/ToDoListTask.js

@@ -0,0 +1,95 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { Tooltip } from "react-tippy";
+import { Container, IconContainer, Icon, Content, TitleContainer, Title, State } from "./ToDoListTask.styles.js";
+import { TooltipIcon } from "../Icon/Icon.style.js";
+import setRedirectCookie from "../../utils/set-redirect-cookie.js";
+import { AuthProvider } from "../../context/AuthContext.js";
+import { ToDoModal } from "./ToDoList.js";
+import "react-router-dom";
+import "../Text/Text.styles.js";
+import "yup";
+import "formik";
+import "../Input/Input.js";
+import "../Form/Form.js";
+import "../ComponentWrapper/ComponentWrapper.styles.js";
+import "../TextLink/TextLink.styles.js";
+import "../Button/Button.styles.js";
+import "../CryptoAddressWrapper/CryptoAddressWrapper.js";
+import "../RefreshButton/RefreshButton.js";
+import "../SectionTitle/SectionTitle.styles.js";
+import "../FAQ/FAQ.js";
+import "js-cookie";
+import "../../firebase-config.js";
+import "../../model/axios.js";
+import "../../model/axiosPublic.js";
+import "../../utils/redirect-url.js";
+import stdin_default$1 from "../taxId/flow.js";
+const ToDoTask = ({
+  title,
+  message,
+  state,
+  icon,
+  link = void 0,
+  tooltip = "",
+  // notificationCount,
+  disabled,
+  openModal,
+  redirectCookie = false,
+  onTaxIdComplete
+}) => {
+  const [modalOpen, setmodalOpen] = React__default.useState(false);
+  const handleOpenModal = () => {
+    if (openModal) {
+      setmodalOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    link || openModal ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => {
+          if (redirectCookie) {
+            const pathToRedirect = window.location.pathname === "/" ? "checklist" : "";
+            setRedirectCookie(pathToRedirect);
+          }
+        },
+        children: /* @__PURE__ */ jsx("a", { href: link, children: /* @__PURE__ */ jsxs(Container, { disabled, link: openModal, onClick: handleOpenModal, children: [
+          /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(Icon, { icon, state }) }),
+          /* @__PURE__ */ jsxs(Content, { children: [
+            /* @__PURE__ */ jsxs(TitleContainer, { children: [
+              /* @__PURE__ */ jsx(Title, { link: link || openModal, state, children: title }),
+              tooltip && /* @__PURE__ */ jsx(Tooltip, { position: "right", title: tooltip, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
+            ] }),
+            message ? /* @__PURE__ */ jsx(State, { children: message }) : ""
+          ] })
+        ] }) })
+      }
+    ) : /* @__PURE__ */ jsxs(Container, { disabled, children: [
+      /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(Icon, { icon, state }) }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsxs(TitleContainer, { children: [
+          /* @__PURE__ */ jsx(Title, { state, children: title }),
+          tooltip && /* @__PURE__ */ jsx(Tooltip, { position: "right", title: tooltip, theme: "light", arrow: true, duration: 200, children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() }) })
+        ] }),
+        message ? /* @__PURE__ */ jsx(State, { children: message }) : ""
+      ] })
+    ] }),
+    modalOpen && /* @__PURE__ */ jsx(AuthProvider, { children: openModal === ToDoModal.TAX_ID && /* @__PURE__ */ jsx(stdin_default$1, { showFlow: modalOpen, setShowFlow: setmodalOpen, onComplete: onTaxIdComplete }) })
+  ] });
+};
+ToDoTask.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  state: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  link: PropTypes.any,
+  tooltip: PropTypes.string
+  // notificationCount: PropTypes.string,
+};
+var stdin_default = ToDoTask;
+export {
+  ToDoTask,
+  stdin_default as default
+};