@saasquatch/mint-components 1.5.2-0 → 1.5.2

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

@@ -1,79 +1,79 @@
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
-import { sanitizeUrlPath } from "../../utils/utils";
-export function usePortalVerifyEmail({ nextPage, failedPage }) {
-  var _a, _b, _c, _d, _e;
-  const [verified, setVerified] = useState(false);
-  const [disableContinue, setDisableContinue] = useState(true);
-  const userIdent = useUserIdentity();
-  const [request, { loading, data, errors }] = useVerifyEmailMutation();
-  const [error, setError] = useState("");
-  const urlParams = new URLSearchParams(window.location.search);
-  const oobCode = urlParams.get("oobCode");
-  const nextPageOverride = urlParams.get("nextPage");
-  urlParams.delete("oobCode");
-  const failed = () => {
-    return navigation.push({
-      pathname: failedPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
-  };
-  const gotoNextPage = () => {
-    urlParams.delete("nextPage");
-    const url = sanitizeUrlPath(nextPageOverride || nextPage);
-    navigation.push(url.href);
-  };
-  const submit = async () => {
-    if (oobCode) {
-      setError("");
-      await request({ oobCode });
-    }
-  };
-  useEffect(() => {
-    var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success) {
-      setVerified(true);
-    }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success]);
-  useEffect(() => {
-    submit();
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    if ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) {
-      setDisableContinue(false);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-    else if (!oobCode ||
-      ((_b = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) === false) {
-      setDisableContinue(false);
-    }
-    else if (!userIdent) {
-      setDisableContinue(false);
-      setTimeout(() => {
-        gotoNextPage();
-      }, 3000);
-    }
-  }, [(_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified]);
-  useEffect(() => {
-    if (errors === null || errors === void 0 ? void 0 : errors.message) {
-      setError("Network request failed.");
-    }
-  }, [errors]);
-  return {
-    states: {
-      loading: loading || disableContinue,
-      error: ((_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.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,
-      verified,
-    },
-    data: {
-      oobCode,
-    },
-    callbacks: {
-      failed,
-      gotoNextPage,
-    },
-  };
-}
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
+export function usePortalVerifyEmail({ nextPage, failedPage }) {
+  var _a, _b, _c, _d, _e;
+  const [verified, setVerified] = useState(false);
+  const [disableContinue, setDisableContinue] = useState(true);
+  const userIdent = useUserIdentity();
+  const [request, { loading, data, errors }] = useVerifyEmailMutation();
+  const [error, setError] = useState("");
+  const urlParams = new URLSearchParams(window.location.search);
+  const oobCode = urlParams.get("oobCode");
+  const nextPageOverride = urlParams.get("nextPage");
+  urlParams.delete("oobCode");
+  const failed = () => {
+    return navigation.push({
+      pathname: failedPage,
+      search: urlParams.toString() && "?" + urlParams.toString(),
+    });
+  };
+  const gotoNextPage = () => {
+    urlParams.delete("nextPage");
+    const url = sanitizeUrlPath(nextPageOverride || nextPage);
+    navigation.push(url.href);
+  };
+  const submit = async () => {
+    if (oobCode) {
+      setError("");
+      await request({ oobCode });
+    }
+  };
+  useEffect(() => {
+    var _a;
+    if ((_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success) {
+      setVerified(true);
+    }
+  }, [(_a = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success]);
+  useEffect(() => {
+    submit();
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    if ((_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) {
+      setDisableContinue(false);
+      setTimeout(() => {
+        gotoNextPage();
+      }, 3000);
+    }
+    else if (!oobCode ||
+      ((_b = data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) === false) {
+      setDisableContinue(false);
+    }
+    else if (!userIdent) {
+      setDisableContinue(false);
+      setTimeout(() => {
+        gotoNextPage();
+      }, 3000);
+    }
+  }, [(_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified]);
+  useEffect(() => {
+    if (errors === null || errors === void 0 ? void 0 : errors.message) {
+      setError("Network request failed.");
+    }
+  }, [errors]);
+  return {
+    states: {
+      loading: loading || disableContinue,
+      error: ((_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.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,
+      verified,
+    },
+    data: {
+      oobCode,
+    },
+    callbacks: {
+      failed,
+      gotoNextPage,
+    },
+  };
+}

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

@@ -1,50 +1,50 @@
-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" })));
-};
-export const TwoSteps = () => {
-  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" })));
-};
-export const ThreeSteps = () => {
-  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")));
-};
+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" })));
+};
+export const TwoSteps = () => {
+  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" })));
+};
+export const ThreeSteps = () => {
+  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

@@ -1,44 +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)));
-}
+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

@@ -1,91 +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": {}
-  }; }
-}
+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

@@ -1,14 +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" }));
-};
+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" }));
+};