@saasquatch/mint-components 1.5.0-71 → 1.5.0-75

package/dist/cjs/sqm-tab-group.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+
+const TabGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(index.Host, { style: { display: "block" } }, index.h("sl-tab-group", null, index.h("slot", { name: "nav" }), index.h("slot", null))));
+  }
+};
+
+exports.sqm_tab_group = TabGroup;

package/dist/cjs/sqm-tab-panel.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+
+const TabPanel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(index.Host, { style: { display: "block" } }, index.h("sl-tab-panel", null, index.h("slot", { name: "sqm-panel", slot: "panel" }))));
+  }
+};
+
+exports.sqm_tab_panel = TabPanel;

package/dist/cjs/sqm-tab.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+
+const Tab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(index.Host, { style: { display: "block" } }, index.h("sl-tab", null, index.h("slot", null))));
+  }
+};
+
+exports.sqm_tab = Tab;

package/dist/cjs/{useChildElements-4bc9b219.js → useChildElements-36bc6f2a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 
 const RENDER_EVENT = "sqm:request-rerender";
 /**
@@ -26,7 +26,7 @@ function useRequestRerender(deps) {
  */
 function useRerenderListener() {
   const host = index_module.P();
-  const [tick, rerender] = index_module.dn();
+  const [tick, rerender] = index_module.rn();
   stencilHooks_module.useEffect(() => {
     const listener = (e) => {
       // Preventes recursively nested components from sending requests up all the way

package/dist/cjs/{useDemoBigStat-426e3319.js → useDemoBigStat-99093687.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -301,7 +301,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.mn(query, variables);
+  const res = index_module.sn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -863,8 +863,8 @@ const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
   const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
-  const locale = index_module.R();
-  const userIdent = index_module.ne();
+  const locale = index_module.An();
+  const userIdent = index_module.ie();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/cjs/{useReferralTable-e473585e.js → useReferralTable-873ca73d.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
-const useChildElements = require('./useChildElements-4bc9b219.js');
+const index_module = require('./index.module-f972f103.js');
+const useChildElements = require('./useChildElements-36bc6f2a.js');
 
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
@@ -170,7 +170,7 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.ne();
+  const user = index_module.ie();
   const programIdContext = index_module.M();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -193,15 +193,15 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.R();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.mn(GET_REFERRER_DATA, {
+  const locale = index_module.An();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.sn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = index_module.wn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.mn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/collection/collection-manifest.json

@@ -62,11 +62,15 @@
     "./components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
+    "./components/sqm-scroll/sqm-scroll.js",
     "./components/sqm-share-button/sqm-share-button.js",
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
+    "./components/sqm-tab/sqm-tab.js",
+    "./components/sqm-tab-group/sqm-tab-group.js",
+    "./components/sqm-tab-panel/sqm-tab-panel.js",
     "./components/sqm-table-cell/sqm-table-cell.js",
     "./components/sqm-table-row/sqm-table-row.js",
     "./components/sqm-task-card/sqm-task-card.js",

package/dist/collection/components/sqm-hero-image/HeroImage.stories.js

@@ -33,7 +33,7 @@ export const ColumnsReverse = () => {
   return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
 };
 export const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", paddingImage: "large", paddingText: "large" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", "padding-image": "large", "padding-text": "large" }));
 };
 export const ColumnsCustom = () => {
   return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -63,6 +63,7 @@ export function HeroImageView(props, children) {
         "@media (max-width: 599px)": {
           width: "100%",
           textAlign: "center",
+          padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
         },
       },
       "@media (max-width: 599px)": {

package/dist/collection/components/sqm-image/Image.stories.js

@@ -23,3 +23,6 @@ export const ImageMarginRight = () => {
 export const ImageBackground = () => {
   return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
 };
+export const ImageSizeConstrained = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));
+};

package/dist/collection/components/sqm-image/sqm-image-view.js

@@ -5,12 +5,12 @@ export function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      justifyContent: props.align || "center",
+      justifyContent: props.align || "left",
       background: props.backgroundColor || "",
     },
     Image: {
       maxWidth: props.maxWidth || "100%",
-      maxHiehgt: props.maxHeight || "100%",
+      minHeight: props.minHeight || "100%",
       objectFit: "cover",
       marginLeft: props.left || "0",
       marginRight: props.right || "0",

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -10,16 +10,12 @@ import { useLeaderboard } from "./useLeaderboard";
  */
 export class Leaderboard {
   constructor() {
-    /**
-     * @uiName Rank Heading
-     */
-    this.rankheading = "Rank";
     /**
      * Shows the current user's leaderboard information even if they are not in the top 10
      *
      * @uiName Show viewing user
      */
-    this.showUser = true;
+    this.showUser = false;
     /**
      * @uiName Title displayed for users without names
      */
@@ -63,13 +59,6 @@ export class Leaderboard {
       h("slot", null)));
   }
   static get is() { return "sqm-leaderboard"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-leaderboard.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-leaderboard.css"]
-  }; }
   static get properties() { return {
     "usersheading": {
       "type": "string",
@@ -129,8 +118,7 @@ export class Leaderboard {
         "text": ""
       },
       "attribute": "rankheading",
-      "reflect": false,
-      "defaultValue": "\"Rank\""
+      "reflect": false
     },
     "showRank": {
       "type": "boolean",
@@ -171,7 +159,7 @@ export class Leaderboard {
       },
       "attribute": "show-user",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "rankType": {
       "type": "string",
@@ -403,18 +391,47 @@ function useLeaderboardDemo(props) {
         anonymousUser: props.anonymousUser
           ? props.anonymousUser
           : "Anonymous User",
+        showRank: props.showRank,
       },
     },
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        {
+          firstName: "MF",
+          lastInitial: "D",
+          value: 73,
+          rank: 2,
+          rowNumber: 2,
+        },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
       ],
-      showUser: false,
+      showUser: props.showUser,
     },
     elements: {
       empty: (h(EmptySlot, { emptyStateImage: "https://i.imgur.com/KPGnPF8.png", emptyStateHeader: "View your rank in the leaderboard", emptyStateText: "Be the first to refer a friend and reach the top of the leaderboard" })),

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -210,7 +210,7 @@ export class PortalContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Center",
+            "text": "Center content",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -186,6 +186,7 @@ export function RewardExchangeView(props) {
       "& .text": {
         width: "50%",
         maxWidth: "400px",
+        minWidth: "330px",
         "@media (max-width: 799px)": {
           width: "auto",
           margin: "auto",

package/dist/collection/components/sqm-rewards-table/RewardsTable.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { DateCell, RewardsCellCreditFull, SourceCellReferral, StatusCellAvailable, } from "./RewardsTableCell.stories";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
 export default {
   title: "Components/Rewards Table",
 };
@@ -29,6 +29,60 @@ const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } }
           h("sqm-text", { slot: "label" },
             h("h3", null, "View your referral details")),
           h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTablePropsEmpty = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "empty",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    emptyElement: emptyElement,
+  },
+};
+const rewardsTablePropsLoading = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "loading",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    loadingElement: loadingElement,
+  },
+};
 const rewardsTableProps = {
   states: {
     hasPrev: false,
@@ -40,7 +94,7 @@ const rewardsTableProps = {
     textOverrides: {
       showLabels: true,
       prevLabel: "Prev",
-      moreLabel: "View More",
+      moreLabel: "Next",
     },
     hiddenColumns: "",
     mdBreakpoint: 899,
@@ -59,9 +113,39 @@ const rewardsTableProps = {
         h(SourceCellReferral, null),
         h(DateCell, null),
       ],
+      [
+        h(RewardsCellCreditCancelled, null),
+        h(StatusCellCancelled, null),
+        h(SourceCellDeletedUser, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditRedeemed, null),
+        h(StatusCellRedeemed, null),
+        h(SourceCellManual, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditPartial, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditLong, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell, null),
+      ],
     ],
   },
 };
-export const RewardsTable = () => {
+export const RewardsTableFull = () => {
   return h(GenericTableView, Object.assign({}, rewardsTableProps));
 };
+export const RewardsTableEmpty = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsEmpty));
+};
+export const RewardsTableLoading = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsLoading));
+};

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -33,8 +33,11 @@ const rewardsData = {
     data: null,
   },
 };
