@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

package/dist/collection/components/sqm-portal-login/usePortalLogin.js

@@ -1,37 +1,34 @@
 import jsonpointer from "jsonpointer";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { useState } from "@saasquatch/universal-hooks";
 import { navigation, useAuthenticateWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalLogin(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g;
   const [request, { loading, errors, data }] = useAuthenticateWithEmailAndPasswordMutation();
   const [error, setError] = useState("");
-  const urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(navigation.location.search);
   const nextPageOverride = urlParams.get("nextPage");
   const submit = async (event) => {
+    var _a, _b;
     setError("");
     let formData = event.detail.formData;
     formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
       jsonpointer.set(formData, key, value);
     });
     const variables = { email: formData.email, password: formData.password };
-    await request(variables);
-  };
-  useEffect(() => {
-    var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_a = result === null || result === void 0 ? void 0 : result["response"]) === null || _a === void 0 ? void 0 : _a["error"]))
+        setError("Network request failed.");
+      return;
+    }
+    if ((_b = result.authenticateManagedIdentityWithEmailAndPassword) === null || _b === void 0 ? void 0 : _b.token) {
       urlParams.delete("nextPage");
       const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
       navigation.push(url.href);
     }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
-  useEffect(() => {
-    var _a;
-    if ((errors === null || errors === void 0 ? void 0 : errors.message) || ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"])) {
-      setError("Network request failed.");
-    }
-  }, [errors]);
-  const errorMessage = ((_e = (_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extensions) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = errors === null || errors === void 0 ? void 0 : errors.response) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) ||
+  };
+  const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
     error;
   return {
     states: {

package/dist/collection/components/sqm-portal-logout/sqm-portal-logout.js

@@ -3,13 +3,16 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, State } from "@stencil/core";
 import { usePortalLogout } from "./usePortalLogout";
 /**
- * @uiName Portal Logout
+ * @uiName Microsite Logout
  */
 export class PortalLogout {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Next Page Path
+     * Redirect participants to this page when they log out.
+     *
+     * @uiName Logout Redirect Path
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     withHooks(this);
@@ -33,10 +36,13 @@ export class PortalLogout {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page Path",
+            "text": "Logout Redirect Path",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": ""
+        "text": "Redirect participants to this page when they log out."
       },
       "attribute": "next-page",
       "reflect": false,

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile.js

@@ -6,33 +6,25 @@ import { getProps } from "../../utils/utils";
 import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 /**
- * @uiName Portal Profile
+ * @uiName Microsite Participant Profile
  */
 export class PortalProfile {
   constructor() {
     this.ignored = true;
     /**
-     * First name input field label
-     *
      * @uiName First Name Label
      */
     this.firstnametext = "First Name";
     /**
-     * Last name input field label
-     *
-     * @uiName Last Name Label
+     * @uiName Last Name Field Label
      */
     this.lastnametext = "Last Name";
     /**
-     * Email input field label
-     *
-     * @uiName Email Label
+     * @uiName Email Field Label
      */
     this.emailtext = "Email";
     /**
-     * Country input field label
-     *
-     * @uiName Country Label
+     * @uiName Country Field Label
      */
     this.countrytext = "Country";
     /**
@@ -48,11 +40,9 @@ export class PortalProfile {
      */
     this.submitChangeButtonText = "Submit Changes";
     /**
-     * Show or hide the country field
-     *
-     * @uiName Show Country Field
+     * @uiName Hide Country Field
      */
-    this.showCountry = true;
+    this.hideCountry = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -80,7 +70,7 @@ export class PortalProfile {
             "text": "First Name Label",
             "name": "uiName"
           }],
-        "text": "First name input field label"
+        "text": ""
       },
       "attribute": "firstnametext",
       "reflect": false,
@@ -98,10 +88,10 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last Name Label",
+            "text": "Last Name Field Label",
             "name": "uiName"
           }],
-        "text": "Last name input field label"
+        "text": ""
       },
       "attribute": "lastnametext",
       "reflect": false,
@@ -119,10 +109,10 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Label",
+            "text": "Email Field Label",
             "name": "uiName"
           }],
-        "text": "Email input field label"
+        "text": ""
       },
       "attribute": "emailtext",
       "reflect": false,
@@ -140,10 +130,10 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Country Label",
+            "text": "Country Field Label",
             "name": "uiName"
           }],
-        "text": "Country input field label"
+        "text": ""
       },
       "attribute": "countrytext",
       "reflect": false,
@@ -212,7 +202,7 @@ export class PortalProfile {
       "reflect": false,
       "defaultValue": "\"Submit Changes\""
     },
