@saasquatch/mint-components 1.5.0-99 → 1.5.0

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

@@ -1,64 +1,101 @@
 import { Component, h, Prop } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+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)",
+    "&::part(base)": {
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+    },
+  },
+  Fueltank: {
+    "& .code": {
+      display: "flex",
+      cursor: "pointer",
+      userSelect: "none",
+      color: "var(--sl-color-neutral-500)",
+      "&:hover": {
+        color: "var(--sl-color-sky-500)",
+      },
+    },
+    "& .text": {
+      maxWidth: "90%",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      color: "inherit",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "var(--sl-font-weight-bold)",
+    },
+    "& .icon": {
+      position: "relative",
+      top: "1px",
+      marginLeft: "var(--sl-spacing-x-small)",
+      color: "inherit",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 export class RewardTableRewardsCell {
   // TODO: value function from portalv2
   render() {
     intl.locale = this.locale;
-    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)",
-      },
-    };
-    const sheet = createStyleSheet(style);
-    const styleString = sheet.toString();
     const RewardValue = ({ reward }) => {
       var _a;
-      console.log(reward);
       const pimpedPrettyValue = reward.unit === "CENTS"
         ? reward.prettyValue.replace(/USD/gi, "$")
         : (_a = reward.prettyValue) !== null && _a !== void 0 ? _a : "-";
       const singleReward = reward.prettyValueNumber === "1" ||
         (reward.dateRedeemed && reward.prettyAvailableNumber === "0");
+      if (reward.type === "FUELTANK") {
+        return (h("div", { class: sheet.classes.Fueltank },
+          reward.prettyValue,
+          reward.fuelTankCode && (h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
+            h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) },
+              h("span", { class: "text" }, reward.fuelTankCode),
+              h("span", { class: "icon" },
+                h("sl-icon", { name: "files" })))))));
+      }
       if (reward.type === "CREDIT" && !singleReward) {
-        const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
-          parseFloat(reward.prettyRedeemedNumber)) /
-          parseFloat(reward.prettyValueNumber)) *
-          100);
+        const remainingValue = parseFloat(reward.prettyValueNumber) -
+          parseFloat(reward.prettyRedeemedNumber);
+        const progress = Math.round((remainingValue / parseFloat(reward.prettyValueNumber)) * 100);
         const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
           reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
           id: "redeemedText",
@@ -69,12 +106,14 @@ export class RewardTableRewardsCell {
           id: "availableText",
           defaultMessage: this.availableText,
         }, {
-          availableAmount: reward.prettyAvailableValue,
+          availableAmount: reward.statuses.includes("PENDING")
+            ? reward.prettyAssignedCredit
+            : reward.prettyAvailableValue,
         })));
         const style = {
           Progress: {
             height: "3px",
-            maxWidth: "150px",
+            width: "100%",
             margin: "var(--sl-spacing-xx-small) 0",
             background: "var(--sl-color-neutral-200)",
             "&:after": {
@@ -89,7 +128,7 @@ export class RewardTableRewardsCell {
           Container: {
             display: "inline-block",
             verticalAlign: "top",
-            maxWidth: "100%",
+            width: "150px",
             whiteSpace: "break",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -176,6 +215,23 @@ export class RewardTableRewardsCell {
       "attribute": "available-text",
       "reflect": false
     },
+    "copyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "copy-text",
+      "reflect": false
+    },
     "locale": {
       "type": "string",
       "mutable": false,

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

@@ -36,7 +36,6 @@ export class RewardTableSourceCell {
           verticalAlign: "top",
         } }, rewardExchange));
     };
-    // TODO: user type
     const getFullName = (user) => {
       if (!user)
         return this.deletedUserText;

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

@@ -3,6 +3,30 @@ import { DateTime } from "luxon";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { luxonLocale } from "../../../utils/utils";
+const style = {
+  Badge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      paddingLeft: "10px",
+      whiteSpace: "pre-line",
+    },
+  },
+  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();
 export class RewardTableStatusCell {
   constructor() {
     this.expiryText = "Expires";
@@ -40,28 +64,6 @@ export class RewardTableStatusCell {
   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,
@@ -82,7 +84,6 @@ export class RewardTableStatusCell {
         ? 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"
@@ -91,12 +92,11 @@ export class RewardTableStatusCell {
       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)),
+            " " + ((_a = DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale || "en"))).toLocaleString(DateTime.DATE_MED)),
         UNHANDLED_ERROR: prop.pendingUnhandled,
       };
       return [prop.reward.pendingReasons]

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

@@ -18,16 +18,14 @@ export class RewardTableDateColumn {
      * "dateCancelled",
      * "dateRedeemed",
      * "dateScheduledFor"]
+     * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
      */
     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 }));