+export const RewardsCellCreditSingle = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+};
 export const RewardsCellCreditFull = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points available" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -43,28 +46,34 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditPartial = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points available" }));
+};
+export const RewardsCellCreditCancelled = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "0 Points redeemed" }));
+};
+export const RewardsCellCreditExpired = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
+  prettyAvailableNumber: "0",
   prettyRedeemedCredit: "19 Points",
   prettyRedeemedNumber: "19",
   dateRedeemed: 1640038417468,
 };
-export const RewardsCellCreditEmpty = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+export const RewardsCellCreditRedeemed = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points available" }));
 };
 const singleRedeemed = {
-  prettyValue: "1 Points",
+  prettyValue: "1 Point",
   prettyValueNumber: "1",
-  prettyAvailableNumber: "1",
-  prettyAvailableValue: "0 Points",
-  prettyRedeemedCredit: "1 Points",
-  prettyRedeemedNumber: "1",
-  dateRedeemed: 1640038417468,
 };
-export const RewardsCellSingleRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+const longName = {
+  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
+  prettyValueNumber: "19",
+};
+export const RewardsCellCreditLong = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web available" }));
 };
 export const RewardsCellNonCredit = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: {
@@ -73,9 +82,12 @@ export const RewardsCellNonCredit = () => {
       prettyValue: "SaaSquatch Giftcard",
     } }));
 };