-    "showCountry": {
+    "hideCountry": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -224,14 +214,14 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Country Field",
+            "text": "Hide Country Field",
             "name": "uiName"
           }],
-        "text": "Show or hide the country field"
+        "text": ""
       },
-      "attribute": "show-country",
+      "attribute": "hide-country",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "demoData": {
       "type": "unknown",
@@ -274,7 +264,7 @@ function usePortalProfileDemo(props) {
       success: false,
       loading: false,
       submitDisabled: false,
-      showCountry: true,
+      showCountry: !props.hideCountry,
       user: {
         id: "01",
         accountId: "111100000",
@@ -284,13 +274,13 @@ function usePortalProfileDemo(props) {
         countryCode: "CA",
       },
       text: {
-        firstnametext: "First Name",
-        lastnametext: "Last Name",
-        emailtext: "Email",
-        countrytext: "Country",
-        editProfileHeader: "Edit your profile",
-        editProfileSubHeader: "Personal Information",
-        submitChangeButtonText: "Submit Changes",
+        firstnametext: props.firstnametext,
+        lastnametext: props.lastnametext,
+        emailtext: props.emailtext,
+        countrytext: props.countrytext,
+        editProfileHeader: props.editProfileHeader,
+        editProfileSubHeader: props.editProfileSubHeader,
+        submitChangeButtonText: props.submitChangeButtonText,
       },
       formState: {
         country: "Canada",

package/dist/collection/components/sqm-portal-profile/usePortalProfile.js

@@ -125,7 +125,7 @@ export function usePortalProfile(props) {
       success,
       loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
       submitDisabled: false,
-      showCountry: props.showCountry,
+      showCountry: !props.hideCountry,
       formState,
       user: userData,
       text: {

package/dist/collection/components/sqm-portal-protected-route/sqm-portal-protected-route.js

@@ -3,22 +3,26 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { h, Component, Prop, State, Host } from "@stencil/core";
 import { usePortalProtectedRoute } from "./usePortalProtectedRoute";
 /**
- * @uiName Portal Protected Route
+ * @uiName Microsite Protected Route
+ * @slots [{"name":"","title":"Route Content"}]
  */
 export class PortalProtectedRoute {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Redirect Path
+     * Redirect participants to this page they are not logged in.
+     *
+     * @uiName Unauthenticated Participant Redirect
      */
     this.redirectTo = "/";
     /**
      * @uiName Require Email Verification
-     * @default
      */
     this.requireEmailVerification = false;
     /**
-     * @uiName Redirect Unverified Users Path
+     * Redirect participants to this page when email verification is required but they have not verified their email.
+     *
+     * @uiName Unverified Participant Redirect
      */
     this.redirectToUnverified = "/emailVerification";
     withHooks(this);
@@ -46,10 +50,10 @@ export class PortalProtectedRoute {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Redirect Path",
+            "text": "Unauthenticated Participant Redirect",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Redirect participants to this page they are not logged in."
       },
       "attribute": "redirect-to",
       "reflect": false,
@@ -69,9 +73,6 @@ export class PortalProtectedRoute {
         "tags": [{
             "text": "Require Email Verification",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
         "text": ""
       },
@@ -91,10 +92,10 @@ export class PortalProtectedRoute {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Redirect Unverified Users Path",
+            "text": "Unverified Participant Redirect",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Redirect participants to this page when email verification is required but they have not verified their email."
       },
       "attribute": "redirect-to-unverified",
       "reflect": false,

package/dist/collection/components/sqm-portal-register/PortalRegister.stories.js

@@ -5,6 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -23,6 +24,7 @@ const defaultProps = {
 const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
+    registrationFormState: {},
     loading: false,
     confirmPassword: true,
     hideInputs: false,
@@ -42,6 +44,7 @@ const errorProps = {
 };
 const loadingProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: true,
     confirmPassword: true,
@@ -59,6 +62,7 @@ const loadingProps = {
 };
 const slottedProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -86,6 +90,7 @@ export const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loa
 export const FieldsHidden = () => {
   return (h("sqm-portal-register", { demoData: {
       states: {
+        registrationFormState: {},
         error: "",
         loading: true,
         confirmPassword: true,

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -53,18 +53,17 @@ export function PortalRegisterView(props) {
           if (!value.includes("@")) {
             return "Must be a valid email address";
           }
-        } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
         : [])))),
-      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
+      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
         class: sheet.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
-          "Cannot be empty",
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
       }
         : [])))),
       content.terms,

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -5,29 +5,32 @@ import deepmerge from "deepmerge";
 import { PortalRegisterView, } from "./sqm-portal-register-view";
 import { usePortalRegister } from "./usePortalRegister";
 /**
- * @uiName Portal Register
+ * @uiName Microsite Registration
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
  */
 export class PortalRegister {
   constructor() {
     this.ignored = true;
     /**
-     * Page navigated to after registration
+     * Redirect participants to this page from their verification email
      *
-     * @uiName Next Page
+     * @uiName Registration Redirect
+     * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
-     * The page that users are redirected to from the verification email.
+     * The page that participants are redirected to from the verification email.
      *
-     * @uiName Email Redirection Base Path
+     * @uiName Email Verification Redirect
+     * @uiWidget pageSelect
      */
     this.redirectPath = "/verifyEmail";
     /**
-     * @uiName Email Label
+     * @uiName Email Field Label
      */
     this.emailLabel = "Email";
     /**
-     * @uiName Password Label
+     * @uiName Password Field Label
      */
     this.passwordLabel = "Password";
     /**
@@ -39,35 +42,32 @@ export class PortalRegister {
      */
     this.loginLabel = "Sign in";
     /**
-     * @uiName Confirm Password Label
+     * @uiName Confirm Password Field Label
      */
     this.confirmPasswordLabel = "Confirm Password";
     /**
-     * Show or hide the confirm password input
-     *
      * @uiName Show Confirm Password Field
-     * @default
      */
     this.confirmPassword = false;
     /**
-     * @uiName Enable Password Validation
+     * @uiName Disable Password Validation
      */
-    this.enablePasswordValidation = true;
+    this.disablePasswordValidation = false;
     /**
-     * Hide default input fields to use custom fields
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
      *
-     * @uiName Hide Default Inputs
-     * @default
+     * @uiName Hide Default Fields
      */
     this.hideInputs = false;
     /**
-     * @uiName Heading Label
+     * @uiName Header Text
      */
     this.pageLabel = "Register";
     /**
-     * Login button redirection path
+     * Redirect participants to this page after clicking the login button.
      *
-     * @uiName Login Path
+     * @uiName Login Redirect
+     * @uiWidget pageSelect
      */
     this.loginPath = "/login";
     withHooks(this);
@@ -105,10 +105,13 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Next Page",
+            "text": "Registration Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "Page navigated to after registration"
+        "text": "Redirect participants to this page from their verification email"
       },
       "attribute": "next-page",
       "reflect": false,
@@ -126,10 +129,13 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Redirection Base Path",
+            "text": "Email Verification Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "The page that users are redirected to from the verification email."
+        "text": "The page that participants are redirected to from the verification email."
       },
       "attribute": "redirect-path",
       "reflect": false,
@@ -147,7 +153,7 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Label",
+            "text": "Email Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -168,7 +174,7 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Label",
+            "text": "Password Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -231,7 +237,7 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Confirm Password Label",
+            "text": "Confirm Password Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -254,17 +260,14 @@ export class PortalRegister {
         "tags": [{
             "text": "Show Confirm Password Field",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
-        "text": "Show or hide the confirm password input"
+        "text": ""
       },
       "attribute": "confirm-password",
       "reflect": false,
       "defaultValue": "false"
     },
-    "enablePasswordValidation": {
+    "disablePasswordValidation": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -276,14 +279,14 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Enable Password Validation",
+            "text": "Disable Password Validation",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "enable-password-validation",
+      "attribute": "disable-password-validation",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "hideInputs": {
       "type": "boolean",
@@ -297,13 +300,10 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide Default Inputs",
+            "text": "Hide Default Fields",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
-        "text": "Hide default input fields to use custom fields"
+        "text": "Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed."
       },
       "attribute": "hide-inputs",
       "reflect": false,
@@ -321,7 +321,7 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Heading Label",
+            "text": "Header Text",
             "name": "uiName"
           }],
         "text": ""
@@ -342,10 +342,13 @@ export class PortalRegister {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Login Path",
+            "text": "Login Redirect",
             "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
           }],
-        "text": "Login button redirection path"
+        "text": "Redirect participants to this page after clicking the login button."
       },
       "attribute": "login-path",
       "reflect": false,
@@ -356,7 +359,7 @@ export class PortalRegister {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -391,10 +394,11 @@ function useRegisterDemo(props) {
     states: {
       error: "",
       loading: false,
-      confirmPassword: true,
+      confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs || false,
       customPasswordField: false,
-      loginPath: "/login",
+      loginPath: props.loginPath,
+      disablePasswordValidation: props.disablePasswordValidation,
     },
     callbacks: {
       submit: async (_event) => {