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

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

@@ -0,0 +1,178 @@
+import { Component, h, Prop } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../../global/global";
+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, intl.formatMessage({
+          id: "redeemedText",
+          defaultMessage: this.redeemedText,
+        }, {
+          redeemedAmount: reward.prettyRedeemedCredit,
+        }))) : (h("div", null, intl.formatMessage({
+          id: "availableText",
+          defaultMessage: this.availableText,
+        }, {
+          availableAmount: reward.prettyAvailableValue,
+        })));
+        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": ""
+      }
+    },
+    "redeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "redeemed-text",
+      "reflect": false
+    },
+    "availableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "available-text",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,164 @@
+import { Component, h, Prop } from "@stencil/core";
+import { intl } from "../../../global/global";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+export class RewardTableSourceCell {
+  render() {
+    function RewardSource({ reward }) {
+      return (h("span", null, intl.formatMessage({
+        id: "rewardSourceText",
+        defaultMessage: this.rewardSourceText,
+      }, {
+        rewardSource: reward.rewardSource,
+      })));
+    }
+    const SOURCE_COLUMN_LENGTH = 21;
+    function RewardExchangeBadge({ reward }) {
+      var _a;
+      const rewardExchange = (h("div", null,
+        this.rewardExchangeText,
+        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 this.deletedUserText;
+      if (!user.firstName && !user.lastName)
+        return this.anonymousUserText;
+      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,
+      intl.formatMessage({
+        id: "referralText",
+        defaultMessage: this.referralText,
+      }, {
+        rewardSource: this.reward.rewardSource,
+      }),
+      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": ""
+      }
+    },
+    "deletedUserText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "deleted-user-text",
+      "reflect": false
+    },
+    "anonymousUserText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "anonymous-user-text",
+      "reflect": false
+    },
+    "rewardExchangeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reward-exchange-text",
+      "reflect": false
+    },
+    "referralText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "referral-text",
+      "reflect": false
+    },
+    "rewardSourceText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "reward-source-text",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,111 @@
+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 &&
+      `${this.reward.dateExpires ? this.expiryText : ""}${(_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": ""
+      }
+    },
+    "expiryText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expiry-text",
+      "reflect": false
+    }
+  }; }
+}

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

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

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

@@ -1,36 +1,41 @@
 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 Reward Table Date Column
  */
-export class RewardsTableColumn {
+export class RewardTableDateColumn {
   constructor() {
     /**
-     * @uiName Reward column title
+     * @uiName Date Column Title
      */
-    this.columnTitle = "Rewards";
+    this.columnTitle = "Date received";
     /**
-     * @uiName Hide dropdown details of reward
+     * @uiName Date Displayed
+     * @uiType string
+     * @uiEnum ["dateGiven",
+     * "dateExpires",
+     * "dateCancelled",
+     * "dateRedeemed",
+     * "dateScheduledFor"]
      */
-    this.hideDetails = false;
+    this.dateShown = "dateGiven";
     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 }));
+    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.columnTitle]);
+    useRequestRerender([this.dateShown, this.columnTitle]);
     return h(Host, { style: { display: "none" } });
   }
-  static get is() { return "sqm-rewards-table-column"; }
+  static get is() { return "sqm-rewards-table-date-column"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "columnTitle": {
@@ -45,35 +50,41 @@ export class RewardsTableColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward column title",
+            "text": "Date Column Title",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "column-title",
       "reflect": false,
-      "defaultValue": "\"Rewards\""
+      "defaultValue": "\"Date received\""
     },
-    "hideDetails": {
-      "type": "boolean",
+    "dateShown": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide dropdown details of reward",
+            "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": "hide-details",
+      "attribute": "date-shown",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"dateGiven\""
     }
   }; }
   static get methods() { return {
@@ -89,8 +100,7 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "./useRewardsTable"
+            "location": "global"
           }
         },
         "return": "Promise<any>"