@stokr/components-library 3.0.30 → 3.0.32

package/dist/components/Input/InputPassword.js

@@ -22,7 +22,12 @@ const InputPassword = (props) => {
     touched = false,
     info = "",
     showStrength = false,
-    autoComplete = "current-password"
+    autoComplete = "current-password",
+    onChange,
+    onBlur,
+    onFocus,
+    toggleDataCy,
+    ...domRest
   } = props;
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isCapslockOn, setIsCapslockOn] = useState(false);
@@ -37,16 +42,16 @@ const InputPassword = (props) => {
   const handleCapslock = (e) => {
     setIsCapslockOn(e.getModifierState("CapsLock"));
   };
-  const onFocus = (e, field) => {
-    props.onFocus?.(e, field);
+  const handleFocus = (e, field) => {
+    onFocus?.(e, field);
     setHasFocus(true);
   };
-  const onBlur = (e, field) => {
-    if (props.onBlur) props.onBlur(e, field);
+  const handleBlur = (e, field) => {
+    onBlur?.(e, field);
     setHasFocus(false);
   };
-  const onChange = (e, field) => {
-    props.onChange?.(e, field);
+  const handleChange = (e, field) => {
+    onChange?.(e, field);
   };
   const passwordStrengthFunction = () => {
     if (value.length === 0) {
@@ -67,19 +72,28 @@ const InputPassword = (props) => {
     /* @__PURE__ */ jsx(InputWrap, { error: error && touched, children: /* @__PURE__ */ jsx(
       "input",
       {
+        ...domRest,
         type: isPasswordVisible ? "text" : "password",
         id,
         name,
         value,
         autoComplete,
-        onChange,
-        onBlur,
-        onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onKeyUp: handleCapslock,
         onKeyDown: handleCapslock
       }
     ) }),
-    /* @__PURE__ */ jsx(ShowPassword, { onClick: togglePasswordVisibility, children: isPasswordVisible ? /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye-off" }) : /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye" }) }),
+    /* @__PURE__ */ jsx(
+      ShowPassword,
+      {
+        type: "button",
+        onClick: togglePasswordVisibility,
+        "data-cy": toggleDataCy ?? `${id}-password-visibility-toggle`,
+        children: isPasswordVisible ? /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye-off" }) : /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye" })
+      }
+    ),
     /* @__PURE__ */ jsxs(BottomWrap, { children: [
       showStrength ? /* @__PURE__ */ jsxs(PasswordStrengthWrap, { children: [
         /* @__PURE__ */ jsxs(PasswordStrengthIndicators, { passwordStrength, children: [
@@ -112,7 +126,8 @@ InputPassword.propTypes = {
   onFocus: PropTypes.func,
   info: PropTypes.string,
   showStrength: PropTypes.bool,
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+  toggleDataCy: PropTypes.string
 };
 var stdin_default = InputPassword;
 export {

package/dist/components/Input/OtpInput.js

@@ -23,7 +23,18 @@ const Separator = styled.span`
   `}
 `;
 const OtpInput = (props) => {
-  const { value, numInputs = 4, RenderSeparator = Separator, inputType = "text", shouldAutoFocus = true, label } = props;
+  const {
+    value,
+    numInputs = 4,
+    RenderSeparator = Separator,
+    inputType = "text",
+    shouldAutoFocus = true,
+    label,
+    /** Per-digit selectors: `{prefix}-digit-0`, … */
+    dataCyPrefix,
+    onChange,
+    ...otpProps
+  } = props;
   const [labelUp, setLabelUp] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
   const checkLabel = (focus) => {
@@ -40,10 +51,9 @@ const OtpInput = (props) => {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
   const handleChange = (e, field) => {
-    const { onChange } = props;
     onChange?.(e, field);
   };
-  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+  return /* @__PURE__ */ jsxs(Wrapper, { ...dataCyPrefix ? { "data-cy": `${dataCyPrefix}-wrapper` } : {}, children: [
     label && /* @__PURE__ */ jsx(Label, { isUp: true, style: { lineHeight: "inherit", top: "-5px" }, children: label }),
     /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
       Input,
@@ -55,10 +65,14 @@ const OtpInput = (props) => {
         shouldAutoFocus,
         inputStyle,
         renderSeparator: /* @__PURE__ */ jsx(RenderSeparator, {}),
-        renderInput: (_props) => {
-          return /* @__PURE__ */ jsx("input", { ..._props });
-        },
-        ...props
+        renderInput: (inputProps, index) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            ...dataCyPrefix ? { "data-cy": `${dataCyPrefix}-digit-${index}` } : {}
+          }
+        ),
+        ...otpProps
       }
     ) })
   ] });

package/dist/components/Input/Select.js

@@ -22,6 +22,11 @@ const SelectMenuListWithScroll = (props) => {
 SelectMenuListWithScroll.propTypes = {
   children: PropTypes.node.isRequired
 };
+function createControlWithDataCy(dataCy) {
+  return function ControlWithDataCy(ctlProps) {
+    return /* @__PURE__ */ jsx(components.Control, { ...ctlProps, innerProps: { ...ctlProps.innerProps, "data-cy": dataCy } });
+  };
+}
 const Select = (props) => {
   const {
     id,
@@ -36,6 +41,7 @@ const Select = (props) => {
     menuHeight,
     creatable = false,
     formatCreateLabel = null,
+    dataCy,
     ...otherProps
   } = props;
   const [labelUp, setLabelUp] = useState(!!value);
@@ -87,7 +93,8 @@ const Select = (props) => {
   const selectComponents = {
     DropdownIndicator,
     IndicatorSeparator: null,
-    MenuList: SelectMenuListWithScroll
+    MenuList: SelectMenuListWithScroll,
+    ...dataCy ? { Control: createControlWithDataCy(dataCy) } : {}
   };
   const currentValue = creatable ? options?.find((option) => option.value === value) || (value ? { value, label: value } : null) : options?.find((option) => option.value === value);
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
@@ -136,7 +143,9 @@ Select.propTypes = {
   formatCreateLabel: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  /** Playwright / autocapture: selector on the react-select control */
+  dataCy: PropTypes.string
 };
 export {
   Select,

package/dist/components/Input/TableFilterDropdown.js

@@ -80,6 +80,10 @@ const ClearAllOption = styled.div`
     background-color: ${colors.grey};
   }
 `;
+function slugForDataCy(text) {
+  if (text == null || text === "") return "";
+  return String(text).toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9_-]/g, "");
+}
 const TableFilterDropdown = ({
   label,
   options,
@@ -93,8 +97,10 @@ const TableFilterDropdown = ({
   menuTop = 8,
   showClearAll = false,
   clearAllText = "Clear all",
+  dataCy,
   ...props
 }) => {
+  const triggerDataCy = dataCy ?? (label ? `table-filter-${slugForDataCy(label)}` : "table-filter-dropdown");
   const [isOpen, setIsOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
   const containerRef = useRef(null);
@@ -191,19 +197,27 @@ const TableFilterDropdown = ({
         children: [
           /* @__PURE__ */ jsx(OptionsList, { children: options.map((option) => {
             const isSelected = value.includes(option.value);
-            return /* @__PURE__ */ jsxs(CheckboxWrapperDiv, { onClick: (e) => handleOptionClick(option.value, e), children: [
-              /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
-              /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
-            ] }, option.value);
+            return /* @__PURE__ */ jsxs(
+              CheckboxWrapperDiv,
+              {
+                "data-cy": `${triggerDataCy}-option-${slugForDataCy(option.value)}`,
+                onClick: (e) => handleOptionClick(option.value, e),
+                children: [
+                  /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
+                  /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
+                ]
+              },
+              option.value
+            );
           }) }),
-          showClearAll && hasActiveFilters && /* @__PURE__ */ jsx(ClearAllOption, { onClick: handleClearAll, children: clearAllText })
+          showClearAll && hasActiveFilters && /* @__PURE__ */ jsx(ClearAllOption, { "data-cy": `${triggerDataCy}-clear-all`, onClick: handleClearAll, children: clearAllText })
         ]
       }
     );
     return createPortal(menu, document.body);
   };
   return /* @__PURE__ */ jsxs(DropdownContainer, { ref: containerRef, ...props, children: [
-    /* @__PURE__ */ jsxs(TriggerContainer, { ref: triggerRef, onClick: handleTriggerClick, "data-clickable": "true", children: [
+    /* @__PURE__ */ jsxs(TriggerContainer, { ref: triggerRef, onClick: handleTriggerClick, "data-cy": triggerDataCy, "data-clickable": "true", children: [
       label && /* @__PURE__ */ jsx("span", { children: label }),
       /* @__PURE__ */ jsxs(IconWrapper, { children: [
         /* @__PURE__ */ jsx(IconComponent, {}),
@@ -240,7 +254,9 @@ TableFilterDropdown.propTypes = {
   /** Show "Clear all" option at the bottom of the list */
   showClearAll: PropTypes.bool,
   /** Custom text for the "Clear all" option */
-  clearAllText: PropTypes.string
+  clearAllText: PropTypes.string,
+  /** Override default `table-filter-{label}` data-cy on trigger */
+  dataCy: PropTypes.string
 };
 export {
   TableFilterDropdown

package/dist/components/LoginModal/LoginModal.js

@@ -49,7 +49,7 @@ const LoginModal = (props) => {
       ] }) }),
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
         "Don't have an account yet? ",
-        /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", onClick: onModalSwitch, children: "Sign up" })
+        /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", "data-cy": "login-modal-switch-to-signup", onClick: onModalSwitch, children: "Sign up" })
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
@@ -79,7 +79,8 @@ const LoginModal = (props) => {
                   error: !!errors.email,
                   touched: !!touched.email,
                   autoComplete: "email",
-                  autoFocus: true
+                  autoFocus: true,
+                  "data-cy": "login-modal-email-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
@@ -97,18 +98,20 @@ const LoginModal = (props) => {
                   onBlur: handleBlur,
                   error: !!errors.password,
                   touched: !!touched.password,
-                  autoComplete: "current-password"
+                  autoComplete: "current-password",
+                  "data-cy": "login-modal-password-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
             ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "login-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "login" ? "Logging in" : "Login" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "login-submit-btn", "data-cy": "login-modal-submit", fluid: true, disabled: submitDisabled, children: isActionLoading === "login" ? "Logging in" : "Login" }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "login", children: popupError.message }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
               TextLink,
               {
                 type: "button",
                 as: "button",
+                "data-cy": "login-modal-forgot-password",
                 onClick: (...args) => {
                   values.password = "";
                   onForgotPassword(...args);

package/dist/components/Modal/Modal.styles.js

@@ -225,7 +225,11 @@ const ModalInner = styled.div.withConfig({
   `}
 `;
 const ModalClose = styled.i.attrs({
-  className: "ion ion-md-close"
+  className: "ion ion-md-close",
+  role: "button",
+  tabIndex: 0,
+  "aria-label": "Close dialog",
+  "data-cy": "modal-close"
 })`
   z-index: 4;
   position: absolute;
@@ -275,7 +279,11 @@ const ModalClose = styled.i.attrs({
 const ModalBack = styled.i.withConfig({
   shouldForwardProp: (props) => !["hide"].includes(props)
 }).attrs({
-  className: "ion ion-ios-arrow-back"
+  className: "ion ion-ios-arrow-back",
+  role: "button",
+  tabIndex: 0,
+  "aria-label": "Back",
+  "data-cy": "modal-back"
 })`
   z-index: 4;
   position: absolute;

package/dist/components/Modal/NewVentureModal/NewVentureModal.js

@@ -94,6 +94,7 @@ const NewVentureModal = (props) => {
             {
               fluid: true,
               id: "private-investor-success-button",
+              "data-cy": "new-venture-modal-success-continue",
               onClick: () => {
                 if (onSuccessMessageBtnClick) {
                   onSuccessMessageBtnClick();
@@ -169,7 +170,8 @@ const NewVentureModal = (props) => {
                         onChange: onChangeWithTouch,
                         onBlur: handleBlur,
                         error: !!errors.email,
-                        touched: !!touched.email
+                        touched: !!touched.email,
+                        "data-cy": "new-venture-modal-email-input"
                       }
                     ),
                     /* @__PURE__ */ jsx(FormError, { show: touched.email && errors.email, children: errors.email }),
@@ -185,7 +187,8 @@ const NewVentureModal = (props) => {
                           onChange: onChangeWithTouch,
                           onBlur: handleBlur,
                           error: !!errors.name,
-                          touched: !!touched.name
+                          touched: !!touched.name,
+                          "data-cy": "new-venture-modal-name-input"
                         }
                       ),
                       /* @__PURE__ */ jsx(FormError, { show: touched.name && errors.name, children: errors.name })
@@ -200,7 +203,8 @@ const NewVentureModal = (props) => {
                       checked: values.privateInvestorList,
                       disabled: privateInvestorListDisabled,
                       onChange: handleCheckboxChange,
-                      onBlur: handleBlur
+                      onBlur: handleBlur,
+                      "data-cy": "new-venture-modal-private-investor-checkbox"
                     }
                   ) }),
                   /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
@@ -212,7 +216,8 @@ const NewVentureModal = (props) => {
                       checked: values.mailingList,
                       disabled: mailingListDisabled,
                       onChange: handleCheckboxChange,
-                      onBlur: handleBlur
+                      onBlur: handleBlur,
+                      "data-cy": "new-venture-modal-mailing-list-checkbox"
                     }
                   ) }),
                   optionalCheckBox && /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
@@ -224,7 +229,8 @@ const NewVentureModal = (props) => {
                       value: values.optionalCheckBoxChecked,
                       checked: values.optionalCheckBoxChecked,
                       onChange: handleChange,
-                      onBlur: handleBlur
+                      onBlur: handleBlur,
+                      "data-cy": "new-venture-modal-optional-checkbox"
                     }
                   ) }),
                   project.type === ProjectTypes.FUND && /* @__PURE__ */ jsx(FormField, { style: { marginTop: "2rem", marginBottom: -5 }, children: /* @__PURE__ */ jsx(
@@ -238,7 +244,16 @@ const NewVentureModal = (props) => {
                     }
                   ) })
                 ] }) }),
-                /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, center: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "private-investor-subscribe-button", disabled: submitDisabled, children: "register" }) }),
+                /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, center: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    id: "private-investor-subscribe-button",
+                    "data-cy": "new-venture-modal-register-submit",
+                    disabled: submitDisabled,
+                    children: "register"
+                  }
+                ) }),
                 /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError, children: popupError }) })
               ] });
             }

package/dist/components/Modal/PaymentModal.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import "react";
+import React__default from "react";
 import { QRCodeSVG } from "qrcode.react";
 import { formatInTimeZone } from "date-fns-tz";
 import { Modal } from "./Modal.js";
@@ -53,14 +53,22 @@ const PaymentModal = ({
     " to the treasury wallet below."
   ] }),
   numberOfSecuritiesText = "Redeem securities",
-  formatAmountInLink = true
+  formatAmountInLink = true,
+  transactionCostMessage,
+  paymentLink: paymentLinkProp,
+  showKYCWarningBox = true,
+  ...props
 }) => {
   const { projectData, tokenAmount, tokenSymbol, createdAt, tokenDecimals = 2, GAID, currencyType } = data;
   let newTokenAmount = tokenAmount;
   if (formatAmountInLink) {
     newTokenAmount = (tokenAmount * Math.pow(10, tokenDecimals - 8)).toFixed(8);
   }
-  var paymentlink = `liquidnetwork:${projectData?.companyWallet}?amount=${newTokenAmount}&assetid=${projectData?.secondaryAssetId}`;
+  const defaultPaymentLink = `liquidnetwork:${projectData?.companyWallet}?amount=${newTokenAmount}&assetid=${projectData?.secondaryAssetId}`;
+  const resolvedPaymentLink = paymentLinkProp ?? defaultPaymentLink;
+  const txCostParagraphStyle = {
+    color: txTextInRed ? theme.cWarning : "inherit"
+  };
   const isKYCVerified = user?.kyc_status === "Accepted";
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
     /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("h3", { children: modalTitle }) }),
@@ -101,20 +109,12 @@ const PaymentModal = ({
           formatInTimeZone(new Date(secondsRemaining * 1e3), "UTC", "mm:ss"),
           " Waiting for payment..."
         ] }) }) }),
-        !noCTA && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { onClick: onCTAClick, children: CTAText }) })
+        !noCTA && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { "data-cy": "payment-modal-cta", onClick: onCTAClick, children: CTAText }) })
       ] }),
       /* @__PURE__ */ jsx(Column, { part: 8, children: error ? error : /* @__PURE__ */ jsxs(Text, { children: [
         sendTokenTextRight,
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              color: txTextInRed ? theme.cWarning : "inherit"
-            },
-            children: "We have transfered 0.00002 LBTC to cover your transaction costs."
-          }
-        ),
-        isKYCVerified ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        transactionCostMessage != null && transactionCostMessage !== false && (React__default.isValidElement(transactionCostMessage) ? transactionCostMessage : /* @__PURE__ */ jsx("p", { style: txCostParagraphStyle, children: transactionCostMessage })),
+        isKYCVerified || !showKYCWarningBox ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             stdin_default,
             {
@@ -127,7 +127,7 @@ const PaymentModal = ({
               fontSize: 16
             }
           ),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: paymentlink, size: 150 }) })
+          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: resolvedPaymentLink, size: 150 }) })
         ] }) : /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ jsxs(WarningBox, { children: [
             /* @__PURE__ */ jsx(Icon, { icon: iconsMap.warning, size: 32, color: "white" }),
@@ -137,7 +137,7 @@ const PaymentModal = ({
               /* @__PURE__ */ jsx("a", { href: "mailto:compliance@stokr.io", style: { color: "inherit" }, children: "compliance@stokr.io" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(BlurBox, { children: /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: paymentlink, size: 150 }) }) })
+          /* @__PURE__ */ jsx(BlurBox, { children: /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(QRCodeSVG, { value: resolvedPaymentLink, size: 150 }) }) })
         ] }),
         additionalInfoRight && additionalInfoRight
       ] }) })

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.js

@@ -45,7 +45,7 @@ const RegisterConfirmModal = ({
         "Email didn't arrive?",
         /* @__PURE__ */ jsx("br", {})
       ] }),
-      /* @__PURE__ */ jsx(TextLink, { to: "", onClick: onResend, disabled: cooldown?.isDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }),
+      /* @__PURE__ */ jsx(TextLink, { to: "", "data-cy": "register-confirm-modal-resend-email", onClick: onResend, disabled: cooldown?.isDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resend", children: popupError.message }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupSuccess.popup === "resend", children: popupSuccess.message }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: cooldown?.isDisabled && /* @__PURE__ */ jsx(FormError, { show: cooldown?.isDisabled, children: `You can resend email in ${cooldown?.secondsRemaining} seconds` }) })

package/dist/components/RegisterModal/RegisterModal.js

@@ -93,7 +93,17 @@ const RegisterModal = (props) => {
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
         "Already have an account?",
         " ",
-        /* @__PURE__ */ jsx(ModalLink, { to: "#", as: "button", type: "button", onClick: onModalSwitch, children: "Log in" })
+        /* @__PURE__ */ jsx(
+          ModalLink,
+          {
+            to: "#",
+            as: "button",
+            type: "button",
+            "data-cy": "register-modal-switch-to-login",
+            onClick: onModalSwitch,
+            children: "Log in"
+          }
+        )
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
@@ -148,7 +158,8 @@ const RegisterModal = (props) => {
                   error: !!errors.email,
                   touched: !!touched.email,
                   readOnly: email ? true : false,
-                  autoComplete: "email"
+                  autoComplete: "email",
+                  "data-cy": "register-modal-email-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
@@ -167,7 +178,8 @@ const RegisterModal = (props) => {
                   error: !!errors.password,
                   touched: !!touched.password,
                   info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
-                  autoComplete: "new-password"
+                  autoComplete: "new-password",
+                  "data-cy": "register-modal-password-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
@@ -187,7 +199,8 @@ const RegisterModal = (props) => {
                     onChange: handleChange,
                     onBlur: handleBlur,
                     error: !!errors.newsletter,
-                    touched: !!touched.newsletter
+                    touched: !!touched.newsletter,
+                    "data-cy": "register-modal-newsletter-checkbox"
                   }
                 ),
                 /* @__PURE__ */ jsx(FormError, { show: errors.newsletter && touched.newsletter, children: errors.newsletter })
@@ -198,12 +211,14 @@ const RegisterModal = (props) => {
                   {
                     id: privacyTermsCheckbox.title,
                     name: "terms",
+                    "data-cy": "register-modal-terms-checkbox",
                     text: parse(privacyTermsCheckbox.agreementText, {
                       replace: (domNode) => {
                         if (domNode.type === "tag" && domNode.name === "u") {
                           return /* @__PURE__ */ jsx(
                             TermsStyled,
                             {
+                              "data-cy": "register-modal-privacy-terms-link",
                               onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -227,7 +242,17 @@ const RegisterModal = (props) => {
                 /* @__PURE__ */ jsx(FormError, { show: errors.terms && touched.terms, withMarginLeft: true, children: errors.terms })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", fluid: true, disabled: submitDisabled, id: "signup-button", children: isActionLoading === "signUp" ? "Creating account" : "Create account" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                fluid: true,
+                disabled: submitDisabled,
+                id: "signup-button",
+                "data-cy": "register-modal-submit",
+                children: isActionLoading === "signUp" ? "Creating account" : "Create account"
+              }
+            ) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "register", children: popupError.message }) })
           ] });
         }

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -29,7 +29,7 @@ const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @
     ] }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(Button, { onClick: onModalSwitch, children: "Login" })
+    /* @__PURE__ */ jsx(Button, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Login" })
   ] }) }) }) }),
   /* @__PURE__ */ jsx(RedBar, {})
 ] });

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -40,7 +40,7 @@ const ResetPasswordModal = ({
       ] }) }),
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
         "Remember your password? ",
-        /* @__PURE__ */ jsx(ModalLink, { to: "#", onClick: onModalSwitch, children: "Log in" })
+        /* @__PURE__ */ jsx(ModalLink, { "data-cy": "reset-password-modal-switch-to-login", to: "#", onClick: onModalSwitch, children: "Log in" })
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
@@ -75,7 +75,8 @@ const ResetPasswordModal = ({
                   error: !!errors.password,
                   touched: !!touched.password,
                   info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
-                  autoComplete: "new-password"
+                  autoComplete: "new-password",
+                  "data-cy": "reset-password-modal-password-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
@@ -101,12 +102,23 @@ const ResetPasswordModal = ({
                   onBlur: handleBlur,
                   error: !!errors.confirmPassword,
                   touched: !!touched.confirmPassword,
-                  autoComplete: "new-password"
+                  autoComplete: "new-password",
+                  "data-cy": "reset-password-modal-confirm-password-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.confirmPassword && touched.confirmPassword, children: errors.confirmPassword })
             ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "reset-password-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "resetPassword" ? "Resetting" : "Reset" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                id: "reset-password-submit-btn",
+                "data-cy": "reset-password-modal-submit",
+                fluid: true,
+                disabled: submitDisabled,
+                children: isActionLoading === "resetPassword" ? "Resetting" : "Reset"
+              }
+            ) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
               FormError,
               {

package/dist/components/StepController/StepControllerProgress.js

@@ -17,6 +17,7 @@ const StepControllerProgress = ({
   return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: stepsProgressList.map((item, key) => /* @__PURE__ */ jsx(
     Item,
     {
+      "data-cy": item.dataCy ?? `step-progress-${item.id}`,
       isDone: doneStepsIndexes.includes(key),
       isActive: key === activeStepIndex,
       onClick: () => handleItemClick(item, key)

package/dist/components/Switch/Switch.js

@@ -13,7 +13,8 @@ const Switch = (props) => {
     value1Color,
     value2Color,
     hideValues = false,
-    indicatorStyle
+    indicatorStyle,
+    dataCy
   } = props;
   const [value, setValue] = useState();
   useEffect(() => {
@@ -29,7 +30,7 @@ const Switch = (props) => {
       }, 1e3);
     }
   };
-  return /* @__PURE__ */ jsxs(Container, { mobile, children: [
+  return /* @__PURE__ */ jsxs(Container, { mobile, "data-cy": dataCy, children: [
     !hideValues && /* @__PURE__ */ jsx(Value, { active: value === value1, onClick: () => setValue(value1), dark, children: value1 }),
     /* @__PURE__ */ jsx(
       Indicator,
@@ -54,7 +55,8 @@ Switch.propTypes = {
   mobile: PropTypes.bool,
   dark: PropTypes.bool,
   hideValues: PropTypes.bool,
-  indicatorStyle: PropTypes.object
+  indicatorStyle: PropTypes.object,
+  dataCy: PropTypes.string
 };
 var stdin_default = Switch;
 export {

package/dist/components/ToDoList/ToDoListTask.js

@@ -8,6 +8,7 @@ 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";