@saasquatch/mint-components 1.4.0-0 → 1.5.0-10

package/dist/collection/components/sqm-rewards-table/UseRewardsTable.stories.js

@@ -0,0 +1,59 @@
+import { setProgramId } from "@saasquatch/component-boilerplate";
+import { setUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useRewardsTable",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const RewardsTableWithProgram = createHookStory(() => {
+  setupGraphQL();
+  setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-date-column", null)));
+});
+export const RewardsTableNoProgram = createHookStory(() => {
+  setupGraphQL();
+  setProgramId(undefined);
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-reward-column", null),
+    h("sqm-rewards-table-source-column", null),
+    h("sqm-rewards-table-status-column", null),
+    h("sqm-rewards-table-date-column", null)));
+});

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js

@@ -0,0 +1,43 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { DateTime } from "luxon";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableDateCell {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    // needs hook to use locale
+    const date = !this.date
+      ? "-"
+      : (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED);
+    return h(TextSpanView, { type: "p" }, date);
+  }
+  static get is() { return "sqm-rewards-table-date-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "date": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-rewards-cell.js

@@ -0,0 +1,160 @@
+import { Component, h, Prop } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableRewardsCell {
+  // TODO: value function from portalv2
+  render() {
+    const style = {
+      DetailsContainer: {
+        width: "100%",
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "space-between",
+        "margin-right": "var(--sl-spacing-small)",
+        "flex-wrap": "wrap",
+      },
+      Details: {
+        "padding-bottom": "var(--sl-spacing-small)",
+        "max-width": "500px",
+        "padding-right": "var(--sl-spacing-x-small)",
+        "&::part(header)": {
+          padding: "var(--sl-spacing-x-small)",
+          cursor: `${this.hideDetails ? "default" : "pointer"}`,
+        },
+        "&::part(content)": {
+          padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+        },
+        "&::part(base)": {
+          opacity: "1",
+        },
+        "&::part(summary-icon)": {
+          display: `${this.hideDetails ? "none" : "flex"}`,
+        },
+      },
+      BadgeContainer: {
+        "& > :not(:last-child)": {
+          "margin-right": "var(--sl-spacing-x-small)",
+        },
+      },
+      BoldText: {
+        "font-weight": "var(--sl-font-weight-semibold)",
+      },
+      StatusBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+      },
+    };
+    jss.setup(preset());
+    const sheet = jss.createStyleSheet(style);
+    const styleString = sheet.toString();
+    function RewardValue({ reward }) {
+      var _a;
+      const pimpedPrettyValue = reward.unit === "CENTS"
+        ? reward.prettyValue.replace(/USD/gi, "$")
+        : (_a = reward.prettyValue) !== null && _a !== void 0 ? _a : "-";
+      if (reward.type === "CREDIT") {
+        const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
+          parseFloat(reward.prettyRedeemedNumber)) /
+          parseFloat(reward.prettyValueNumber)) *
+          100);
+        const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
+          reward.statuses.includes("CANCELLED") ? (h("div", null,
+          reward.prettyRedeemedCredit,
+          " redeemed")) : (h("div", null,
+          reward.prettyAvailableValue,
+          " available"));
+        const style = {
+          Progress: {
+            background: "#e0e0e0",
+            borderRadius: "4px",
+            height: "3px",
+            width: "80px",
+            marginTop: "6px",
+            marginBottom: "6px",
+            "&:after": {
+              content: '""',
+              display: "block",
+              background: "#222222",
+              borderRadius: "4px",
+              width: `${progress}%`,
+              height: "100%",
+            },
+          },
+          Ellipsis: {
+            position: "relative",
+            margin: "-8px",
+            bottom: "1px",
+            left: "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", { style: {
+              display: "inline-block",
+              verticalAlign: "top",
+              maxWidth: "100%",
+              // maxHeight: "35px",
+              maxHeight: "60px",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            } },
+            h("span", { style: { color: "#232323" } }, pimpedPrettyValue),
+            " ",
+            h("br", null),
+            " ",
+            h("div", { class: sheet.classes.Progress }),
+            progressBarSubtext)));
+      }
+      return h("span", { style: { color: "#232323" } }, pimpedPrettyValue);
+    }
+    return (h("div", { style: { display: "contents" } },
+      h("style", { type: "text/css" }, styleString),
+      h(TextSpanView, { type: "p" },
+        h("span", { class: sheet.classes.BoldText },
+          h(RewardValue, { reward: this.reward })))));
+  }
+  static get is() { return "sqm-rewards-table-rewards-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "reward": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Reward",
+        "resolved": "Reward",
+        "references": {
+          "Reward": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "hideDetails": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-details",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js

@@ -0,0 +1,81 @@
+import { Component, h, Prop } from "@stencil/core";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableSourceCell {
+  render() {
+    function capitalize(str) {
+      if (typeof str !== "string") {
+        console.error(`Cannot capitalize parameter of type ${typeof str}`);
+        return null;
+      }
+      return str.toLowerCase().replace(/\b\w/g, (l) => l.toUpperCase());
+    }
+    function RewardSource({ reward }) {
+      var _a, _b;
+      const rewardSource = (_b = capitalize(((_a = reward.rewardSource) === null || _a === void 0 ? void 0 : _a.replace("_", " ")) || "")) !== null && _b !== void 0 ? _b : "-";
+      return h("span", null, rewardSource);
+    }
+    const SOURCE_COLUMN_LENGTH = 21;
+    function RewardExchangeBadge({ reward }) {
+      var _a;
+      const rewardExchange = (h("div", null,
+        "Reward Exchange",
+        h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
+        _a.prettyRedeemedCredit,
+        " → ",
+        reward.prettyValue));
+      return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
+        .length +
+        reward.prettyValue.length <
+        SOURCE_COLUMN_LENGTH ? (rewardExchange) : (h("div", { style: {
+          display: "inline-block",
+          verticalAlign: "top",
+          maxWidth: "100%",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        } }, rewardExchange));
+    }
+    // TODO: user type
+    function getFullName(user) {
+      if (!user)
+        return "Deleted User";
+      if (!user.firstName && !user.lastName)
+        return "Anonymous User";
+      if (!user.firstName)
+        return `${user.lastName}`;
+      if (!user.lastName)
+        return `${user.firstName}`;
+      return `${user.firstName} ${user.lastName}`;
+    }
+    const source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
+      this.reward.rewardSource === "REFERRED" ? (h("div", null,
+      this.reward.rewardSource === "FRIEND_SIGNUP" && "Referral to",
+      this.reward.rewardSource === "REFERRED" && "Referred by",
+      h("br", null),
+      h("b", null, getFullName(this.reward.referral.referredUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+    return h(TextSpanView, { type: "p" }, source());
+  }
+  static get is() { return "sqm-rewards-table-source-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "reward": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Reward",
+        "resolved": "Reward",
+        "references": {
+          "Reward": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -0,0 +1,84 @@
+import { Component, h, Prop } from "@stencil/core";
+import { intl } from "../../../global/global";
+export class RewardTableStatusCell {
+  rewardStatus(reward) {
+    if (reward.dateCancelled)
+      return "CANCELLED";
+    if (reward.statuses && reward.statuses.includes("EXPIRED"))
+      return "EXPIRED";
+    if (reward.statuses && reward.statuses.includes("PENDING"))
+      return "PENDING";
+    if (reward.type === "CREDIT") {
+      if (reward.statuses.includes("REDEEMED"))
+        return "REDEEMED";
+      return "AVAILABLE";
+    }
+    if (reward.type === "PCT_DISCOUNT") {
+      if (reward.statuses.includes("AVAILABLE"))
+        return "AVAILABLE";
+    }
+    if (reward.type === "INTEGRATION" || reward.type === "FUELTANK") {
+      if (reward.statuses && reward.statuses.includes("PENDING"))
+        return "PENDING";
+      if (reward.statuses && reward.statuses.includes("CANCELLED"))
+        return "CANCELLED";
+      if (reward.statuses.includes("AVAILABLE"))
+        return "AVAILABLE";
+    }
+    return "";
+  }
+  render() {
+    const rewardStatus = this.rewardStatus(this.reward);
+    const statusText = intl.formatMessage({ id: "statusMessage", defaultMessage: this.statusText }, {
+      status: rewardStatus,
+    });
+    const badgeType = rewardStatus === "AVAILABLE"
+      ? "success"
+      : rewardStatus === "REDEEMED"
+        ? "primary"
+        : rewardStatus === "PENDING"
+          ? "warning"
+          : "error";
+    return (h("sl-badge", { type: badgeType, pill: true }, statusText));
+  }
+  static get is() { return "sqm-rewards-table-status-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "statusText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status-text",
+      "reflect": false
+    },
+    "reward": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Reward",
+        "resolved": "Reward",
+        "references": {
+          "Reward": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,130 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Reward Table Date Column
+ */
+export class RewardTableDateColumn {
+  constructor() {
+    /**
+     * @uiName Date Column Title
+     */
+    this.columnTitle = "Date received";
+    /**
+     * @uiName Date Displayed
+     * @uiType string
+     * @uiEnum ["dateGiven",
+     * "dateExpires",
+     * "dateCancelled",
+     * "dateRedeemed",
+     * "dateScheduledFor"]
+     */
+    this.dateShown = "dateGiven";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    const reward = data === null || data === void 0 ? void 0 : data[0];
+    // TODO - Validate `dateShown` against a set of known values
+    return (h("sqm-rewards-table-date-cell", { date: reward[this.dateShown] }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.dateShown, this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-date-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Date Column Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Date received\""
+    },
+    "dateShown": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Date Displayed",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"dateGiven\",\r\n\"dateExpires\",\r\n\"dateCancelled\",\r\n\"dateRedeemed\",\r\n\"dateScheduledFor\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "date-shown",
+      "reflect": false,
+      "defaultValue": "\"dateGiven\""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,118 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Rewards Table Reward Column
+ */
+export class RewardsTableColumn {
+  constructor() {
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Hide dropdown details of reward
+     */
+    this.hideDetails = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  //@ts-ignore
+  async renderCell(data) {
+    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
+    return (h("sqm-rewards-table-rewards-cell", { reward: data === null || data === void 0 ? void 0 : data[0], hideDetails: this.hideDetails }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-reward-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward column title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Rewards\""
+    },
+    "hideDetails": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide dropdown details of reward",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-details",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}