@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -0,0 +1,237 @@
+import { Component, h, Prop } from "@stencil/core";
+import { DateTime } from "luxon";
+import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
+import { luxonLocale } from "../../../utils/utils";
+export class RewardTableStatusCell {
+  constructor() {
+    this.expiryText = "Expires";
+    this.locale = "en";
+    this.pendingUsTax = "W-9 required";
+    this.pendingScheduled = "Until";
+    this.pendingUnhandled = "Fulfillment error";
+  }
+  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;
+    intl.locale = this.locale;
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+      RedeemBadge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+          background: "var(--sl-color-blue-600)",
+        },
+      },
+      Date: {
+        fontSize: "var(--sl-font-size-small)",
+        color: "var(--sl-color-neutral-500)",
+        margin: "0",
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    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"
+          : "danger";
+    const dateShown = this.reward.dateCancelled ||
+      this.reward.dateExpires ||
+      this.reward.dateRedeemed ||
+      "";
+    const date = dateShown &&
+      `${rewardStatus === "AVAILABLE" && this.reward.dateExpires
+        ? this.expiryText + " "
+        : ""}${(_a = DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(DateTime.DATE_MED)}`;
+    const pendingReasons = rewardStatus === "PENDING" ? getRewardPendingReasons(this) : null;
+    console.log(pendingReasons);
+    return (h("div", { style: { display: "contents" } },
+      h("style", { type: "text/css" }, styleString),
+      h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
+          ? sheet.classes.RedeemBadge
+          : sheet.classes.Badge }, statusText),
+      h("p", { class: sheet.classes.Date }, pendingReasons || date)));
+    function getRewardPendingReasons(prop) {
+      var _a;
+      console.log(prop.reward);
+      const pendingCodeMap = {
+        US_TAX: prop.pendingUsTax,
+        SCHEDULED: prop.reward.dateScheduledFor &&
+          prop.pendingScheduled +
+            " " + ((_a = DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale))).toLocaleString(DateTime.DATE_MED)),
+        UNHANDLED_ERROR: prop.pendingUnhandled,
+      };
+      return [prop.reward.pendingReasons]
+        .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
+        .join(", ");
+    }
+  }
+  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,
+      "defaultValue": "\"Expires\""
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "\"en\""
+    },
+    "pendingUsTax": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-us-tax",
+      "reflect": false,
+      "defaultValue": "\"W-9 required\""
+    },
+    "pendingScheduled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-scheduled",
+      "reflect": false,
+      "defaultValue": "\"Until\""
+    },
+    "pendingUnhandled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-unhandled",
+      "reflect": false,
+      "defaultValue": "\"Fulfillment error\""
+    }
+  }; }
+}

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-customer-note-column.js}

@@ -1,27 +1,24 @@
 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 Customer Note Column
  */
-export class RewardsTableColumn {
+export class RewardTableCustomerNoteColumn {
   constructor() {
     /**
-     * @uiName Reward column title
+     * @uiName Customer Note Column Title
      */
-    this.columnTitle = "Rewards";
-    /**
-     * @uiName Hide dropdown details of reward
-     */
-    this.hideDetails = false;
+    this.columnTitle = "Note";
     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 }));
+  async renderCell(data, locale) {
+    var _a;
+    const reward = data === null || data === void 0 ? void 0 : data[0];
+    console.log("reward column - locale", { locale });
+    console.log("REWARD", reward);
+    return (h("sqm-rewards-table-customer-note-cell", { note: (_a = reward === null || reward === void 0 ? void 0 : reward.meta) === null || _a === void 0 ? void 0 : _a.message, locale: locale }));
   }
   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-customer-note-column"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "columnTitle": {
@@ -45,52 +42,33 @@ export class RewardsTableColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward column title",
+            "text": "Customer Note 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"
+      "defaultValue": "\"Note\""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[]) => Promise<any>",
+        "signature": "(data: Reward[], locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "./useRewardsTable"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

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

@@ -0,0 +1,134 @@
+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, locale) {
+    const reward = data === null || data === void 0 ? void 0 : data[0];
+    // TODO: dateShown validation?
+    console.log("reward column - locale", { locale });
+    return (h("sqm-rewards-table-date-cell", { date: reward[this.dateShown], locale: locale }));
+  }
+  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[], locale: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "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,169 @@
+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 = "Reward";
+    /**
+     * @uiName Redeemed Amount Text
+     */
+    this.redeemedText = "{redeemedAmount} redeemed";
+    /**
+     * @uiName Remaining Amount Text
+     */
+    this.availableText = "{availableAmount} remaining";
+    /**
+     * @uiName Fuel Tank Text
+     */
+    this.fueltankText = "Your code:";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, fueltankText: this.fueltankText, locale: locale }));
+  }
+  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": "\"Reward\""
+    },
+    "redeemedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Redeemed Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "redeemed-text",
+      "reflect": false,
+      "defaultValue": "\"{redeemedAmount} redeemed\""
+    },
+    "availableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Remaining Amount Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "available-text",
+      "reflect": false,
+      "defaultValue": "\"{availableAmount} remaining\""
+    },
+    "fueltankText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Fuel Tank Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "fueltank-text",
+      "reflect": false,
+      "defaultValue": "\"Your code:\""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[], locale: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "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": []
+      }
+    }
+  }; }
+}