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

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

@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-041b5338.js');
+const global = require('./global-ff7fbc86.js');
 const useCallback = require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-6a7bda18.js');
+const index_module = require('./index.module-7dd4b981.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-require('./tslib.es6-0e81fab1.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -16,23 +15,21 @@ const mixins = require('./mixins-7b7c59fe.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d144735a.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
-const index$1 = require('./index-19309631.js');
-const reRender = require('./re-render-7cdb2d81.js');
-const useChildElements = require('./useChildElements-428ca5b8.js');
-const useDemoBigStat = require('./useDemoBigStat-ade0e873.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-a99b4cd9.js');
+const reRender = require('./re-render-6111d4bd.js');
+const useDemoBigStat = require('./useDemoBigStat-2786227e.js');
 const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
-const ShadowViewAddon = require('./ShadowViewAddon-75c18b96.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
+const ShadowViewAddon = require('./ShadowViewAddon-a85b8c8d.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-d06e1885.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-e99b4a10.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6c7f78e6.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-ee7b00ff.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a23ea292.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-680ee551.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5e955797.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-2cebd06b.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d78fd6d.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-07f86880.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-9089feb7.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-de1763c4.js');
 const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
 const sqmNameFieldsView = require('./sqm-name-fields-view-24614ac7.js');
 
@@ -5879,7 +5876,22 @@ function ReferralTableView(props) {
       index.h("sl-button", { size: "small", loading: states.loading, disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
 }
 
-const GET_REFERRER_DATA = index$1.gql `
+function useChildElements() {
+  const host = index_module.P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = _extends.useState(initialState);
+  _extends.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 = sqmLeaderboardRankView.gql `
   query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
     viewer {
       ... on User {
@@ -5926,7 +5938,7 @@ const GET_REFERRER_DATA = index$1.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = index$1.gql `
+const GET_REFERRAL_DATA = sqmLeaderboardRankView.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -6090,7 +6102,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
   }, [props.showReferrer]);
   const tick = reRender.useRerenderListener();
   const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
-  const components = useChildElements.useChildElements();
+  const components = useChildElements();
   async function getComponentData(components) {
     // filter out loading and empty states from columns array
     const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
@@ -14798,7 +14810,7 @@ function useRewardExchangeList(props) {
   }), {
     selectedItem: undefined,
     selectedStep: undefined,
-    redeemStage: "",
+    redeemStage: "chooseReward",
     amount: 0,
     exchangeError: false,
   });
@@ -15081,6 +15093,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
   jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
@@ -15113,16 +15143,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 [
       index.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",
@@ -15133,23 +15161,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 (index.h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           index.h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
-            (item === null || item === void 0 ? void 0 : item.imageUrl) && (index.h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || index.getAssetPath("./assets/Reward-icon.png") })),
-            index.h("p", { style: { margin: "0", flex: "1", fontSize: "90%" } },
+            // item?.imageUrl &&
+            index.h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || index.getAssetPath("./assets/Reward-icon.png") }),
+            index.h("p", { style: {
+                textAlign: "left",
+                margin: "0",
+                flex: "1",
+                fontSize: "90%",
+                padding: "8px"
+              } },
               index.h("b", null, item.description),
               index.h("p", { style: { margin: "0" } }, amount),
               item.unavailableReasonCode && (index.h("p", { style: {
                   fontSize: "70%",
                   color: "#F2994A",
                   marginTop: "0",
-                } }, item.unavailableReasonCode))))));
+                } }, item.unavailableReasonCode ===
+                "INSUFFICIENT_REDEEMABLE_CREDIT"
+                ? "Not enough points"
+                : item.unavailableReasonCode))))));
       })),
       index.h("div", { class: sheet.classes.Buttons },
         index.h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
-        index.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")),
+        index.h("a", { 
+          //   onClick={() => refs.drawerRef.current?.hide()}
+          style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
     ];
   }
   function chooseAmount() {
@@ -15162,11 +15202,9 @@ function RewardExchangeView(props) {
         index.h("sl-button", { onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount, style: { display: "block" }, class: sheet.classes.Button }, "Continue"),
         index.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 (index.h("div", null,
       index.h("h2", null, "Confirm and redeem"),
       index.h("div", { style: { textAlign: "center" } },
@@ -15192,8 +15230,7 @@ function RewardExchangeView(props) {
     return (index.h("div", { style: { textAlign: "center" } },
       index.h("img", { class: sheet.classes.FullImage, src: index.getAssetPath("./assets/Reward-icon.png") }),
       index.h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && index.h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      index.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) && index.h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode)));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -15204,20 +15241,14 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (index.h("div", { style: { fontSize: "80%", marginBottom: "20px" } },
-      index.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 (index.h("b", { style: { flex: "1 1 0" } },
-            " ",
-            stageProgressList[stage]));
-        return index.h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
+    return (index.h("div", { class: sheet.classes.ProgressBar },
+      index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage) {
+          return index.h("span", { class: "text" }, stageProgressList[stage]);
+        }
+        else {
+          return (index.h("span", { class: "text subdued" }, stageProgressList[stage]));
+        }
       })),
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
@@ -15226,10 +15257,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";
@@ -15239,16 +15267,15 @@ function RewardExchangeView(props) {
         index.h(LeftArrow, null),
         " Back")));
   };
+  console.log(props);
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
-    index.h("div", null,
-      index.h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
-        index.h(BackButton, null),
-        stageMap(),
-        currentStage && currentStage(),
-        states.exchangeError &&
-          "Something went wrong. Please contact support or try again."),
-      index.h("sl-button", { loading: states.loading, onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+    index.h("div", { style: { width: "1920px" } },
+      index.h(BackButton, null),
+      stageMap(),
+      currentStage && currentStage(),
+      states.exchangeError &&
+        "Something went wrong. Please contact support or try again.")));
 }
 
 const SqmRewardExchangeList = class {
@@ -15285,7 +15312,7 @@ function useRewardExchangeListDemo(props) {
       content: {
         text: props,
       },
-      redeemStage: "",
+      redeemStage: "chooseReward",
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
@@ -15306,6 +15333,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)",
+    ...mixins.gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+  },
+};
+jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+const sheet$7 = jssPresetDefault_esm.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 (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString$7),
+    index.h("table", { class: sheet$7.classes.Table },
+      data.textOverrides.showLabels && (index.h("thead", null,
+        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("th", { class: sheet$7.classes.THead },
+          index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, column))))))),
+      index.h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (index.h("tr", { class: sheet$7.classes.TRow, style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell) => (index.h("td", { class: sheet$7.classes.TCell },
+          index.h(sqmTextSpanView.TextSpanView, { type: "p" }, cell)))))))))),
+    index.h("div", { class: sheet$7.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      index.h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      index.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 (index.h("slot", { name: "loading" },
+    index.h(LoadingSkeleton, null)));
+}
+function LoadingSkeleton() {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", { style: { marginBottom: "28px" } }),
+    index.h("sl-skeleton", null)));
+}
+function EmptySlot$1({ label }) {
+  return (index.h("slot", { name: "empty" },
+    index.h(EmptySkeleton, { label: label })));
+}
+function EmptySkeleton({ label }) {
+  return (index.h("div", { style: { width: "100%" } },
+    index.h("sqm-text", null,
+      index.h("h3", { style: { color: "#777777" } }, label))));
+}
+
+const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = sqmLeaderboardRankView.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 = index_module.T();
+  const programIdContext = index_module.M();
+  // 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] = _extends.useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const { envelope: rewardsData, states, callbacks, } = index_module.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 = reRender.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 });
+  }
+  _extends.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 index.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 (index.h("details", null,
+      index.h("summary", null, "Error"),
+      userError));
+  }
+}
+
+const RewardsTable = class {
+  constructor(hostRef) {
+    index.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;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = index.h(EmptySlot$1, { label: "No Rewards Yet" });
+    const loading = index.h(LoadingSlot$1, null);
+    const { states, data, callbacks, elements } = index_module.j()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (index.h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+};
+function useRewardsTableDemo(props) {
+  return cjs.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: index.h(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: index.h(LoadingSkeleton, null),
+      // TODO: This should be smarter
+      columns: [index.h("div", null, "Name"), index.h("div", null, "Email"), index.h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const RewardsTableColumn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Reward column title
+     */
+    this.columnTitle = "Rewards";
+    /**
+     * @uiName Hide dropdown details of reward
+     */
+    this.hideDetails = false;
+    _extends.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 (index.h("sqm-referral-table-rewards-cell", { rewards: data, hideDetails: this.hideDetails }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    reRender.useRequestRerender([this.columnTitle]);
+    return index.h(index.Host, { style: { display: "none" } });
+  }
+};
+
 const debug$1 = _extends.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
@@ -15398,24 +15767,24 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const style$7 = {
+const style$8 = {
   HostBlock: mixins.HostBlock,
   buttonStyle: {
     display: "block",
   },
 };
 jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet$7 = jssPresetDefault_esm.jss.createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = jssPresetDefault_esm.jss.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function ShareButtonView(props, children) {
   return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$7),
-    index.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` },
+    index.h("style", { type: "text/css" }, styleString$8),
+    index.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 && (index.h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));
 }
 
-const MessageLinkQuery = index$1.gql `
+const MessageLinkQuery = sqmLeaderboardRankView.gql `
   query (
     $programId: ID
     $engagementMedium: UserEngagementMedium!
@@ -17928,6 +18297,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({
@@ -17959,7 +18331,8 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsAvailableWithSlash: RewardsAvailableWithSlash,
   RewardBalance: RewardBalance,
   RewardBalanceCashUSD: RewardBalanceCashUSD,
-  ProgramGoals: ProgramGoals
+  ProgramGoals: ProgramGoals,
+  CustomField: CustomField
 });
 
 function setupGraphQL$4() {
@@ -18266,11 +18639,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",
+  };
+  _extends.useEffect(() => {
+    index_module.L({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      index_module.L(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const RewardsTableWithProgram = createHookStory(() => {
+  setupGraphQL$7();
+  index_module.A("sam-partner-test-2");
+  return (index.h("sqm-rewards-table", null,
+    index.h("sqm-rewards-table-column", null)));
+});
+const RewardsTableNoProgram = createHookStory(() => {
+  setupGraphQL$7();
+  index_module.A(undefined);
+  return (index.h("sqm-rewards-table", null,
+    index.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";
@@ -18294,7 +18711,7 @@ function setupGraphQL$7() {
   return { id, accountId };
 }
 const TaskCard = createHookStory(() => {
-  setupGraphQL$7();
+  setupGraphQL$8();
   return (index.h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
 });
 
@@ -18307,15 +18724,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",
   },
 };
 jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet$8 = jssPresetDefault_esm.jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
+const sheet$9 = jssPresetDefault_esm.jss.createStyleSheet(style$9);
+const styleString$9 = sheet$9.toString();
 const barProps = {
   data: {
     programs: [
@@ -18410,7 +18827,7 @@ const Dashboard = () => {
     hide: false,
   };
   return (index.h("sqm-divided-layout", { direction: "row" },
-    index.h("style", { type: "text/css" }, styleString$8),
+    index.h("style", { type: "text/css" }, styleString$9),
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18468,7 +18885,7 @@ const Dashboard = () => {
 };
 const EditProfile$2 = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
-    index.h("style", { type: "text/css" }, styleString$8),
+    index.h("style", { type: "text/css" }, styleString$9),
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, {
@@ -18532,7 +18949,7 @@ const EditProfile$2 = () => {
 };
 const Commissions = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
-    index.h("style", { type: "text/css" }, styleString$8),
+    index.h("style", { type: "text/css" }, styleString$9),
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18545,7 +18962,7 @@ const Commissions = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -18557,7 +18974,7 @@ const Commissions = () => {
 };
 const Activity = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
-    index.h("style", { type: "text/css" }, styleString$8),
+    index.h("style", { type: "text/css" }, styleString$9),
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18570,7 +18987,7 @@ const Activity = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -20644,7 +21061,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)",
@@ -20923,7 +21340,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();
@@ -21012,11 +21429,11 @@ function TaskCardView(props) {
       index.h("style", { type: "text/css" }, styleString),
       index.h("div", { class: sheet.classes.Header },
         showComplete && index.h("span", { class: "icon" }, checkmark_circle$1),
-        index.h("span", { class: "value" }, points),
+        index.h("span", { class: "value" }, rewardAmount),
         index.h("span", { class: "text" }, rewardUnit)),
       index.h("div", { class: sheet.classes.Title }, cardTitle),
-      showProgressBar && loading ? (index.h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && index.h(ProgressBarView, Object.assign({}, props))),
       index.h(Details, { description: description }),
+      showProgressBar && loading ? (index.h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && index.h(ProgressBarView, Object.assign({}, props))),
       index.h("div", { class: sheet.classes.Footer },
         index.h("span", { class: "text" },
           repeatable && (index.h("div", null,
@@ -21025,11 +21442,11 @@ function TaskCardView(props) {
               "Completed ",
               repetitions,
               " times"))),
-          showExpire && (index.h("span", null,
+          showExpiry && (index.h("span", null,
             "Ends ",
             " ",
             dateExpires))),
-        index.h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
+        index.h("sl-button", { class: "action", size: "small", onClick: () => window.open(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
           ? "Task completed"
           : buttonText)))));
 }
@@ -21098,8 +21515,8 @@ const resizable = {
 };
 const NotRepeatable = () => {
   const oneAction = {
-    points: 20,
-    showExpire: false,
+    rewardAmount: 20,
+    showExpiry: false,
     rewardUnit: "Points",
     cardTitle: "Complete a survey",
     repeatable: false,
@@ -21111,11 +21528,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,
@@ -21125,11 +21542,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: "$",
@@ -21172,13 +21589,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/",
@@ -21186,7 +21603,7 @@ const NotRepeatableWithExpiry = () => {
     loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
     rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
@@ -21194,14 +21611,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",
@@ -21210,7 +21627,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,
@@ -21249,9 +21666,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",
@@ -21262,9 +21679,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,
@@ -21276,9 +21693,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,
@@ -21329,21 +21746,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,
@@ -21352,13 +21769,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,
@@ -21367,7 +21784,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,
@@ -24557,7 +24974,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";
 
@@ -24565,7 +24982,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",
@@ -25076,6 +25493,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 (index.h("div", { style: resizable$1 },
+    index.h(RewardExchangeView, Object.assign({}, test))));
+};
+const Default2 = () => {
+  return (index.h("div", { style: { ...resizable$1, height: "700px" } },
+    index.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 () {
@@ -27704,8 +28366,10 @@ const stories = [
   Hero,
   ReferralIframe$1,
   NameFields$1,
+  RewardExchangeList,
   UseRewardExchangeList,
   UseTaskCard,
+  UseRewardsTable
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -27752,7 +28416,7 @@ const TaskCard$2 = class {
     /**
      * @uiName Reward Amount
      */
-    this.points = 0;
+    this.rewardAmount = 0;
     /**
      * @uiName Reward Unit
      */
@@ -27788,7 +28452,7 @@ const TaskCard$2 = class {
     /**
      * @uiName Show Goal Expiry
      */
-    this.showExpire = false;
+    this.showExpiry = false;
     /**
      * @uiName CTA Button Text
      */
@@ -27888,7 +28552,7 @@ function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = index$1.gql `
+const GET_USER_NAME = sqmLeaderboardRankView.gql `
   query getUserName {
     viewer {
       ... on User {
@@ -27960,6 +28624,8 @@ exports.sqm_referral_table_rewards_cell = ReferralTableRewardsCell;
 exports.sqm_referral_table_status_cell = ReferralTableStatusCell;
 exports.sqm_referral_table_user_cell = ReferralTableUserCell;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
+exports.sqm_rewards_table = RewardsTable;
+exports.sqm_rewards_table_column = RewardsTableColumn;
 exports.sqm_router = SqmRouter;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_link = ShareLink;