@saasquatch/mint-components 1.5.0-1 → 1.5.0-5

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

@@ -0,0 +1,66 @@
+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();
+  console.log(props);
+  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: "#F4F5F7",
+          color: "var(--sl-color-primary-400)",
+          textAlign: "center",
+          lineHeight: "72px",
+        } },
+        h("div", { style: { fontSize: "26px" } },
+          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

@@ -0,0 +1,123 @@
+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 {
+    "cardTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "card-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": ""
+      },
+      "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
+    }
+  }; }
+}

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
-import { RewardExchangeView } from "./sqm-reward-exchange-list-view";
+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)));
+  return (h(Resizer, null,
+    h(RewardExchangeView, Object.assign({}, props))));
 };
 export const ChooseReward = StoryBase(Data.rewardExchange);
 export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
@@ -17,4 +17,6 @@ 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);

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

@@ -1,4 +1,4 @@
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
   states: {
     content: {
       text: {
@@ -11,15 +11,18 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     loading: loading,
     selectedItem: selectedItem,
     selectedStep: selectedStep,
+    open: false,
   },
   data: {
     exchangeList: data,
+    fuelTankCode: fueltank,
   },
   callbacks: {
     exchangeReward: null,
     resetState: null,
     setStage: null,
     setExchangeState: null,
+    copyFuelTankCode: null,
     refs: null,
   },
   refs: null,
@@ -71,12 +74,12 @@ const description = (props) => ({
 const fixedValue = (props) => ({
   prettySourceValue: props,
 });
-const variableValue = (min, max, text) => ({
+const variableValue = (min, max, unit) => ({
   ruleType: "VARIABLE_CREDIT_REWARD",
   sourceMinValue: min,
-  prettySourceMinValue: min + " " + text,
+  prettySourceMinValue: min + " " + unit,
   sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + text,
+  prettySourceMaxValue: max + " " + unit,
 });
 const data = [
   {
@@ -90,7 +93,7 @@ const data = [
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward,
@@ -108,7 +111,7 @@ const data = [
     ...baseReward,
     ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-    ...variableValue(20, 100, "SaaSquatch Points"),
+    ...variableValue(20, 100, "Points"),
   },
   {
     ...baseReward,
@@ -120,9 +123,9 @@ const data = [
   {
     ...baseReward,
     ...usTax,
-    ...name("$1000 Store credit"),
+    ...name("$1000 Store credit with a really super long name in the front page"),
     ...imageUrl("https://i.imgur.com/y9HSls1.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
     ...baseReward,
@@ -141,7 +144,7 @@ export const rewardExchangeSelected = {
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   }),
 };
 const stepsData = (start, end, inc) => {
@@ -173,13 +176,13 @@ export const chooseAmountVariable = {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
     steps: [
-      baseStep(20, "$", 40, "SaaSquatch Points"),
-      baseStep(30, "$", 60, "SaaSquatch Points"),
-      baseStep(40, "$", 80, "SaaSquatch Points"),
-      baseStep(50, "$", 100, "SaaSquatch Points"),
-      baseStep(60, "$", 120, "SaaSquatch Points"),
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
     ],
   }),
 };
@@ -204,16 +207,16 @@ export const confirmVariable = {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points")),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
 };
 export const error = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points"), true),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
 };
 export const success = {
   ...baseResponse(data, "success", {
@@ -223,6 +226,22 @@ export const success = {
     ...fixedValue("30 SaaSquatch Points"),
   }),
 };
+export const success2 = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+export const success3 = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
 export const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),
 };

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

@@ -5,6 +5,9 @@ export const ExchangeArrows = () => (h("svg", { width: 19, height: 15, fill: "no
   h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.125 14.783a.6.6 0 0 1-.851 0l-3.9-3.923a.6.6 0 1 1 .85-.846L4.1 12.905V1.52a.6.6 0 0 1 1.2 0v11.385l2.875-2.891a.6.6 0 1 1 .85.846l-3.9 3.923Zm9.6-13.686a.6.6 0 0 0-.851 0l-3.9 3.923a.6.6 0 0 0 .85.846L13.7 2.975V14.36a.6.6 0 1 0 1.2 0V2.975l2.875 2.891a.6.6 0 1 0 .85-.846l-3.9-3.923Z", fill: "#333" })));
 export const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
+export const CheckmarkFilled = () => (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
+  h("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
 export const Gift = () => (h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
   h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),