@saasquatch/mint-components 1.5.0-97 → 1.5.0

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,347 +1,117 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { u as useReducer, e as useEffect, m as h$1 } from './stencil-hooks.module-acc8a613.js';
-import { i as intl } from './global-7d4eb5e5.js';
+import { b as browser, u as useReducer, e as useEffect, m as h$1, i as useMemo } from './stencil-hooks.module-acc8a613.js';
+import { i as intl } from './global-15cdf41a.js';
 import './use-callback-7e0bfd3b.js';
-import { d as dist, i as ie, M, A as An, a as mn, j as jn } from './index.module-aac201f3.js';
+import { d as dist, i as ie, M, A as An, a as mn, j as jn } from './index.module-f5e17a4e.js';
 import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
-import { G as GenericTableView } from './GenericTableView-4a1292db.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-544e9c59.js';
-import { u as useChildElements } from './useChildElements-db935587.js';
-import { g as generateUserError } from './useReferralTable-15634a86.js';
+import { G as GenericTableView } from './GenericTableView-6924630b.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-8f0a7ab1.js';
+import { u as useChildElements } from './useChildElements-3ffd7077.js';
 import { l as luxon } from './luxon-f44215d9.js';
+import { g as generateUserError } from './useReferralTable-d8a7e3be.js';
 import { l as luxonLocale } from './utils-1d345130.js';
