@saasquatch/mint-components 1.7.2 → 1.7.3-1

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -10,9 +10,9 @@ require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-f6c7287e.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-200752cb.js');
 
-function usePortalVerifyEmail({ nextPage, failedPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const userIdent = index_module.H();
   const [request, { loading, data, errors }] = index_module.Ye();
@@ -72,6 +72,11 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
       failed,
       gotoNextPage,
     },
+    content: {
+      verifySuccessText,
+      verifyEmailText,
+      verifyInvalidText,
+    },
   };
 }
 
@@ -93,14 +98,25 @@ const PortalVerifyEmail = class {
      * @uiWidget pageSelect
      */
     this.failedPage = "/";
+    /**
+     * @uiName Verify email text
+     * @uiWidget textArea
+     */
+    this.verifyEmailText = "Verify your email";
+    /**
+     * @uiName Email verification success text
+     * @uiWidget textArea
+     */
+    this.verifySuccessText = "Your email has been verified and you are being redirected. If you are not redirected, please click Continue.";
+    this.verifyInvalidText = "The email verification code is invalid or has expired, please try again.";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const { states, data, callbacks } = index_module.isDemo()
-      ? usePortalVerifyEmailDemo(this)
-      : usePortalVerifyEmail(this);
-    return (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));
+    const { states, data, callbacks, content } = index_module.isDemo()
+      ? usePortalVerifyEmailDemo(utils.getProps(this))
+      : usePortalVerifyEmail(utils.getProps(this));
+    return (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks, content: content }));
   }
 };
 function usePortalVerifyEmailDemo(props) {
@@ -115,6 +131,11 @@ function usePortalVerifyEmailDemo(props) {
       },
       gotoNextPage: () => { },
     },
