@stokr/components-library 3.0.31 → 3.0.33

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/Layout/Layout.js

@@ -26,7 +26,8 @@ class Layout extends React__default.PureComponent {
       footerColor = "red",
       noFooter,
       noHeader,
-      noLogout
+      noLogout,
+      useRelativePathForMenu = false
     } = this.props;
     return /* @__PURE__ */ jsx(ThemeProvider, { theme: { ...theme }, children: /* @__PURE__ */ jsxs(PageWrapper, { children: [
       /* @__PURE__ */ jsx(GlobalStyle, {}),
@@ -38,7 +39,8 @@ class Layout extends React__default.PureComponent {
           loginHandler,
           signupHandler,
           siteTitle: title,
-          noLogout
+          noLogout,
+          useRelativePathForMenu
         }
       ),
       /* @__PURE__ */ jsx(
@@ -61,7 +63,8 @@ Layout.propTypes = {
   signupHandler: PropTypes.func,
   progress: PropTypes.bool,
   footerColor: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  useRelativePathForMenu: PropTypes.bool
 };
 ProgressStatusContext.Consumer;
 export {

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";

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -32,6 +32,8 @@ import { emailRegex } from "../../constants/globalVariables.js";
 const renderSuccessModal = (continueUrl) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
   stdin_default$1,
   {
+    continueButtonId: "verify-email-success-continue-btn",
+    continueButtonDataCy: "verify-email-success-continue",
     onClick: () => {
       window.open(continueUrl, "_self");
     },
@@ -87,12 +89,22 @@ const RenderErrorModal = (props) => {
                   onChange: handleChange,
                   onBlur: handleBlur,
                   error: !!errors.email,
-                  touched: !!touched.email
+                  touched: !!touched.email,
+                  "data-cy": "verify-email-modal-email-input"
                 }
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
             ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "verify-email-submit-btn", disabled: submitDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                id: "verify-email-submit-btn",
+                "data-cy": "verify-email-modal-resend-submit",
+                disabled: submitDisabled,
+                children: isActionLoading === "resend" ? "Resending email" : "Resend email"
+              }
+            ) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resend", children: popupError.message }) }),
             isDisabled && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: isDisabled, children: `You can try again in ${secondsRemaining} seconds` }) })
           ] });

package/dist/components/headerHo/HeaderHo.js

@@ -40,6 +40,7 @@ import fetchDataPublic from "../../api/fetchDataPublic.js";
 import { withRouter } from "../../utils/withRouter.js";
 import { checkActionCode } from "firebase/auth";
 import { auth } from "../../firebase-config.js";
+import { track } from "../../analytics/index.js";
 const Outer = styled.div.withConfig({
   shouldForwardProp: (props) => !["fixed"].includes(props)
 })`
@@ -454,6 +455,7 @@ const _HeaderHoClass = class _HeaderHoClass extends Component {
                   listName: "newsletter"
                 });
               }
+              track("signup_account_created", { newsletter_opt_in: !!_userInfo.newsletter });
               this.setUserInfo(_userInfo);
               this.switchOpenModal("signUp", "confirm");
               this.setIsActionLoading(void 0);

package/dist/components/taxId/complete.js

@@ -1,5 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "react";
+import { track } from "../../analytics/index.js";
 import { Text } from "../Text/Text.styles.js";
 import { useNavigate } from "react-router-dom";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
@@ -10,12 +11,32 @@ const noop = () => {
 const RegisterTaxIdComplete = ({ showBackButton, onClick = noop }) => {
   let navigate = useNavigate();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showBackButton && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, children: /* @__PURE__ */ jsx(TextButton, { onClick: () => navigate("/verify-identity"), children: "Back to verify identity" }) }),
+    showBackButton && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, children: /* @__PURE__ */ jsx(
+      TextButton,
+      {
+        "data-cy": "tax-id-complete-back-button",
+        onClick: () => {
+          track("tax_id_back_clicked", { surface: "tax_id_complete" });
+          navigate("/verify-identity");
+        },
+        children: "Back to verify identity"
+      }
+    ) }),
     /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsxs(Text, { children: [
       /* @__PURE__ */ jsx("h1", { children: "Your Tax Id has been submitted" }),
       /* @__PURE__ */ jsx("p", { children: "You have successfully submitted your Tax ID information. You will be ready to invest once you have completed all required steps on your checklist. Please continue!" })
     ] }) }),
-    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, children: /* @__PURE__ */ jsx(Button, { onClick, children: "Continue" }) })
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-cy": "tax-id-complete-continue-button",
+        onClick: () => {
+          track("tax_id_complete_continue_clicked");
+          onClick();
+        },
+        children: "Continue"
+      }
+    ) })
   ] });
 };
 var stdin_default = RegisterTaxIdComplete;

package/dist/components/taxId/flow.js

@@ -1,5 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
+import { track } from "../../analytics/index.js";
 import { Modal } from "../Modal/Modal.js";
 import stdin_default$3 from "./register-taxid.js";
 import stdin_default$1 from "../ComponentScroll/ComponentScroll.js";
@@ -20,13 +21,22 @@ const RegisterTaxIdFlow = ({
       onComplete();
     }
   }, [showComplete]);
+  useEffect(() => {
+    if (showFlow) {
+      track("tax_id_modal_opened");
+    }
+  }, [showFlow]);
+  const handleClose = () => {
+    track("tax_id_modal_closed", { flow_step: showComplete ? "complete" : "form" });
+    setShowFlow(false);
+  };
   const scrollRef = useRef();
   const handleScroll = (values, ref) => {
     if (ref) {
       scrollRef.current = ref;
     }
   };
-  return /* @__PURE__ */ jsx(Modal, { fullscreen: true, isOpen: showFlow, onClose: () => setShowFlow(false), children: /* @__PURE__ */ jsx(ModalInner, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(stdin_default$1, { handleScroll, fullHeight: true, children: showComplete ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Modal, { fullscreen: true, isOpen: showFlow, onClose: handleClose, children: /* @__PURE__ */ jsx(ModalInner, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(stdin_default$1, { handleScroll, fullHeight: true, children: showComplete ? /* @__PURE__ */ jsx(
     stdin_default$2,
     {
       showBackButton,