@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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,8 @@ 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))),
+      terms: h("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -93,6 +104,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 +314,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; }; 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",
@@ -325,6 +378,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-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -34,8 +33,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
   const { states, callbacks } = props;

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-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthColumn, AuthWrapper } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -18,8 +17,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;

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

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-program-explainer.feature";
+export default {
+  title: "Components/Program Explainer",
+  parameters: {
+    scenario,
+  },
+};
+export const OneStep = () => {
+  return (h("sqm-program-explainer", { header: "How it works" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+export const Custom = () => {
+  return (h("sqm-program-explainer", { header: "How it works", "text-color": "#fffc4b", "background-color": "#ff7f7f" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+export const ProgramExplainerGeneric = () => {
+  return (h("sqm-program-explainer", { header: "Anything and everything can be passed to this component!", "text-color": "#eee", "background-color": "#333" },
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        color: "#333",
+      } }, "PLACEHOLDER")));
+};

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

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "",
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-large)",
+      textAlign: "center",
+    },
+    Grid: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Header },
+      h("div", { class: sheet.classes.Header }, props.header)),
+    h("div", { class: sheet.classes.Grid }, children)));
+}

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

@@ -0,0 +1,91 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+/**
+ * @uiName Program Explainer
+ */
+export class ProgramExplainer {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(ProgramExplainerView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-program-explainer"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-program-explainer-step.feature";
+export default {
+  title: "Components/Program Explainer Step",
+  parameters: {
+    scenario,
+  },
+};
+export const ProgramExplainerStep = () => {
+  return (h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", icon: "person-plus-fill" }));
+};
+export const ProgramExplainerStepCustom = () => {
+  return (h("sqm-program-explainer-step", { header: "Invite your friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000265/squatch-assets/Uqn3aXw.png", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+};

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

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      padding: "var(--sl-spacing-x-large)",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      "@media (max-width: 499px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
+    },
+    Text: {
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      marginTop: "var(--sl-spacing-x-large)",
+      "@media (max-width: 499px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-x-small)",
+      },
+    },
+    Media: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      objectFit: "cover",
+      userSelect: "none",
+      background: "#FFF",
+      color: "var(--sl-color-primary-300)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+  }`;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl })) : (h("div", { class: sheet.classes.Media },
+      h("sl-icon", { name: props.icon })))),
+    h("div", { class: sheet.classes.Text },
+      h("div", { class: sheet.classes.Header }, props.header),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}