@stokr/components-library 3.0.16 → 3.0.18

package/dist/styles/global.js

@@ -0,0 +1,74 @@
+import { createGlobalStyle } from "styled-components";
+import "react-tippy/dist/tippy.css";
+import "react-day-picker/style.css";
+import { colors } from "./colors.js";
+import fontFaces from "./fonts.js";
+import semanticUiStyle from "./semanticUi.js";
+import reactTippyStyle from "./reactTippy.js";
+import ioniconsCss from "../static/fonts/Ionicons/ionicons.min.css.js";
+const GlobalStyle = createGlobalStyle`
+  ${fontFaces}
+  ${ioniconsCss}
+
+  * ,
+  *:before ,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  html ,
+  body {
+    margin: 0;
+    font-family: 'Open Sans';
+     font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: 0.6px;
+    color: ${colors.black};
+    background-color: ${colors.white};
+    /* -webkit-font-smoothing: antialiased; */
+  }
+
+  input ,
+  select ,
+  textarea ,
+  button {
+    font-family: 'Open Sans';
+  }
+
+  button {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  select {
+    appearance: none;
+  }
+
+  select::-ms-expand {
+    display: none;
+  }
+
+  a {
+    font-weight: normal;
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  ::selection {
+    color: ${colors.white};
+    background-color: ${colors.blue};
+  }
+
+  ${semanticUiStyle}
+  ${reactTippyStyle}
+`;
+export {
+  GlobalStyle,
+  GlobalStyle as default
+};

package/dist/styles/grid.js

@@ -0,0 +1,11 @@
+const grid = (itemUnits, gridUnits = 16) => {
+  let tmp = Math.floor(itemUnits / gridUnits * 1e4);
+  if (tmp % 2 !== 0) {
+    tmp -= 1;
+  }
+  return `${tmp / 100}%`;
+};
+export {
+  grid as default,
+  grid
+};

