@saasquatch/mint-components 1.6.4 → 1.6.5-10

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

@@ -1,117 +1,117 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { b as browser, f as useReducer, u as useEffect, m as h$1, k as useMemo } from './stencil-hooks.module-203eab48.js';
-import { i as intl } from './global-9ad01db9.js';
+import { i as intl } from './global-09167b08.js';
 import './use-callback-f03b0607.js';
 import { d as dist, N, O, x, v as vn, i as isDemo } from './index.module-48cc9ee0.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './mixins-59fd94b7.js';
-import { c as createStyleSheet } from './JSS-506b9295.js';
-import { G as GenericTableView } from './GenericTableView-5dd51546.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-60dbb00f.js';
-import { u as useChildElements } from './useChildElements-03c9004c.js';
+import './mixins-f60a614c.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { G as GenericTableView } from './GenericTableView-ce26115f.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-f406e379.js';
+import { u as useChildElements } from './useChildElements-11279a92.js';
 import { l as luxon } from './luxon-198ac0b0.js';
-import { g as generateUserError } from './useReferralTable-14fa76c9.js';
-import { l as luxonLocale } from './utils-d7bbb0e2.js';
+import { g as generateUserError } from './useReferralTable-189c1f7a.js';
+import { l as luxonLocale } from './utils-334c1e34.js';
 
-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 Tokens",
-        unit: "TOKEN",
-        dateRedeemed: 1643612046258,
-      }
-      : null,
-    referral: null,
-    rewardRedemptionTransactions: {
-      data: [],
-    },
-  };
+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 Tokens",
+        unit: "TOKEN",
+        dateRedeemed: 1643612046258,
+      }
+      : null,
+    referral: null,
+    rewardRedemptionTransactions: {
+      data: [],
+    },
+  };
 };
 
