@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

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

@@ -1,24 +1,27 @@
 import { Component, h, Prop } from "@stencil/core";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { intl } from "../../../global/global";
 export class RewardTableSourceCell {
+  constructor() {
+    this.locale = "en";
+  }
   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);
-    }
+    intl.locale = this.locale;
+    const RewardSource = ({ reward }) => {
+      return (h("span", null, intl.formatMessage({
+        id: "rewardSourceText",
+        defaultMessage: this.rewardSourceText,
+      }, {
+        rewardSource: reward.rewardSource,
+      })));
+    };
     const SOURCE_COLUMN_LENGTH = 21;
-    function RewardExchangeBadge({ reward }) {
+    const RewardExchangeBadge = ({ reward }) => {
       var _a;
       const rewardExchange = (h("div", null,
-        "Reward Exchange",
+        h("span", { style: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
+          } }, this.rewardExchangeText),
         h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit,
         " → ",
@@ -29,31 +32,33 @@ export class RewardTableSourceCell {
         SOURCE_COLUMN_LENGTH ? (rewardExchange) : (h("div", { style: {
           display: "inline-block",
           verticalAlign: "top",
-          maxWidth: "120px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
         } }, rewardExchange));
-    }
+    };
     // TODO: user type
-    function getFullName(user) {
+    const getFullName = (user) => {
       if (!user)
-        return "Deleted User";
+        return this.deletedUserText;
       if (!user.firstName && !user.lastName)
-        return "Anonymous User";
+        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" ||
+    };
+    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());
+      h("div", { style: {
+          fontSize: "var(--sl-font-size-small)",
+          color: "var(--sl-color-neutral-500)",
+        } }, intl.formatMessage({
+        id: "referralText",
+        defaultMessage: this.referralText,
+      }, {
+        rewardSource: this.reward.rewardSource,
+      })),
+      h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP" ? getFullName(this.reward.referral.referredUser) : getFullName(this.reward.referral.referrerUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+    return h(Source, null);
   }
   static get is() { return "sqm-rewards-table-source-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -76,6 +81,109 @@ export class RewardTableSourceCell {
         "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
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "\"en\""
     }
   }; }
 }

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

@@ -1,6 +1,16 @@
 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";
@@ -28,6 +38,30 @@ export class RewardTableStatusCell {
     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,
@@ -38,8 +72,37 @@ export class RewardTableStatusCell {
         ? "primary"
         : rewardStatus === "PENDING"
           ? "warning"
-          : "error";
-    return (h("sl-badge", { type: badgeType, pill: true }, statusText));
+          : "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"; }
@@ -79,6 +142,96 @@ export class RewardTableStatusCell {
         "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/sqm-rewards-table-date-column.js

@@ -23,10 +23,11 @@ export class RewardTableDateColumn {
     withHooks(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     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] }));
+    // 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;
@@ -90,10 +91,13 @@ export class RewardTableDateColumn {
   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": {

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

@@ -9,18 +9,20 @@ export class RewardsTableColumn {
     /**
      * @uiName Reward column title
      */
-    this.columnTitle = "Rewards";
+    this.columnTitle = "Reward";
     /**
-     * @uiName Hide dropdown details of reward
+     * @uiName Redeemed Amount Text
      */
-    this.hideDetails = false;
+    this.redeemedText = "{redeemedAmount} redeemed";
+    /**
+     * @uiName Remaining Amount Text
+     */
+    this.availableText = "{availableAmount} remaining";
     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 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, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -51,37 +53,61 @@ export class RewardsTableColumn {
       },
       "attribute": "column-title",
       "reflect": false,
-      "defaultValue": "\"Rewards\""
+      "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\""
     },
-    "hideDetails": {
-      "type": "boolean",
+    "availableText": {
+      "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": "Remaining Amount Text",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "hide-details",
+      "attribute": "available-text",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"{availableAmount} remaining\""
     }
   }; }
   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": {

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

@@ -18,11 +18,25 @@ export class RewardTableUserColumn {
      * @uiName Name displayed for deleted users
      */
     this.deletedUser = "Deleted User";
+    /**
+     * @uiName Reward Exchange label
+     */
+    this.rewardExchangeText = "Reward Exchange";
+    /**
+     * Shown when a reward has been created by a referral
+     *
+     * @uiName Referral Text
+     */
+    this.referralText = "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}";
+    /**
+     * @uiName Reward Source Text
+     */
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}";
     withHooks(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
-    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0] }));
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0], anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -100,15 +114,81 @@ export class RewardTableUserColumn {
       "attribute": "deleted-user",
       "reflect": false,
       "defaultValue": "\"Deleted User\""
+    },
+    "rewardExchangeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Exchange label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-exchange-text",
+      "reflect": false,
+      "defaultValue": "\"Reward Exchange\""
+    },
+    "referralText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Referral Text",
+            "name": "uiName"
+          }],
+        "text": "Shown when a reward has been created by a referral"
+      },
+      "attribute": "referral-text",
+      "reflect": false,
+      "defaultValue": "\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\""
+    },
+    "rewardSourceText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Source Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-source-text",
+      "reflect": false,
+      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}\""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward) => Promise<any>",
+        "signature": "(data: Reward[], locale: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {