@saasquatch/mint-components 1.5.0-2 → 1.5.0-23

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

@@ -1,33 +1,51 @@
+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",
 };
-export const DefaultProgramExplainerView = () => {
-  const barProps = {
-    data: {
-      programs: [
-        {
-          key: "program1",
-          label: "My Referral Program",
-        },
-        {
-          key: "program2",
-          label: "My Rewards Program",
-        },
-      ],
-    },
-  };
-  const item1Props = {
-    title: "hello",
-    description: "world"
-  };
-  const item2Props = {
-    title: "hello",
-    description: "world"
-  };
-  return ("asd"
-  // <ProgramExplainerView {...barProps}>
-  //   <ProgramExplainerStepView {...item1Props} />
-  //   <ProgramExplainerStepView {...item2Props} />
-  // </ProgramExplainerView>
-  );
+const props = {
+  header: "Klip Rewards",
+  headerColor: "black",
+  headerBackground: "#F3F0EC",
+  cardTitle: "Earn rewards with our loyalty program",
+  cardDescription: "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.",
+  cardColor: "black",
+  cardBackground: "var(--sl-color-primary-100)",
+};
+const steps1 = {
+  cardTitle: "Invite your friends to Klip",
+  description: "Send your referral link to a friend or share it through email, Twitter, or Facebook",
+  color: "white",
+  background: "#5B3EDA",
+  icon: "person-plus-fill",
+};
+const steps2 = {
+  cardTitle: "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",
+  icon: "server",
+};
+const steps3 = {
+  cardTitle: "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",
+  icon: "people-fill",
+};
+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

@@ -1,33 +1,56 @@
 import { h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
-import { gap } from "../../global/mixins";
-const style = {
-  ItemsContainer: {
-    "min-width": "290px",
-    "max-width": "320px",
-    "box-sizing": "border-box",
-    padding: "20px 15px",
-    ...gap({ direction: "column", size: "4px" }),
-  },
-};
-const vanillaStyle = `
-  :host{    
-    width: 30vw;
-    min-width: min-content;
-    max-width: 320px;
+export function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "row",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+    Header: {
+      padding: "var(--sl-spacing-large)",
+      color: props.headerColor,
+      background: props.headerBackground,
+    },
+    Card: {
+      padding: "var(--sl-spacing-large)",
+      color: props.cardColor,
+      background: props.cardBackground,
+    },
+    Title: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
   }
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function ProgramExplainerView(
-// @ts-ignore - Stencil requires props (even if empty)
-props, children) {
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
   return (h("div", null,
-    h("div", { class: sheet.classes.ItemsContainer },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Header },
+      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.cardTitle),
+      h("div", { class: sheet.classes.Description }, props.cardDescription))));
 }

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

@@ -1,10 +1,9 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, State } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
 import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
- * A holder for navigation menu items
- *
- * @uiName Navigation Sidebar
+ * @uiName Program Explainer
  */
 export class ProgramExplainer {
   constructor() {
@@ -13,11 +12,165 @@ export class ProgramExplainer {
   }
   disconnectedCallback() { }
   render() {
-    return (h(ProgramExplainerView, null,
+    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
+    },
+    "headerColor": {
+      "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": "header-color",
+      "reflect": false
+    },
+    "headerBackground": {
+      "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": "header-background",
+      "reflect": false
+    },
+    "cardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "card-title",
+      "reflect": false
+    },
+    "cardDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "card-description",
+      "reflect": false
+    },
+    "cardColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "card-color",
+      "reflect": false
+    },
+    "cardBackground": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "card-background",
+      "reflect": false
+    }
+  }; }
   static get states() { return {
     "ignored": {}
   }; }

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

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

@@ -5,41 +5,70 @@ export function ProgramExplainerStepView(props) {
   const style = {
     Container: {
       display: "flex",
+      flexDirection: "column",
       width: "100%",
-      height: "100%",
-      placeItems: "center",
-      placeContent: "center",
       color: props.color,
       background: props.background,
-    },
-    Logo: {
-      margin: "var(--sl-spacing-x-large)",
+      padding: "var(--sl-spacing-large)",
+      paddingBottom: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
     },
     Text: {
-      margin: "var(--sl-spacing-x-large)",
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
+      },
     },
     Title: {
       textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-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)",
+      },
+    },
+    Icon: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      background: "#F4F5F7",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
     },
   };
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { style: {
-      resize: "both",
-      overflow: "hidden",
-      height: "600px",
-      width: "500px",
-    } },
-    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", background: "white" } })),
-      h("div", { class: sheet.classes.Title }, props.title),
+  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,
+      h("div", { class: sheet.classes.Icon },
+        h("sl-icon", { name: props.icon }))),
+    h("div", { class: sheet.classes.Text },
+      h("div", { class: sheet.classes.Title }, props.cardTitle),
       h("div", { class: sheet.classes.Description }, props.description))));
 }

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

@@ -1,10 +1,9 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { ProgramExplainerStepView, } from "./sqm-program-explainer-step-view";
+import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 /**
- * @uiName Navigation Link
+ * @uiName Program Explainer Step
  */
 export class ProgramExplainerStep {
   constructor() {
@@ -12,13 +11,12 @@ export class ProgramExplainerStep {
   }
   disconnectedCallback() { }
   render() {
-    const props = useSidebarDemo(getProps(this));
-    return h(ProgramExplainerStepView, Object.assign({}, props));
+    return h(ProgramExplainerStepView, Object.assign({}, getProps(this)));
   }
   static get is() { return "sqm-program-explainer-step"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "path": {
+    "cardTitle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -30,15 +28,15 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Navigation path",
+            "text": "Title",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "path",
+      "attribute": "card-title",
       "reflect": false
     },
-    "icon": {
+    "description": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -50,15 +48,15 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Icon",
+            "text": "Description",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "icon",
+      "attribute": "description",
       "reflect": false
     },
-    "label": {
+    "color": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -70,54 +68,56 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Label",
+            "text": "Color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
-      "attribute": "label",
+      "attribute": "color",
       "reflect": false
     },
-    "demoData": {
-      "type": "unknown",
+    "background": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ProgramExplainerStepViewProps>",
-        "resolved": "{ title?: string; description?: string; color?: string; background?: string; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "ProgramExplainerStepViewProps": {
-            "location": "import",
-            "path": "./sqm-program-explainer-step-view"
-          }
-        }
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
+            "text": "Background",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "background",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
           }],
         "text": ""
-      }
+      },
+      "attribute": "icon",
+      "reflect": false
     }
   }; }
 }
-function useSidebarDemo(props) {
-  return deepmerge({
-    states: {
-      active: false,
-    },
-    data: {
-      label: props.label || "Dashboard",
-      icon: props.icon || "house",
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

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

@@ -33,6 +33,7 @@ const baseReward = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

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

@@ -33,6 +33,7 @@ const rewardsData = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

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

@@ -13,6 +13,7 @@ const baseReward = {
   dateScheduledFor: getDays(),
   dateExpires: getMonths(),
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

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 });