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

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

@@ -0,0 +1,154 @@
+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: "default",
+        },
+        "&::part(content)": {
+          padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+        },
+        "&::part(base)": {
+          opacity: "1",
+        },
+        "&::part(summary-icon)": {
+          display: "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%",
+            },
+          },
+          Container: {
+            display: "inline-block",
+            verticalAlign: "top",
+            maxWidth: "100%",
+            maxHeight: "60px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          },
+        };
+        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.Container },
+            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,78 @@
+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: "155px",
+        } }, 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,95 @@
+import { Component, h, Prop } from "@stencil/core";
+import { DateTime } from "luxon";
+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() {
+    var _a;
+    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";
+    const dateShown = this.reward.dateCancelled ||
+      this.reward.dateExpires ||
+      this.reward.dateRedeemed ||
+      "";
+    const date = dateShown &&
+      // TODO: this text needs to be a prop for translations
+      `${this.reward.dateExpires ? "Expires on " : ""}${(_a = DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED)}`;
+    return (h("div", { style: { display: "contents" } },
+      h("sl-badge", { type: badgeType, pill: true }, statusText),
+      h("p", { style: { fontSize: "90%", marginTop: "0" } }, date)));
+  }
+  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: dateShown validation?
+    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/{sqm-rewards-table-column.js → columns/sqm-rewards-table-reward-column.js}

@@ -1,8 +1,8 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../../tables/re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Rewards Table Column
+ * @uiName Rewards Table Reward Column
  */
 export class RewardsTableColumn {
   constructor() {
@@ -17,11 +17,8 @@ export class RewardsTableColumn {
     withHooks(this);
   }
   disconnectedCallback() { }
-  //@ts-ignore
   async renderCell(data) {
-    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
-    console.log({ data });
-    return (h("sqm-referral-table-rewards-cell", { rewards: data, hideDetails: this.hideDetails }));
+    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;
@@ -30,7 +27,7 @@ export class RewardsTableColumn {
     useRequestRerender([this.columnTitle]);
     return h(Host, { style: { display: "none" } });
   }
-  static get is() { return "sqm-rewards-table-column"; }
+  static get is() { return "sqm-rewards-table-reward-column"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "columnTitle": {
@@ -89,8 +86,7 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "./useRewardsTable"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

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

@@ -0,0 +1,145 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Reward Table Source Column
+ */
+export class RewardTableUserColumn {
+  constructor() {
+    /**
+     * @uiName User Column Title
+     */
+    this.columnTitle = "Source";
+    /**
+     * @uiName Name displayed for anonymous users
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * @uiName Name displayed for deleted users
+     */
+    this.deletedUser = "Deleted User";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0] }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([
+      this.deletedUser,
+      this.anonymousUser,
+      this.columnTitle,
+    ]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-source-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": "User Column Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Source\""
+    },
+    "anonymousUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Name displayed for anonymous users",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "anonymous-user",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
+    "deletedUser": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Name displayed for deleted users",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "deleted-user",
+      "reflect": false,
+      "defaultValue": "\"Deleted User\""
+    }
+  }; }
+  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": []
+      }
+    }
+  }; }
+}