-export const SourceCellText = () => {
+export const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
 };
+export const SourceCellProgram = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Automated" }));
+};
 const exchange = {
   exchangedRewardRedemptionTransaction: {
     id: "61c100117a82a376d88041196",

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -52,7 +52,8 @@ export class RewardTableRewardsCell {
       const pimpedPrettyValue = reward.unit === "CENTS"
         ? reward.prettyValue.replace(/USD/gi, "$")
         : (_a = reward.prettyValue) !== null && _a !== void 0 ? _a : "-";
-      const singleReward = reward.prettyValueNumber === "1" && reward.prettyRedeemedNumber === "1";
+      const singleReward = reward.prettyValueNumber === "1" ||
+        (reward.dateRedeemed && reward.prettyAvailableNumber === "0");
       if (reward.type === "CREDIT" && !singleReward) {
         const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
           parseFloat(reward.prettyRedeemedNumber)) /
@@ -73,7 +74,7 @@ export class RewardTableRewardsCell {
         const style = {
           Progress: {
             height: "3px",
-            width: "150px",
+            maxWidth: "150px",
             margin: "var(--sl-spacing-xx-small) 0",
             background: "var(--sl-color-neutral-200)",
             "&:after": {
@@ -89,8 +90,7 @@ export class RewardTableRewardsCell {
             display: "inline-block",
             verticalAlign: "top",
             maxWidth: "100%",
-            maxHeight: "60px",
-            whiteSpace: "nowrap",
+            whiteSpace: "break",
             overflow: "hidden",
             textOverflow: "ellipsis",
           },

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js

@@ -7,11 +7,13 @@ export class RewardTableSourceCell {
   render() {
     intl.locale = this.locale;
     const RewardSource = ({ reward }) => {
+      var _a;
       return (h("span", null, intl.formatMessage({
         id: "rewardSourceText",
         defaultMessage: this.rewardSourceText,
       }, {
         rewardSource: reward.rewardSource,
+        programName: (_a = reward === null || reward === void 0 ? void 0 : reward.program) === null || _a === void 0 ? void 0 : _a.name,
       })));
     };
     const SOURCE_COLUMN_LENGTH = 21;
@@ -57,7 +59,9 @@ export class RewardTableSourceCell {
       }, {
         rewardSource: this.reward.rewardSource,
       })),
-      h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP" ? getFullName(this.reward.referral.referredUser) : getFullName(this.reward.referral.referrerUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+      h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP"
+        ? getFullName(this.reward.referral.referredUser)
+        : getFullName(this.reward.referral.referrerUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
     return h(Source, null);
   }
   static get is() { return "sqm-rewards-table-source-cell"; }

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -31,7 +31,7 @@ export class RewardTableUserColumn {
     /**
      * @uiName Reward Source Text
      */
-    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}";
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -176,7 +176,7 @@ export class RewardTableUserColumn {
       },
       "attribute": "reward-source-text",
       "reflect": false,
-      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Program} other {}}\""
+      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\""
     }
   }; }
   static get methods() { return {

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -47,6 +47,9 @@ const GET_REWARDS = gql `
               locale: $locale
             )
             programId
+            program {
+              name
+            }
             statuses
             pendingReasons
             globalRewardKey