@saasquatch/mint-components 1.2.1 → 1.2.2-11

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

@@ -12,23 +12,35 @@ export class PortalProfile {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName First Name label
+     * @uiName First name input field label
      */
     this.firstnametext = "First Name";
     /**
-     * @uiName Last Name label
+     * @uiName Last name input field label
      */
     this.lastnametext = "Last Name";
     /**
-     * @uiName Email label
+     * @uiName Email input field label
      */
     this.emailtext = "Email";
     /**
-     * @uiName Country label
+     * @uiName Country input field label
      */
     this.countrytext = "Country";
     /**
-     * @uiName Show country field
+     * @uiName Edit profile header
+     */
+    this.editProfileHeader = "Edit your profile";
+    /**
+     * @uiName Edit profile sub header
+     */
+    this.editProfileSubHeader = "Personal Information";
+    /**
+     * @uiName Text for the submit changes button
+     */
+    this.submitChangeButtonText = "Submit Changes";
+    /**
+     * @uiName Show or hide country field
      */
     this.showCountry = true;
     withHooks(this);
@@ -55,7 +67,7 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First Name label",
+            "text": "First name input field label",
             "name": "uiName"
           }],
         "text": ""
@@ -76,7 +88,7 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last Name label",
+            "text": "Last name input field label",
             "name": "uiName"
           }],
         "text": ""
@@ -97,7 +109,7 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email label",
+            "text": "Email input field label",
             "name": "uiName"
           }],
         "text": ""
@@ -118,7 +130,7 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Country label",
+            "text": "Country input field label",
             "name": "uiName"
           }],
         "text": ""
@@ -127,6 +139,69 @@ export class PortalProfile {
       "reflect": false,
       "defaultValue": "\"Country\""
     },
+    "editProfileHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Edit profile header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "edit-profile-header",
+      "reflect": false,
+      "defaultValue": "\"Edit your profile\""
+    },
+    "editProfileSubHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Edit profile sub header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "edit-profile-sub-header",
+      "reflect": false,
+      "defaultValue": "\"Personal Information\""
+    },
+    "submitChangeButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text for the submit changes button",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "submit-change-button-text",
+      "reflect": false,
+      "defaultValue": "\"Submit Changes\""
+    },
     "showCountry": {
       "type": "boolean",
       "mutable": false,
@@ -139,7 +214,7 @@ export class PortalProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show country field",
+            "text": "Show or hide country field",
             "name": "uiName"
           }],
         "text": ""
@@ -153,7 +228,7 @@ export class PortalProfile {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalProfileViewProps>",
-        "resolved": "{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; }; }; }",
+        "resolved": "{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -196,13 +271,16 @@ function usePortalProfileDemo(props) {
         firstName: "Joe",
         lastName: "Smith",
         email: "jsmith@gmail.com",
-        countryCode: "5000",
+        countryCode: "CA",
       },
       text: {
         firstnametext: "First Name",
         lastnametext: "Last Name",
         emailtext: "Email",
         countrytext: "Country",
+        editProfileHeader: "Edit your profile",
+        editProfileSubHeader: "Personal Information",
+        submitChangeButtonText: "Submit Changes",
       },
       formState: {
         country: "Canada",

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

@@ -133,6 +133,9 @@ export function usePortalProfile(props) {
         lastnametext: props.lastnametext,
         countrytext: props.countrytext,
         emailtext: props.emailtext,
+        editProfileHeader: props.editProfileHeader,
+        editProfileSubHeader: props.editProfileSubHeader,
+        submitChangeButtonText: props.submitChangeButtonText,
       },
     },
     callbacks: {

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

@@ -48,6 +48,7 @@ export function PortalRegisterView(props) {
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
       states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
       !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return "Cannot be empty";
@@ -62,15 +63,14 @@ export function PortalRegisterView(props) {
           "Cannot be empty",
       }
         : [])))),
