@saasquatch/mint-components 1.11.0-7 → 1.11.0-8

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
 const style = {
   Leaderboard: {
     "& table": {
@@ -21,9 +22,10 @@ const style = {
       fontWeight: "var(--sl-font-weight-normal)",
     },
     "& .ellipses": {
-      textAlign: "center",
+      textAlign: "left",
       padding: "0",
       color: "var(--sl-color-neutral-500)",
+      paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
@@ -39,6 +41,12 @@ const style = {
       width: "auto",
       whiteSpace: "nowrap",
     },
+    "& .Rank": {
+      whiteSpace: "nowrap",
+    },
+    "& .fullWidth": {
+      width: "100%",
+    },
   },
 };
 const sheet = createStyleSheet(style);
@@ -49,56 +57,74 @@ const vanillaStyle = `
   }
 `;
 export function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading)
-    return (h("div", { class: sheet.classes.Leaderboard },
+  if (states.isEssentials) {
+    return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
+  }
+  if (states.loading) {
+    return (h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      elements.loadingstate));
-  if (states.isEssentials)
-    return elements.essentials;
+      h("table", null, [...Array(10)].map(() => {
+        return (h("tr", null,
+          h("td", null,
+            h("sl-skeleton", null))));
+      }))));
+  }
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base" },
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
+  const getRankCellText = (userRank, isViewingUsersRow) => {
+    if (!userRank) {
+      return styles.hideNames ? `${styles.viewingUserText}` : "-";
+    }
+    const viewingUserText = ` - ${styles.viewingUserText}`;
+    return styles.rankSuffix
+      ? intl.formatMessage({
+        id: "rank",
+        defaultMessage: styles.rankSuffix,
+      }, {
+        rank: userRank,
+      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
+      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
+  };
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     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.rankheading),
-        h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
+        !styles.hideNames && 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;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
-        return (h("tr", { class: !styles.hideViewer &&
-            user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
-            ? "highlight"
-            : "" },
-          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),
+        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
+        return (h("tr", { class: isViewingUsersRow ? "highlight" : "" },
+          styles.showRank && (h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
+          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
         h("td", { colSpan: 100, class: "ellipses" },
           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) || "-")),
-        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),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        styles.showRank && (h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
+        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }

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

@@ -10,13 +10,20 @@ import { useLeaderboard } from "./useLeaderboard";
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
- * @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 Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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 - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="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></div>
  * @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() {
+    /**
+     * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
+     *
+     * @uiName Width
+     */
+    this.width = "100%";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -25,12 +32,16 @@ export class Leaderboard {
      */
     this.hideViewer = false;
     /**
-     * Hides the leaderboard if user is on Essentials plan
+     * @uiName Viewing user text
+     */
+    this.viewingUserText = "You";
+    /**
+     * Hide the Names of users to protect personal identifiable information
      *
-     * @uiName Hide viewing user
+     * @uiName Hide users names
      * @default
      */
-    this.isEssentials = false;
+    this.hideNames = false;
     /**
      * Title displayed for users without names
      * @uiName Unknown user text
@@ -50,8 +61,6 @@ export class Leaderboard {
   render() {
     const props = {
       empty: h(EmptySlot, null),
-      essentials: h(EssentialsSlot, null),
-      loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankheading: this.rankheading,
@@ -62,8 +71,11 @@ export class Leaderboard {
       anonymousUser: this.anonymousUser,
       interval: this.interval,
       hideViewer: this.hideViewer,
+      viewingUserText: this.viewingUserText,
+      hideNames: this.hideNames,
       showRank: this.showRank,
-      isEssentials: this.isEssentials,
+      rankSuffix: this.rankSuffix,
+      width: this.width,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -177,6 +189,47 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Width",
+            "name": "uiName"
+          }],
+        "text": "Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc.)"
+      },
+      "attribute": "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": "A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., \"st\" for 1st, \"nd\" for 2nd, \"rd\" for 3rd, and \"th\" for all others)."
+      },
+      "attribute": "rank-suffix",
+      "reflect": false
+    },
     "hideViewer": {
       "type": "boolean",
       "mutable": false,
@@ -201,7 +254,28 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "isEssentials": {
+    "viewingUserText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Viewing user text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "viewing-user-text",
+      "reflect": false,
+      "defaultValue": "\"You\""
+    },
+    "hideNames": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -210,18 +284,18 @@ export class Leaderboard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide viewing user",
+            "text": "Hide users names",
             "name": "uiName"
           }, {
             "text": undefined,
             "name": "default"
           }],
-        "text": "Hides the leaderboard if user is on Essentials plan"
+        "text": "Hide the Names of users to protect personal identifiable information"
       },
-      "attribute": "is-essentials",
+      "attribute": "hide-names",
       "reflect": false,
       "defaultValue": "false"
     },
@@ -359,7 +433,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; 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; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: 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; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -393,18 +467,6 @@ function EmptySlot() {
   return (h("slot", { name: "empty" },
     h("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" })));
 }
-function EssentialsSlot() {
-  return (h("slot", { name: "essentials" },
-    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support", "missing-feature": "Leaderboards" })));
-}
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h("table", null, [...Array(10)].map(() => {
-      return (h("tr", null,
-        h("td", null,
-          h("sl-skeleton", null))));
-    }))));
-}
 function useLeaderboardDemo(props) {
   var _a, _b;
   const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
@@ -460,6 +522,10 @@ function useLeaderboardDemo(props) {
           : "Anonymous User",
         showRank: props.showRank,
         hideViewer: props.hideViewer,
+        viewingUserText: props.viewingUserText,
+        hideNames: props.hideNames,
+        rankSuffix: props.rankSuffix,
+        width: props.width,
       },
     },
     data: {
@@ -468,8 +534,6 @@ function useLeaderboardDemo(props) {
     },
     elements: {
       empty: h(EmptySlot, null),
-      essentials: h(EssentialsSlot, null),
-      loadingstate: h(LoadingSlot, null),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -23,6 +23,26 @@ 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!
@@ -43,6 +63,24 @@ 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();
@@ -68,8 +106,8 @@ export function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  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 { 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 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) {
@@ -113,8 +151,6 @@ export function useLeaderboard(props) {
     },
     elements: {
       empty: props.empty,
-      essentials: props.essentials,
-      loadingstate: props.loadingstate,
     },
   };
 }

package/dist/collection/components/sqm-logout-current-user/useLogoutCurrentUser.js

@@ -1,25 +1,24 @@
 import { setUserIdentity, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 const GET_USER_DETAILS = gql `
-  query getUserDetails($id: String!, $accountId: String!) {
-    user(id: $id, accountId: $accountId) {
-      id
-      accountId
-      email
+  query getUserDetails {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+      }
     }
   }
 `;
 export function useLogoutCurrentUser(props) {
   var _a, _b;
   const user = useUserIdentity();
-  const { loading, data } = useQuery(GET_USER_DETAILS, {
-    id: user === null || user === void 0 ? void 0 : user.id,
-    accountId: user === null || user === void 0 ? void 0 : user.accountId,
-  }, !user);
+  const { loading, data } = useQuery(GET_USER_DETAILS, {}, !user);
   const onSwitchClick = () => {
     setUserIdentity(undefined);
   };
-  const filledInEmailText = (_a = props.userIdentificationText) === null || _a === void 0 ? void 0 : _a.replace("{email}", (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.email);
+  const filledInEmailText = (_a = props.userIdentificationText) === null || _a === void 0 ? void 0 : _a.replace("{email}", (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.email);
   return {
     loading,
     onSwitchClick,

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

@@ -13,37 +13,37 @@ export const TooWideColumn = () => (h("div", { style: { width: "200px", border:
 export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const SpaceBetween = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
@@ -81,6 +81,18 @@ export const SpaceEvenly = () => {
             h("p", null, "Points Balance")))),
       h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
 };
+export const ResponsiveBox = () => {
+  return (h("div", { style: { width: "100%", maxWidth: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between", "flex-wrap": "nowrap" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
 export const Start = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
     h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },

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

@@ -5,7 +5,7 @@ export function PortalContainerView(props, children) {
     Container: {
       boxSizing: "border-box",
       display: props.display || "grid",
-      flexWrap: "wrap",
+      flexWrap: props.flexWrap || "wrap",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
         : "100%",

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

@@ -37,6 +37,13 @@ export class PortalContainer {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
+    /**
+     * @uiName Flex wrap behavior
+     * @uiType string
+     * @uiEnum ["wrap", "nowrap"]
+     * @uiEnumNames ["Wrap", "No Wrap"]
+     */
+    this.flexWrap = "wrap";
     /**
      * @uiName Background color
      * @uiWidget color
@@ -253,6 +260,36 @@ export class PortalContainer {
       "reflect": false,
       "defaultValue": "\"100%\""
     },
+    "flexWrap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Flex wrap behavior",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"wrap\", \"nowrap\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Wrap\", \"No Wrap\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "flex-wrap",
+      "reflect": false,
+      "defaultValue": "\"wrap\""
+    },
     "center": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/sqm-portal-verify-email/PortalVerifyEmail.stories.js

@@ -11,7 +11,6 @@ const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
-    verified: false,
     success: false,
   },
   data: {
@@ -31,7 +30,6 @@ const verifiedProps = {
   states: {
     error: "",
     loading: false,
-    verified: true,
     success: true,
   },
   data: {

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -228,7 +228,7 @@ export class PortalVerifyEmail {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalVerifyEmailViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -260,7 +260,7 @@ export class PortalVerifyEmail {
 }
 function usePortalVerifyEmailDemo(props) {
   return deepmerge({
-    states: { error: "", loading: false, verified: true },
+    states: { error: "", loading: false, success: true },
     data: {
       oobCode: "code",
     },

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -67,7 +67,6 @@ export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText,
       error: ((_g = (_f = (_e = (_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d.errors) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.extensions) === null || _g === void 0 ? void 0 : _g.message) || ((_k = (_j = (_h = errors === null || errors === void 0 ? void 0 : errors.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.message) ||
         (((errors === null || errors === void 0 ? void 0 : errors.message) || !validEmail) && networkErrorMessage),
       success: completed && (verified || validEmail),
-      verified,
     },
     data: {
       oobCode,

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -19,7 +19,7 @@ const sharebutton = (slot) => {
     h("sqm-portal-container", { gap: "x-small" },
       h("sqm-share-button", { medium: "email" }, "Share via email"),
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
-      h("sqm-share-button", { medium: "twitter" }, "Tweet about us"))));
+      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },