@stokr/components-library 3.0.35 → 3.0.37

package/dist/components/TaxResidenceCard/TaxResidenceCard.js

@@ -0,0 +1,209 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import PropTypes from "prop-types";
+import { Input } from "../Input/Input.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import SvgTrash from "../../static/images/trash.svg.js";
+import SvgGlobe from "../../static/images/globe.svg.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { FlagFor, CountrySelect } from "../Country/CountrySelect.js";
+import { CardWrapper, CardHeader, HeaderIcon, FlagWrapper, HeaderTitle, HeaderActions, DeleteButton, ChevronIcon, CardBodyCollapse, CardBody, CheckboxRow } from "./TaxResidenceCard.styles.js";
+const TaxResidenceCard = (props) => {
+  const {
+    id,
+    name = id,
+    countries,
+    value,
+    onChange,
+    onDelete,
+    open: controlledOpen,
+    defaultOpen = true,
+    onToggle,
+    emptyTitle = "Tax residence",
+    countryLabel = "Country *",
+    tinLabel = "Tax identification number (TIN)",
+    noTinLabel = "Country of tax residence doesn't issue TINs.",
+    countryPlaceholder = "Search countries",
+    disabled = false,
+    hideNoTin = false,
+    error,
+    touched,
+    dataCy
+  } = props;
+  const isControlled = controlledOpen !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const country = value?.country ?? "";
+  const tin = value?.tin ?? "";
+  const noTinIssued = value?.noTinIssued ?? false;
+  const selectedCountry = useMemo(
+    () => country ? countries?.find((c) => c.value === country) : null,
+    [countries, country]
+  );
+  const headerTitle = selectedCountry?.label || emptyTitle;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(next);
+  }, [isOpen, isControlled, onToggle]);
+  const handleHeaderKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const emit = useCallback(
+    (patch) => {
+      onChange?.({ country, tin, noTinIssued, ...patch });
+    },
+    [onChange, country, tin, noTinIssued]
+  );
+  const handleCountryChange = ({ value: nextCountry }) => emit({ country: nextCountry });
+  const handleTinChange = (e) => emit({ tin: e.target.value });
+  const handleNoTinChange = (e) => {
+    const checked = e.target.checked;
+    emit({ noTinIssued: checked, ...checked ? { tin: "" } : {} });
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDelete?.();
+  };
+  const cy = dataCy || `tax-residence-card-${id}`;
+  return /* @__PURE__ */ jsxs(CardWrapper, { isOpen, "data-cy": cy, children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    /* @__PURE__ */ jsxs(
+      CardHeader,
+      {
+        isOpen,
+        onClick: toggle,
+        onKeyDown: handleHeaderKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": isOpen,
+        "aria-controls": `${id}-body`,
+        "data-cy": `${cy}-toggle`,
+        children: [
+          /* @__PURE__ */ jsx(HeaderIcon, { "aria-hidden": "true", children: selectedCountry ? /* @__PURE__ */ jsx(FlagWrapper, { children: /* @__PURE__ */ jsx(FlagFor, { code: selectedCountry.value }) }) : /* @__PURE__ */ jsx(SvgGlobe, {}) }),
+          /* @__PURE__ */ jsx(HeaderTitle, { children: headerTitle }),
+          /* @__PURE__ */ jsxs(HeaderActions, { children: [
+            onDelete && !disabled && /* @__PURE__ */ jsx(
+              DeleteButton,
+              {
+                type: "button",
+                onClick: handleDelete,
+                "aria-label": `Delete ${headerTitle}`,
+                disabled,
+                "data-cy": `${cy}-delete`,
+                children: /* @__PURE__ */ jsx(SvgTrash, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronIcon, { isOpen, "aria-hidden": "true" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CardBodyCollapse, { isOpened: isOpen, children: /* @__PURE__ */ jsxs(CardBody, { id: `${id}-body`, children: [
+      /* @__PURE__ */ jsx(
+        CountrySelect,
+        {
+          id: `${id}-country`,
+          name: `${name}.country`,
+          label: countryLabel,
+          countries,
+          value: country,
+          onChange: handleCountryChange,
+          placeholder: countryPlaceholder,
+          disabled,
+          error: !!error?.country,
+          touched: !!touched?.country,
+          dataCy: `${cy}-country`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${id}-tin`,
+          name: `${name}.tin`,
+          label: tinLabel,
+          value: tin,
+          onChange: handleTinChange,
+          disabled: disabled || noTinIssued,
+          error: !!error?.tin,
+          touched: !!touched?.tin,
+          "data-cy": `${cy}-tin`
+        }
+      ),
+      (disabled && (tin === "" || !tin) || !disabled) && !hideNoTin && /* @__PURE__ */ jsx(CheckboxRow, { children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: `${id}-no-tin`,
+          name: `${name}.noTinIssued`,
+          text: noTinLabel,
+          checked: noTinIssued,
+          onChange: handleNoTinChange,
+          disabled,
+          "data-cy": `${cy}-no-tin`
+        }
+      ) })
+    ] }) })
+  ] });
+};
+TaxResidenceCard.propTypes = {
+  /** Unique id used to namespace inner field ids (country/tin/checkbox). */
+  id: PropTypes.string.isRequired,
+  /** Form field name prefix; defaults to `id`. Children get `${name}.country`, etc. */
+  name: PropTypes.string,
+  /** Same shape as `<CountrySelect>`: `{ key, value, label }[]`. `value` is ISO 3166-1 alpha-2. */
+  countries: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  /** Current values: `{ country, tin, noTinIssued }`. */
+  value: PropTypes.shape({
+    country: PropTypes.string,
+    tin: PropTypes.string,
+    noTinIssued: PropTypes.bool
+  }),
+  /** Called with the full next value object on any field change. */
+  onChange: PropTypes.func,
+  /** Optional - when provided, renders a delete (trash) button next to the chevron in the header. */
+  onDelete: PropTypes.func,
+  /** Controlled collapse state. Omit to use uncontrolled mode with `defaultOpen`. */
+  open: PropTypes.bool,
+  /** Initial collapse state in uncontrolled mode. Defaults to true so users can fill it in immediately. */
+  defaultOpen: PropTypes.bool,
+  /** Called with the next open state whenever the user toggles the header. */
+  onToggle: PropTypes.func,
+  /** Title shown in the header when no country is selected yet. */
+  emptyTitle: PropTypes.string,
+  /** Floating label for the country select. */
+  countryLabel: PropTypes.string,
+  /** Floating label for the TIN input. */
+  tinLabel: PropTypes.string,
+  /** Text next to the "no TIN issued" checkbox. */
+  noTinLabel: PropTypes.node,
+  /** Placeholder for the country select. */
+  countryPlaceholder: PropTypes.string,
+  /** Disables every interactive control inside the card. */
+  disabled: PropTypes.bool,
+  /** Whether to hide the "no TIN issued" checkbox. */
+  hideNoTin: PropTypes.bool,
+  /** Per-field error flags: `{ country, tin }`. */
+  error: PropTypes.shape({
+    country: PropTypes.bool,
+    tin: PropTypes.bool
+  }),
+  /** Per-field touched flags: `{ country, tin }`. */
+  touched: PropTypes.shape({
+    country: PropTypes.bool,
+    tin: PropTypes.bool
+  }),
+  /** Playwright / autocapture root selector. Children are namespaced from this. */
+  dataCy: PropTypes.string
+};
+export {
+  TaxResidenceCard
+};

package/dist/components/TaxResidenceCard/TaxResidenceCard.styles.js

@@ -0,0 +1,169 @@
+import styled, { css } from "styled-components";
+import { Collapse } from "react-collapse";
+import theme from "../../styles/theme.js";
+const CardWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isOpen"].includes(prop)
+})`
+  background: ${theme.cWhite};
+  border: 1px solid ${theme.cLightGrey};
+  border-radius: 6px;
+  overflow: hidden;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  ${(props) => props.isOpen && css`
+      border-color: ${theme.cLightGrey};
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    `}
+
+  & + & {
+    margin-top: 12px;
+  }
+`;
+const CardHeader = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isOpen"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 18px 22px;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  text-align: left;
+  font-family: 'Open Sans';
+  color: ${theme.cBlack};
+  transition: background-color 0.15s;
+  user-select: none;
+
+  &:hover {
+    background-color: ${theme.cGrey3};
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px ${theme.cPrimary};
+  }
+`;
+const HeaderIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  margin-right: 16px;
+  flex-shrink: 0;
+  color: ${theme.cBlack};
+`;
+const FlagWrapper = styled.span`
+  display: inline-flex;
+  width: 24px;
+  height: 18px;
+  border-radius: 2px;
+  overflow: hidden;
+
+  & > svg,
+  & > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
+const HeaderTitle = styled.span`
+  flex: 1;
+  min-width: 0;
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: ${theme.cBlack};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const HeaderActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-left: 12px;
+  flex-shrink: 0;
+`;
+const DeleteButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: ${theme.cBlack};
+  cursor: pointer;
+  border-radius: 50%;
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+
+  &:hover {
+    color: ${theme.cWarning};
+    background-color: rgba(238, 34, 13, 0.08);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${theme.cPrimary};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${theme.cGrey2};
+
+    &:hover {
+      color: ${theme.cGrey2};
+      background-color: transparent;
+    }
+  }
+`;
+const ChevronIcon = styled.i.withConfig({
+  shouldForwardProp: (prop) => !["isOpen"].includes(prop)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  font-size: 20px;
+  line-height: 1;
+  color: ${theme.cBlack};
+  transform: rotate(0);
+  transition: transform 0.25s ease;
+
+  ${(props) => props.isOpen && css`
+      transform: rotate(180deg);
+    `}
+`;
+const CardBodyCollapse = styled(Collapse)`
+  border-top: 1px solid ${theme.cLightGrey};
+`;
+const CardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  padding: 24px 22px 20px;
+`;
+const CheckboxRow = styled.div`
+  padding-top: 4px;
+`;
+export {
+  CardBody,
+  CardBodyCollapse,
+  CardHeader,
+  CardWrapper,
+  CheckboxRow,
+  ChevronIcon,
+  DeleteButton,
+  FlagWrapper,
+  HeaderActions,
+  HeaderIcon,
+  HeaderTitle
+};

package/dist/components/TeamOverview/TeamOverview.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import stdin_default from "../SvgIcons/AdminBadgeSvg.js";
-import "../SvgIcons/SocialInstagram.js";
 import { Container, ImageWrapper, Avatar, ContentWrapper, ContentGroup, SmallHeader, Name, PersonPosition, PersonEmail, ProjectStats, ProjectStat, StatLabel, StatValue } from "./TeamOverview.styles.js";
 import avatarPlaceholder from "../../static/images/avatar-placeholder.png.js";
 const TeamOverview = ({

package/dist/components/ToDoList/ToDoListTask.js

@@ -7,26 +7,6 @@ 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 "mixpanel-browser";
-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/app";
-import "firebase/auth";
-import "../../model/axios.js";
-import "../../model/axiosPublic.js";
-import "../../utils/redirect-url.js";
 import stdin_default$1 from "../taxId/flow.js";
 const ToDoTask = ({
   title,

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -12,23 +12,9 @@ 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 "react-router-dom";
-import "../2FA/main-flow.js";
 import { emailRegex } from "../../constants/globalVariables.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
 const renderSuccessModal = (continueUrl) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
   stdin_default$1,
   {

package/dist/components/headerHo/HeaderHo.js

@@ -11,36 +11,19 @@ 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 "../../styles/rwd.js";
-import "../Text/Text.styles.js";
-import "../Button/Button.styles.js";
-import "../ComponentWrapper/ComponentWrapper.styles.js";
-import "../Modal/Modal.styles.js";
-import "react-qr-code";
-import "../Grid/Grid.styles.js";
-import "../CryptoAddress/CryptoAddress.js";
-import { cooldownHOC } from "../../utils/customHooks.js";
-import "../Modal/Modal.js";
-import "../StepController/StepController.js";
-import "../StepController/StepControllerContext.js";
 import stdin_default$2 from "../2FA/EnterCode.js";
-import { AuthContext } from "../../context/AuthContext.js";
-import "../2FA/Sucess2FA.js";
-import "js-cookie";
-import "../../model/axios.js";
-import "../Layout/Layout.js";
 import stdin_default$3 from "../2FA/ResetCode.js";
 import { authenticationApi } from "../../api/authenticationApi.js";
-import { getConfig } from "../../runtime-config.js";
-import { navigateToHref } from "../../routing/navigate-app.js";
-import { getBackofficeAppUrl } from "../../utils/app-urls-analytics-backoffice.js";
-import "react-router-dom";
-import "../2FA/main-flow.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 { navigateToHref } from "../../routing/navigate-app.js";
 const Outer = styled.div.withConfig({
   shouldForwardProp: (props) => !["fixed"].includes(props)
 })`

package/dist/context/AuthContext.js

@@ -4,18 +4,19 @@ import axiosInstance from "../model/axios.js";
 import { configure } from "../config.js";
 import React__default, { Component } from "react";
 import fetchData from "../api/fetchData.js";
-import { identify, reset } from "../analytics/index.js";
+import { reset, identify } from "../analytics/index.js";
 import { withRouter } from "../utils/withRouter.js";
 import { Text } from "../components/Text/Text.styles.js";
 import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "./Auth.js";
+import { Button } from "../components/Button/Button.styles.js";
 import { hasLoggedInSession } from "../utils/user-identity.js";
 import { getConfig, getPlatformURL } from "../runtime-config.js";
-import { ConfirmModal as ConfirmModalComponent } from "../components/ConfirmModal/ConfirmModal.js";
-import { getFirebaseAuth, isValidFirebaseConfig } from "../firebase-config.js";
 import avatarPlaceholder from "../static/images/avatar-placeholder.png.js";
+import { getFirebaseAuth, isValidFirebaseConfig } from "../firebase-config.js";
 import { isAlreadyOnOnboardingFlow } from "../utils/app-urls.js";
-import { multiFactor, TotpMultiFactorGenerator, signOut, getMultiFactorResolver, PhoneMultiFactorGenerator } from "firebase/auth";
+import { signOut, getMultiFactorResolver, PhoneMultiFactorGenerator, TotpMultiFactorGenerator, multiFactor } from "firebase/auth";
 import { navigateToHref } from "../routing/navigate-app.js";
+import { SuccessModal as SuccessModalComponent } from "../components/Modal/SuccessModal/SuccessModal.js";
 const AuthContext = React__default.createContext();
 const FALLBACK_AUTH_CONTEXT_VALUE = { user: null, isFetchingUser: false };
 const INACTIVITY_TIME_MS = 5 * 60 * 1e3;
@@ -835,16 +836,26 @@ class AuthProviderClass extends Component {
         children: [
           children,
           (this.state.loggedOutDueToInactivity || this.state.loggedOutDueToCookieExpiry || this.state.sessionExpiryPendingReason) && !this.props.hideInactivityModal && /* @__PURE__ */ jsx(
-            ConfirmModalComponent,
+            SuccessModalComponent,
             {
               isOpen: true,
-              maxWidth: "600px",
-              confirmText: "OK",
-              onCancel: this.dismissSessionExpiryModal,
-              onConfirm: this.dismissSessionExpiryModal,
-              showRedBar: true,
+              onClose: this.dismissSessionExpiryModal,
+              variant: "progress",
               title: "Session expired",
-              content: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { style: { fontSize: 16 }, children: this.state.sessionExpiryPendingReason === "inactivity" || this.state.loggedOutDueToInactivity ? "You have been logged out due to inactivity." : "Your session has expired. Please log in again." }) })
+              content: /* @__PURE__ */ jsxs(Text, { children: [
+                /* @__PURE__ */ jsx("p", { style: { fontSize: 16 }, children: this.state.sessionExpiryPendingReason === "inactivity" || this.state.loggedOutDueToInactivity ? "You have been logged out due to inactivity." : "Your session has expired. Please log in again." }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => {
+                      this.dismissSessionExpiryModal();
+                      this.props.onSessionExpiredLoginClick?.();
+                    },
+                    children: "Log in"
+                  }
+                )
+              ] }),
+              maxWidth: "600px"
             }
           )
         ]
@@ -886,7 +897,9 @@ AuthProviderClass.propTypes = {
   /** When true, the inactivity modal is not shown after auto-logout. Default false. */
   hideInactivityModal: PropTypes.bool,
   /** Override access token cookie lifetime in ms (e.g. for Storybook). Production uses 1 hour. */
-  accessTokenExpiryMs: PropTypes.number
+  accessTokenExpiryMs: PropTypes.number,
+  /** A function to be called when the session expires. Default undefined. */
+  onSessionExpiredLoginClick: PropTypes.func
 };
 function resolveFirebaseConfigForGuard(props) {
   if (props.config?.firebase != null) return props.config.firebase;