@saasquatch/mint-components 1.3.2-5 → 1.3.2-9

package/dist/esm/{sqm-divided-layout_28.entry.js → sqm-divided-layout_30.entry.js}

@@ -1,10 +1,9 @@
 import { h, r as registerInstance, c as Host, d as getAssetPath } from './index-17b4da69.js';
 import { m as h$1, j as useState, e as useEffect, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, c as createCommonjsModule, a as commonjsGlobal, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-5ecbf81a.js';
+import { i as intl, a as insertCSS } from './global-923aa737.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne } from './index.module-f80561db.js';
+import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-90d2c3ad.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import './tslib.es6-7ac9d7e4.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as getProps, a as getMissingProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -12,23 +11,21 @@ import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql } from './index-2f5dd0a1.js';
-import { u as useRerenderListener } from './re-render-9ab5fe0f.js';
-import { u as useChildElements } from './useChildElements-506f00d0.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-256c096f.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-747ffda8.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-e06f2f7f.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-c3b955b7.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-fff5d35d.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
+import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-a3f510db.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8a3f374b.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f2304ad9.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-824c8242.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-4ce8d89d.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-90781be2.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-a3ebc4a2.js';
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-c317518e.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-7b8a02b1.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
 
@@ -5875,6 +5872,21 @@ function ReferralTableView(props) {
       h("sl-button", { size: "small", loading: states.loading, disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
 }
 
+function useChildElements() {
+  const host = P$1();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = useState(initialState);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
 const GET_REFERRER_DATA = gql `
   query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
     viewer {
@@ -14794,7 +14806,7 @@ function useRewardExchangeList(props) {
   }), {
     selectedItem: undefined,
     selectedStep: undefined,
-    redeemStage: "",
+    redeemStage: "chooseReward",
     amount: 0,
     exchangeError: false,
   });
@@ -15077,6 +15089,24 @@ function RewardExchangeView(props) {
       textAlign: "center",
       cursor: "pointer",
     },
+    ProgressBar: {
+      fontSize: "80%",
+      marginBottom: "20px",
+      "& .text-area": {
+        marginTop: "5px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        marginBottom: "6px",
+        "& .text": {
+          flex: "1 1 0",
+        },
+        "& .text.subdued": {
+          color: "#BDBDBD",
+        },
+      },
+    },
   };
   // JSS config
   jss.setup(create());
@@ -15109,16 +15139,14 @@ function RewardExchangeView(props) {
   }
   function chooseReward() {
     var _a;
-    const nextStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? "confirmation"
-      : "chooseAmount";
-    console.log({ nextStage, ruleType: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType });
+    const nextStage = "chooseAmount";
+    // console.log({ nextStage, ruleType: selectedItem?.ruleType });
     return [
       h("div", { style: {
           display: "grid",
           justifyContent: "center",
           gap: "20px",
-          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
         } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
@@ -15129,23 +15157,35 @@ function RewardExchangeView(props) {
         };
         const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
           ? item.prettySourceValue
-          : `${item.sourceMinValue} to ${item.sourceMaxValue} ${item.sourceUnit}`;
+          : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
-            (item === null || item === void 0 ? void 0 : item.imageUrl) && (h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") })),
-            h("p", { style: { margin: "0", flex: "1", fontSize: "90%" } },
+            // item?.imageUrl &&
+            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
+            h("p", { style: {
+                textAlign: "left",
+                margin: "0",
+                flex: "1",
+                fontSize: "90%",
+                padding: "8px"
+              } },
               h("b", null, item.description),
               h("p", { style: { margin: "0" } }, amount),
               item.unavailableReasonCode && (h("p", { style: {
                   fontSize: "70%",
                   color: "#F2994A",
                   marginTop: "0",
-                } }, item.unavailableReasonCode))))));
+                } }, item.unavailableReasonCode ===
+                "INSUFFICIENT_REDEEMABLE_CREDIT"
+                ? "Not enough points"
+                : item.unavailableReasonCode))))));
       })),
       h("div", { class: sheet.classes.Buttons },
         h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
-        h("a", { onClick: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
+        h("a", { 
+          //   onClick={() => refs.drawerRef.current?.hide()}
+          style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
     ];
   }
   function chooseAmount() {
@@ -15158,11 +15198,9 @@ function RewardExchangeView(props) {
         h("sl-button", { onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount, style: { display: "block" }, class: sheet.classes.Button }, "Continue"),
         h("a", { onClick: () => callbacks.setStage("chooseReward"), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
   }
-  console.log({ selectedItem, selectedStep });
+  //   console.log({ selectedItem, selectedStep });
   function confirmation() {
-    const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? "chooseReward"
-      : "chooseAmount";
+    const previousStage = "chooseAmount";
     return (h("div", null,
       h("h2", null, "Confirm and redeem"),
       h("div", { style: { textAlign: "center" } },
@@ -15188,8 +15226,7 @@ function RewardExchangeView(props) {
     return (h("div", { style: { textAlign: "center" } },
       h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
       h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      h("sl-button", { onClick: () => { var _a, _b; return (_b = (_a = refs.drawerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(); } }, "Done")));
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode)));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -15200,20 +15237,14 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { style: { fontSize: "80%", marginBottom: "20px" } },
-      h("div", { style: {
-          marginTop: "5px",
-          display: "flex",
-          justifyContent: "center",
-          textAlign: "center",
-          whiteSpace: "nowrap",
-          marginBottom: "6px",
-        } }, Object.keys(stageProgressList).map((stage) => {
-        if (stage === states.redeemStage)
-          return (h("b", { style: { flex: "1 1 0" } },
-            " ",
-            stageProgressList[stage]));
-        return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
+    return (h("div", { class: sheet.classes.ProgressBar },
+      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage) {
+          return h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
       })),
       h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
@@ -15222,10 +15253,7 @@ function RewardExchangeView(props) {
       return "";
     let previousStage = "";
     if (states.redeemStage === "confirmation") {
-      previousStage =
-        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
-          ? "chooseReward"
-          : "chooseAmount";
+      previousStage = "chooseAmount";
     }
     else if (states.redeemStage === "chooseAmount") {
       previousStage = "chooseReward";
@@ -15235,16 +15263,15 @@ function RewardExchangeView(props) {
         h(LeftArrow, null),
         " Back")));
   };
+  console.log(props);
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("div", null,
-      h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
-        h(BackButton, null),
-        stageMap(),
-        currentStage && currentStage(),
-        states.exchangeError &&
-          "Something went wrong. Please contact support or try again."),
-      h("sl-button", { loading: states.loading, onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+    h("div", { style: { width: "1920px" } },
+      h(BackButton, null),
+      stageMap(),
+      currentStage && currentStage(),
+      states.exchangeError &&
+        "Something went wrong. Please contact support or try again.")));
 }
 
 const SqmRewardExchangeList = class {
@@ -15281,7 +15308,7 @@ function useRewardExchangeListDemo(props) {
       content: {
         text: props,
       },
-      redeemStage: "",
+      redeemStage: "chooseReward",
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
@@ -15302,6 +15329,348 @@ function useRewardExchangeListDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const style$7 = {
+  THead: {
+    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
+    "text-align": "left",
+  },
+  TCell: {
+    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
+  },
+  TRow: {
+    "border-top": "1px solid #EAEAEA",
+  },
+  Table: {
+    "border-collapse": "collapse",
+    width: "100%",
+  },
+  ButtonContainer: {
+    display: "flex",
+    "justify-content": "flex-end",
+    "margin-top": "var(--sl-spacing-small)",
+    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+  },
+};
+jss.setup(create());
+const sheet$7 = jss.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
+function GenericTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString$7),
+    h("table", { class: sheet$7.classes.Table },
+      data.textOverrides.showLabels && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet$7.classes.THead },
+          h(TextSpanView, { type: "h3" }, column))))))),
+      h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet$7.classes.TRow, style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet$7.classes.TCell },
+          h(TextSpanView, { type: "p" }, cell)))))))))),
+    h("div", { class: sheet$7.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+}
+
+function LoadingSlot$1() {
+  return (h("slot", { name: "loading" },
+    h(LoadingSkeleton, null)));
+}
+function LoadingSkeleton() {
+  return (h("div", { style: { width: "100%" } },
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    h("sl-skeleton", null)));
+}
+function EmptySlot$1({ label }) {
+  return (h("slot", { name: "empty" },
+    h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (h("div", { style: { width: "100%" } },
+    h("sqm-text", null,
+      h("h3", { style: { color: "#777777" } }, label))));
+}
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = gql `
+  query getRewards(
+    $limit: Int!
+    $offset: Int!
+    $rewardFilter: RewardFilterInput
+  ) {
+    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
+            statuses
+            globalRewardKey
+            programRewardKey
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function useRewardsTable(props, emptyElement, loadingElement) {
+  var _a, _b;
+  const user = T$1();
+  const programIdContext = M$1();
+  // 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, } = sn(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,
+  }, !(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$1(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$1(c, () => c.renderCell([r], c)));
+      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);
+  console.log(states.loading, content.loading, rewardsData);
+  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,
+      },
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        if (states.currentPage === 0)
+          callbacks.setLimit(props.perPage);
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        if (states.currentPage === 1)
+          callbacks.setLimit(props.perPage - 1);
+        callbacks.setCurrentPage(states.currentPage - 1);
+      },
+    },
+  };
+}
+function generateUserError$1(e) {
+  try {
+    return JSON.stringify(e);
+  }
+  catch (e) {
+    return "An unknown error";
+  }
+}
+async function tryMethod$1(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
+    if (callback.name === "renderReferrerCell") {
+      console.error("column does not have a renderReferrerCell method.");
+    }
+    else {
+      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$1(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 Show Referred by user in table  */
+    this.showReferrer = false;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot$1, { label: "No Rewards Yet" });
+    const loading = h(LoadingSlot$1, null);
+    const { states, data, callbacks, elements } = j$1()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+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(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: h(LoadingSkeleton, 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 });
+}
+
+const RewardsTableColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Hide dropdown details of reward
+     */
+    this.hideDetails = false;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  //@ts-ignore
+  async renderCell(data) {
+    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
+    console.log({ data });
+    return (h("sqm-referral-table-rewards-cell", { rewards: data, hideDetails: this.hideDetails }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+};
+
 const debug$1 = browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
@@ -15394,19 +15763,19 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const style$7 = {
+const style$8 = {
   HostBlock: HostBlock,
   buttonStyle: {
     display: "block",
   },
 };
 jss.setup(create());
-const sheet$7 = jss.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = jss.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
-    h("style", { type: "text/css" }, styleString$7),
-    h("sl-button", { class: sheet$7.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
+    h("style", { type: "text/css" }, styleString$8),
+    h("sl-button", { class: sheet$8.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));
 }
@@ -17924,6 +18293,9 @@ const RewardBalanceCashUSD = createHookStory(() => {
 const ProgramGoals = createHookStory(() => {
   const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
   return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
+});
+const CustomField = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField");
 });
 
 const UseBigStat = /*#__PURE__*/Object.freeze({
@@ -17955,7 +18327,8 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsAvailableWithSlash: RewardsAvailableWithSlash,
   RewardBalance: RewardBalance,
   RewardBalanceCashUSD: RewardBalanceCashUSD,
-  ProgramGoals: ProgramGoals
+  ProgramGoals: ProgramGoals,
+  CustomField: CustomField
 });
 
 function setupGraphQL$4() {
@@ -18262,11 +18635,55 @@ const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
   VariableCreditReward: VariableCreditReward
 });
 
+const UseRewardsTable_stories = {
+  title: "Hooks / useRewardsTable",
+};
+function setupGraphQL$7() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    L$1({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      L$1(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const RewardsTableWithProgram = createHookStory(() => {
+  setupGraphQL$7();
+  A$1("sam-partner-test-2");
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-column", null)));
+});
+const RewardsTableNoProgram = createHookStory(() => {
+  setupGraphQL$7();
+  A$1(undefined);
+  return (h("sqm-rewards-table", null,
+    h("sqm-rewards-table-column", null)));
+});
+
+const UseRewardsTable = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UseRewardsTable_stories,
+  RewardsTableWithProgram: RewardsTableWithProgram,
+  RewardsTableNoProgram: RewardsTableNoProgram
+});
+
 const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
 const UseTaskCard_stories = {
   title: "Hooks / useTaskCard",
 };
-function setupGraphQL$7() {
+function setupGraphQL$8() {
   const id = "sam+klip@saasquat.ch";
   const accountId = id;
   const programId = "klip-referral-program";
@@ -18290,7 +18707,7 @@ function setupGraphQL$7() {
   return { id, accountId };
 }
 const TaskCard = createHookStory(() => {
-  setupGraphQL$7();
+  setupGraphQL$8();
   return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
 });
 
@@ -18303,15 +18720,15 @@ const UseTaskCard = /*#__PURE__*/Object.freeze({
 const NewPortal_stories = {
   title: "New Portal",
 };
-const style$8 = {
+const style$9 = {
   HeaderSubtitleBold: {
     "font-weight": 500,
     "text-decoration": "underline",
   },
 };
 jss.setup(create());
-const sheet$8 = jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = jss.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 const barProps = {
   data: {
     programs: [
@@ -18406,7 +18823,7 @@ const Dashboard = () => {
     hide: false,
   };
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$8),
+    h("style", { type: "text/css" }, styleString$9),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18464,7 +18881,7 @@ const Dashboard = () => {
 };
 const EditProfile$2 = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$8),
+    h("style", { type: "text/css" }, styleString$9),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalProfileView, Object.assign({}, {
@@ -18528,7 +18945,7 @@ const EditProfile$2 = () => {
 };
 const Commissions = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$8),
+    h("style", { type: "text/css" }, styleString$9),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18541,7 +18958,7 @@ const Commissions = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -18553,7 +18970,7 @@ const Commissions = () => {
 };
 const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$8),
+    h("style", { type: "text/css" }, styleString$9),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18566,7 +18983,7 @@ const Activity = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -20640,7 +21057,7 @@ function ProgressBarView(props) {
     ProgressBar: {
       "& .progress-bar": {
         height: "15px",
-        marginTop: "var(--sl-spacing-xx-large)",
+        marginTop: steps ? "var(--sl-spacing-x-large)" : "var(--sl-spacing-xx-large)",
         marginBottom: "var(--sl-spacing-xx-large)",
         marginRight: "var(--sl-spacing-x-small)",
         fontSize: "var(--sl-font-size-x-small)",
@@ -20919,7 +21336,7 @@ function ProgressBarView(props) {
 }
 
 function TaskCardView(props) {
-  const { points, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpire, dateExpires, buttonText, buttonLink, loading, } = props;
+  const { rewardAmount, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpiry, dateExpires, buttonText, buttonLink, loading, } = props;
   console.log({ props });
   const checkmark_circle$1 = checkmark_circle();
   const arrow_left_right$1 = arrow_left_right();
@@ -21008,11 +21425,11 @@ function TaskCardView(props) {
       h("style", { type: "text/css" }, styleString),
       h("div", { class: sheet.classes.Header },
         showComplete && h("span", { class: "icon" }, checkmark_circle$1),
-        h("span", { class: "value" }, points),
+        h("span", { class: "value" }, rewardAmount),
         h("span", { class: "text" }, rewardUnit)),
       h("div", { class: sheet.classes.Title }, cardTitle),
-      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props))),
       h(Details, { description: description }),
+      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props))),
       h("div", { class: sheet.classes.Footer },
         h("span", { class: "text" },
           repeatable && (h("div", null,
@@ -21021,11 +21438,11 @@ function TaskCardView(props) {
               "Completed ",
               repetitions,
               " times"))),
-          showExpire && (h("span", null,
+          showExpiry && (h("span", null,
             "Ends ",
             " ",
             dateExpires))),
-        h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
+        h("sl-button", { class: "action", size: "small", onClick: () => window.open(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
           ? "Task completed"
           : buttonText)))));
 }
@@ -21094,8 +21511,8 @@ const resizable = {
 };
 const NotRepeatable = () => {
   const oneAction = {
-    points: 20,
-    showExpire: false,
+    rewardAmount: 20,
+    showExpiry: false,
     rewardUnit: "Points",
     cardTitle: "Complete a survey",
     repeatable: false,
@@ -21107,11 +21524,11 @@ const NotRepeatable = () => {
     loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
     rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
-    showExpire: false,
+    showExpiry: false,
     goal: 5,
     repeatable: false,
     steps: true,
@@ -21121,11 +21538,11 @@ const NotRepeatable = () => {
     loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
     rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
-    showExpire: false,
+    showExpiry: false,
     goal: 500,
     repeatable: false,
     unit: "$",
@@ -21168,13 +21585,13 @@ const NotRepeatable = () => {
 };
 const NotRepeatableWithExpiry = () => {
   const oneAction = {
-    points: 20,
+    rewardAmount: 20,
     rewardUnit: "Points",
     cardTitle: "Complete a survey",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Take survey",
     goal: 1,
-    showExpire: true,
+    showExpiry: true,
     repeatable: false,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
@@ -21182,7 +21599,7 @@ const NotRepeatableWithExpiry = () => {
     loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
     rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
@@ -21190,14 +21607,14 @@ const NotRepeatableWithExpiry = () => {
     steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    showExpire: true,
+    showExpiry: true,
     repeatable: false,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
     loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
     rewardUnit: "Points",
     repeatable: false,
     cardTitle: "Spend $500 at our Store",
@@ -21206,7 +21623,7 @@ const NotRepeatableWithExpiry = () => {
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    showExpire: true,
+    showExpiry: true,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
     loading: false,
@@ -21245,9 +21662,9 @@ const NotRepeatableWithExpiry = () => {
 };
 const Repeatable = () => {
   const oneAction = {
-    points: 20,
+    rewardAmount: 20,
     rewardUnit: "Points",
-    showExpire: false,
+    showExpiry: false,
     cardTitle: "Complete a survey",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Take survey",
@@ -21258,9 +21675,9 @@ const Repeatable = () => {
     loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
     rewardUnit: "Points",
-    showExpire: false,
+    showExpiry: false,
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     repeatable: true,
@@ -21272,9 +21689,9 @@ const Repeatable = () => {
     loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
     rewardUnit: "Points",
-    showExpire: false,
+    showExpiry: false,
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     repeatable: true,
@@ -21325,21 +21742,21 @@ const Repeatable = () => {
 };
 const RepeatableWithExpiry = () => {
   const oneAction = {
-    points: 20,
+    rewardAmount: 20,
     rewardUnit: "Points",
     cardTitle: "Complete a survey",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Take survey",
     goal: 1,
     repeatable: true,
-    showExpire: true,
+    showExpiry: true,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
     showProgressBar: false,
     loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
     rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
@@ -21348,13 +21765,13 @@ const RepeatableWithExpiry = () => {
     steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    showExpire: true,
+    showExpiry: true,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
     loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
     rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
@@ -21363,7 +21780,7 @@ const RepeatableWithExpiry = () => {
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    showExpire: true,
+    showExpiry: true,
     dateExpires: "Nov 1, 2021",
     buttonLink: "https://example.com/",
     loading: false,
@@ -24553,7 +24970,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property      | Attribute      | Description | Type                                                                                                                                                                     | Default                    |\r\n| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\r\n| `demoData`    | --             |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`  | `email-label`  |             | `string`                                                                                                                                                                 | `\"Email\"`                  |\r\n| `submitLabel` | `submit-label` |             | `string`                                                                                                                                                                 | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\r\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\r\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\r\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -24561,7 +24978,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Aut
 
 const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description | Type                                                                                                                                                                                        | Default                                                                                           |\r\n| ------------------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\r\n| `emailVerificationHeader` | `email-verification-header` |             | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |             | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\r\n| `verifyMessage`           | `verify-message`            |             | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\r\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -25072,6 +25489,251 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
+const baseResponse = (data) => ({
+  states: {
+    content: null,
+    redeemStage: "chooseReward",
+    amount: 0,
+    exchangeError: false,
+    loading: false,
+    selectedItem: null,
+    selectedStep: null,
+  },
+  data: {
+    exchangeList: data,
+  },
+  callbacks: {
+    exchangeReward: null,
+    openDrawer: null,
+    setStage: null,
+    setExchangeState: null,
+    refs: null,
+  },
+  refs: null,
+});
+const baseReward$2 = {
+  key: "",
+  name: "",
+  description: "",
+  imageUrl: "",
+  available: true,
+  unavailableReason: null,
+  unavailableReasonCode: null,
+  ruleType: "FIXED_GLOBAL_REWARD",
+  sourceUnit: "POINT",
+  sourceValue: 10,
+  prettySourceValue: "10 SaaSquatch Points",
+  sourceMinValue: null,
+  prettySourceMinValue: null,
+  sourceMaxValue: null,
+  prettySourceMaxValue: null,
+  destinationMinValue: null,
+  prettyDestinationMinValue: null,
+  destinationMaxValue: null,
+  prettyDestinationMaxValue: null,
+  globalRewardKey: "",
+  destinationUnit: null,
+  steps: [],
+};
+const notEnoughPoints = {
+  available: false,
+  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
+};
+const usTax = {
+  available: false,
+  unavailableReasonCode: "US_TAX",
+};
+const imageUrl = (props) => ({
+  imageUrl: props,
+});
+const description = (props) => ({
+  description: props,
+});
+const fixedValue = (props) => ({
+  prettySourceValue: props,
+});
+const variableValue = (min, max, text) => ({
+  ruleType: "VARIABLE_CREDIT_REWARD",
+  sourceMinValue: min,
+  prettySourceMinValue: min + " " + text,
+  sourceMaxValue: max,
+  prettySourceMaxValue: max + " " + text,
+});
+const test = {
+  ...baseResponse([
+    {
+      ...baseReward$2,
+      ...description("Free swag with a promo code"),
+      ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
+      ...fixedValue("40 SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...description("Visa® Prepaid Card USD"),
+      ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+      ...variableValue(20, 80, "SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...description("A very exclusive gift box"),
+      ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
+      ...fixedValue("30 SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...description("$50 Store credit"),
+      ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
+      ...fixedValue("100 SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...description("Variable amount of store credit"),
+      ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
+      ...variableValue(20, 100, "SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...notEnoughPoints,
+      ...description("A very rare cactus"),
+      ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
+      ...fixedValue("2000 SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...usTax,
+      ...description("$1000 Store credit"),
+      ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
+      ...fixedValue("2000 SaaSquatch Points"),
+    },
+    {
+      ...baseReward$2,
+      ...notEnoughPoints,
+      ...description("A holiday gift box"),
+      ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
+      ...fixedValue("100 SaaSquatch Points"),
+    },
+  ]),
+};
+const test2 = {
+  states: {
+    content: {
+      text: {
+        buttonText: "Exchange Rewards",
+        ignored: true,
+      },
+    },
+    redeemStage: "chooseAmount",
+    amount: 0,
+    exchangeError: false,
+    loading: false,
+    selectedItem: {
+      key: "r4",
+      name: "Salmon Coins",
+      description: "Points for Salmon Coins",
+      imageUrl: "data:image/jpeg;base64,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",
+      available: true,
+      unavailableReason: null,
+      unavailableReasonCode: null,
+      ruleType: "VARIABLE_CREDIT_REWARD",
+      sourceUnit: "POINT",
+      sourceValue: null,
+      prettySourceValue: null,
+      sourceMinValue: 1,
+      prettySourceMinValue: "1 Point",
+      sourceMaxValue: 100,
+      prettySourceMaxValue: "100 Points",
+      destinationMinValue: 1,
+      prettyDestinationMinValue: "1 Salmon Coin",
+      destinationMaxValue: 100,
+      prettyDestinationMaxValue: "100 Salmons",
+      globalRewardKey: null,
+      destinationUnit: "TESTUNIT",
+      steps: [
+        {
+          sourceValue: 1,
+          prettySourceValue: "1 Point",
+          destinationValue: 1,
+          prettyDestinationValue: "1 Salmon Coin",
+          available: true,
+          unavailableReasonCode: null,
+        },
+        {
+          sourceValue: 2,
+          prettySourceValue: "2 Points",
+          destinationValue: 2,
+          prettyDestinationValue: "2 Salmons",
+          available: true,
+          unavailableReasonCode: null,
+        },
+        {
+          sourceValue: 3,
+          prettySourceValue: "3 Points",
+          destinationValue: 3,
+          prettyDestinationValue: "3 Salmons",
+          available: true,
+          unavailableReasonCode: null,
+        },
+        {
+          sourceValue: 4,
+          prettySourceValue: "4 Points",
+          destinationValue: 4,
+          prettyDestinationValue: "4 Salmons",
+          available: true,
+          unavailableReasonCode: null,
+        },
+        {
+          sourceValue: 5,
+          prettySourceValue: "5 Points",
+          destinationValue: 5,
+          prettyDestinationValue: "5 Salmons",
+          available: true,
+          unavailableReasonCode: null,
+        },
+      ],
+    },
+    selectedStep: null,
+  },
+  data: {
+    exchangeList: null,
+  },
+  callbacks: {
+    exchangeReward: null,
+    openDrawer: null,
+    setStage: null,
+    setExchangeState: null,
+    refs: {
+      drawerRef: {},
+    },
+  },
+  refs: null,
+};
+
+const RewardExchangeList_stories = {
+  title: "Components/Reward Exchange List",
+};
+const resizable$1 = {
+  width: "683px",
+  minWidth: "260px",
+  resize: "horizontal",
+  height: "fit-content",
+  overflow: "hidden",
+};
+const Default$c = () => {
+  return (h("div", { style: resizable$1 },
+    h(RewardExchangeView, Object.assign({}, test))));
+};
+const Default2 = () => {
+  return (h("div", { style: { ...resizable$1, height: "700px" } },
+    h(RewardExchangeView, Object.assign({}, test2))));
+};
+
+const RewardExchangeList = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': RewardExchangeList_stories,
+  Default: Default$c,
+  Default2: Default2
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -27700,8 +28362,10 @@ const stories = [
   Hero,
   ReferralIframe$1,
   NameFields$1,
+  RewardExchangeList,
   UseRewardExchangeList,
   UseTaskCard,
+  UseRewardsTable
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -27748,7 +28412,7 @@ const TaskCard$2 = class {
     /**
      * @uiName Reward Amount
      */
-    this.points = 0;
+    this.rewardAmount = 0;
     /**
      * @uiName Reward Unit
      */
@@ -27784,7 +28448,7 @@ const TaskCard$2 = class {
     /**
      * @uiName Show Goal Expiry
      */
-    this.showExpire = false;
+    this.showExpiry = false;
     /**
      * @uiName CTA Button Text
      */
@@ -27937,4 +28601,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, TaskCard$2 as sqm_task_card, Text as sqm_text, UserName$1 as sqm_user_name };
+export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRewardExchangeList as sqm_reward_exchange_list, RewardsTable as sqm_rewards_table, RewardsTableColumn as sqm_rewards_table_column, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, TaskCard$2 as sqm_task_card, Text as sqm_text, UserName$1 as sqm_user_name };