-      !states.hideInputs && (h("sqm-password-field", { "enable-validation": states.enablePasswordValidation })),
+      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: "Confirm Password", 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.validationState) === 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",
       }
         : [])))),
-      content.formData,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));

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

@@ -30,6 +30,10 @@ export class PortalRegister {
      * @uiName Label for login navigation button
      */
     this.loginLabel = "Sign in";
+    /**
+     * @uiName Label for confirm password field
+     */
+    this.confirmPasswordLabel = "Confirm Password";
     /**
      * @uiName Show confirm password field
      */
@@ -61,6 +65,7 @@ export class PortalRegister {
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
       pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
     };
     return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
@@ -172,6 +177,27 @@ export class PortalRegister {
       "reflect": false,
       "defaultValue": "\"Sign in\""
     },
+    "confirmPasswordLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Label for confirm password field",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirm-password-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm Password\""
+    },
     "confirmPassword": {
       "type": "boolean",
       "mutable": false,
@@ -261,7 +287,7 @@ export class PortalRegister {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -297,7 +323,7 @@ function useRegisterDemo(props) {
       error: "",
       loading: false,
       confirmPassword: true,
-      hideInputs: false,
+      hideInputs: props.hideInputs || false,
       customPasswordField: false,
     },
     callbacks: {

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password-view.js

@@ -44,11 +44,11 @@ export function PortalResetPasswordView(props) {
   if (states.reset) {
     return (h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
       h("style", { type: "text/css" }, styleString),
-      h(TextSpanView, { type: "h3" }, "Reset your password"),
+      h(TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
       h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
         h("div", { part: "successalert-text" }, "Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),
       h("div", null,
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, "Continue"))));
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
   }
   if (states.oobCodeValidating) {
     return h("div", null);
@@ -59,18 +59,22 @@ export function PortalResetPasswordView(props) {
       h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, "The password reset code is invalid or has expired, please try again.")),
       h("div", null,
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, "Continue"))));
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
   }
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h(TextSpanView, { type: "h2" }, states.reset ? "Password Reset" : "Reset your password"),
+    h(TextSpanView, { type: "h2" }, states.reset
+      ? states.content.passwordResetHeader
+      : states.content.resetPasswordHeader),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
       !states.reset && (h("sqm-password-field", { demoData: states.passwordDemoData })),
-      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: "Confirm Password", disabled: states.loading, required: true })),
+      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
       h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset ? "Continue" : "Reset Password")))));
+        h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
+          ? states.content.continueButtonText
+          : states.content.resetPasswordButtonText)))));
 }

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password.js

@@ -18,6 +18,30 @@ export class PortalResetPassword {
      * @uiName Show confirm password
      */
     this.confirmPassword = false;
+    /**
+     * @uiName Password reset header text
+     */
+    this.resetPasswordHeader = "Reset your password";
+    /**
+     * Displayed after a successful password reset
+     *
+     * @uiName Password reset header text
+     */
+    this.passwordResetHeader = "Password reset";
+    /**
+     * @uiName Password reset button text
+     */
+    this.resetPasswordButtonText = "Reset Password";
+    /**
+     * Displayed after a successful password reset
+     *
+     * @uiName Continue button text
+     */
+    this.continueButtonText = "Continue";
+    /**
+     * @uiName Confirm password field label
+     */
+    this.confirmPasswordFieldLabel = "Confirm Password";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -72,12 +96,117 @@ export class PortalResetPassword {
       "reflect": false,
       "defaultValue": "false"
     },
+    "resetPasswordHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password reset header text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reset-password-header",
+      "reflect": false,
+      "defaultValue": "\"Reset your password\""
+    },
+    "passwordResetHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password reset header text",
+            "name": "uiName"
+          }],
+        "text": "Displayed after a successful password reset"
+      },
+      "attribute": "password-reset-header",
+      "reflect": false,
+      "defaultValue": "\"Password reset\""
+    },
+    "resetPasswordButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Password reset button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reset-password-button-text",
+      "reflect": false,
+      "defaultValue": "\"Reset Password\""
+    },
+    "continueButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Continue button text",
+            "name": "uiName"
+          }],
+        "text": "Displayed after a successful password reset"
+      },
+      "attribute": "continue-button-text",
+      "reflect": false,
+      "defaultValue": "\"Continue\""
+    },
+    "confirmPasswordFieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirm password field label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirm-password-field-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm Password\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalResetPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -116,6 +245,13 @@ function usePortalResetPasswordDemo(props) {
       confirmPassword: true,
       oobCodeValidating: false,
       oobCodeValid: true,
