@saasquatch/mint-components 1.10.2-7 → 1.10.2-9

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

@@ -373,38 +373,6 @@ export const ReferralLeaderboard = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const ReferralLeaderboardWithMaxWidth = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        ...defaultStyles,
-        rankheading: "Rank",
-        usersheading: "User",
-        statsheading: "Referrals",
-        showRank: false,
-        maxWidth: "300px",
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        firstName: "Viktor",
-        lastInitial: "V",
-        textValue: "82",
-        rank: 1,
-        rowNumber: 1,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
 export const PointsLeaderboard = () => {
   const props = {
     states: {
@@ -544,33 +512,3 @@ export const HideViewer = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const HideNames = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      rowNumber: 10,
-      styles: {
-        ...defaultStyles,
-        showRank: true,
-        hideNames: true,
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        firstName: "Viktor",
-        lastInitial: "V",
-        textValue: "82",
-        rowNumber: 1,
-        rank: 1,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-import { intl } from "../../global/global";
 const style = {
   Leaderboard: {
     "& table": {
@@ -40,9 +39,6 @@ const style = {
       width: "auto",
       whiteSpace: "nowrap",
     },
-    "& .fullWidth": {
-      width: "100%",
-    },
   },
 };
 const sheet = createStyleSheet(style);
@@ -67,14 +63,15 @@ export function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { maxWidth: styles.maxWidth || "100%" } },
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
-        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
-        !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+        h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
@@ -84,15 +81,12 @@ export function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && (h("td", { class: "Rank" }, intl.formatMessage({
-            id: "formStep",
-            defaultMessage: styles.rankSuffix,
-          }, { rank: user.rank }))),
-          !styles.hideNames && (h("td", { class: "User" }, user.firstName && user.lastInitial
+          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
             ? user.firstName + " " + user.lastInitial
             : user.firstName || user.lastInitial
               ? user.firstName || user.lastInitial
-              : styles.anonymousUser)),
+              : styles.anonymousUser),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
@@ -100,11 +94,11 @@ export function LeaderboardView(props) {
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
         styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        !styles.hideNames && (h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
           ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
             " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
           : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
             ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser)),
+            : styles.anonymousUser),
         h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
 }

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

@@ -13,19 +13,10 @@ import { useLeaderboard } from "./useLeaderboard";
  * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
  * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
  * @example Points Earned Leaderboard - <sqm-leaderboard usersheading="Name" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Anonymous Leaderboard - <sqm-portal-container direction="row" display="flex" gap="large"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png" empty-state-header="Top Performers" empty-state-text="The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!"></sqm-empty><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></sqm-portal-container>
  * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
  */
 export class Leaderboard {
   constructor() {
-    /**
-     * @uiName Place text
-     */
-    this.maxWidth = "100%";
-    /**
-     * @uiName Rank Suffix
-     */
-    this.rankSuffix = "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -33,17 +24,10 @@ export class Leaderboard {
      * @default
      */
     this.hideViewer = false;
-    /**
-     * Hide the Names of users to protect personal identifiable information
-     *
-     * @uiName Hide users names
-     * @default
-     */
-    this.hideNames = false;
     /**
      * Hides the leaderboard if user is on Essentials plan
      *
-     * @uiName Hide leaderboard for essentials user
+     * @uiName Hide viewing user
      * @default
      */
     this.isEssentials = false;
@@ -78,11 +62,8 @@ export class Leaderboard {
       anonymousUser: this.anonymousUser,
       interval: this.interval,
       hideViewer: this.hideViewer,
-      hideNames: this.hideNames,
       showRank: this.showRank,
       isEssentials: this.isEssentials,
-      rankSuffix: this.rankSuffix,
-      maxWidth: this.maxWidth,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -196,48 +177,6 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
-    "maxWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Place text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "max-width",
-      "reflect": false,
-      "defaultValue": "\"100%\""
-    },
-    "rankSuffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Rank Suffix",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "rank-suffix",
-      "reflect": false,
-      "defaultValue": "\"{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}\""
-    },
     "hideViewer": {
       "type": "boolean",
       "mutable": false,
@@ -262,30 +201,6 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "hideNames": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Hide users names",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
-          }],
-        "text": "Hide the Names of users to protect personal identifiable information"
-      },
-      "attribute": "hide-names",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "isEssentials": {
       "type": "boolean",
       "mutable": false,
@@ -298,7 +213,7 @@ export class Leaderboard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide leaderboard for essentials user",
+            "text": "Hide viewing user",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -444,7 +359,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; maxWidth?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; essentials: VNode; loadingstate: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; essentials: VNode; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -545,8 +460,6 @@ function useLeaderboardDemo(props) {
           : "Anonymous User",
         showRank: props.showRank,
         hideViewer: props.hideViewer,
-        hideNames: props.hideNames,
-        maxWidth: props.maxWidth,
       },
     },
     data: {

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

@@ -23,26 +23,6 @@ const GET_LEADERBOARD = gql `
     }
   }
 `;
-const GET_LEADERBOARD_WITHOUT_NAMES = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-    $limit: Int!
-  ) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows(limit: $limit) {
-        textValue(locale: $locale)
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
 const GET_RANK = gql `
   query (
     $type: String!
@@ -63,24 +43,6 @@ const GET_RANK = gql `
     }
   }
 `;
-const GET_RANK_WITHOUT_NAMES = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          textValue(locale: $locale)
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
 export function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const programIdContext = useProgramId();
@@ -106,8 +68,8 @@ export function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = useQuery(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
-  const { data: rankData } = useQuery(props.hideNames ? GET_RANK_WITHOUT_NAMES : GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = useQuery(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
+  const { data: rankData } = useQuery(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_b = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _b === void 0 ? void 0 : _b.rows;
   const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
   const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {

package/dist/esm/{ShadowViewAddon-e0a3df6c.js → ShadowViewAddon-31eb5b16.js}

@@ -127,9 +127,6 @@ const style$1 = {
       width: "auto",
       whiteSpace: "nowrap",
     },
-    "& .fullWidth": {
-      width: "100%",
-    },
   },
 };
 const sheet$1 = createStyleSheet(style$1);
@@ -154,14 +151,15 @@ function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { maxWidth: styles.maxWidth || "100%" } },
+  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
+    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
-        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
-        !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+        h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
@@ -171,15 +169,12 @@ function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && (h("td", { class: "Rank" }, intl.formatMessage({
-            id: "formStep",
-            defaultMessage: styles.rankSuffix,
-          }, { rank: user.rank }))),
-          !styles.hideNames && (h("td", { class: "User" }, user.firstName && user.lastInitial
+          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
             ? user.firstName + " " + user.lastInitial
             : user.firstName || user.lastInitial
               ? user.firstName || user.lastInitial
-              : styles.anonymousUser)),
+              : styles.anonymousUser),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
@@ -187,12 +182,12 @@ function LeaderboardView(props) {
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
         styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        !styles.hideNames && (h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
           ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
             " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
           : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
             ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser)),
+            : styles.anonymousUser),
         h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
 }