+    content: {
+      verifySuccessText: props.verifySuccessText,
+      verifyEmailText: props.verifyEmailText,
+      verifyInvalidText: props.verifyInvalidText,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -21,11 +21,11 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-555c7729.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-dd53f947.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-21dcca39.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-d6e14e8d.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-0bd4a2c2.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-0142350f.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-13a1229f.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-d5bc7afc.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-f6c7287e.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-200752cb.js');
 const ShadowViewAddon = require('./ShadowViewAddon-43f35e24.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
 

package/dist/collection/components/sqm-password-field/passwordValidation.js

@@ -10,21 +10,15 @@ const passwordSchema = new PasswordValidator()
   .lowercase() // Must have lowercase letters
   .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
 // Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
-export const validateNewPassword = (password) => {
+export const validateNewPassword = (password, validationText) => {
   const errors = passwordSchema.validate(password, { list: true });
-  const message = getErrorMessage(errors, password);
+  const message = getErrorMessage(errors, password, validationText);
   return message;
 };
 const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
   h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
 const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
-const validationMessages = {
-  min: "be a minimum of 8 characters",
-  uppercase: "contain at least 1 uppercase character",
-  lowercase: "contain at least 1 lowercase character",
-  has: "contain at least 1 number or symbol",
-};
 const baseItem = {
   display: "flex",
   alignItems: "center",
@@ -56,16 +50,22 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const getErrorMessage = (errorKeys, password) => {
+const getErrorMessage = (errorKeys, password, validationText) => {
+  const validationMessages = {
+    min: validationText.minError,
+    uppercase: validationText.uppercaseError,
+    lowercase: validationText.lowercaseError,
+    has: validationText.hasError,
+  };
   if (!errorKeys.length && password)
     return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
       h("style", { type: "text/css" }, styleString),
       h(Valid, null),
       " ",
-      h("span", null, "Password has met all requirements")));
+      h("span", null, validationText.meetsRequirementsText)));
   return (h("div", { class: sheet.classes.Base },
     h("style", { type: "text/css" }, styleString),
-    "Password must meet the following requirements:",
+    validationText.doesNotMeetRequirementsText,
     h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
       h(Invalid, null),
       " ",

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -6,6 +6,7 @@ import deepmerge from "deepmerge";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
 import { usePasswordField } from "./usePasswordField";
+import { getProps } from "../../utils/utils";
 /**
  * @uiName Form Password Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
@@ -26,13 +27,37 @@ export class PortalPasswordField {
      * @uiName Disable validation
      */
     this.disableValidation = false;
+    /**
+     * @uiName Meets requirements text
+     */
+    this.meetsRequirementsText = "Password has met all requirements";
+    /**
+     * @uiName Fails requirements text
+     */
+    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
+    /**
+     * @uiName Minimum length text
+     */
+    this.minError = "be a minimum of 8 characters";
+    /**
+     * @uiName Missing uppercase text
+     */
+    this.uppercaseError = "contain at least 1 uppercase character";
+    /**
+     * @uiName Missing lowercase text
+     */
+    this.lowercaseError = "contain at least 1 lowercase character";
+    /**
+     * @uiName Missing number or symbol error text
+     */
+    this.hasError = "contain at least 1 number or symbol";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = isDemo()
-      ? usePasswordFieldDemo(this)
-      : usePasswordField(this);
+      ? usePasswordFieldDemo(getProps(this))
+      : usePasswordField(getProps(this));
     return h(PortalResetPasswordView, { states: states, callbacks: callbacks });
   }
   static get is() { return "sqm-password-field"; }
@@ -79,6 +104,132 @@ export class PortalPasswordField {
       "reflect": false,
       "defaultValue": "false"
     },
+    "meetsRequirementsText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Meets requirements text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "meets-requirements-text",
+      "reflect": false,
+      "defaultValue": "\"Password has met all requirements\""
+    },
+    "doesNotMeetRequirementsText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Fails requirements text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "does-not-meet-requirements-text",
+      "reflect": false,
+      "defaultValue": "\"Password must meet the following requirements:\""
+    },
+    "minError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Minimum length text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "min-error",
+      "reflect": false,
+      "defaultValue": "\"be a minimum of 8 characters\""
+    },
+    "uppercaseError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Missing uppercase text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "uppercase-error",
+      "reflect": false,
+      "defaultValue": "\"contain at least 1 uppercase character\""
+    },
+    "lowercaseError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Missing lowercase text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "lowercase-error",
+      "reflect": false,
+      "defaultValue": "\"contain at least 1 lowercase character\""
+    },
+    "hasError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Missing number or symbol error text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "has-error",
+      "reflect": false,
+      "defaultValue": "\"contain at least 1 number or symbol\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -114,12 +265,12 @@ function usePasswordFieldDemo(props) {
   const [dynamicValidation, setDynamicValidation] = useState("");
   const [lastValidated, setLastValidated] = useState("");
   if (props.demoData && lastValidated != ((_a = props === null || props === void 0 ? void 0 : props.demoData) === null || _a === void 0 ? void 0 : _a.initValue)) {
-    const validation = validateNewPassword(((_b = props === null || props === void 0 ? void 0 : props.demoData) === null || _b === void 0 ? void 0 : _b.initValue) || "");
+    const validation = validateNewPassword(((_b = props === null || props === void 0 ? void 0 : props.demoData) === null || _b === void 0 ? void 0 : _b.initValue) || "", props);
     setDynamicValidation(((_c = props === null || props === void 0 ? void 0 : props.demoData) === null || _c === void 0 ? void 0 : _c.initValue) === "" ? "" : validation);
     setLastValidated((_d = props === null || props === void 0 ? void 0 : props.demoData) === null || _d === void 0 ? void 0 : _d.initValue);
   }
   function onInput(input) {
-    const validation = validateNewPassword(input.target.value);
+    const validation = validateNewPassword(input.target.value, props);
     setDynamicValidation(validation);
   }
   return deepmerge({

package/dist/collection/components/sqm-password-field/usePasswordField.js

@@ -6,7 +6,7 @@ export function usePasswordField(props) {
   const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   const [dynamicValidation, setDynamicValidation] = useState("");
   function onInput(input) {
-    const validation = validateNewPassword(input.target.value);
+    const validation = validateNewPassword(input.target.value, props);
     setDynamicValidation(validation);
   }
   return {

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

@@ -37,7 +37,7 @@ const vanillaStyle = `
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalEmailVerificationView(props) {
-  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, verificationStatusMessage, verificationLoadingMessage, }, } = props;
+  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, verificationStatusMessage, verificationLoadingMessage, verificationResentMessage, }, } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,
@@ -47,7 +47,7 @@ export function PortalEmailVerificationView(props) {
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       props.states.success && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        h("div", { part: "successalert-text" }, "Your verification email has been resent successfully"))),
+        h("div", { part: "successalert-text" }, verificationResentMessage))),
       h(TextSpanView, { type: "p" }, intl.formatMessage({
         id: "verifyMessage",
         defaultMessage: verifyMessage,

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js

@@ -40,6 +40,11 @@ export class PortalEmailVerification {
      * @uiWidget textArea
      */
     this.verificationLoadingMessage = "Checking verification status";
+    /**
+     * @uiName Email verification resent text
+     * @uiWidget textArea
+     */
+    this.verificationResentMessage = "Your verification email has been resent successfully";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -190,12 +195,36 @@ export class PortalEmailVerification {
       "reflect": false,
       "defaultValue": "\"Checking verification status\""
     },
+    "verificationResentMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email verification resent text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "verification-resent-message",
+      "reflect": false,
+      "defaultValue": "\"Your verification email has been resent successfully\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalEmailVerificationViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -238,6 +267,7 @@ function usePortalEmailVerificationDemo(props) {
       resendEmailButtonText: props.resendEmailButtonText,
       verificationLoadingMessage: props.verificationLoadingMessage,
       verificationStatusMessage: props.verificationStatusMessage,
+      verificationResentMessage: props.verificationResentMessage,
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -25,6 +25,12 @@ export class PortalRegistrationForm {
      * @uiWidget pageSelect
      */
     this.redirectPath = "/verifyEmail";
+    /**
+     * Saves the browser locale on the new user
+     *
+     * @uiName Use browser locale
+     */
+    this.useBrowserLocale = false;
     /**
      * @uiName Email field label
      */
@@ -181,6 +187,27 @@ export class PortalRegistrationForm {
       "reflect": false,
       "defaultValue": "\"/verifyEmail\""
     },
+    "useBrowserLocale": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Use browser locale",
+            "name": "uiName"
+          }],
+        "text": "Saves the browser locale on the new user"
+      },
+      "attribute": "use-browser-locale",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "emailLabel": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -1,6 +1,6 @@
 import jsonpointer from "jsonpointer";
 import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
-import { navigation, useQuery, useRegisterViaRegistrationFormMutation, } from "@saasquatch/component-boilerplate";
+import { navigation, useLocale, useQuery, useRegisterViaRegistrationFormMutation, } from "@saasquatch/component-boilerplate";
 import { AsYouType } from "libphonenumber-js";
 import { gql } from "graphql-request";
 import { useRegistrationFormState, } from "./useRegistrationFormState";
@@ -20,6 +20,7 @@ const RegistrationFormQuery = gql `
 export function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   const formRef = useRef(null);
+  const locale = useLocale();
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState({});
   const [request, { loading, errors, data, formError }] = useRegisterViaRegistrationFormMutation();
   const queryResponse = useQuery(RegistrationFormQuery, { key: props.formKey });
@@ -102,6 +103,7 @@ export function usePortalRegistrationForm(props) {
     const variables = {
       key: props.formKey,
       formData: {
+        ...(props.useBrowserLocale ? { locale } : {}),
         email,
         password,
         redirectPath,

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

@@ -20,15 +20,15 @@ const vanillaStyle = `
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
-  const { states, data, callbacks } = props;
+  const { states, data, callbacks, content } = props;
   if (states.verified) {
     return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),
-      h(TextSpanView, { type: "h3" }, "Verify your email"),
+      h(TextSpanView, { type: "h3" }, content.verifyEmailText),
       h("sqm-form-message", { exportparts: "success-icon" },
-        h("div", { part: "successalert-text" }, "Your email has been verified and you are being redirected. If you are not redirected, please click Continue.")),
+        h("div", { part: "successalert-text" }, content.verifySuccessText)),
       h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, "Continue")));
   }
   if (states.error || !data.oobCode) {
@@ -36,7 +36,7 @@ export function PortalVerifyEmailView(props) {
       h("style", { type: "text/css" }, styleString),
       h(TextSpanView, { type: "h3" }, "Verify your email"),
       h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, "The email verification code is invalid or has expired, please try again.")),
+        h("div", { part: "erroralert-text" }, content.verifyInvalidText)),
       h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, "Continue")));
   }
 }

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -4,6 +4,7 @@ import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { PortalVerifyEmailView, } from "./sqm-portal-verify-email-view";
 import { usePortalVerifyEmail } from "./usePortalVerifyEmail";
+import { getProps } from "../../utils/utils";
 /**
  * @uiName Microsite Verify Email
  */
@@ -24,14 +25,25 @@ export class PortalVerifyEmail {
      * @uiWidget pageSelect
      */
     this.failedPage = "/";
+    /**
+     * @uiName Verify email text
+     * @uiWidget textArea
+     */
+    this.verifyEmailText = "Verify your email";
+    /**
+     * @uiName Email verification success text
+     * @uiWidget textArea
+     */
+    this.verifySuccessText = "Your email has been verified and you are being redirected. If you are not redirected, please click Continue.";
+    this.verifyInvalidText = "The email verification code is invalid or has expired, please try again.";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const { states, data, callbacks } = isDemo()
-      ? usePortalVerifyEmailDemo(this)
-      : usePortalVerifyEmail(this);
-    return (h(PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));
+    const { states, data, callbacks, content } = isDemo()
+      ? usePortalVerifyEmailDemo(getProps(this))
+      : usePortalVerifyEmail(getProps(this));
+    return (h(PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks, content: content }));
   }
   static get is() { return "sqm-portal-verify-email"; }
   static get encapsulation() { return "shadow"; }
@@ -84,12 +96,78 @@ export class PortalVerifyEmail {
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "verifyEmailText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Verify email text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-email-text",
+      "reflect": false,
+      "defaultValue": "\"Verify your email\""
+    },
+    "verifySuccessText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email verification success text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "verify-success-text",
+      "reflect": false,
+      "defaultValue": "\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\""
+    },
+    "verifyInvalidText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "verify-invalid-text",
+      "reflect": false,
+      "defaultValue": "\"The email verification code is invalid or has expired, please try again.\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalVerifyEmailViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -131,5 +209,10 @@ function usePortalVerifyEmailDemo(props) {
       },
       gotoNextPage: () => { },
     },
+    content: {
+      verifySuccessText: props.verifySuccessText,
+      verifyEmailText: props.verifyEmailText,
+      verifyInvalidText: props.verifyInvalidText,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,7 +1,7 @@
 import { useEffect } from "@saasquatch/universal-hooks";
 import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
-export function usePortalVerifyEmail({ nextPage, failedPage }) {
+export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const userIdent = useUserIdentity();
   const [request, { loading, data, errors }] = useVerifyEmailMutation();
@@ -61,5 +61,10 @@ export function usePortalVerifyEmail({ nextPage, failedPage }) {
       failed,
       gotoNextPage,
     },
+    content: {
+      verifySuccessText,
+      verifyEmailText,
+      verifyInvalidText,
+    },
   };
 }