+    return (h("sqm-rewards-table-date-cell", { date: data[this.dateShown], locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -80,6 +78,9 @@ export class RewardTableDateColumn {
           }, {
             "text": "[\"dateGiven\",\r\n\"dateExpires\",\r\n\"dateCancelled\",\r\n\"dateRedeemed\",\r\n\"dateScheduledFor\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Date Given\", \"Date Expires\", \"Date Cancelled\", \"Date Redeemed\", \"Date Scheduled For\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -91,7 +92,7 @@ export class RewardTableDateColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[], locale: string) => Promise<any>",
+        "signature": "(data: Reward, locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

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

@@ -9,15 +9,13 @@ export class RewardTableCustomerNoteColumn {
     /**
      * @uiName Customer Note Column Title
      */
-    this.columnTitle = "Customer note";
+    this.columnTitle = "Note";
     withHooks(this);
   }
   disconnectedCallback() { }
   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);
+    const reward = data;
     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() {
@@ -39,7 +37,7 @@ export class RewardTableCustomerNoteColumn {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Customer Note Column Title",
@@ -49,13 +47,13 @@ export class RewardTableCustomerNoteColumn {
       },
       "attribute": "column-title",
       "reflect": false,
-      "defaultValue": "\"Customer note\""
+      "defaultValue": "\"Note\""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[], locale: string) => Promise<any>",
+        "signature": "(data: Reward, locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

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

@@ -18,17 +18,26 @@ export class RewardsTableColumn {
      * @uiName Remaining Amount Text
      */
     this.availableText = "{availableAmount} remaining";
+    /**
+     * @uiName Copied Fuel Tank Text
+     */
+    this.copyText = "Copied!";
     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, locale: locale }));
+    return (h("sqm-rewards-table-reward-cell", { reward: data, redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.redeemedText,
+      this.availableText,
+      this.copyText,
+    ]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-rewards-table-reward-column"; }
@@ -96,12 +105,33 @@ export class RewardsTableColumn {
       "attribute": "available-text",
       "reflect": false,
       "defaultValue": "\"{availableAmount} remaining\""
+    },
+    "copyText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copied Fuel Tank Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "copy-text",
+      "reflect": false,
+      "defaultValue": "\"Copied!\""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[], locale: string) => Promise<any>",
+        "signature": "(data: Reward, locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

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

@@ -7,7 +7,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 export class RewardTableUserColumn {
   constructor() {
     /**
-     * @uiName User Column Title
+     * @uiName Soruce Column Title
      */
     this.columnTitle = "Source";
     /**
@@ -36,7 +36,7 @@ export class RewardTableUserColumn {
   }
   disconnectedCallback() { }
   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 }));
+    return (h("sqm-rewards-table-source-cell", { reward: data, anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -46,6 +46,9 @@ export class RewardTableUserColumn {
       this.deletedUser,
       this.anonymousUser,
       this.columnTitle,
+      this.rewardExchangeText,
+      this.referralText,
+      this.rewardSourceText,
     ]);
     return h(Host, { style: { display: "none" } });
   }
@@ -64,7 +67,7 @@ export class RewardTableUserColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "User Column Title",
+            "text": "Soruce Column Title",
             "name": "uiName"
           }],
         "text": ""
@@ -182,7 +185,7 @@ export class RewardTableUserColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[], locale: any) => Promise<any>",
+        "signature": "(data: Reward, locale: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

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

@@ -18,18 +18,40 @@ export class RewardTableStatusColumn {
      * @uiName Expired Status Text
      */
     this.expiryText = "Expires on ";
+    /**
+     * Displayed when a reward is pending due to W9 compliance.
+     *
+     * @uiName W9 Pending Text
+     */
+    this.pendingUsTax = "W-9 required";
+    /**
+     * @uiName Expiry Date Prefix
+     */
+    this.pendingScheduled = "Until";
+    /**
+     * Displayed when fulfillment error occured when creating a reward.
+     *
+     * @uiName Unhandled Error Text
+     */
+    this.pendingUnhandled = "Fulfillment error";
     withHooks(this);
   }
   disconnectedCallback() { }
   async renderCell(data, locale) {
-    const rewardData = data === null || data === void 0 ? void 0 : data[0];
-    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText, locale: locale }));
+    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: data, expiryText: this.expiryText, pendingScheduled: this.pendingScheduled, pendingUsTax: this.pendingUsTax, pendingUnhandled: this.pendingUnhandled, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.statusText,
+      this.expiryText,
+      this.pendingScheduled,
+      this.pendingUsTax,
+      this.pendingUnhandled,
+    ]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-rewards-table-status-column"; }
@@ -97,12 +119,75 @@ export class RewardTableStatusColumn {
       "attribute": "expiry-text",
       "reflect": false,
       "defaultValue": "\"Expires on \""
+    },
+    "pendingUsTax": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "W9 Pending Text",
+            "name": "uiName"
+          }],
+        "text": "Displayed when a reward is pending due to W9 compliance."
+      },
+      "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": "Expiry Date Prefix",
+            "name": "uiName"
+          }],
+        "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": "Unhandled Error Text",
+            "name": "uiName"
+          }],
+        "text": "Displayed when fulfillment error occured when creating a reward."
+      },
+      "attribute": "pending-unhandled",
+      "reflect": false,
+      "defaultValue": "\"Fulfillment error\""
     }
   }; }
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward[], locale: string) => Promise<any>",
+        "signature": "(data: Reward, locale: string) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""