@saasquatch/mint-components 1.9.2-3 → 1.9.3

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

@@ -28,7 +28,7 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-04239bdf.js');
 require('./utilities-d1a46070.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1d7d274f.js');
+const ShadowViewAddon = require('./ShadowViewAddon-5fe15ad2.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-7660f329.js');
 
@@ -1583,6 +1583,7 @@ const Empty = () => {
 };
 const defaultElements = {
   empty: (index.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" })),
+  essentials: (index.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" })),
   loadingstate: (index.h("slot", { name: "loading" },
     index.h("table", null, [...Array(10)].map(() => {
       return (index.h("tr", null,
@@ -1595,6 +1596,7 @@ const SlottedIntoComponent = () => {
     states: {
       loading: false,
       hasLeaders: false,
+      isEssentials: false,
       styles: {
         ...defaultStyles,
       },
@@ -1811,7 +1813,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   MultipleStats: MultipleStats
 });
 
-const scenario$4 = "@owner:noah\n@author:noah\nFeature: Leaderboard\n\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n\tBackground: A user exists\n\t\tGiven a user\n\t\tAnd they are viewing the leaderboard\n\n\t@motivating\n\tScenario Outline: Two types of referrals leaderboards can be displayed\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with <value>\n\t\tAnd there are started referrals on the tenant\n\t\tAnd there are started converted on the tenant\n\t\tWhen the user views the leaderboard\n\t\tThen they see the referral <referralType> leaderboard\n\t\tExamples:\n\t\t\t| value                 | referralType |\n\t\t\t| topStartedReferrers   | started      |\n\t\t\t| topConvertedReferrers | converted    |\n\n\t@motivating\n\tScenario: The top point earners leaderboard can be displayed\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n\t\tAnd there are users with points\n\t\tWhen the user views the leaderboard\n\t\tThen they see the top point earners leaderboard\n\t\tAnd text values are displayed for point counts\n\n\t@minutia\n\tScenario Outline: Reward pretty value is used on the top point earners leaderboard\n\t\tGiven top point earners leaderboard\n\t\tAnd the \"POINT\" reward unit has a pretty value for the following locales\n\t\t\t| locale |\n\t\t\t| en     |\n\t\t\t| fr     |\n\t\t\t| tr     |\n\t\tWhen the user views the leaderboard\n\t\tAnd they have <locale>\n\t\tThen they see the translated pretty value in the stat value column\n\n\t@motivating\n\tScenario Outline: Program Context is used by default to filter leaderboard results\n\t\tGiven a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n\t\tWhen the user views the leaderboard\n\t\tThen they only see <results> from \"my-program\"\n\t\tExamples:\n\t\t\t| leaderboardType       | results             |\n\t\t\t| topStartedReferrers   | started referrals   |\n\t\t\t| topConvertedReferrers | converted referrals |\n\t\t\t| topPointEarners       | points earned       |\n\n\t@motivating\n\tScenario Outline: Program Id context can be overwritten with a prop\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n\t\tWhen the user views the leaderboard\n\t\tThen they only see <results> from \"my-test-program\"\n\t\tExamples:\n\t\t\t| leaderboardType       | results             |\n\t\t\t| topStartedReferrers   | started referrals   |\n\t\t\t| topConvertedReferrers | converted referrals |\n\t\t\t| topPointEarners       | points earned       |\n\n\t@motivating\n\tScenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n\t\tWhen the user views the leaderboard\n\t\tThen they see global <results>\n\t\tExamples:\n\t\t\t| leaderboardType       | results             |\n\t\t\t| topStartedReferrers   | started referrals   |\n\t\t\t| topConvertedReferrers | converted referrals |\n\t\t\t| topPointEarners       | points earned       |\n\n\t@motivating\n\tScenario: Leaderboard results are shown in descending order\n\t\tGiven there are leaderboard results\n\t\tWhen the user views the leaderboard\n\t\tThen they see up to the 10 top leaderboard results\n\t\tAnd leaderboard is in descending order\n\n\t@motivating\n\tScenario Outline: Leaderboard results can be filtered with a time interval\n\t\tGiven a <leaderboardType> leaderboard\n\t\tAnd it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\t\tWhen the user views the leaderboard\n\t\tThen they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\t\tExamples:\n\t\t\t| leaderboardType       | results             |\n\t\t\t| topStartedReferrers   | started referrals   |\n\t\t\t| topConvertedReferrers | converted referrals |\n\t\t\t| topPointEarners       | points earned       |\n\n\t@motivating\n\tScenario Outline: Leaderboard rank type can be configured\n\t\tGiven a leaderboard has prop \"rank-type\" with <value>\n\t\tWhen the user views the leaderboard\n\t\tThen their leaderboard rank is their <rank>\n\t\tExamples:\n\t\t\t| value     | rank       |\n\t\t\t| rowNumber | row number |\n\t\t\t| denseRank | dense rank |\n\t\t\t| rank      | rank       |\n\n\t@minutia\n\tScenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n\t\tGiven a leaderboard has prop \"max-rows\" with <value>\n\t\tAnd the leaderboard has <resultCount>\n\t\tWhen the user views the leaderboard\n\t\tThen they see <number> rows\n\t\tExamples:\n\t\t\t| value | resultCount | number |\n\t\t\t|       | 10          | 10     |\n\t\t\t| 5     | 10          | 5      |\n\t\t\t| 3     | 1           | 1      |\n\t\t\t| 25    | 15          | 15     |\n\n\t@minutiae\n\t@ui\n\tScenario: Leaderboards with no results show an empty state\n\t\tGiven a leaderboard has no results\n\t\tWhen the user views the leaderboard\n\t\tThen an empty state is dislayed\n\t\tAnd they see an image of a leaderboard\n\t\tAnd below they see \"View your rank in the leaderboard\"\n\t\tAnd below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n\t\tAnd the text is center aligned\n\n\t@minutiae\n\t@ui\n\tScenario: A custom empty state can be provided\n\t\tGiven a leaderboard has no results\n\t\tWhen the user views the leaderboard\n\t\tThen the contents of the \"empty\" slot are displayed\n\n\t@minutiae\n\t@ui\n\tScenario: Leaderboard headings can be customized\n\t\tGiven a leaderboard\n\t\tAnd it has the following props\n\t\t\t| prop         | value          |\n\t\t\t| rankheading  | Place          |\n\t\t\t| usersheading | Customer       |\n\t\t\t| statsheading | Referral Count |\n\t\t\t| show-rank    | true           |\n\t\tWhen the user views the leaderboard\n\t\tThen they see the following columns with headings\n\t\t\t| column | heading        |\n\t\t\t| rank   | Place          |\n\t\t\t| user   | Customer       |\n\t\t\t| stat   | Referral Count |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Leaderboard rank can be hidden or shown\n\t\tGiven a leaderboard\n\t\tAnd it has prop \"show-rank\" with <propValue>\n\t\tWhen the user views the leaderboard\n\t\tThen they <maySee> the rank column\n\t\tExamples:\n\t\t\t| propValue | maySee    |\n\t\t\t| true      | see       |\n\t\t\t| false     | don't see |\n\t\t\t|           | don't see |\n\n\t@motivating\n\t@ui\n\tScenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n\t\tGiven a user in the top 10 of the leaderboard results\n\t\tWhen they view the leaderboard\n\t\tThen they see the row with their name highlighted with brand colour\n\n\t@motivating\n\t@ui\n\tScenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n\t\tGiven a user <mayHave> completed actions counted by the leaderboard\n\t\tAnd they are not in the top 10 leaderboard results\n\t\tAnd the leaderboard has prop \"show-user\" with <value>\n\t\tWhen they view the leaderboard\n\t\tThen they <maySee> \"...\" under the top 10 leaderboard results\n\t\tAnd under \"...\" they <maySee> a row highlighted with brand colour\n\t\tAnd they <maySee> their name\n\t\tAnd they <maySee> their leaderboard value\n\t\tAnd they <maySeeRank>\n\t\tExamples:\n\t\t\t| mayHave | value | maySee    | maySeeRank           |\n\t\t\t| has     | true  | see       | see their rank       |\n\t\t\t| hasn't  | true  | see       | don't see their rank |\n\t\t\t| N/A     | false | don't see | don't see their rank |\n\t\t\t| hasn't  |       | see       | don't see their rank |\n\n\t@minutiae\n\tScenario: Users without names are displayed as an \"Anonymous User\"\n\t\tGiven a user\n\t\tAnd they do not have a first name\n\t\tAnd they do not have a last initial\n\t\tWhen they view the leaderboard\n\t\tThen they see the user displayed as \"Anonymous User\"\n\n\t@minutiae\n\tScenario Outline: If a user only has a first or last name, then only that is displayed\n\t\tGiven a user\n\t\tAnd they only have a <name>\n\t\tWhen they view the leaderboard\n\t\tThen they only see their <name>\n\t\tExamples:\n\t\t\t| name      |\n\t\t\t| firstName |\n\t\t\t| lastName  |";
+const scenario$4 = "@owner:noah @author:noah\nFeature: Leaderboard\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n  Background: A user exists\n    Given a user\n    And they are viewing the leaderboard\n\n  @motivating\n  Scenario Outline: Two types of referrals leaderboards can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with <value>\n    And there are started referrals on the tenant\n    And there are started converted on the tenant\n    When the user views the leaderboard\n    Then they see the referral <referralType> leaderboard\n\n    Examples:\n      | value                 | referralType |\n      | topStartedReferrers   | started      |\n      | topConvertedReferrers | converted    |\n\n  @motivating\n  Scenario: The top point earners leaderboard can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n    And there are users with points\n    When the user views the leaderboard\n    Then they see the top point earners leaderboard\n    And text values are displayed for point counts\n\n  @minutia\n  Scenario Outline: Reward pretty value is used on the top point earners leaderboard\n    Given top point earners leaderboard\n    And the \"POINT\" reward unit has a pretty value for the following locales\n      | locale |\n      | en     |\n      | fr     |\n      | tr     |\n    When the user views the leaderboard\n    And they have <locale>\n    Then they see the translated pretty value in the stat value column\n\n  @motivating\n  Scenario Outline: Program Context is used by default to filter leaderboard results\n    Given a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Program Id context can be overwritten with a prop\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-test-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n    When the user views the leaderboard\n    Then they see global <results>\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario: Leaderboard results are shown in descending order\n    Given there are leaderboard results\n    When the user views the leaderboard\n    Then they see up to the 10 top leaderboard results\n    And leaderboard is in descending order\n\n  @motivating\n  Scenario Outline: Leaderboard results can be filtered with a time interval\n    Given a <leaderboardType> leaderboard\n    And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n    When the user views the leaderboard\n    Then they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Leaderboard rank type can be configured\n    Given a leaderboard has prop \"rank-type\" with <value>\n    When the user views the leaderboard\n    Then their leaderboard rank is their <rank>\n\n    Examples:\n      | value     | rank       |\n      | rowNumber | row number |\n      | denseRank | dense rank |\n      | rank      | rank       |\n\n  @minutia\n  Scenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n    Given a leaderboard has prop \"max-rows\" with <value>\n    And the leaderboard has <resultCount>\n    When the user views the leaderboard\n    Then they see <number> rows\n\n    Examples:\n      | value | resultCount | number |\n      |       |          10 |     10 |\n      |     5 |          10 |      5 |\n      |     3 |           1 |      1 |\n      |    25 |          15 |     15 |\n\n  @minutiae @ui\n  Scenario: Leaderboards with no results show an empty state\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then an empty state is dislayed\n    And they see an image of a leaderboard\n    And below they see \"View your rank in the leaderboard\"\n    And below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n    And the text is center aligned\n\n  @minutiae @ui\n  Scenario: A custom empty state can be provided\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then the contents of the \"empty\" slot are displayed\n\n  @minutiae @ui\n  Scenario: User is on Essentials plan\n    Given the user has an Essentials plan\n    When they view the leaderboard\n    Then a message telling them to upgrade their plan appears:\n      \"\"\"\n      Contact Support to upgrade your plan and start leveraging\n                gamification in your program.\n      \"\"\"\n    And an empty table image is displayed\n\n  @minutiae @ui\n  Scenario: Leaderboard headings can be customized\n    Given a leaderboard\n    And it has the following props\n      | prop         | value          |\n      | rankheading  | Place          |\n      | usersheading | Customer       |\n      | statsheading | Referral Count |\n      | show-rank    | true           |\n    When the user views the leaderboard\n    Then they see the following columns with headings\n      | column | heading        |\n      | rank   | Place          |\n      | user   | Customer       |\n      | stat   | Referral Count |\n\n  @motivating @ui\n  Scenario Outline: Leaderboard rank can be hidden or shown\n    Given a leaderboard\n    And it has prop \"show-rank\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the rank column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | see       |\n      | false     | don't see |\n      |           | don't see |\n\n  @motivating @ui\n  Scenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n    Given a user in the top 10 of the leaderboard results\n    When they view the leaderboard\n    Then they see the row with their name highlighted with brand colour\n\n  @motivating @ui\n  Scenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n    Given a user <mayHave> completed actions counted by the leaderboard\n    And they are not in the top 10 leaderboard results\n    And the leaderboard has prop \"show-user\" with <value>\n    When they view the leaderboard\n    Then they <maySee> \"...\" under the top 10 leaderboard results\n    And under \"...\" they <maySee> a row highlighted with brand colour\n    And they <maySee> their name\n    And they <maySee> their leaderboard value\n    And they <maySeeRank>\n\n    Examples:\n      | mayHave | value | maySee    | maySeeRank           |\n      | has     | true  | see       | see their rank       |\n      | hasn't  | true  | see       | don't see their rank |\n      | N/A     | false | don't see | don't see their rank |\n      | hasn't  |       | see       | don't see their rank |\n\n  @minutiae\n  Scenario: Users without names are displayed as an \"Anonymous User\"\n    Given a user\n    And they do not have a first name\n    And they do not have a last initial\n    When they view the leaderboard\n    Then they see the user displayed as \"Anonymous User\"\n\n  @minutiae\n  Scenario Outline: If a user only has a first or last name, then only that is displayed\n    Given a user\n    And they only have a <name>\n    When they view the leaderboard\n    Then they only see their <name>\n\n    Examples:\n      | name      |\n      | firstName |\n      | lastName  |\n";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -1969,8 +1971,10 @@ const defaultStyles$1 = {
   rankheading: "Rank",
   anonymousUser: "Anonymous User",
 };
+const link = index.h("a", null, "Support");
 const defaultElements$1 = {
   empty: (index.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" })),
+  essentials: (index.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" })),
   loadingstate: (index.h("slot", { name: "loading" },
     index.h("table", null, [...Array(10)].map(() => {
       return (index.h("tr", null,
@@ -2005,6 +2009,34 @@ const Empty$1 = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
+const Essentials = () => {
+  const props = {
+    states: {
+      loading: false,
+      isEssentials: true,
+      hasLeaders: false,
+      styles: {
+        ...defaultStyles$1,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [],
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        textValue: "8",
+        rowNumber: 11,
+        rank: 23,
+      },
+    },
+    elements: {
+      ...defaultElements$1,
+    },
+  };
+  return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
+};
 const Loading = () => {
   const props = {
     states: {
@@ -2298,6 +2330,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Leaderboard_stories,
   Empty: Empty$1,
+  Essentials: Essentials,
   Loading: Loading,
   One: One,
   Five: Five,
@@ -11600,7 +11633,7 @@ const scenario2 = "@author:derek\n@owner:derek\nFeature: Reward Table reward Col
 
 const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background: \n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples: \n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: \n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"PAYOUT_CONFIGURATION_MISSING\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples: \n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
 
-const scenario4 = "@author:derek\n@owner:derek\nFeature: Reward Table Source Column\n\n    Shows the source of each reward\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the source column is configurable\n        Given the \"column-title\" prop is set to <value>\n        Then the source column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Source          |                 |\n            | My column title | My column title |\n\n    @motivating\n    @ui\n    Scenario: The source column displays manual if the reward is caused by a manual action\n        Given a user with a \"MANUAL\" reward\n        When they view the rewards table\n        Then the source of their reward is displayed as \"Manual\"\n\n    @motivating\n    @ui\n    Scenario: The source column displays the program name if the reward is caused automatically by a program\n        Given a user with a \"AUTOMATED\" program reward\n        And the program has name \"Loyalty Program\"\n        When they view the rewards table\n        Then the source of their reward is displayed as \"Loyalty Program\"\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n        Given the \"reward-exchange-text\" prop is <propValue>\n        And a user with a \"MANUAL\" reward\n        But it was created by a reward exchange\n        Then they view the rewards table\n        Then the source displays <exchangeText>\n        And under it displays the following\n            | prettyRedeemedCredit → prettyValue |\n        Examples:\n            | propValue | exchangeText    |\n            |           | Reward Exchange |\n            | Exchanged | Exchanged       |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n        Given the \"reward-source-text\" prop is <propValue>\n        And a user with a referral reward\n        And that reward has <rewardSource>\n        When they view the rewards table\n        Then then source displays <referralText>\n        And under it displays the full name of the <referralUser>\n        Examples:\n            | propValue                                                                             | rewardSource  | referralText | referralUser  |\n            |                                                                                       | REFERRED      | Referred by  | referrer user |\n            |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n            | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n        Given a user with a referral reward\n        And referral user exists\n        And referral user has <name>\n        But referral user has no <otherName>\n        When they view the rewards table\n        Then referral user's name is displayed as <name>\n        Examples:\n            | name       | otherName  |\n            | first.name | last.name  |\n            | last.name  | first.name |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n        Given a user with a referral reward\n        And that reward has <rewardSource>\n        And the <referralUser> has no first name\n        And the <referralUser> has no last name\n        When they view the rewards table\n        Then then source displays <sourceText>\n        And under it displays \"Anonymous User\"\n        Examples:\n            | rewardSource  | referralUser  | sourceText  |\n            | FRIEND_SIGNUP | referrer      | Referral to |\n            | REFERRED      | referred user | Referred by |\n\n    @motivating\n    @ui\n    Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n        Given a user with a referral reward\n        And that reward has <rewardSource>\n        But <referral> user was deleted\n        When they view the rewards table\n        Then the source displays <sourceText>\n        And under it displays \"Deleted User\"\n        Examples:\n            | rewardSource    | referral | sourceText  |\n            | \"FRIEND_SIGNUP\" | referrer | Referral to |\n            | \"REFERRED\"      | referred | Referred by |\n\n    @minutia\n    @ui\n    Scenario Outline: Name fallbacks for referral users without names are customizable\n        Given <prop> with <value>\n        And a user with a referral reward\n        But the referral user <hadAction>\n        When they view the rewards table\n        Then the source displays <value> as the referral user\n        Examples:\n            | prop           | value           | hadAction                       |\n            | deleted-user   | Former Customer | was deleted                     |\n            | anonymous-user | Nameless User   | had first and last name deleted |\n\n    @motivating\n    Scenario Outline: Source text can be customized\n        Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n        And a user with a <rewardSource> reward\n        When they view the rewards table\n        Then the source is <sourceText>\n        Examples:\n            | rewardSource | sourceText      |\n            | MANUAL       | Support         |\n            | AUTOMATED    | Loyalty Program |";
+const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a \"MANUAL\" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Manual\"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a \"AUTOMATED\" program reward\n    And the program has name \"Loyalty Program\"\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Loyalty Program\"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the \"reward-exchange-text\" prop is <propValue>\n    And a user with a \"MANUAL\" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the \"reward-source-text\" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user's name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays \"Anonymous User\"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted User\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n#  AL: TODO DELETED REFERRAL SPEC\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted referral\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n";
 
 const scenario$r = scenario1 + scenario2 + scenario3 + scenario4;
 const RewardsTableCell_stories = {
@@ -11800,6 +11833,12 @@ const referred = (user = null) => {
     },
   };
 };
+const deletedReferral = () => {
+  return {
+    rewardSource: "REFERRED",
+    referral: null,
+  };
+};
 const SourceCellReferral = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(johnDoe) }, referralText: "Referral to" }));
 };
@@ -11816,6 +11855,13 @@ const SourceCellAnonymousUser = () => {
 const SourceCellDeletedUser = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
+const SourceCellDeletedReferral = () => {
+  return (
+  // AL: TODO
+  index.h("sqm-rewards-table-source-cell", { 
+    //@ts-ignore
+    reward: { ...rewardsData$1, ...deletedReferral() }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
+};
 const StatusCellAvailable = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData$1 }));
 };
@@ -12018,6 +12064,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   SourceCellReferred: SourceCellReferred,
   SourceCellAnonymousUser: SourceCellAnonymousUser,
   SourceCellDeletedUser: SourceCellDeletedUser,
+  SourceCellDeletedReferral: SourceCellDeletedReferral,
   StatusCellAvailable: StatusCellAvailable,
   StatusCellAvailableExpiry: StatusCellAvailableExpiry,
   StatusCellRedeemed: StatusCellRedeemed,
@@ -12110,6 +12157,12 @@ const r_expired = [
   index.h(SourceCellReferred, null),
   index.h(DateCell$1, null),
 ];
+const r_deleted = [
+  index.h(RewardsCellCreditCancelled, null),
+  index.h(StatusCellCancelled, null),
+  index.h(SourceCellDeletedReferral, null),
+  index.h(DateCell$1, null),
+];
 const r_cancelled = [
   index.h(RewardsCellCreditCancelled, null),
   index.h(StatusCellCancelled, null),
@@ -12193,6 +12246,7 @@ const RewardsTable = () => {
     r_available,
     r_redeemed,
     r_cancelled,
+    r_deleted,
     r_expired,
     r_denied,
     r_pending_review,

package/dist/collection/components/sqm-empty/EmptyState.stories.js

@@ -16,6 +16,7 @@ export const Empty = () => {
 };
 const defaultElements = {
   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" })),
+  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" })),
   loadingstate: (h("slot", { name: "loading" },
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
@@ -28,6 +29,7 @@ export const SlottedIntoComponent = () => {
     states: {
       loading: false,
       hasLeaders: false,
+      isEssentials: false,
       styles: {
         ...defaultStyles,
       },

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

@@ -1,11 +1,24 @@
 import { h } from "@stencil/core";
+import { intl } from "../../global/global";
 export function EmptyStateView(props) {
-  const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
+  const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
   return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
     h("img", { style: { height: "100px", margin: "auto" }, src: emptyStateImage }),
     h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", style: { color: "var(--sl-color-gray-500)" } }, emptyStateText)))));
+        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
+          id: "emptyStateText",
+          defaultMessage: emptyStateText,
+        }, {
+          supportText: (h("a", { target: "_blank", href: `mailto:saasquatch-support@impact.com?subject=Next steps for ${missingFeature} feature&body=Hi Support Team, %0D%0A
+                  %0D%0A  
+                  I am interested to learn more about the ${missingFeature} feature. Please let me know the next steps to access this feature, including any necessary plan upgrades.%0D%0A
+                  %0D%0A 
+                  - Feature Interested In: ${missingFeature}%0D%0A
+                  - Company Name: [Please fill out your company name here]%0D%0A
+                  %0D%0A
+                  Thank you` }, supportText)),
+        }))))));
 }

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

@@ -7,7 +7,7 @@ import { EmptyStateView } from "./sqm-empty-view";
 export class Empty {
   render() {
     return (h(Host, { slot: "empty" },
-      h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText })));
+      h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText, supportText: this.supportText })));
   }
   static get is() { return "sqm-empty"; }
   static get encapsulation() { return "shadow"; }
@@ -80,6 +80,29 @@ export class Empty {
       },
       "attribute": "empty-state-text",
       "reflect": false
+    },
+    "supportText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "support-text",
+      "reflect": false
     }
   }; }
 }

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

@@ -157,8 +157,11 @@ const defaultStyles = {
   rankheading: "Rank",
   anonymousUser: "Anonymous User",
 };
+const link = h("a", null, "Support");
+const tag = "Contact" + link + "about upgrading your plan";
 const defaultElements = {
   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" })),
+  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" })),
   loadingstate: (h("slot", { name: "loading" },
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
@@ -193,6 +196,34 @@ export const Empty = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const Essentials = () => {
+  const props = {
+    states: {
+      loading: false,
+      isEssentials: true,
+      hasLeaders: false,
+      styles: {
+        ...defaultStyles,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [],
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        textValue: "8",
+        rowNumber: 11,
+        rank: 23,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
 export const Loading = () => {
   const props = {
     states: {

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

@@ -44,9 +44,9 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const vanillaStyle = `
-	:host{
-		display: block;
-	}
+  :host{
+    display: block;
+  }
 `;
 export function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -58,6 +58,8 @@ export function LeaderboardView(props) {
         styleString,
         vanillaStyle),
       elements.loadingstate));
+  if (states.isEssentials)
+    return elements.essentials;
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
@@ -65,6 +67,7 @@ export function LeaderboardView(props) {
     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),

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

@@ -8,6 +8,12 @@ import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
  * @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>
+ * @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() {
@@ -18,6 +24,13 @@ export class Leaderboard {
      * @default
      */
     this.hideViewer = false;
+    /**
+     * Hides the leaderboard if user is on Essentials plan
+     *
+     * @uiName Hide viewing user
+     * @default
+     */
+    this.isEssentials = false;
     /**
      * Title displayed for users without names
      * @uiName Unknown user text
@@ -37,6 +50,7 @@ export class Leaderboard {
   render() {
     const props = {
       empty: h(EmptySlot, null),
+      essentials: h(EssentialsSlot, null),
       loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
@@ -49,6 +63,7 @@ export class Leaderboard {
       interval: this.interval,
       hideViewer: this.hideViewer,
       showRank: this.showRank,
+      isEssentials: this.isEssentials,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -186,6 +201,30 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "false"
     },
+    "isEssentials": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide viewing user",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": "Hides the leaderboard if user is on Essentials plan"
+      },
+      "attribute": "is-essentials",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "rankType": {
       "type": "string",
       "mutable": false,
@@ -320,7 +359,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: 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; 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",
@@ -354,6 +393,10 @@ 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(() => {
@@ -403,6 +446,7 @@ function useLeaderboardDemo(props) {
     states: {
       loading: false,
       hasLeaders: true,
+      isEssentials: false,
       styles: {
         usersheading: props.usersheading
           ? props.usersheading
@@ -424,6 +468,7 @@ 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

@@ -43,7 +43,7 @@ const GET_RANK = gql `
   }
 `;
 export function useLeaderboard(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const programIdContext = useProgramId();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -67,7 +67,7 @@ export function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  const { data: leaderboardData, loading: loadingLeaderboard } = useQuery(GET_LEADERBOARD, 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));
   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);
@@ -96,6 +96,8 @@ export function useLeaderboard(props) {
   return {
     states: {
       loading: loadingLeaderboard,
+      // Show feature enforcement if request was forbidden
+      isEssentials: ((_l = leaderboardErrors === null || leaderboardErrors === void 0 ? void 0 : leaderboardErrors.response) === null || _l === void 0 ? void 0 : _l.status) === 403,
       hasLeaders: (sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.length) > 0,
       styles: props,
     },
@@ -106,6 +108,7 @@ export function useLeaderboard(props) {
     },
     elements: {
       empty: props.empty,
+      essentials: props.essentials,
       loadingstate: props.loadingstate,
     },
   };

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

@@ -45,6 +45,12 @@ export class PopupContainer {
         "tags": [{
             "text": "Show powered by",
             "name": "uiName"
+          }, {
+            "text": "[\"CUSTOM_BRANDING\"]",
+            "name": "requiredFeatures"
+          }, {
+            "text": "<div>Integrate your brand identity further by removing impact.com\u2019s branding from your widget. Contact <a href=\"mailto:saasquatch-support%40impact.com?subject=Next steps for Custom Branding feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Custom Branding 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</div>",
+            "name": "featureTooltip"
           }],
         "text": "Show Powered by Impact.com link"
       },

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

@@ -23,6 +23,8 @@ export class PortalFooter {
     this.supportText = "For program support, contact {email}";
     /**
      * @uiName Hide powered by Impact.com
+     * @requiredFeatures ["CUSTOM_BRANDING"]
+     * @featureTooltip <div>Integrate your brand identity further by removing impact.com’s branding from your widget. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Custom Branding feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Custom Branding 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</div>
      */
     this.hidePoweredBy = false;
     /**
@@ -227,6 +229,12 @@ export class PortalFooter {
         "tags": [{
             "text": "Hide powered by Impact.com",
             "name": "uiName"
+          }, {
+            "text": "[\"CUSTOM_BRANDING\"]",
+            "name": "requiredFeatures"
+          }, {
+            "text": "<div>Integrate your brand identity further by removing impact.com\u2019s branding from your widget. Contact <a href=\"mailto:saasquatch-support%40impact.com?subject=Next steps for Custom Branding feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Custom Branding 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</div>",
+            "name": "featureTooltip"
           }],
         "text": ""
       },

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, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, StatusCellDenied, StatusCellPendingReview, StatusCellPayoutSent, StatusCellPayoutFailed, StatusCellPendingNewTaxForm, StatusCellPendingPartnerCreation, StatusCellPendingTaxReview, StatusCellPendingTaxSubmission, } from "./RewardsTableCell.stories";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellDeletedReferral, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, StatusCellDenied, StatusCellPendingReview, StatusCellPayoutSent, StatusCellPayoutFailed, StatusCellPendingNewTaxForm, StatusCellPendingPartnerCreation, StatusCellPendingTaxReview, StatusCellPendingTaxSubmission, } from "./RewardsTableCell.stories";
 import scenario from "./rewards-table.feature";
 export default {
   title: "Components/Rewards Table",
@@ -69,6 +69,12 @@ const r_expired = [
   h(SourceCellReferred, null),
   h(DateCell, null),
 ];
+const r_deleted = [
+  h(RewardsCellCreditCancelled, null),
+  h(StatusCellCancelled, null),
+  h(SourceCellDeletedReferral, null),
+  h(DateCell, null),
+];
 const r_cancelled = [
   h(RewardsCellCreditCancelled, null),
   h(StatusCellCancelled, null),
@@ -152,6 +158,7 @@ export const RewardsTable = () => {
     r_available,
     r_redeemed,
     r_cancelled,
+    r_deleted,
     r_expired,
     r_denied,
     r_pending_review,