-const debug = browser("sq:useRewardsTable");
-const CSS_NAMESPACE = "sqm-rewards-table";
+const debug = browser("sq:useRewardsTable");
+const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = dist.gql `
   query getRewards(
     $limit: Int!
@@ -132,7 +132,12 @@ const GET_REWARDS = dist.gql `
           count
           data {
             meta {
+              status
+              integration {
+                name
+              }
               message
+              customMeta
             }
             id
             type
@@ -210,779 +215,780 @@ const GET_REWARDS = dist.gql `
       }
     }
   }
-`;
-function useRewardsTable(props, emptyElement, loadingElement) {
-  var _a, _b;
-  const user = N();
-  const programIdContext = O();
-  const locale = x();
-  // 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, } = vn(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.hideLabels,
-        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
-    debug("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
-    debug("Error rendering label", e);
-    const userError = generateUserError(e);
-    return (h("details", null,
-      h("summary", null, "Error"),
-      userError));
-  }
+`;
+function useRewardsTable(props, emptyElement, loadingElement) {
+  var _a, _b;
+  const user = N();
+  const programIdContext = O();
+  const locale = x();
+  // 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, } = vn(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, h)));
+      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.hideLabels,
+        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
+    debug("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
+    debug("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 Hide Column Labels */
-    this.hideLabels = false;
-    /** @uiName Previous button text  */
-    this.prevLabel = "Prev";
-    /** @uiName View More button text  */
-    this.moreLabel = "Next";
-    /**
-     * 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 Mobile Breakpoint  */
-    this.smBreakpoint = 599;
-    /** @uiName Tablet Breakpoint  */
-    this.mdBreakpoint = 799;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const empty = h(EmptySlot, null);
-    const loading = h(LoadingSlot, null);
-    const { states, data, callbacks, elements } = isDemo()
-      ? useRewardsTableDemo(this, empty, loading)
-      : useRewardsTable(this, empty, loading);
-    useRequestRerender([this.perPage]);
-    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)));
-}
-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 } = useMemo(() => mockRewardData(props.perPage), [props.perPage]);
-  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) => {
-      var _a, _b;
-      return component.slot !== "loading" &&
-        component.slot !== "empty" &&
-        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
-        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
-    });
-    // get the column titles (renderLabel is asynchronous)
-    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
-      var _a;
-      const slot = (_a = c === null || c === void 0 ? void 0 : c.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot");
-      // Custom plop targets
-      if (c.tagName === "RAISINS-PLOP-TARGET" &&
-        slot !== "loading" &&
-        slot !== "empty") {
-        c.style.position = "absolute";
-        c.setAttribute("slot", "column-" + idx);
-        // Replace add text with a simple + button
-        const plopTarget = c.firstElementChild.childNodes[1];
-        plopTarget.innerHTML = "＋";
-        plopTarget.style.lineHeight = "20px";
-        return tryMethod(c, () => c.renderLabel(idx));
-      }
-      return 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.hideLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-      referralData: [],
-      mdBreakpoint: 799,
-      smBreakpoint: 599,
-    },
-    elements: {
-      columns: content.columns,
-      rows: content.rows,
-      emptyElement,
-      loadingElement,
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-  return demoProps;
+const RewardsTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @uiName Number of rewards per page */
+    this.perPage = 4;
+    /** @uiName Hide Column Labels */
+    this.hideLabels = false;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /**
+     * 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 Mobile Breakpoint  */
+    this.smBreakpoint = 599;
+    /** @uiName Tablet Breakpoint  */
+    this.mdBreakpoint = 799;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot, null);
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = isDemo()
+      ? useRewardsTableDemo(this, empty, loading)
+      : useRewardsTable(this, empty, loading);
+    useRequestRerender([this.perPage]);
+    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)));
+}
+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 } = useMemo(() => { var _a; return ((_a = props.demoData) === null || _a === void 0 ? void 0 : _a.mockData) || mockRewardData(props.perPage); }, [props.perPage]);
+  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) => {
+      var _a, _b;
+      return component.slot !== "loading" &&
+        component.slot !== "empty" &&
+        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
+        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
+    });
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
+      var _a;
+      const slot = (_a = c === null || c === void 0 ? void 0 : c.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot");
+      // Custom plop targets
+      if (c.tagName === "RAISINS-PLOP-TARGET" &&
+        slot !== "loading" &&
+        slot !== "empty") {
+        c.style.position = "absolute";
+        c.setAttribute("slot", "column-" + idx);
+        // Replace add text with a simple + button
+        const plopTarget = c.firstElementChild.childNodes[1];
+        plopTarget.innerHTML = "＋";
+        plopTarget.style.lineHeight = "20px";
+        return tryMethod(c, () => c.renderLabel(idx));
+      }
+      return 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);
+    // @ts-ignore
+    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.hideLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+      mdBreakpoint: 799,
+      smBreakpoint: 599,
+    },
+    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 date;
-  }
+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 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"]
-     * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
-     */
-    this.dateShown = "dateGiven";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  async renderCell(data, locale) {
-    return (h("sqm-rewards-table-date-cell", { date: data[this.dateShown], locale: locale }));
-  }
-  async renderLabel() {
-    return this.columnTitle;
-  }
-  render() {
-    useRequestRerender([this.dateShown, this.columnTitle]);
-    return h(Host, { style: { display: "none" } });
-  }
+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"]
+     * @uiEnumNames ["Date Given", "Date Expires", "Date Cancelled", "Date Redeemed", "Date Scheduled For"]
+     */
+    this.dateShown = "dateGiven";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-date-cell", { date: data[this.dateShown], locale: locale }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.dateShown, this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
 };
 
-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);
-  }
-  // TODO: value function from portalv2
-  render() {
-    intl.locale = this.locale;
-    const RewardValue = ({ reward }) => {
-      var _a;
-      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 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",
-          defaultMessage: this.redeemedText,
-        }, {
-          redeemedAmount: reward.prettyRedeemedCredit,
-        }))) : (h("div", null, intl.formatMessage({
-          id: "availableText",
-          defaultMessage: this.availableText,
-        }, {
-          availableAmount: reward.statuses.includes("PENDING")
-            ? reward.prettyAssignedCredit
-            : reward.prettyAvailableValue,
-        })));
-        const style = {
-          Progress: {
-            height: "3px",
-            width: "100%",
-            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",
-            width: "150px",
-            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 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);
+  }
+  // TODO: value function from portalv2
+  render() {
+    intl.locale = this.locale;
+    const RewardValue = ({ reward }) => {
+      var _a;
+      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 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",
+          defaultMessage: this.redeemedText,
+        }, {
+          redeemedAmount: reward.prettyRedeemedCredit,
+        }))) : (h("div", null, intl.formatMessage({
+          id: "availableText",
+          defaultMessage: this.availableText,
+        }, {
+          availableAmount: reward.statuses.includes("PENDING")
+            ? reward.prettyAssignedCredit
+            : reward.prettyAvailableValue,
+        })));
+        const style = {
+          Progress: {
+            height: "3px",
+            width: "100%",
+            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",
+            width: "150px",
+            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 Copied Fuel Tank Text
-     */
-    this.copyText = "Copied!";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  async renderCell(data, 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,
-      this.redeemedText,
-      this.availableText,
-      this.copyText,
-    ]);
-    return h(Host, { style: { display: "none" } });
-  }
+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 Copied Fuel Tank Text
+     */
+    this.copyText = "Copied!";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, 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,
+      this.redeemedText,
+      this.availableText,
+      this.copyText,
+    ]);
+    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));
-    };
-    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 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));
+    };
+    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 Soruce Column Title
-     */
-    this.columnTitle = "Source";
-    /**
-     * Name displayed for unknown users
-     *
-     * @uiName Anonymous User Text
-     */
-    this.anonymousUser = "Anonymous User";
-    /**
-     * Name displayed for deleted users
-     *
-     * @uiName Deleted User Text
-     */
-    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
-     * @uiWidget textArea
-     */
-    this.referralText = "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}";
-    /**
-     * Shown when a reward has been created by a source other than a referral.
-     *
-     * @uiName Reward Source Text
-     * @uiWidget textArea
-     */
-    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, 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,
-      this.rewardExchangeText,
-      this.referralText,
-      this.rewardSourceText,
-    ]);
-    return h(Host, { style: { display: "none" } });
-  }
+const RewardTableUserColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Soruce Column Title
+     */
+    this.columnTitle = "Source";
+    /**
+     * Name displayed for unknown users
+     *
+     * @uiName Anonymous User Text
+     */
+    this.anonymousUser = "Anonymous User";
+    /**
+     * Name displayed for deleted users
+     *
+     * @uiName Deleted User Text
+     */
+    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
+     * @uiWidget textArea
+     */
+    this.referralText = "{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}";
+    /**
+     * Shown when a reward has been created by a source other than a referral.
+     *
+     * @uiName Reward Source Text
+     * @uiWidget textArea
+     */
+    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, 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,
+      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);
-    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 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;
-    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;
-      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 || "en"))).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 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);
+    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 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;
+    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;
+      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 || "en"))).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
-     * @uiWidget textArea
-     */
-    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
-    /**
-     * Text shown before the date of an expiring reward.
-     *
-     * @uiName Expiry Date Prefix
-     */
-    this.expiryText = "Expires on ";
-    /**
-     * Displayed when a reward is pending due to W9 compliance.
-     *
-     * @uiName W9 Pending Text
-     */
-    this.pendingUsTax = "W-9 required";
-    /**
-     * Text shown before the available date of a pending reward.
-     *
-     * @uiName Pending 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) {
-    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,
-      this.statusText,
-      this.expiryText,
-      this.pendingScheduled,
-      this.pendingUsTax,
-      this.pendingUnhandled,
-    ]);
-    return h(Host, { style: { display: "none" } });
-  }
+const RewardTableStatusColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Column Title
+     */
+    this.columnTitle = "Status";
+    /**
+     * @uiName Reward Status Text
+     * @uiWidget textArea
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    /**
+     * Text shown before the date of an expiring reward.
+     *
+     * @uiName Expiry Date Prefix
+     */
+    this.expiryText = "Expires on ";
+    /**
+     * Displayed when a reward is pending due to W9 compliance.
+     *
+     * @uiName W9 Pending Text
+     */
+    this.pendingUsTax = "W-9 required";
+    /**
+     * Text shown before the available date of a pending reward.
+     *
+     * @uiName Pending 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) {
+    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,
+      this.statusText,
+      this.expiryText,
+      this.pendingScheduled,
+      this.pendingUsTax,
+      this.pendingUnhandled,
+    ]);
+    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 };