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

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

@@ -0,0 +1,1135 @@
+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-a8e9f822.js';
+import './use-callback-7e0bfd3b.js';
+import { d as dist, n as ne, M, R, w as wn, k } from './index.module-2821f17d.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-6e103d56.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-07721d1b.js';
+import { u as useChildElements } from './useChildElements-62af7349.js';
+import { g as generateUserError } from './useReferralTable-43a3a215.js';
+import { l as luxon } from './luxon-f44215d9.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: {
+        id: "61f7878e096c9265de88b414",
+        creditRedeemed: 50,
+        prettyRedeemedCredit: "50 Points",
+        unit: "POINT",
+        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: [],
+      },
+    },
+  ],
+};
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = dist.gql `
+  query getRewards(
+    $limit: Int!
+    $offset: Int!
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        id
+        rewards(limit: $limit, offset: $offset, filter: $rewardFilter) {
+          totalCount
+          count
+          data {
+            meta {
+              message
+            }
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue(locale: $locale)
+            prettyValueNumber: prettyValue(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            prettyAvailableNumber: prettyAvailableValue(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            prettyRedeemedNumber: prettyRedeemedCredit(
+              formatType: NUMBER_FORMATTED
+              locale: $locale
+            )
+            programId
+            program {
+              name
+            }
+            statuses
+            pendingReasons
+            globalRewardKey
+            programRewardKey
+            rewardSource
+            prettyRedeemedCredit(locale: $locale)
+            prettyAssignedCredit(locale: $locale)
+            prettyAvailableValue(locale: $locale)
+            exchangedRewardRedemptionTransaction {
+              id
+              creditRedeemed
+              prettyRedeemedCredit(locale: $locale)
+              unit
+              dateRedeemed
+            }
+            referral {
+              id
+              referrerUser {
+                id
+                firstName
+                lastName
+              }
+              referredUser {
+                id
+                firstName
+                lastName
+              }
+            }
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue(locale: $locale)
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function useRewardsTable(props, emptyElement, loadingElement) {
+  var _a, _b;
+  const user = ne();
+  const programIdContext = M();
+  const locale = R();
+  // Default to context, overriden by props
+  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const rewardFilter = {
+    userId_eq: user === null || user === void 0 ? void 0 : user.id,
+    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
+    // If no program ID, shows all programs
+    ...(programId
+      ? programId === "classic"
+        ? { programId_exists: false }
+        : { programId_eq: programId }
+      : {}),
+  };
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const { envelope: rewardsData, states, callbacks, } = wn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
+    limit: props.perPage,
+    offset: 0,
+  }, {
+    rewardFilter,
+    locale,
+  }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const tick = useRerenderListener();
+  const components = useChildElements();
+  const data = rewardsData === null || rewardsData === void 0 ? void 0 : rewardsData.data;
+  async function getComponentData(components) {
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    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 cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: states.currentPage });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    rewardsData && getComponentData(components);
+  }, [rewardsData, components, tick]);
+  const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
+  const show = 
+  // 1 - Loading if loading
+  states.loading || content.loading
+    ? "loading"
+    : // 2 - Empty if empty
+      isEmpty
+        ? "empty"
+        : // 3 - Then show rows
+          "rows";
+  return {
+    states: {
+      hasNext: states.currentPage < states.pageCount - 1,
+      hasPrev: states.currentPage > 0,
+      show,
+      namespace: CSS_NAMESPACE,
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        callbacks.setCurrentPage(states.currentPage - 1);
+      },
+    },
+  };
+}
+async function tryMethod(c, callback) {
+  const tag = c.tagName.toLowerCase();
+  await customElements.whenDefined(tag);
+  let labelPromise;
+  try {
+    labelPromise = 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);
+    return h("span", null);
+  }
+  try {
+    return await labelPromise;
+  }
+  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);
+    const userError = generateUserError(e);
+    return (h("details", null,
+      h("summary", null, "Error"),
+      userError));
+  }
+}
+
+const RewardsTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @uiName Number of rewards per page */
+    this.perPage = 4;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 599;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h("slot", { name: "empty" });
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = k()
+      ? useRewardsTableDemo(this, empty, loading)
+      : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+function LoadingSlot() {
+  return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5 }, h("sl-skeleton", null))));
+}
+function useRewardsTableDemo(props, emptyElement, loadingElement) {
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const tick = useRerenderListener();
+  const { data } = mockRewardData;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    let componentData = data;
+    componentData = data.slice(0, props.perPage);
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // 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 cells = (await Promise.all(cellPromise));
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: 0 });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    data && getComponentData(components);
+  }, [data, components, tick]);
+  const demoProps = cjs({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      show: "rows",
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  return demoProps;
+}
+
+const RewardTableDateCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    this.locale = "en";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a, _b;
+    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);
+  }
+};
+
+const RewardTableDateColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Date Column Title
+     */
+    this.columnTitle = "Date received";
+    /**
+     * @uiName Date Displayed
+     * @uiType string
+     * @uiEnum ["dateGiven",
+     * "dateExpires",
+     * "dateCancelled",
+     * "dateRedeemed",
+     * "dateScheduledFor"]
+     */
+    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 }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.dateShown, this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+};
+
+const RewardTableRewardsCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // 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)",
+      },
+      Fueltank: {
+        lineBreak: "anywhere",
+        "& .text": {
+          color: "var(--sl-color-neutral-500)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "& .code": {
+          cursor: "pointer",
+          userSelect: "none",
+          marginLeft: "var(--sl-spacing-xx-small)",
+          fontWeight: "var(--sl-font-weight-bold)",
+          "&:hover": {
+            color: "var(--sl-color-sky-500)",
+          },
+        },
+        "& .icon": {
+          position: "relative",
+          top: "2px",
+          marginLeft: "var(--sl-spacing-xx-small)",
+          color: "inherit",
+        },
+      },
+    };
+    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, h("div", { class: "text" }, this.fueltankText, h("span", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) }, 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 progressBarSubtext = reward.statuses.includes("EXPIRED") ||
+          reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
+          id: "redeemedText",
+          defaultMessage: this.redeemedText,
+        }, {
+          redeemedAmount: reward.prettyRedeemedCredit,
+        }))) : (h("div", null, intl.formatMessage({
+          id: "availableText",
+          defaultMessage: this.availableText,
+        }, {
+          availableAmount: reward.prettyAvailableValue,
+        })));
+        const style = {
+          Progress: {
+            height: "3px",
+            maxWidth: "150px",
+            margin: "var(--sl-spacing-xx-small) 0",
+            background: "var(--sl-color-neutral-200)",
+            "&:after": {
+              content: '""',
+              display: "block",
+              background: "var(--sl-color-primary-300)",
+              borderRadius: "100px",
+              width: `${progress}%`,
+              height: "100%",
+            },
+          },
+          Container: {
+            display: "inline-block",
+            verticalAlign: "top",
+            maxWidth: "100%",
+            whiteSpace: "break",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          },
+          Text: {
+            fontSize: "var(--sl-font-size-medium)",
+            color: "var(--sl-color-gray-800)",
+          },
+          Subtext: {
+            fontSize: "var(--sl-font-size-small)",
+            color: "var(--sl-color-neutral-500)",
+          },
+        };
+        const sheet = createStyleSheet(style);
+        const styleString = sheet.toString();
+        return (h("div", null, h("style", { type: "text/css" }, styleString), h("div", { class: sheet.classes.Container }, h("span", null, pimpedPrettyValue + " "), h("br", null), " ", h("div", { class: sheet.classes.Progress }), h("span", { class: sheet.classes.Subtext }, progressBarSubtext))));
+      }
+      return h("div", null, pimpedPrettyValue);
+    };
+    return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString), h(RewardValue, { reward: this.reward })));
+  }
+};
+
+const RewardsTableColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @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:";
+    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, fueltankText: this.fueltankText, locale: locale }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+};
+
+const RewardTableSourceCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.locale = "en";
+  }
+  render() {
+    intl.locale = this.locale;
+    const RewardSource = ({ reward }) => {
+      var _a;
+      return (h("span", null, intl.formatMessage({
+        id: "rewardSourceText",
+        defaultMessage: this.rewardSourceText,
+      }, {
+        rewardSource: reward.rewardSource,
+        programName: (_a = reward === null || reward === void 0 ? void 0 : reward.program) === null || _a === void 0 ? void 0 : _a.name,
+      })));
+    };
+    const SOURCE_COLUMN_LENGTH = 21;
+    const RewardExchangeBadge = ({ reward }) => {
+      var _a;
+      const rewardExchange = (h("div", null, 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, " → ", reward.prettyValue));
+      return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
+        .length +
+        reward.prettyValue.length <
+        SOURCE_COLUMN_LENGTH ? (rewardExchange) : (h("div", { style: {
+          display: "inline-block",
+          verticalAlign: "top",
+        } }, rewardExchange));
+    };
+    // TODO: user type
+    const getFullName = (user) => {
+      if (!user)
+        return this.deletedUserText;
+      if (!user.firstName && !user.lastName)
+        return this.anonymousUserText;
+      if (!user.firstName)
+        return `${user.lastName}`;
+      if (!user.lastName)
+        return `${user.firstName}`;
+      return `${user.firstName} ${user.lastName}`;
+    };
+    const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
+      this.reward.rewardSource === "REFERRED" ? (h("div", null, 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);
+  }
+};
+
+const RewardTableUserColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName User Column Title
+     */
+    this.columnTitle = "Source";
+    /**
+     * @uiName Name displayed for anonymous users
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * @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 {{programName}} other {}}";
+    h$1(this);
+  }
+  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 }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([
+      this.deletedUser,
+      this.anonymousUser,
+      this.columnTitle,
+    ]);
+    return h(Host, { style: { display: "none" } });
+  }
+};
+
+const RewardTableStatusCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 = 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)));
+    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)),
+        UNHANDLED_ERROR: prop.pendingUnhandled,
+      };
+      return [prop.reward.pendingReasons]
+        .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
+        .join(", ");
+    }
+  }
+};
+
+const RewardTableStatusColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Column Title
+     */
+    this.columnTitle = "Status";
+    /**
+     * @uiName Reward Status Text
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    /**
+     * @uiName Expired Status Text
+     */
+    this.expiryText = "Expires on ";
+    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 }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+};
+
+export { RewardsTable as sqm_rewards_table, RewardTableDateCell as sqm_rewards_table_date_cell, RewardTableDateColumn as sqm_rewards_table_date_column, RewardTableRewardsCell as sqm_rewards_table_reward_cell, RewardsTableColumn as sqm_rewards_table_reward_column, RewardTableSourceCell as sqm_rewards_table_source_cell, RewardTableUserColumn as sqm_rewards_table_source_column, RewardTableStatusCell as sqm_rewards_table_status_cell, RewardTableStatusColumn as sqm_rewards_table_status_column };