@saasquatch/mint-components 1.4.0 → 1.5.0-3

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, failedPage }) {
+export function usePortalVerifyEmail({ nextPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
   const [disableContinue, setDisableContinue] = useState(true);
@@ -13,7 +13,7 @@ export function usePortalVerifyEmail({ nextPage, failedPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return navigation.push({
-      pathname: failedPage,
+      pathname: "/",
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };

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

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+import { ProgramExplainerStepView } from "../sqm-program-explainer-step/sqm-program-explainer-step-view";
+export default {
+  title: "Components/Program Explainer",
+};
+const props = {
+  header: "Klip Rewards",
+  title: "Earn rewards with our loyalty program",
+  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
+  color: "black",
+  background: "#F3F0EC",
+};
+const steps1 = {
+  title: "Invite your friends to Klip",
+  description: "Earn up to $1200 in rewards for each referral",
+  color: "white",
+  background: "#5B3EDA",
+};
+const steps2 = {
+  title: "If your friend signs up for a Klip Business plan",
+  description: "Get a $50 VISA giftcard when they pay for their first month",
+  color: "black",
+  background: "#F3CC66",
+};
+const steps3 = {
+  title: "If your friend signs up for a Klip Enterprise plan",
+  description: "Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer",
+  color: "black",
+  background: "#D3CCF5",
+};
+export const OneStep = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1))));
+};
+export const TwoSteps = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h(ProgramExplainerStepView, Object.assign({}, steps2))));
+};
+export const ThreeSteps = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h(ProgramExplainerStepView, Object.assign({}, steps2)),
+    h(ProgramExplainerStepView, Object.assign({}, steps3))));
+};

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

@@ -0,0 +1,40 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      "@media (max-width: 1024px)": {
+        flexDirection: "column",
+      },
+    },
+    Card: {
+      padding: "24px",
+      color: props.color,
+      background: props.background,
+    },
+    Title: {
+      fontSize: "28px",
+      lineHeight: "36px",
+      fontWeight: "700",
+    },
+    Description: {
+      fontSize: "16px",
+      lineHeight: "28px",
+      fontWeight: "400",
+      marginTop: "8px",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.Card },
+      h("div", { class: sheet.classes.Title }, props.header)),
+    h("div", { class: sheet.classes.Container }, children),
+    h("div", { class: sheet.classes.Card },
+      h("div", { class: sheet.classes.Title }, props.title),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}

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

@@ -0,0 +1,131 @@
+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",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
+export default {
+  title: "Components/Program Explainer Step",
+};
+export const Example1 = () => {
+  const props = {
+    title: "Invite your friends to Klip",
+    description: "Earn up to $1200 in rewards for each referral",
+    color: "white",
+    background: "#5B3EDA"
+  };
+  return h(ProgramExplainerStepView, Object.assign({}, props));
+};
+// export const ActiveItem = () => {
+//   const props = {
+//     title: "hello",
+//     description: "world",
+//   };
+//   return <ProgramExplainerStepView {...props} />;
+// };

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

@@ -0,0 +1,60 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "444px",
+      color: props.color,
+      background: props.background,
+      padding: "24px",
+      "@media (max-width: 1024px)": {
+        flexDirection: "row",
+        width: "auto",
+        height: "auto",
+      },
+    },
+    Logo: {},
+    Text: {
+      "@media (max-width: 1024px)": {
+        marginLeft: "24px",
+      },
+    },
+    Title: {
+      fontSize: "16px",
+      fontWeight: "var(--sl-font-weight-bold)",
+      textTransform: "uppercase",
+      lineHeight: "24px",
+      marginTop: "24px",
+      "@media (max-width: 1024px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "16px",
+      lineHeight: "28px",
+      marginTop: "12px",
+      "@media (max-width: 1024px)": {
+        marginTop: "8px",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.Logo },
+      h("div", { style: {
+          width: "64px",
+          height: "64px",
+          borderRadius: "100%",
+          background: "white",
+        } })),
+    h("div", { class: sheet.classes.Text },
+      h("div", { class: sheet.classes.Title }, props.title),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}

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

@@ -0,0 +1,100 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
+/**
+ * @uiName Program Explainer Step
+ */
+export class ProgramExplainerStep {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h(ProgramExplainerStepView, Object.assign({}, getProps(this)));
+  }
+  static get is() { return "sqm-program-explainer-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "background",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/{stories → components/sqm-program-menu}/ProgramMenu.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import dashboardTemplate from "../templates/Dashboard.html";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import dashboardTemplate from "../../templates/Dashboard.html";
 export default {
   title: "Program Menu",
 };

package/dist/collection/{stories → components/sqm-referral-iframe}/ReferralIframe.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { ReferralIframeView, } from "../components/sqm-referral-iframe/sqm-referral-iframe-view";
-import scenario from "../components/sqm-referral-iframe/sqm-referral-iframe.feature";
+import { ReferralIframeView, } from "./sqm-referral-iframe-view";
+import scenario from "../sqm-referral-iframe/sqm-referral-iframe.feature";
 export default {
   title: "Referral Iframe",
   parameters: {

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTable.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { ReferralTableView } from "../components/sqm-referral-table/sqm-referral-table-view";
+import { ReferralTableView } from "./sqm-referral-table-view";
 import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
 export default {
-  title: "Referral Table",
+  title: "Components/Referral Table",
 };
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTableCell.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Referral Table Cell",
+  title: "Components/Referral Table Cell",
 };
 export const TableCell = () => {
   return (h("sqm-referral-table-cell", { innerTemplate: "Table Cell Text" }));

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTableRewardsCell.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { DateTime } from "luxon";
 export default {
-  title: "Referral Table Rewards Cell",
+  title: "Components/Referral Table Rewards Cell",
 };
 const baseReward = {
   id: "123",

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

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, getElement, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Generic Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Date Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Rewards Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Status Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table User Column
  */

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

@@ -2,8 +2,8 @@ import { usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@sa
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import gql from "graphql-tag";
-import { useRerenderListener } from "./re-render";
-import { useChildElements } from "./useChildElements";
+import { useRerenderListener } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
 const GET_REFERRER_DATA = gql `
   query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
     viewer {

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import * as Data from "./RewardExchangeListData";
+import { Resizer } from "../sqm-stencilbook/Resizer";
+export default {
+  title: "Components/Reward Exchange List",
+};
+const StoryBase = (props) => () => {
+  return (h(Resizer, null,
+    h(RewardExchangeView, Object.assign({}, props))));
+};
+export const ChooseReward = StoryBase(Data.rewardExchange);
+export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
+export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
+export const ChooseAmountVariable = StoryBase(Data.chooseAmountVariable);
+export const Confirm = StoryBase(Data.confirmFixed);
+export const ConfirmVariable = StoryBase(Data.confirmVariable);
+export const Error = StoryBase(Data.error);
+export const Success = StoryBase(Data.success);
+export const SuccessVariable = StoryBase(Data.success2);
+export const SuccessPromo = StoryBase(Data.success3);
+export const Loading = StoryBase(Data.loading);