-import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 
-const mockRewardData = {
-  totalCount: 53,
-  count: 4,
-  data: [
-    {
-      id: "61f7878e096c9265de88b46f",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643612046293,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
+const mockRewardData = (count = 4) => {
+  const data = [...Array(count)].map(() => getMockData());
+  return { data };
+};
+const units = ["POINT", "TICKET", "GIFT"];
+const prettyValues = ["Points", "Tickets", "Gifts"];
+const statuses = ["AVAILABLE", "PENDING", "CANCELLED", "EXPIRED", "REDEEMED"];
+const pendingReasons = ["US_TAX", "SCHEDULED", "UNHANDLED_ERROR"];
+const getMockData = () => {
+  let isAvailableZero = false;
+  let randomRedeemed = 0;
+  let pendingReason;
+  let dateScheduledFor;
+  let dateCancelled;
+  let dateExpires;
+  const today = luxon.DateTime.now();
+  //  set random data
+  const randomUnitNumber = Math.floor(Math.random() * 3);
+  const randomStatus = statuses[Math.floor(Math.random() * 5)];
+  const unit = units[randomUnitNumber];
+  const prettyValue = prettyValues[randomUnitNumber];
+  const randomValue = Math.floor(Math.random() * 100) + 2;
+  if (randomStatus === "AVAILABLE") {
+    randomRedeemed = Math.floor(Math.random() * randomValue);
+    dateExpires =
+      Math.floor(Math.random() * 10) < 3 ? today.plus({ days: 7 }).toMillis() : null;
+  }
+  else if (randomStatus === "EXPIRED") {
+    isAvailableZero = true;
+    randomRedeemed = Math.floor(Math.random() * randomValue);
+    dateExpires = today.minus({ days: 1 }).toMillis();
+  }
+  else if (randomStatus === "PENDING") {
+    const reason = pendingReasons[Math.floor(Math.random() * 3)];
+    pendingReason = [reason];
+    if (reason === "SCHEDULED") {
+      dateScheduledFor = today.plus({ days: 6 }).toMillis();
+    }
+  }
+  else if (randomStatus === "REDEEMED") {
+    isAvailableZero = true;
+  }
+  else {
+    isAvailableZero = true;
+    dateCancelled = today.minus({ days: 2 }).toMillis();
+  }
+  const source = Math.floor(Math.random() * 3);
+  return {
+    id: "61f7878e096c9265de88b46f",
+    type: "CREDIT",
+    value: randomValue,
+    unit,
+    name: null,
+    dateGiven: today.minus({ days: 3 }).toMillis(),
+    dateExpires,
+    dateCancelled,
+    dateRedeemed: randomStatus === "REDEEMED" ? today.plus({ days: 2 }).toMillis() : null,
+    dateScheduledFor,
+    fuelTankCode: null,
+    fuelTankType: null,
+    currency: null,
+    prettyValue: `${randomValue} ${prettyValue}`,
+    prettyValueNumber: `${randomValue}`,
+    prettyAvailableNumber: isAvailableZero
+      ? "0"
+      : `${randomValue - randomRedeemed}`,
+    prettyRedeemedNumber: isAvailableZero && !randomRedeemed ? "0" : `${randomRedeemed}`,
+    programId: source === 1 ? "program-id" : null,
+    program: {
+      name: "My Program",
+    },
+    statuses: [randomStatus],
+    pendingReasons: pendingReason,
+    globalRewardKey: null,
+    programRewardKey: null,
+    rewardSource: source === 1 ? "AUTOMATED" : "MANUAL",
+    prettyRedeemedCredit: `${randomRedeemed} ${prettyValue}`,
+    prettyAssignedCredit: `${randomValue} ${prettyValue}`,
+    prettyAvailableValue: isAvailableZero
+      ? `0 ${prettyValue}`
+      : `${randomValue - randomRedeemed} ${prettyValue}`,
+    exchangedRewardRedemptionTransaction: source === 2
+      ? {
         id: "61f7878e096c9265de88b414",
         creditRedeemed: 50,
-        prettyRedeemedCredit: "50 Points",
-        unit: "POINT",
+        prettyRedeemedCredit: "50 Tokens",
+        unit: "TOKEN",
         dateRedeemed: 1643612046258,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f449ca096c9265de847ef5",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643399626845,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f449ca096c9265de847ecf",
-        creditRedeemed: 50,
-        prettyRedeemedCredit: "50 Points",
-        unit: "POINT",
-        dateRedeemed: 1643399626808,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43c3d40b8d244bb05dc51",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643396157092,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43c3d40b8d244bb05dbfa",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643396157045,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43b4a40b8d244bb05cfe4",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643395914220,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43b4a40b8d244bb05cf8c",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643395914151,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43b4a40b8d244bb05cfe4",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643395914220,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43b4a40b8d244bb05cf8c",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643395914151,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43b4a40b8d244bb05cfe4",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643395914220,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43b4a40b8d244bb05cf8c",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643395914151,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43b4a40b8d244bb05cfe4",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643395914220,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43b4a40b8d244bb05cf8c",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643395914151,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
-    },
-    {
-      id: "61f43b4a40b8d244bb05cfe4",
-      type: "CREDIT",
-      value: 1,
-      unit: "THING",
-      name: null,
-      dateGiven: 1643395914220,
-      dateExpires: null,
-      dateCancelled: null,
-      dateRedeemed: null,
-      dateScheduledFor: null,
-      fuelTankCode: null,
-      fuelTankType: null,
-      currency: null,
-      prettyValue: "1 THING",
-      prettyValueNumber: "1",
-      prettyAvailableNumber: "1",
-      prettyRedeemedNumber: "0",
-      programId: null,
-      program: null,
-      statuses: ["AVAILABLE"],
-      pendingReasons: [],
-      globalRewardKey: null,
-      programRewardKey: null,
-      rewardSource: "MANUAL",
-      prettyRedeemedCredit: "0 THING",
-      prettyAssignedCredit: "1 THING",
-      prettyAvailableValue: "1 THING",
-      exchangedRewardRedemptionTransaction: {
-        id: "61f43b4a40b8d244bb05cf8c",
-        creditRedeemed: 25,
-        prettyRedeemedCredit: "25 Points",
-        unit: "POINT",
-        dateRedeemed: 1643395914151,
-      },
-      referral: null,
-      rewardRedemptionTransactions: {
-        data: [],
-      },
+      }
+      : null,
+    referral: null,
+    rewardRedemptionTransactions: {
+      data: [],
     },
-  ],
+  };
 };
 
+const debug = browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = dist.gql `
   query getRewards(
@@ -353,7 +123,12 @@ const GET_REWARDS = dist.gql `
     viewer {
       ... on User {
         id
-        rewards(limit: $limit, offset: $offset, filter: $rewardFilter) {
+        rewards(
+          limit: $limit
+          offset: $offset
+          filter: $rewardFilter
+          sortBy: { field: "dateCreated", order: DESC }
+        ) {
           totalCount
           count
           data {
@@ -366,6 +141,7 @@ const GET_REWARDS = dist.gql `
             unit
             name
             dateGiven
+            dateCreated
             dateExpires
             dateCancelled
             dateRedeemed
@@ -479,7 +255,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], locale)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, locale)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -546,7 +322,7 @@ async function tryMethod(c, callback) {
   catch (e) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
-    console.error("label promise failed", e);
+    debug("label promise failed", e);
     return h("span", null);
   }
   try {
@@ -555,7 +331,7 @@ async function tryMethod(c, callback) {
   catch (e) {
     // The column returned a promise, and that promise failed.
     // This should not happen so we fail fast
-    console.error("Error rendering label", e);
+    debug("Error rendering label", e);
     const userError = generateUserError(e);
     return (h("details", null,
       h("summary", null, "Error"),
@@ -574,17 +350,20 @@ const RewardsTable = class {
     this.prevLabel = "Prev";
     /** @uiName View More button text  */
     this.moreLabel = "Next";
-    /** @uiName Hide Columns (Mobile View)  */
+    /**
+     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
+     *
+     *  @uiName Mobile Hidden Columns  */
     this.hiddenColumns = "0";
-    /** @uiName Hide Columns (Mobile View)  */
+    /** @uiName Mobile Breakpoint  */
     this.smBreakpoint = 599;
-    /** @uiName Hide Columns (Mobile View)  */
-    this.mdBreakpoint = 899;
+    /** @uiName Tablet Breakpoint  */
+    this.mdBreakpoint = 799;
     h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h("slot", { name: "empty" });
+    const empty = h(EmptySlot, null);
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = jn()
       ? useRewardsTableDemo(this, empty, loading)
@@ -593,6 +372,9 @@ const RewardsTable = class {
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
 };
+function EmptySlot() {
+  return (h("slot", { name: "empty" }, h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "Refer friends and complete tasks to view the details of your rewards" })));
+}
 function LoadingSlot() {
   return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
 }
@@ -610,7 +392,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     page: 0,
   });
   const tick = useRerenderListener();
-  const { data } = mockRewardData;
+  const { data } = useMemo(() => mockRewardData(props.perPage), [props.perPage]);
   const components = useChildElements();
   async function getComponentData(components) {
     let componentData = data;
@@ -622,7 +404,7 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     // get the column cells (renderCell is asynchronous)
     //@ts-ignore
     const cellsPromise = componentData === null || componentData === void 0 ? void 0 : componentData.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell([r], undefined)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, undefined)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -654,6 +436,8 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 799,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,
@@ -678,7 +462,7 @@ const RewardTableDateCell = class {
     const date = !this.date
       ? "-"
       : (_b = (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(luxon.DateTime.DATE_MED);
-    return h(TextSpanView, { type: "p" }, date);
+    return date;
   }
 };
 
@@ -697,16 +481,14 @@ const RewardTableDateColumn = class {
      * "dateCancelled",
      * "dateRedeemed",
      * "dateScheduledFor"]
+     * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
      */
     this.dateShown = "dateGiven";
     h$1(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;
@@ -717,6 +499,77 @@ const RewardTableDateColumn = class {
   }
 };
 
+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();
 const RewardTableRewardsCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -724,60 +577,20 @@ const RewardTableRewardsCell = class {
   // 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",
@@ -788,12 +601,14 @@ const RewardTableRewardsCell = class {
           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": {
@@ -808,7 +623,7 @@ const RewardTableRewardsCell = class {
           Container: {
             display: "inline-block",
             verticalAlign: "top",
-            maxWidth: "100%",
+            width: "150px",
             whiteSpace: "break",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -847,17 +662,26 @@ const RewardsTableColumn = class {
      * @uiName Remaining Amount Text
      */
     this.availableText = "{availableAmount} remaining";
+    /**
+     * @uiName Copied Fuel Tank Text
+     */
+    this.copyText = "Copied!";
     h$1(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" } });
   }
 };
@@ -895,7 +719,6 @@ const RewardTableSourceCell = class {
           verticalAlign: "top",
         } }, rewardExchange));
     };
-    // TODO: user type
     const getFullName = (user) => {
       if (!user)
         return this.deletedUserText;
@@ -927,7 +750,7 @@ const RewardTableUserColumn = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * @uiName User Column Title
+     * @uiName Soruce Column Title
      */
     this.columnTitle = "Source";
     /**
@@ -956,7 +779,7 @@ const RewardTableUserColumn = class {
   }
   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;
@@ -966,11 +789,38 @@ const RewardTableUserColumn = class {
       this.deletedUser,
       this.anonymousUser,
       this.columnTitle,
+      this.rewardExchangeText,
+      this.referralText,
+      this.rewardSourceText,
     ]);
     return h(Host, { style: { display: "none" } });
   }
 };
 
+const style$1 = {
+  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$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 const RewardTableStatusCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1009,28 +859,6 @@ const RewardTableStatusCell = class {
   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,
@@ -1051,18 +879,16 @@ const RewardTableStatusCell = class {
         ? this.expiryText + " "
         : ""}${(_a = luxon.DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(luxon.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)));
+    return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString$1), h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
+        ? sheet$1.classes.RedeemBadge
+        : sheet$1.classes.Badge }, statusText), h("p", { class: sheet$1.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 = luxon.DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale))).toLocaleString(luxon.DateTime.DATE_MED)),
+            " " + ((_a = luxon.DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale || "en"))).toLocaleString(luxon.DateTime.DATE_MED)),
         UNHANDLED_ERROR: prop.pendingUnhandled,
       };
       return [prop.reward.pendingReasons]
@@ -1087,18 +913,40 @@ const RewardTableStatusColumn = class {
      * @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";
     h$1(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" } });
   }
 };