@saasquatch/mint-components 1.5.0-4 → 1.5.0-43

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

@@ -0,0 +1,731 @@
+import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
+import { e as useReducer, u as useEffect, m as h$1 } from './stencil-hooks.module-2f159754.js';
+import { i as intl } from './global-baef42b7.js';
+import './use-callback-d8ef4b5d.js';
+import { i as ie, M, A as An, a as mn, j as jn } from './index.module-c6efec0e.js';
+import './extends-c31f1eff.js';
+import './insertcss-bcaf3818.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-25965d2b.js';
+import { g as gql } from './index-0e5ee1c5.js';
+import { u as useRerenderListener, a as useChildElements, b as useRequestRerender } from './useChildElements-b6a77993.js';
+import { l as luxon } from './luxon-5fa22651.js';
+import { l as luxonLocale } from './utils-1d345130.js';
+import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = 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 {
+            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
+            statuses
+            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 = ie();
+  const programIdContext = M();
+  const locale = An();
+  // 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, } = mn(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);
+      },
+    },
+  };
+}
+function generateUserError(e) {
+  try {
+    return JSON.stringify(e);
+  }
+  catch (e) {
+    return "An unknown error";
+  }
+}
+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 = 3;
+    /** @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;
+    /** @uiName Empty State Image Link  */
+    this.emptyStateImgUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
+    /** @uiName Empty State Title  */
+    this.emptyStateTitle = "View your rewards";
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "See all the rewards you have earned from referring friends and completing tasks";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = jn()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    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) {
+  return cjs({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      namespace: CSS_NAMESPACE,
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateTitle: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
+      loadingElement: h(LoadingSlot, null),
+      // TODO: This should be smarter
+      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+function EmptySlot({ emptyStateImgUrl, emptyStateTitle, emptyStateText, }) {
+  return (h("div", { slot: "empty", style: { display: "contents" } }, h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } }, h("img", { src: emptyStateImgUrl, style: { width: "100px" } }), h("div", null, h("b", null, emptyStateTitle)), h("div", { style: {
+      marginTop: "var(--sl-spacing-xx-small)",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    } }, emptyStateText))))));
+}
+
+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) {
+    const reward = data === null || data === void 0 ? void 0 : data[0];
+    // TODO: dateShown validation?
+    return (h("sqm-rewards-table-date-cell", { date: reward[this.dateShown] }));
+  }
+  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)",
+      },
+    };
+    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.prettyRedeemedNumber === "1";
+      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",
+            width: "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%",
+            maxHeight: "60px",
+            whiteSpace: "nowrap",
+            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 Available Amount Text
+     */
+    this.availableText = "{availableAmount} available";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, locale: locale }));
+  }
+  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 }) => {
+      return (h("span", null, intl.formatMessage({
+        id: "rewardSourceText",
+        defaultMessage: this.rewardSourceText,
+      }, {
+        rewardSource: reward.rewardSource,
+      })));
+    };
+    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, getFullName(this.reward.referral.referredUser)))) : 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 {Automated} 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.locale = "en";
+  }
+  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)}`;
+    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 }, date)));
+  }
+};
+
+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 };