@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

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

@@ -38,6 +38,14 @@ export class PortalLogin {
      * @uiName Heading label
      */
     this.pageLabel = "Sign in to your account";
+    /**
+     * @uiName Register button redirection path
+     */
+    this.registerPath = "/register";
+    /**
+     * @uiName Forgot password button redirect path
+     */
+    this.forgotPasswordPath = "/forgotPassword";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -47,9 +55,9 @@ export class PortalLogin {
       : usePortalLogin(this);
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
-        h("a", { onClick: () => navigation.push("/forgotPassword") }, this.forgotPasswordLabel))),
+        h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push("/register") }, this.registerLabel))),
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -207,12 +215,54 @@ export class PortalLogin {
       "reflect": false,
       "defaultValue": "\"Sign in to your account\""
     },
+    "registerPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Register button redirection path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "register-path",
+      "reflect": false,
+      "defaultValue": "\"/register\""
+    },
+    "forgotPasswordPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Forgot password button redirect path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "forgot-password-path",
+      "reflect": false,
+      "defaultValue": "\"/forgotPassword\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalLoginViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -244,7 +294,12 @@ export class PortalLogin {
 }
 function useLoginDemo(props) {
   return deepmerge({
-    states: { error: "", loading: false },
+    states: {
+      error: "",
+      loading: false,
+      forgotPasswordPath: "/forgotPassword",
+      registerPath: "/register",
+    },
     callbacks: {
       submit: async (_event) => {
         console.log("submit");

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

@@ -1,7 +1,7 @@
 import jsonpointer from "jsonpointer";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useAuthenticateWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
-export function usePortalLogin({ nextPage }) {
+export function usePortalLogin(props) {
   var _a, _b, _c, _d;
   const [request, { loading, errors, data }] = useAuthenticateWithEmailAndPasswordMutation();
   const [error, setError] = useState("");
@@ -21,7 +21,7 @@ export function usePortalLogin({ nextPage }) {
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
       navigation.push({
-        pathname: nextPageOverride || nextPage,
+        pathname: nextPageOverride || props.nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
@@ -37,6 +37,8 @@ export function usePortalLogin({ nextPage }) {
     states: {
       loading,
       error: errorMessage,
+      registerPath: props.registerPath,
+      forgotPasswordPath: props.forgotPasswordPath
     },
     callbacks: {
       submit,

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

@@ -9,6 +9,7 @@ const defaultProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -25,6 +26,7 @@ const errorProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -44,6 +46,7 @@ const loadingProps = {
     loading: true,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -60,6 +63,7 @@ const slottedProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -86,6 +90,7 @@ export const FieldsHidden = () => {
         loading: true,
         confirmPassword: true,
         hideInputs: true,
+        loginPath: "/login"
       },
     } }));
 };

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

@@ -14,6 +14,12 @@ export class PortalRegister {
      * @uiName Page navigated to after registration
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Label for email field
      */
@@ -50,6 +56,10 @@ export class PortalRegister {
      * @uiName Heading label
      */
     this.pageLabel = "Register";
+    /**
+     * @uiName Sign in button redirection path
+     */
+    this.loginPath = "/login";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -60,7 +70,7 @@ export class PortalRegister {
     const content = {
       formData: h("slot", { name: "formData" }),
       secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push("/login") }, this.loginLabel))),
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -93,6 +103,27 @@ export class PortalRegister {
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "redirectPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email redirection base path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to from the verification email."
+      },
+      "attribute": "redirect-path",
+      "reflect": false,
+      "defaultValue": "\"/verifyEmail\""
+    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -282,12 +313,33 @@ export class PortalRegister {
       "reflect": false,
       "defaultValue": "\"Register\""
     },
+    "loginPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Sign in button redirection path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "login-path",
+      "reflect": false,
+      "defaultValue": "\"/login\""
+    },
     "demoData": {
       "type": "unknown",
       "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; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -325,6 +377,7 @@ function useRegisterDemo(props) {
       confirmPassword: true,
       hideInputs: props.hideInputs || false,
       customPasswordField: false,
+      loginPath: "/login",
     },
     callbacks: {
       submit: async (_event) => {

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

@@ -47,10 +47,12 @@ export function usePortalRegister(props) {
     delete formData.password;
     delete formData.confirmPassword;
     formData = { ...formData };
+    const redirectPath = props.redirectPath;
     const variables = {
       email,
       password,
       formData,
+      redirectPath,
     };
     try {
       await request(variables);
@@ -100,6 +102,7 @@ export function usePortalRegister(props) {
       validationState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,

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

@@ -11,9 +11,17 @@ export class PortalResetPassword {
   constructor() {
     this.ignored = true;
     /**
+     * The page that users are redirected to when the password reset succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */
@@ -73,12 +81,33 @@ export class PortalResetPassword {
             "text": "Next page path",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The page that users are redirected to when the password reset succeeds."
       },
       "attribute": "next-page",
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "failedPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Failed page redirection path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to if the reset fails due to outdated password reset attempt."
+      },
+      "attribute": "failed-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
     "confirmPassword": {
       "type": "boolean",
       "mutable": false,

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

@@ -33,7 +33,7 @@ export function usePortalResetPassword(props) {
   };
   const failed = () => {
     navigation.push({
-      pathname: "/",
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };

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

@@ -11,9 +11,17 @@ export class PortalVerifyEmail {
   constructor() {
     this.ignored = true;
     /**
+     * The page that users are redirected to when the verification succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -41,12 +49,33 @@ export class PortalVerifyEmail {
             "text": "Next page path",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The page that users are redirected to when the verification succeeds."
       },
       "attribute": "next-page",
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "failedPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Failed page redirection path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to if verification fails due to outdated verification attempt."
+      },
+      "attribute": "failed-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
-export function usePortalVerifyEmail({ nextPage }) {
+export function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
   const [disableContinue, setDisableContinue] = useState(true);
@@ -13,7 +13,7 @@ export function usePortalVerifyEmail({ nextPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return navigation.push({
-      pathname: "/",
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };

package/dist/collection/components/sqm-program-explainer/ProgramExplainer.stories.js

@@ -15,7 +15,7 @@ const props = {
 };
 const steps1 = {
   cardTitle: "Invite your friends to Klip",
-  description: "Earn up to $1200 in rewards for each referral",
+  description: "Send your referral link to a friend or share it through email, Twitter, or Facebook",
   color: "white",
   background: "#5B3EDA",
   icon: "person-plus-fill",

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -6,7 +6,7 @@ export function ProgramExplainerView(props, children) {
     Container: {
       display: "flex",
       flexDirection: "row",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         flexDirection: "column",
       },
     },
@@ -38,7 +38,7 @@ export function ProgramExplainerView(props, children) {
     display: flex;
     width: 100%;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 499px) {
     ::slotted(*){
       display: block;
     }

package/dist/collection/components/sqm-program-explainer-step/ProgramExplainerStep.stories.js

@@ -6,7 +6,7 @@ export default {
 export const Example1 = () => {
   const props = {
     cardTitle: "Invite your friends to Klip",
-    description: "Earn up to $1200 in rewards for each referral",
+    description: "Send your referral link to a friend or share it through email, Twitter, or Facebook",
     color: "white",
     background: "#5B3EDA",
     icon: "person-plus-fill",

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -11,14 +11,14 @@ export function ProgramExplainerStepView(props) {
       background: props.background,
       padding: "var(--sl-spacing-large)",
       paddingBottom: "var(--sl-spacing-xxx-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
         paddingBottom: "var(--sl-spacing-large)",
       },
     },
     Text: {
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginLeft: "var(--sl-spacing-large)",
       },
     },
@@ -28,14 +28,14 @@ export function ProgramExplainerStepView(props) {
       fontWeight: "var(--sl-font-weight-bold)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         margin: "0",
       },
     },
     Description: {
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginTop: "var(--sl-spacing-x-small)",
       },
     },
@@ -58,7 +58,7 @@ export function ProgramExplainerStepView(props) {
     display: flex;
     width: 100%;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 499px) {
     :host{
       display: block;
     }

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -224,8 +224,11 @@ function useReferraltableDemo(props) {
     elements: {
       emptyElement: h(EmptySlot, null),
       loadingElement: h(LoadingSlot, null),
-      // FIXME: Even in demo mode, this should use real column names!
-      columns: [h("div", null, "Example"), h("div", null, "Example"), h("div", null, "Example")],
+      columns: [
+        h("div", null, "User"),
+        h("div", null, "Referral Status"),
+        h("div", null, "Rewards"),
+      ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/collection/components/sqm-reward-exchange-list/RewardExchangeListData.js

@@ -2,19 +2,24 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
   states: {
     content: {
       text: {
-        continueText: "Continue",
-        cancelText: "Cancel",
-        continueToConfirmationText: "Continue to confirmation",
-        backText: "Back",
-        redeemText: "Redeem",
-        doneText: "Done",
+        buttonText: "Exchange Rewards",
+        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
         chooseRewardTitle: "Choose reward",
         chooseAmountTitle: "Amount",
         confirmationTitle: "Confirm",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
         redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Successfully redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        toolTipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
         rewardRedeemedText: "Reward redeemed",
-        queryError: "An error occured trying to redeem this reward. Please try again.",
-        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
       },
     },
     redeemStage: stage,