package/dist/styles/ioniconsStyles.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { createGlobalStyle } from "styled-components";
+import IoniconsWOFF2 from "../static/fonts/Ionicons/Ionicons.woff2.js";
+import IoniconsWOFF from "../static/fonts/Ionicons/Ionicons.woff.js";
+import IoniconsTTF from "../static/fonts/Ionicons/Ionicons.ttf.js";
+import ioniconsCss from "../static/fonts/Ionicons/ionicons.min.css.js";
+const IoniconsGlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Ionicons';
+    src:
+      url(${IoniconsWOFF2}) format('woff2'),
+      url(${IoniconsWOFF}) format('woff'),
+      url(${IoniconsTTF}) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  ${ioniconsCss}
+`;
+let injected = false;
+function IoniconsStyles() {
+  const [shouldRender] = useState(() => !injected);
+  useEffect(() => {
+    if (shouldRender) injected = true;
+  }, [shouldRender]);
+  return shouldRender ? /* @__PURE__ */ jsx(IoniconsGlobalStyle, {}) : null;
+}
+export {
+  IoniconsStyles
+};

package/dist/styles/reactTippy.js

@@ -0,0 +1,40 @@
+import { css } from "styled-components";
+import { colors } from "./colors.js";
+const reactTippyStyle = css`
+  .tippy-popper {
+    .tippy-tooltip {
+      border-radius: 10px;
+      font-size: 11px;
+      line-height: 14px;
+      letter-spacing: 0.4px;
+      padding: 12px;
+      word-break: break-word;
+    }
+
+    .tippy-tooltip.light-theme {
+      box-shadow:
+        0 0 12px 8px rgba(0, 0, 0, 0.03),
+        0 0 6px 3px rgba(0, 0, 0, 0.02);
+    }
+
+    &[x-placement^='top'] [x-arrow] {
+      border-top-color: ${colors.blue}!important;
+    }
+
+    &[x-placement^='bottom'] [x-arrow] {
+      border-bottom-color: ${colors.blue}!important;
+    }
+
+    &[x-placement^='left'] [x-arrow] {
+      border-left-color: ${colors.blue}!important;
+    }
+
+    &[x-placement^='right'] [x-arrow] {
+      border-right-color: ${colors.blue}!important;
+    }
+  }
+`;
+export {
+  reactTippyStyle as default,
+  reactTippyStyle
+};

package/dist/styles/rwd.js

@@ -0,0 +1,56 @@
+import styled, { css } from "styled-components";
+const sizes = {
+  Small: "320px",
+  Mobile: "450px",
+  Medium: "768px",
+  MLarge: "992px",
+  Large: "1024px",
+  XLarge: "1440px",
+  XXLarge: "2560px"
+};
+const rwd = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args) => css`
+    @media (min-width: ${sizes[label]}) {
+      ${css(...args)}
+    }
+  `;
+  return acc;
+}, {});
+const rwdMax = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args) => css`
+    @media (max-width: ${sizes[label]}) {
+      ${css(...args)}
+    }
+  `;
+  return acc;
+}, {});
+const getMedia = (breakpoint) => `(min-width: ${sizes[breakpoint]})`;
+const DisplayOnBreakpoint = styled.div`
+  ${(props) => props.fullscreen && css`
+      height: 100%;
+    `}
+
+  ${(props) => props.down && css`
+      display: block;
+
+      ${rwd[props.breakpoint]`
+      display: none;
+    `}
+    `}
+
+  ${(props) => props.up && css`
+      display: none;
+
+      ${rwd[props.breakpoint]`
+      display: block;
+    `}
+    `}
+`;
+export {
+  DisplayOnBreakpoint,
+  rwd as default,
+  getMedia,
+  rwd,
+  rwdMax,
+  sizes
+};

package/dist/styles/semanticUi.js

@@ -0,0 +1,84 @@
+import { css } from "styled-components";
+import { colors } from "./colors.js";
+const semanticUiStyle = css`
+  .ui.dimmer {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .ui.modals.dimmer {
+    align-items: center;
+    padding: 0;
+  }
+
+  .ui.modal {
+    .ui.grid {
+      margin: 0;
+
+      & > .row {
+        padding: 0;
+      }
+
+      & > .row > .column {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .ui.popup {
+    border-radius: 10px;
+    font-size: 11px;
+    line-height: 14px;
+    letter-spacing: 0.4px;
+    padding: 12px;
+    box-shadow:
+      0 0 12px 8px rgba(0, 0, 0, 0.03),
+      0 0 6px 3px rgba(0, 0, 0, 0.02);
+    border: none;
+
+    &::before {
+      background: none !important;
+      border: 7px solid transparent !important;
+      box-shadow: none !important;
+      margin: 0 !important;
+    }
+
+    &.top::before {
+      border-top-color: ${colors.blue}!important;
+      transform: rotate(0) translateY(100%) translateX(-50%) !important;
+      left: 50% !important;
+      bottom: 0 !important;
+    }
+
+    &.bottom::before {
+      border-bottom-color: ${colors.blue}!important;
+      transform: rotate(0) translateY(-100%) translateX(-50%) !important;
+      left: 50% !important;
+      top: 0 !important;
+    }
+
+    &.left::before {
+      border-left-color: ${colors.blue}!important;
+      transform: rotate(0) translateX(100%) !important;
+      right: 0 !important;
+      top: auto !important;
+    }
+
+    &.right::before {
+      border-right-color: ${colors.blue}!important;
+      transform: rotate(0) translateX(-100%) !important;
+      left: 0 !important;
+      top: auto !important;
+    }
+
+    &.top.left::before {
+      border: 7px solid transparent !important;
+      border-top-color: ${colors.blue}!important;
+      left: 0 !important;
+      transform: rotate(0) translateY(100%) translateX(0) !important;
+    }
+  }
+`;
+export {
+  semanticUiStyle as default,
+  semanticUiStyle
+};

package/dist/styles/spacing.js

@@ -0,0 +1,8 @@
+const spacing = {
+  headerHeight: 96,
+  footerHeight: 56
+};
+export {
+  spacing as default,
+  spacing
+};

package/dist/styles/theme.js

@@ -0,0 +1,34 @@
+import { colors } from "./colors.js";
+const theme = {
+  cText: colors.black,
+  cWhite: colors.white,
+  cBlack: colors.black,
+  cPrimary: colors.blue,
+  cPrimaryDark: colors.blueDark,
+  cPrimaryLight: colors.carolinaBlue,
+  cWarning: colors.orangishRed,
+  cWarningMid: colors.midRed,
+  cWarningDark: colors.rustyRed,
+  cGrey: colors.grey,
+  cLightGrey: colors.lightGrey,
+  cGrey2: colors.grey2,
+  cGrey3: colors.grey3,
+  cProgressDone: colors.progressGreen,
+  cYellow: colors.yellow,
+  cYellowLight: colors.yellowLight,
+  cYellowWarning: colors.warningYellow,
+  cLighterGreen: colors.lighterGreen,
+  cSuccess: colors.freshGreen,
+  cDarkGreen: colors.pine,
+  cProgressAccentStart: colors.progressAccentStart,
+  cProgressAccentStop: colors.progressAccentStop,
+  cProgressRedStart: colors.progressRedStart,
+  cProgressRedStop: colors.progressRedStop,
+  cProgressBlueStart: colors.progressBlueStart,
+  cProgressBlueStop: colors.progressBlueStop,
+  ...colors
+};
+export {
+  theme as default,
+  theme
+};

package/dist/utils/check-sale-time-left.js

@@ -0,0 +1,85 @@
+import { ProjectTypes } from "../constants/globalVariables.js";
+const getTimeLeft = (endTime) => {
+  const now = /* @__PURE__ */ new Date();
+  const oneDay = 1e3 * 60 * 60 * 24;
+  const timeLeft = (endTime - now) / oneDay;
+  if (timeLeft >= 1) {
+    return {
+      time: Math.round(timeLeft),
+      text: "DAYS"
+    };
+  } else if (timeLeft * 24 >= 1) {
+    return {
+      time: Math.round(timeLeft * 24),
+      text: "HOURS"
+    };
+  } else if (timeLeft * 24 * 60 >= 1) {
+    return {
+      time: Math.round(timeLeft * 24 * 60),
+      text: "MINS"
+    };
+  } else {
+    return {
+      text: "DAYS"
+    };
+  }
+};
+const calculateTimeLeft = (timeLeftData) => {
+  const { openingTime = "", closingTime = "", isOpen, hasClosed } = timeLeftData;
+  if (!timeLeftData || !isOpen && !hasClosed) {
+    const startingDate = new Date(openingTime);
+    const timeLeft = getTimeLeft(startingDate);
+    return {
+      daysLeft: timeLeft.time,
+      daysLeftText: `${timeLeft.text} UNTIL START`
+    };
+  } else if (isOpen) {
+    const endingDate = new Date(closingTime);
+    const timeLeft = getTimeLeft(endingDate);
+    return {
+      daysLeft: timeLeft.time,
+      daysLeftText: `${timeLeft.text} LEFT`
+    };
+  } else {
+    return {
+      daysLeftText: "FUNDING CLOSED"
+    };
+  }
+};
+const checkSaleTimeLeft = (project) => {
+  const { openingTime, closingTime, isOpen, hasClosed, type, sales } = project;
+  let timeLeftData = {
+    openingTime,
+    closingTime,
+    isOpen,
+    hasClosed
+  };
+  if (type === ProjectTypes.TRANCHES) {
+    const currentTranche = sales?.find((x) => x.isVariable);
+    const today = Date.now();
+    if (currentTranche) {
+      timeLeftData.openingTime = currentTranche.startDate;
+      timeLeftData.closingTime = currentTranche.endDate;
+      if (today >= new Date(currentTranche.startDate) && today < new Date(currentTranche.endDate)) {
+        timeLeftData.isOpen = true;
+        timeLeftData.hasClosed = false;
+      } else if (today > new Date(currentTranche.endDate)) {
+        timeLeftData.hasClosed = true;
+        timeLeftData.isOpen = false;
+      } else {
+        timeLeftData.isOpen = false;
+        timeLeftData.hasClosed = false;
+      }
+    } else {
+      timeLeftData = {
+        ...timeLeftData,
+        isOpen: false,
+        hasClosed: false
+      };
+    }
+  }
+  return calculateTimeLeft(timeLeftData);
+};
+export {
+  checkSaleTimeLeft
+};

package/dist/utils/check-todo-status.js

@@ -0,0 +1,11 @@
+import { generateCoreChecklistTasks } from "./checklistGenerator.js";
+const checkTodoStatus = (user) => {
+  if (user?.user_type === "investor" || user?.user_type === "investor-entity") {
+    const coreTasks = generateCoreChecklistTasks(user);
+    return coreTasks.remainingCount;
+  } else return 0;
+};
+export {
+  checkTodoStatus,
+  checkTodoStatus as default
+};

package/dist/utils/checklistGenerator.js

@@ -0,0 +1,195 @@
+import { walletTypes, UserTypes } from "../constants/globalVariables.js";
+const websiteUrl = "stokr.info";
+const TASK_COPY = {
+  country: {
+    title: {
+      entity: "Country of Entity Registration",
+      individual: "Country of Residence"
+    },
+    description: {
+      missing: {
+        entity: "Please select your jurisdiction of incorporation.",
+        individual: "Please select your country of residence."
+      },
+      not_available: "STOKR is not yet available in your country of residence.",
+      done: {
+        entity: "Your jurisdiction of incorporation has been registered.",
+        individual: "Your country of residence has been registered."
+      }
+    },
+    iconCopy: {
+      missing: "Missing step",
+      not_available: "Not available",
+      done: "Registered"
+    }
+  },
+  identity: {
+    title: {
+      entity: "Verify Entity",
+      individual: "Verify Identity"
+    },
+    description: {
+      not_available: "Sorry, you are living in a country where this is not available.",
+      missing: {
+        entity: "Submit your entity documents for verification.",
+        individual: "Submit identity verification for compliance clearance."
+      },
+      in_progress: "Identity verification is in progress.",
+      done: {
+        entity: "Entity verification complete.",
+        individual: "Identity verification complete."
+      },
+      reapply: {
+        entity: "Please re-verify your entity documentation.",
+        individual: "Please re-verify your identity."
+      }
+    },
+    iconCopy: {
+      not_available: "Not available",
+      missing: "Missing step",
+      in_progress: "Under review",
+      done: "Verified"
+    }
+  },
+  wallet: {
+    title: "Liquid Address",
+    description: {
+      missing: "Register a Liquid address where you will receive the securities.",
+      not_available: "Sorry, you are living in a country where this is not available.",
+      done: "Your address is registered."
+    },
+    iconCopy: {
+      missing: "Missing step",
+      not_available: "Not available",
+      done: "Registered"
+    }
+  },
+  taxId: {
+    title: "Tax ID",
+    description: {
+      missing: "Certain investment products require tax identification before participation.",
+      done: "Tax identification confirmed. You may now access products requiring tax compliance verification."
+    },
+    iconCopy: {
+      missing: "Missing step",
+      done: "Submitted",
+      not_available: "Not available"
+    },
+    tooltip: `Some offers require you to provide your Tax ID before being able to invest.
+Your tax information will be disclosed to the Luxembourg tax authorities annually for tax compliance purposes required by the Common Reporting Standard implementation.`
+  }
+};
+const getVerifyIdentityChecklist = (isFromAllowedCountry, user, isEntity) => {
+  const { kyc_status } = user;
+  let state;
+  let hasLink = false;
+  let message;
+  if (!isFromAllowedCountry) {
+    state = "not_available";
+    message = TASK_COPY.identity.description.not_available;
+  } else if (!kyc_status || kyc_status.toUpperCase() === "DRAFT") {
+    state = "missing";
+    hasLink = true;
+    message = isEntity ? TASK_COPY.identity.description.missing.entity : TASK_COPY.identity.description.missing.individual;
+  } else if (kyc_status.toUpperCase() === "REJECTED" || kyc_status.toUpperCase() === "ESCALATED" || kyc_status.toUpperCase() === "IN PROGRESS" || kyc_status.toUpperCase() === "INCONCLUSIVE" || kyc_status.toUpperCase() === "APPROVED" || kyc_status.toUpperCase() === "DENIED") {
+    state = "in_progress";
+    message = TASK_COPY.identity.description.in_progress;
+  } else if (kyc_status.toUpperCase() === "ACCEPTED") {
+    state = "done";
+    message = isEntity ? TASK_COPY.identity.description.done.entity : TASK_COPY.identity.description.done.individual;
+  } else if (kyc_status.toUpperCase() === "REAPPLY" || kyc_status.toUpperCase() === "CANCELLED") {
+    state = "missing";
+    hasLink = true;
+    message = isEntity ? TASK_COPY.identity.description.reapply.entity : TASK_COPY.identity.description.reapply.individual;
+  }
+  return { state, hasLink, message };
+};
+function getCountryDescription(user, isFromAllowedCountry) {
+  const { country, user_type } = user;
+  const isEntity = user_type === UserTypes.investor_entity;
+  if (!country) {
+    return isEntity ? TASK_COPY.country.description.missing.entity : TASK_COPY.country.description.missing.individual;
+  }
+  if (!isFromAllowedCountry) {
+    return TASK_COPY.country.description.not_available;
+  }
+  return isEntity ? TASK_COPY.country.description.done.entity : TASK_COPY.country.description.done.individual;
+}
+function generateCoreChecklistTasks(user) {
+  if (!user) {
+    return {
+      country: null,
+      identity: null,
+      wallet: null,
+      taxId: null,
+      isFromAllowedCountry: false,
+      allTasks: [],
+      remainingCount: 0
+    };
+  }
+  const { country, user_type, wallets = [], taxId, countryObj } = user;
+  const isFromAllowedCountry = countryObj?.isAllowed;
+  const liquidWallets = wallets.filter((wallet2) => wallet2.type === walletTypes.LIQUID) || [];
+  const hasWallet = liquidWallets.length > 0;
+  const isEntity = user_type === UserTypes.investor_entity;
+  const platformURL = `https://signup.${websiteUrl}`;
+  const countryStatus = !country ? "missing" : !isFromAllowedCountry ? "not_available" : "done";
+  const countryTask = {
+    key: "country",
+    title: isEntity ? TASK_COPY.country.title.entity : TASK_COPY.country.title.individual,
+    description: getCountryDescription(user, isFromAllowedCountry),
+    iconState: countryStatus,
+    iconCopy: TASK_COPY.country.iconCopy[countryStatus],
+    link: `${platformURL}/country-of-residence`,
+    isClickable: countryStatus !== "done"
+  };
+  const verifyIdentityChecklist = getVerifyIdentityChecklist(isFromAllowedCountry, user, isEntity);
+  const identity = {
+    key: "kyc",
+    title: isEntity ? TASK_COPY.identity.title.entity : TASK_COPY.identity.title.individual,
+    description: verifyIdentityChecklist.message,
+    iconState: verifyIdentityChecklist.state,
+    iconCopy: TASK_COPY.identity.iconCopy[verifyIdentityChecklist.state],
+    link: `${platformURL}/verify-identity`,
+    isClickable: verifyIdentityChecklist.hasLink
+  };
+  const walletStatus = hasWallet ? "done" : "missing";
+  const walletDescription = !isFromAllowedCountry ? TASK_COPY.wallet.description.not_available : hasWallet ? TASK_COPY.wallet.description.done : TASK_COPY.wallet.description.missing;
+  const wallet = {
+    key: "wallet",
+    title: TASK_COPY.wallet.title,
+    description: walletDescription,
+    iconState: walletStatus,
+    iconCopy: TASK_COPY.wallet.iconCopy[walletStatus],
+    link: `${platformURL}/register-liquid-securities`,
+    isClickable: isFromAllowedCountry && walletStatus !== "done"
+  };
+  const taxStatus = taxId ? "done" : "missing";
+  const taxIdTask = {
+    key: "taxId",
+    title: TASK_COPY.taxId.title,
+    description: TASK_COPY.taxId.description[taxStatus],
+    iconState: taxStatus,
+    iconCopy: TASK_COPY.taxId.iconCopy[taxStatus],
+    openModal: "taxId",
+    tooltip: TASK_COPY.taxId.tooltip,
+    isClickable: taxStatus !== "done"
+  };
+  const allTasks = [countryTask, identity, wallet, taxIdTask].filter(Boolean);
+  const remainingCount = allTasks.filter(
+    (task) => task.iconState === "missing" || task.iconState === "not_available"
+  ).length;
+  return {
+    country: countryTask,
+    identity,
+    wallet,
+    taxId: taxIdTask,
+    isFromAllowedCountry,
+    allTasks,
+    remainingCount
+  };
+}
+export {
+  generateCoreChecklistTasks,
+  getVerifyIdentityChecklist
+};