+      content: {
+        passwordResetHeader: "Password reset",
+        resetPasswordHeader: "Reset your password",
+        continueButtonText: "Continue",
+        resetPasswordButtonText: "Reset Password",
+        confirmPasswordFieldLabel: "Confirm Password",
+      },
     },
     callbacks: {
       submit: async (_event) => {

package/dist/collection/components/sqm-portal-reset-password/usePortalResetPassword.js

@@ -1,7 +1,7 @@
 import jsonpointer from "jsonpointer";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useVerifyPasswordResetCodeMutation, useResetPasswordMutation, } from "@saasquatch/component-boilerplate";
-export function usePortalResetPassword({ nextPage, confirmPassword, }) {
+export function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = useState(false);
   const [error, setError] = useState("");
@@ -27,7 +27,7 @@ export function usePortalResetPassword({ nextPage, confirmPassword, }) {
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
     navigation.push({
-      pathname: nextPageOverride || nextPage,
+      pathname: nextPageOverride || props.nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -59,10 +59,17 @@ export function usePortalResetPassword({ nextPage, confirmPassword, }) {
     states: {
       loading: resetPasswordState.loading,
       reset,
-      confirmPassword,
+      confirmPassword: props.confirmPassword,
       error: ((_e = (_d = (_c = (_b = resetPasswordState.errors) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.message) || error,
       oobCodeValidating: verifyPasswordResetCodeState.loading,
       oobCodeValid: (_f = verifyPasswordResetCodeState.data) === null || _f === void 0 ? void 0 : _f.verifyManagedIdentityPasswordResetCode.success,
+      content: {
+        passwordResetHeader: props.passwordResetHeader,
+        resetPasswordHeader: props.resetPasswordHeader,
+        continueButtonText: props.continueButtonText,
+        resetPasswordButtonText: props.resetPasswordButtonText,
+        confirmPasswordFieldLabel: props.confirmPasswordFieldLabel,
+      },
     },
     callbacks: { submit, failed, gotoNextPage },
   };

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

@@ -84,7 +84,7 @@ export class PortalVerifyEmail {
 }
 function usePortalVerifyEmailDemo(props) {
   return deepmerge({
-    states: { error: "", loading: false, verified: false },
+    states: { error: "", loading: false, verified: true },
     data: {
       oobCode: "code",
     },

package/dist/collection/components/sqm-program-menu/sqm-program-menu.js

@@ -18,12 +18,6 @@ export class ProgramMenu {
         h("slot", null))));
   }
   static get is() { return "sqm-program-menu"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-program-menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-program-menu.css"]
-  }; }
   static get states() { return {
     "ignored": {}
   }; }

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -33,6 +33,11 @@ import * as ReferralTableCell from "../../stories/ReferralTableCell.stories";
 import * as ReferralTableRewardsCell from "../../stories/ReferralTableRewardsCell.stories";
 import * as UserName from "../../stories/UserName.stories";
 import * as PasswordField from "../../stories/PasswordField.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as ProgramMenu from "../../stories/ProgramMenu.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as PortalFooter from "../../stories/PortalFooter.stories";
+import * as Hero from "../../stories/Hero.stories";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
@@ -69,6 +74,11 @@ const stories = [
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
+  PortalTemplates,
+  ProgramMenu,
+  PoweredByImg,
+  PortalFooter,
+  Hero
 ];
 /**
  * For internal documentation