@saasquatch/mint-components 1.6.14-5 → 1.6.14

package/dist/cjs/{ShadowViewAddon-b081d461.js → ShadowViewAddon-daece805.js}

@@ -1111,6 +1111,49 @@ _, global = "") => {
     });
   });
 };
+const rewardsPendingQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(index_module.dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyPendingCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyPendingCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyPendingCredit) || fallback,
+    };
+  });
+};
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(index_module.dist.gql `
       query (
@@ -1435,6 +1478,10 @@ const queries = {
     label: "Rewards Earned",
     query: rewardsAssignedQuery,
   },
+  rewardsPending: {
+    label: "Rewards Pending",
+    query: rewardsPendingQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -1522,6 +1569,10 @@ const StatPaths = [
     name: "rewardsAssigned",
     route: "/(rewardsAssigned)/:statType/:unit/:global?",
   },
+  {
+    name: "rewardsPending",
+    route: "/(rewardsPending)/:statType/:unit/:global?",
+  },
   {
     name: "rewardsRedeemed",
     route: "/(rewardsRedeemed)/:statType/:unit/:global?",

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -17,7 +17,7 @@ const utils = require('./utils-6847bc06.js');
 require('./sqm-text-span-view-8a7b98d0.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7e9641c4.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-b081d461.js');
+const ShadowViewAddon = require('./ShadowViewAddon-daece805.js');
 require('./sqm-portal-container-view-3ebf55a7.js');
 
 const BigStat = class {

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

@@ -26,7 +26,7 @@ const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-9
 const sqmPortalProfileView = require('./sqm-portal-profile-view-28176f3e.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4a03d26a.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-fb3bbf7b.js');
-const ShadowViewAddon = require('./ShadowViewAddon-b081d461.js');
+const ShadowViewAddon = require('./ShadowViewAddon-daece805.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-3ebf55a7.js');
 
 /**
@@ -1706,7 +1706,7 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   FullStack: FullStack
 });
 
-const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n  Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n  @minutia\r\n  Scenario: Demo hook retrieves label using stat pattern\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type            |\r\n      | /referralsCount |\r\n    Then the label is: \"REFERRALS - COUNT\"\r\n    And the value is: \"12345\"\r\n\r\n  @minutia\r\n  Scenario: Demo hook falls back to default label on invalid path\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type       |\r\n      | a bad path |\r\n    Then the label is: \"Demo Label\"\r\n    And the value is: \"12345\"\r\n\r\n  @motivating\r\n  Scenario: Displays error on unrecognized path\r\n    Given isDemo() returns false\r\n    And the component renders with props:\r\n      | type                       |\r\n      | /(doesNotExistNopeNotHere) |\r\n    Then the label is: \"BAD PROP TYPE\"\r\n    And the value is: \"!!!\"\r\n\r\n  @motivating\r\n  Scenario Outline: Label displays correctly\r\n    Given the type prop is set to <type>\r\n    When the component renders\r\n    Then the label is <label>\r\n    Given isDemo() returns true\r\n    When the component renders\r\n    Then the label is <inferredLabel>\r\n    Examples:\r\n      | path             | label                   | inferredLabel     |\r\n      | rewardsAssigned  | Rewards Earned          | Rewards Assigned  |\r\n      | rewardsRedeemed  | Rewards Paid            | Rewards Redeemed  |\r\n      | rewardsAvailable | Rewards Available       | Rewards Available |\r\n      | referralsCount   | Referrals - Count       | Referrals Count   |\r\n      | referralsMonth   | Referrals - This Month  | Referrals Month   |\r\n      | referralsWeek    | Referrals - This Week   | Referrals Week    |\r\n      | rewardsCount     | Rewards - Count         | Rewards Count     |\r\n      | rewardsMonth     | Rewards - This Month    | Rewards Month     |\r\n      | rewardsWeek      | Rewards - This Week     | Rewards Week      |\r\n      | rewardBalance    | Balance - Credit Earned | Reward Balance    |\r\n      | customField      | Custom Fields           | Custom Fields     |\r\n      | programGoals     | Program Goals           | Program Goals     |\r\n\r\n  @motivating\r\n  Scenario: Display user's credit\r\n    Given isDemo() returns false\r\n    And the user has earned 34 COFFEE from the program\r\n    And the component renders with props:\r\n      | type                                     |\r\n      | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n    Then the label is: \"Balance - Credit Earned\"\r\n    And the value is: \"34 COFFEE\"\r\n\r\n  @minutia\r\n  Scenario: Memoizes most recent query\r\n    Given isDemo() returns false\r\n    And the component's type prop is set to a variable named PATH\r\n    And PATH is \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When the component reloads given some external reload\r\n    Then the component doesn't show a loading state\r\n    When PATH is set to \"/rewardsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When PATH is set to \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n\r\n  @motivating\r\n  Scenario: Stat has a loading state\r\n    Given isDemo() returns false\r\n    And the component's stat type prop is valid\r\n    When the component renders\r\n    Then The stat value displays \"...\"\r\n    And when the stat query is completed\r\n    And the stat value displays a value\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goal stat requires metricType and goalId\r\n    Given the statType prop is <statType>\r\n    When the component renders\r\n    Then the label is <label>\r\n    And the stat value is <InvalidStatValue>\r\n    Examples:\r\n      | statType                              | label         | InvalidStatValue |\r\n      | /programGoals                         | BAD PROP TYPE | true             |\r\n      | /programGoals/count                   | BAD PROP TYPE | true             |\r\n      | /programGoals/conversionCount         | BAD PROP TYPE | true             |\r\n      | /programGoals/My-Goal                 | BAD PROP TYPE | true             |\r\n      | /programGoals/count/My-Goal           | Program Goals | false            |\r\n      | /programGoals/conversionCount/My-Goal | Program Goals | false            |\r\n\r\n  @motivating\r\n  Scenario Outline: rewardCountFiltered supports many formats\r\n    Given the statType begins with \"/rewardCountFiltered\"\r\n    When the component renders with <statType>\r\n    Then the stat <mayRender> a value\r\n    Examples:\r\n      | statType                                               | mayRender      |\r\n      | /rewardsCountFiltered                                  | renders        |\r\n      | /rewardsCountFiltered/COFFEE                           | doesn't render |\r\n      | /rewardsCountFiltered/global                           | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION                      | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION/global               | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT                     | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT/global              | renders        |\r\n      | /rewardsCountFiltered/CREDIT                           | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/global                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/PENDING            | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE          | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD                | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global         | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING        | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders        |\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n    Given the statType is <statType>\r\n    When the stat is queried\r\n    Then the stat is filtered by <decodedFilter>\r\n    And a value <mayBe> rendered\r\n    Examples:\r\n      | statType                                | decodedFilter     | may   |\r\n      | /rewardBalance/CREDIT/COFFEE            | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CENTS             | CENTS             | is    |\r\n      | /rewardBalance/CREDIT/COFFEE%2FUSD      | COFFEE/USD        | is    |\r\n      | /rewardBalance/CREDIT/COFFEE/USD        | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CASH              | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH/USD          | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH%2FUSD        | CASH/USD          | is    |\r\n      | /programGoals/count/My-Goal             | My-Goal           | is    |\r\n      | /programGoals/count/My-Goal/referrals   |                   | isn't |\r\n      | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: User custom fields can be queried\r\n    Given the StatType is <statType>\r\n    When the stat is queried\r\n    Then the value matches that of the users <customField>\r\n    Examples:\r\n      | statType                         | customField        |\r\n      | /customFields/videosShared       | videosShared       |\r\n      | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n  @motivating\r\n  Scenario Outline: Some stats can use a global value instead of filtered by program\r\n    Given the stat <statName>\r\n    Then the global value <mayBe> available\r\n    Examples:\r\n      | statName                        | mayBe |\r\n      | referralsCount                  | isn't |\r\n      | referralsMonth                  | isn't |\r\n      | referralsWeek                   | isn't |\r\n      | rewardsCount                    | is    |\r\n      | rewardsCountFiltered            | is    |\r\n      | integrationRewardsCountFiltered | is    |\r\n      | rewardsMonth                    | is    |\r\n      | rewardsWeek                     | is    |\r\n      | rewardsAssigned                 | is    |\r\n      | rewardsRedeemed                 | is    |\r\n      | rewardsAvailable                | is    |\r\n      | rewardBalance                   | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n    Given statType prop is <statType>\r\n    Then the stat returned has a <filter>\r\n    Examples:\r\n      | statType                  | filter                                                   |\r\n      | /referralsCount           | { programId_eq: programId }                              |\r\n      | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true }  |\r\n      | /referralsCount/started   | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n  @motivating\r\n  Scenario: Program context is used by default to source the programId used for queries\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the stat is loaded in an environment for \"program-a\"\r\n    And the \"program-id\" prop is not used\r\n    When the stat is queried\r\n    Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n    And only results from \"program-a\" are returned\r\n\r\n  @motivating\r\n  Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the \"program-id\" prop has <value>\r\n    When the stat is queried\r\n    Then the query has a <filter>\r\n    And only results from <value> are returned\r\n    Examples:\r\n      | value     | filter                        |\r\n      | program-b | { programId_eq: \"program-b\" } |\r\n      | program-c | { programId_eq: \"program-c\" } |";
+const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n  Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n  @minutia\r\n  Scenario: Demo hook retrieves label using stat pattern\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type            |\r\n      | /referralsCount |\r\n    Then the label is: \"REFERRALS - COUNT\"\r\n    And the value is: \"12345\"\r\n\r\n  @minutia\r\n  Scenario: Demo hook falls back to default label on invalid path\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type       |\r\n      | a bad path |\r\n    Then the label is: \"Demo Label\"\r\n    And the value is: \"12345\"\r\n\r\n  @motivating\r\n  Scenario: Displays error on unrecognized path\r\n    Given isDemo() returns false\r\n    And the component renders with props:\r\n      | type                       |\r\n      | /(doesNotExistNopeNotHere) |\r\n    Then the label is: \"BAD PROP TYPE\"\r\n    And the value is: \"!!!\"\r\n\r\n  @motivating\r\n  Scenario Outline: Label displays correctly\r\n    Given the type prop is set to <type>\r\n    When the component renders\r\n    Then the label is <label>\r\n    Given isDemo() returns true\r\n    When the component renders\r\n    Then the label is <inferredLabel>\r\n    Examples:\r\n      | path             | label                   | inferredLabel     |\r\n      | rewardsAssigned  | Rewards Earned          | Rewards Assigned  |\r\n      | rewardsRedeemed  | Rewards Paid            | Rewards Redeemed  |\r\n      | rewardsAvailable | Rewards Available       | Rewards Available |\r\n      | referralsCount   | Referrals - Count       | Referrals Count   |\r\n      | referralsMonth   | Referrals - This Month  | Referrals Month   |\r\n      | referralsWeek    | Referrals - This Week   | Referrals Week    |\r\n      | rewardsCount     | Rewards - Count         | Rewards Count     |\r\n      | rewardsMonth     | Rewards - This Month    | Rewards Month     |\r\n      | rewardsWeek      | Rewards - This Week     | Rewards Week      |\r\n      | rewardBalance    | Balance - Credit Earned | Reward Balance    |\r\n      | customField      | Custom Fields           | Custom Fields     |\r\n      | programGoals     | Program Goals           | Program Goals     |\r\n\r\n  @motivating\r\n  Scenario: Display user's credit\r\n    Given isDemo() returns false\r\n    And the user has earned 34 COFFEE from the program\r\n    And the component renders with props:\r\n      | type                                     |\r\n      | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n    Then the label is: \"Balance - Credit Earned\"\r\n    And the value is: \"34 COFFEE\"\r\n\r\n  @minutia\r\n  Scenario: Memoizes most recent query\r\n    Given isDemo() returns false\r\n    And the component's type prop is set to a variable named PATH\r\n    And PATH is \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When the component reloads given some external reload\r\n    Then the component doesn't show a loading state\r\n    When PATH is set to \"/rewardsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When PATH is set to \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n\r\n  @motivating\r\n  Scenario: Stat has a loading state\r\n    Given isDemo() returns false\r\n    And the component's stat type prop is valid\r\n    When the component renders\r\n    Then The stat value displays \"...\"\r\n    And when the stat query is completed\r\n    And the stat value displays a value\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goal stat requires metricType and goalId\r\n    Given the statType prop is <statType>\r\n    When the component renders\r\n    Then the label is <label>\r\n    And the stat value is <InvalidStatValue>\r\n    Examples:\r\n      | statType                              | label         | InvalidStatValue |\r\n      | /programGoals                         | BAD PROP TYPE | true             |\r\n      | /programGoals/count                   | BAD PROP TYPE | true             |\r\n      | /programGoals/conversionCount         | BAD PROP TYPE | true             |\r\n      | /programGoals/My-Goal                 | BAD PROP TYPE | true             |\r\n      | /programGoals/count/My-Goal           | Program Goals | false            |\r\n      | /programGoals/conversionCount/My-Goal | Program Goals | false            |\r\n\r\n  @motivating\r\n  Scenario Outline: rewardCountFiltered supports many formats\r\n    Given the statType begins with \"/rewardCountFiltered\"\r\n    When the component renders with <statType>\r\n    Then the stat <mayRender> a value\r\n    Examples:\r\n      | statType                                               | mayRender      |\r\n      | /rewardsCountFiltered                                  | renders        |\r\n      | /rewardsCountFiltered/COFFEE                           | doesn't render |\r\n      | /rewardsCountFiltered/global                           | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION                      | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION/global               | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT                     | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT/global              | renders        |\r\n      | /rewardsCountFiltered/CREDIT                           | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/global                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/PENDING            | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE          | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD                | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global         | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING        | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders        |\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n    Given the statType is <statType>\r\n    When the stat is queried\r\n    Then the stat is filtered by <decodedFilter>\r\n    And a value <mayBe> rendered\r\n    Examples:\r\n      | statType                                | decodedFilter     | may   |\r\n      | /rewardBalance/CREDIT/COFFEE            | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CENTS             | CENTS             | is    |\r\n      | /rewardBalance/CREDIT/COFFEE%2FUSD      | COFFEE/USD        | is    |\r\n      | /rewardBalance/CREDIT/COFFEE/USD        | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CASH              | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH/USD          | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH%2FUSD        | CASH/USD          | is    |\r\n      | /programGoals/count/My-Goal             | My-Goal           | is    |\r\n      | /programGoals/count/My-Goal/referrals   |                   | isn't |\r\n      | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: User custom fields can be queried\r\n    Given the StatType is <statType>\r\n    When the stat is queried\r\n    Then the value matches that of the users <customField>\r\n    Examples:\r\n      | statType                         | customField        |\r\n      | /customFields/videosShared       | videosShared       |\r\n      | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n  @motivating\r\n  Scenario Outline: Some stats can use a global value instead of filtered by program\r\n    Given the stat <statName>\r\n    Then the global value <mayBe> available\r\n    Examples:\r\n      | statName                        | mayBe |\r\n      | referralsCount                  | isn't |\r\n      | referralsMonth                  | isn't |\r\n      | referralsWeek                   | isn't |\r\n      | rewardsCount                    | is    |\r\n      | rewardsCountFiltered            | is    |\r\n      | integrationRewardsCountFiltered | is    |\r\n      | rewardsMonth                    | is    |\r\n      | rewardsWeek                     | is    |\r\n      | rewardsAssigned                 | is    |\r\n      | rewardsRedeemed                 | is    |\r\n      | rewardsRedeemedWeek             | is    |\r\n      | rewardsRedeemedMonth            | is    |\r\n      | rewardsPending                  | is    |\r\n      | rewardsAvailable                | is    |\r\n      | rewardBalance                   | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n    Given statType prop is <statType>\r\n    Then the stat returned has a <filter>\r\n    Examples:\r\n      | statType                  | filter                                                   |\r\n      | /referralsCount           | { programId_eq: programId }                              |\r\n      | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true }  |\r\n      | /referralsCount/started   | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n  @motivating\r\n  Scenario: Program context is used by default to source the programId used for queries\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the stat is loaded in an environment for \"program-a\"\r\n    And the \"program-id\" prop is not used\r\n    When the stat is queried\r\n    Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n    And only results from \"program-a\" are returned\r\n\r\n  @motivating\r\n  Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the \"program-id\" prop has <value>\r\n    When the stat is queried\r\n    Then the query has a <filter>\r\n    And only results from <value> are returned\r\n    Examples:\r\n      | value     | filter                        |\r\n      | program-b | { programId_eq: \"program-b\" } |\r\n      | program-c | { programId_eq: \"program-c\" } |\r\n\r\n\r\n  @motivating\r\n  Scenario: \"/rewardsReedemedWeek\" stat shows rewards that have been redeemed this week\r\n    Given a user reeemed the following rewards\r\n      | reward     | dateRedeemed | programId |\r\n      | $1.00 USD  | 2023-08-18   | A         |\r\n      | $1.00 CAD  | 2023-08-18   | A         |\r\n      | $1.00 AUD  | 2023-08-18   | A         |\r\n      | $1.00 USD  | 2023-08-10   | A         |\r\n      | $20.00 USD | 2023-08-18   | B         |\r\n      | $20.00 CAD | 2023-08-18   | B         |\r\n      | $20.00 AUD | 2023-08-18   | B         |\r\n      | $20.00 USD | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-20   |           |\r\n    And the current date is \"2023-08-22\"\r\n    And the program of the stat is <programId>\r\n    And the statType is <statType>\r\n    Then the stat displays <statValue>\r\n      | programId | statType                               | statValue |\r\n      | A         | /rewardsReedemedWeek/CREDIT/USD        | USD1.00   |\r\n      | A         | /rewardsReedemedWeek/CREDIT/CAD        | CAD1.00   |\r\n      | A         | /rewardsReedemedWeek/CREDIT/AUD        | AUD1.00   |\r\n      | B         | /rewardsReedemedWeek/CREDIT/USD        | USD20.00  |\r\n      | B         | /rewardsReedemedWeek/CREDIT/CAD        | CAD20.00  |\r\n      | B         | /rewardsReedemedWeek/CREDIT/AUD        | AUD20.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/USD/global | USD21.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/CAD/global | CAD21.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/GBP/global | GBP20.00  |\r\n\r\n  @motivating\r\n  Scenario: \"/rewardsReedemedMonth\" stat shows rewards that have been redeemed this month\r\n    Given a user reeemed the following rewards\r\n      | reward     | dateRedeemed | programId |\r\n      | $1.00 USD  | 2023-08-18   | A         |\r\n      | $1.00 CAD  | 2023-08-18   | A         |\r\n      | $1.00 AUD  | 2023-08-18   | A         |\r\n      | $1.00 USD  | 2023-07-31   | A         |\r\n      | $20.00 USD | 2023-08-18   | B         |\r\n      | $20.00 CAD | 2023-08-18   | B         |\r\n      | $20.00 AUD | 2023-08-18   | B         |\r\n      | $20.00 USD | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-20   |           |\r\n      | $20.00 GBP | 2023-07-31   |           |\r\n    And the current date is \"2023-08-22\"\r\n    And the program of the stat is <programId>\r\n    And the statType is <statType>\r\n    Then the stat displays <statValue>\r\n      | programId | statType                                | statValue |\r\n      | A         | /rewardsReedemedMonth/CREDIT/USD        | USD1.00   |\r\n      | A         | /rewardsReedemedMonth/CREDIT/CAD        | CAD1.00   |\r\n      | A         | /rewardsReedemedMonth/CREDIT/AUD        | AUD1.00   |\r\n      | B         | /rewardsReedemedMonth/CREDIT/USD        | USD20.00  |\r\n      | B         | /rewardsReedemedMonth/CREDIT/CAD        | CAD20.00  |\r\n      | B         | /rewardsReedemedMonth/CREDIT/AUD        | AUD20.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/USD/global | USD41.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/CAD/global | CAD21.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/GBP/global | GBP40.00  |\r\n\r\n\r\n  @landmine\r\n  Scenario Outline: Rewards redeemed by week and month stats only include rewards that have been fully redeemed\r\n    Given statType prop is <statType>\r\n    And the user has fully redeemed a $50.00 USD reward\r\n    And the user has redeemed <amountRedeemed> of a $50.00 USD reward\r\n    Then the stat displays <statValue>\r\n    Examples:\r\n      | statType                                | amountRedeemed | statValue |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $0.00          | $50.00    |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $0.00          | $50.00    |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $0.00          | $50.00    |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $25.00         | $75.00    |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $25.00         | $50.00    |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $25.00         | $50.00    |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $50.00         | $100.00   |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $50.00         | $100.00   |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $50.00         | $100.00   |\r\n\r\n  @landmine\r\n  Scenario Outline: Rewards redeemed by week and month stats can only count up to 1000 redeemed rewards during the period\r\n    Given statType prop is <statType>\r\n    And the user has fully redeemed 1001 $1.00 USD rewards in the past <timeframe>\r\n    Then the stat displays <statValue>\r\n    Examples:\r\n      | statType                                | timeframe | statValue |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | N/A       | $1001.00  |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | week      | $1000.00  |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | month     | $1000.00  |\r\n";
 
 const BigStat_stories = {
   title: "Components/Big Stat",
@@ -2909,6 +2909,8 @@ const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth
 const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
 const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
 const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+const RewardsPending = createHookStory(() => View("/rewardsPending/CREDIT/USD", "/(rewardsPending)/:statType/:unit/:global?"));
+const RewardsPendingGlobal = createHookStory(() => View("/rewardsPending/CREDIT/USD/global", "/(rewardsPending)/:statType/:unit/:global?"));
 const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/USD", "/(rewardsRedeemed)/:statType/:unit/:global?"));
 const RewardsRedeemedWeek = createHookStory(() => View("/rewardsRedeemedWeek/CREDIT/USD", "/(rewardsRedeemedWeek)/:statType/:unit/:global?"));
 const RewardsRedeemedMonth = createHookStory(() => View("/rewardsRedeemedMonth/CREDIT/USD", "/(rewardsRedeemedMonth)/:statType/:unit/:global?"));
@@ -2967,6 +2969,8 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsWeek: RewardsWeek,
   RewardsAssigned: RewardsAssigned,
   RewardsAssignedCashUSD: RewardsAssignedCashUSD,
+  RewardsPending: RewardsPending,
+  RewardsPendingGlobal: RewardsPendingGlobal,
   RewardsRedeemed: RewardsRedeemed,
   RewardsRedeemedWeek: RewardsRedeemedWeek,
   RewardsRedeemedMonth: RewardsRedeemedMonth,

package/dist/collection/components/sqm-big-stat/UseBigStat.stories.js

@@ -84,6 +84,8 @@ export const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewar
 export const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
 export const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
 export const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+export const RewardsPending = createHookStory(() => View("/rewardsPending/CREDIT/USD", "/(rewardsPending)/:statType/:unit/:global?"));
+export const RewardsPendingGlobal = createHookStory(() => View("/rewardsPending/CREDIT/USD/global", "/(rewardsPending)/:statType/:unit/:global?"));
 export const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/USD", "/(rewardsRedeemed)/:statType/:unit/:global?"));
 export const RewardsRedeemedWeek = createHookStory(() => View("/rewardsRedeemedWeek/CREDIT/USD", "/(rewardsRedeemedWeek)/:statType/:unit/:global?"));
 export const RewardsRedeemedMonth = createHookStory(() => View("/rewardsRedeemedMonth/CREDIT/USD", "/(rewardsRedeemedMonth)/:statType/:unit/:global?"));

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -289,6 +289,49 @@ _, global = "") => {
     });
   });
 };
+const rewardsPendingQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyPendingCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyPendingCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyPendingCredit) || fallback,
+    };
+  });
+};
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(gql `
       query (
@@ -613,6 +656,10 @@ export const queries = {
     label: "Rewards Earned",
     query: rewardsAssignedQuery,
   },
+  rewardsPending: {
+    label: "Rewards Pending",
+    query: rewardsPendingQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -700,6 +747,10 @@ export const StatPaths = [
     name: "rewardsAssigned",
     route: "/(rewardsAssigned)/:statType/:unit/:global?",
   },
+  {
+    name: "rewardsPending",
+    route: "/(rewardsPending)/:statType/:unit/:global?",
+  },
   {
     name: "rewardsRedeemed",
     route: "/(rewardsRedeemed)/:statType/:unit/:global?",

package/dist/esm/{ShadowViewAddon-a129a634.js → ShadowViewAddon-fdb8f6a9.js}

@@ -1109,6 +1109,49 @@ _, global = "") => {
     });
   });
 };
+const rewardsPendingQuery = (programId, locale, type, unit, global = "") => {
+  return debugQuery(dist.gql `
+      query (
+        $programId: ID
+        $type: RewardType
+        $unit: String!
+        $locale: RSLocale
+      ) {
+        fallback: formatRewardPrettyValue(
+          value: 0
+          unit: $unit
+          locale: $locale
+          formatType: UNIT_FORMATTED
+        )
+        viewer: viewer {
+          ... on User {
+            rewardBalanceDetails(
+              programId: $programId
+              filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
+            ) {
+              ... on CreditRewardBalance {
+                prettyPendingCredit
+              }
+            }
+          }
+        }
+      }
+    `, {
+    programId: !global && programId !== "classic" ? programId : null,
+    type,
+    unit,
+    locale,
+  }, (res) => {
+    var _a, _b, _c, _d, _e;
+    const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
+    const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyPendingCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyPendingCredit) || fallback,
+    };
+  });
+};
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(dist.gql `
       query (
@@ -1433,6 +1476,10 @@ const queries = {
     label: "Rewards Earned",
     query: rewardsAssignedQuery,
   },
+  rewardsPending: {
+    label: "Rewards Pending",
+    query: rewardsPendingQuery,
+  },
   rewardsRedeemed: {
     label: "Rewards Paid",
     query: rewardsRedeemedQuery,
@@ -1520,6 +1567,10 @@ const StatPaths = [
     name: "rewardsAssigned",
     route: "/(rewardsAssigned)/:statType/:unit/:global?",
   },
+  {
+    name: "rewardsPending",
+    route: "/(rewardsPending)/:statType/:unit/:global?",
+  },
   {
     name: "rewardsRedeemed",
     route: "/(rewardsRedeemed)/:statType/:unit/:global?",

package/dist/esm/sqm-big-stat_39.entry.js

@@ -13,7 +13,7 @@ import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './uti
 import './sqm-text-span-view-1eaedc4d.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-b1f730bd.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, k as RewardExchangeView, X as pathToRegexp, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-a129a634.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, k as RewardExchangeView, X as pathToRegexp, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-fdb8f6a9.js';
 import './sqm-portal-container-view-b7b10841.js';
 
 const BigStat = class {

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

@@ -22,7 +22,7 @@ import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view
 import { P as PortalProfileView } from './sqm-portal-profile-view-cc13ab93.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e4f288e8.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-f0994025.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-a129a634.js';
+import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-fdb8f6a9.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-b7b10841.js';
 
 /**
@@ -1702,7 +1702,7 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   FullStack: FullStack
 });
 
-const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n  Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n  @minutia\r\n  Scenario: Demo hook retrieves label using stat pattern\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type            |\r\n      | /referralsCount |\r\n    Then the label is: \"REFERRALS - COUNT\"\r\n    And the value is: \"12345\"\r\n\r\n  @minutia\r\n  Scenario: Demo hook falls back to default label on invalid path\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type       |\r\n      | a bad path |\r\n    Then the label is: \"Demo Label\"\r\n    And the value is: \"12345\"\r\n\r\n  @motivating\r\n  Scenario: Displays error on unrecognized path\r\n    Given isDemo() returns false\r\n    And the component renders with props:\r\n      | type                       |\r\n      | /(doesNotExistNopeNotHere) |\r\n    Then the label is: \"BAD PROP TYPE\"\r\n    And the value is: \"!!!\"\r\n\r\n  @motivating\r\n  Scenario Outline: Label displays correctly\r\n    Given the type prop is set to <type>\r\n    When the component renders\r\n    Then the label is <label>\r\n    Given isDemo() returns true\r\n    When the component renders\r\n    Then the label is <inferredLabel>\r\n    Examples:\r\n      | path             | label                   | inferredLabel     |\r\n      | rewardsAssigned  | Rewards Earned          | Rewards Assigned  |\r\n      | rewardsRedeemed  | Rewards Paid            | Rewards Redeemed  |\r\n      | rewardsAvailable | Rewards Available       | Rewards Available |\r\n      | referralsCount   | Referrals - Count       | Referrals Count   |\r\n      | referralsMonth   | Referrals - This Month  | Referrals Month   |\r\n      | referralsWeek    | Referrals - This Week   | Referrals Week    |\r\n      | rewardsCount     | Rewards - Count         | Rewards Count     |\r\n      | rewardsMonth     | Rewards - This Month    | Rewards Month     |\r\n      | rewardsWeek      | Rewards - This Week     | Rewards Week      |\r\n      | rewardBalance    | Balance - Credit Earned | Reward Balance    |\r\n      | customField      | Custom Fields           | Custom Fields     |\r\n      | programGoals     | Program Goals           | Program Goals     |\r\n\r\n  @motivating\r\n  Scenario: Display user's credit\r\n    Given isDemo() returns false\r\n    And the user has earned 34 COFFEE from the program\r\n    And the component renders with props:\r\n      | type                                     |\r\n      | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n    Then the label is: \"Balance - Credit Earned\"\r\n    And the value is: \"34 COFFEE\"\r\n\r\n  @minutia\r\n  Scenario: Memoizes most recent query\r\n    Given isDemo() returns false\r\n    And the component's type prop is set to a variable named PATH\r\n    And PATH is \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When the component reloads given some external reload\r\n    Then the component doesn't show a loading state\r\n    When PATH is set to \"/rewardsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When PATH is set to \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n\r\n  @motivating\r\n  Scenario: Stat has a loading state\r\n    Given isDemo() returns false\r\n    And the component's stat type prop is valid\r\n    When the component renders\r\n    Then The stat value displays \"...\"\r\n    And when the stat query is completed\r\n    And the stat value displays a value\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goal stat requires metricType and goalId\r\n    Given the statType prop is <statType>\r\n    When the component renders\r\n    Then the label is <label>\r\n    And the stat value is <InvalidStatValue>\r\n    Examples:\r\n      | statType                              | label         | InvalidStatValue |\r\n      | /programGoals                         | BAD PROP TYPE | true             |\r\n      | /programGoals/count                   | BAD PROP TYPE | true             |\r\n      | /programGoals/conversionCount         | BAD PROP TYPE | true             |\r\n      | /programGoals/My-Goal                 | BAD PROP TYPE | true             |\r\n      | /programGoals/count/My-Goal           | Program Goals | false            |\r\n      | /programGoals/conversionCount/My-Goal | Program Goals | false            |\r\n\r\n  @motivating\r\n  Scenario Outline: rewardCountFiltered supports many formats\r\n    Given the statType begins with \"/rewardCountFiltered\"\r\n    When the component renders with <statType>\r\n    Then the stat <mayRender> a value\r\n    Examples:\r\n      | statType                                               | mayRender      |\r\n      | /rewardsCountFiltered                                  | renders        |\r\n      | /rewardsCountFiltered/COFFEE                           | doesn't render |\r\n      | /rewardsCountFiltered/global                           | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION                      | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION/global               | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT                     | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT/global              | renders        |\r\n      | /rewardsCountFiltered/CREDIT                           | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/global                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/PENDING            | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE          | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD                | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global         | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING        | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders        |\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n    Given the statType is <statType>\r\n    When the stat is queried\r\n    Then the stat is filtered by <decodedFilter>\r\n    And a value <mayBe> rendered\r\n    Examples:\r\n      | statType                                | decodedFilter     | may   |\r\n      | /rewardBalance/CREDIT/COFFEE            | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CENTS             | CENTS             | is    |\r\n      | /rewardBalance/CREDIT/COFFEE%2FUSD      | COFFEE/USD        | is    |\r\n      | /rewardBalance/CREDIT/COFFEE/USD        | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CASH              | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH/USD          | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH%2FUSD        | CASH/USD          | is    |\r\n      | /programGoals/count/My-Goal             | My-Goal           | is    |\r\n      | /programGoals/count/My-Goal/referrals   |                   | isn't |\r\n      | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: User custom fields can be queried\r\n    Given the StatType is <statType>\r\n    When the stat is queried\r\n    Then the value matches that of the users <customField>\r\n    Examples:\r\n      | statType                         | customField        |\r\n      | /customFields/videosShared       | videosShared       |\r\n      | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n  @motivating\r\n  Scenario Outline: Some stats can use a global value instead of filtered by program\r\n    Given the stat <statName>\r\n    Then the global value <mayBe> available\r\n    Examples:\r\n      | statName                        | mayBe |\r\n      | referralsCount                  | isn't |\r\n      | referralsMonth                  | isn't |\r\n      | referralsWeek                   | isn't |\r\n      | rewardsCount                    | is    |\r\n      | rewardsCountFiltered            | is    |\r\n      | integrationRewardsCountFiltered | is    |\r\n      | rewardsMonth                    | is    |\r\n      | rewardsWeek                     | is    |\r\n      | rewardsAssigned                 | is    |\r\n      | rewardsRedeemed                 | is    |\r\n      | rewardsAvailable                | is    |\r\n      | rewardBalance                   | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n    Given statType prop is <statType>\r\n    Then the stat returned has a <filter>\r\n    Examples:\r\n      | statType                  | filter                                                   |\r\n      | /referralsCount           | { programId_eq: programId }                              |\r\n      | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true }  |\r\n      | /referralsCount/started   | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n  @motivating\r\n  Scenario: Program context is used by default to source the programId used for queries\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the stat is loaded in an environment for \"program-a\"\r\n    And the \"program-id\" prop is not used\r\n    When the stat is queried\r\n    Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n    And only results from \"program-a\" are returned\r\n\r\n  @motivating\r\n  Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the \"program-id\" prop has <value>\r\n    When the stat is queried\r\n    Then the query has a <filter>\r\n    And only results from <value> are returned\r\n    Examples:\r\n      | value     | filter                        |\r\n      | program-b | { programId_eq: \"program-b\" } |\r\n      | program-c | { programId_eq: \"program-c\" } |";
+const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n  Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n  @minutia\r\n  Scenario: Demo hook retrieves label using stat pattern\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type            |\r\n      | /referralsCount |\r\n    Then the label is: \"REFERRALS - COUNT\"\r\n    And the value is: \"12345\"\r\n\r\n  @minutia\r\n  Scenario: Demo hook falls back to default label on invalid path\r\n    Given isDemo() returns true\r\n    And the component renders with props:\r\n      | type       |\r\n      | a bad path |\r\n    Then the label is: \"Demo Label\"\r\n    And the value is: \"12345\"\r\n\r\n  @motivating\r\n  Scenario: Displays error on unrecognized path\r\n    Given isDemo() returns false\r\n    And the component renders with props:\r\n      | type                       |\r\n      | /(doesNotExistNopeNotHere) |\r\n    Then the label is: \"BAD PROP TYPE\"\r\n    And the value is: \"!!!\"\r\n\r\n  @motivating\r\n  Scenario Outline: Label displays correctly\r\n    Given the type prop is set to <type>\r\n    When the component renders\r\n    Then the label is <label>\r\n    Given isDemo() returns true\r\n    When the component renders\r\n    Then the label is <inferredLabel>\r\n    Examples:\r\n      | path             | label                   | inferredLabel     |\r\n      | rewardsAssigned  | Rewards Earned          | Rewards Assigned  |\r\n      | rewardsRedeemed  | Rewards Paid            | Rewards Redeemed  |\r\n      | rewardsAvailable | Rewards Available       | Rewards Available |\r\n      | referralsCount   | Referrals - Count       | Referrals Count   |\r\n      | referralsMonth   | Referrals - This Month  | Referrals Month   |\r\n      | referralsWeek    | Referrals - This Week   | Referrals Week    |\r\n      | rewardsCount     | Rewards - Count         | Rewards Count     |\r\n      | rewardsMonth     | Rewards - This Month    | Rewards Month     |\r\n      | rewardsWeek      | Rewards - This Week     | Rewards Week      |\r\n      | rewardBalance    | Balance - Credit Earned | Reward Balance    |\r\n      | customField      | Custom Fields           | Custom Fields     |\r\n      | programGoals     | Program Goals           | Program Goals     |\r\n\r\n  @motivating\r\n  Scenario: Display user's credit\r\n    Given isDemo() returns false\r\n    And the user has earned 34 COFFEE from the program\r\n    And the component renders with props:\r\n      | type                                     |\r\n      | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n    Then the label is: \"Balance - Credit Earned\"\r\n    And the value is: \"34 COFFEE\"\r\n\r\n  @minutia\r\n  Scenario: Memoizes most recent query\r\n    Given isDemo() returns false\r\n    And the component's type prop is set to a variable named PATH\r\n    And PATH is \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When the component reloads given some external reload\r\n    Then the component doesn't show a loading state\r\n    When PATH is set to \"/rewardsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n    When PATH is set to \"/referralsWeek\"\r\n    Then the component shows a loading state before showing the result\r\n\r\n  @motivating\r\n  Scenario: Stat has a loading state\r\n    Given isDemo() returns false\r\n    And the component's stat type prop is valid\r\n    When the component renders\r\n    Then The stat value displays \"...\"\r\n    And when the stat query is completed\r\n    And the stat value displays a value\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goal stat requires metricType and goalId\r\n    Given the statType prop is <statType>\r\n    When the component renders\r\n    Then the label is <label>\r\n    And the stat value is <InvalidStatValue>\r\n    Examples:\r\n      | statType                              | label         | InvalidStatValue |\r\n      | /programGoals                         | BAD PROP TYPE | true             |\r\n      | /programGoals/count                   | BAD PROP TYPE | true             |\r\n      | /programGoals/conversionCount         | BAD PROP TYPE | true             |\r\n      | /programGoals/My-Goal                 | BAD PROP TYPE | true             |\r\n      | /programGoals/count/My-Goal           | Program Goals | false            |\r\n      | /programGoals/conversionCount/My-Goal | Program Goals | false            |\r\n\r\n  @motivating\r\n  Scenario Outline: rewardCountFiltered supports many formats\r\n    Given the statType begins with \"/rewardCountFiltered\"\r\n    When the component renders with <statType>\r\n    Then the stat <mayRender> a value\r\n    Examples:\r\n      | statType                                               | mayRender      |\r\n      | /rewardsCountFiltered                                  | renders        |\r\n      | /rewardsCountFiltered/COFFEE                           | doesn't render |\r\n      | /rewardsCountFiltered/global                           | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION                      | renders        |\r\n      | /rewardsCountFiltered/INTEGRATION/global               | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT                     | renders        |\r\n      | /rewardsCountFiltered/PCT_DISCOUNT/global              | renders        |\r\n      | /rewardsCountFiltered/CREDIT                           | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/global                    | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/PENDING            | renders        |\r\n      | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE          | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD                | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global         | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING        | renders        |\r\n      | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders        |\r\n\r\n  @motivating\r\n  Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n    Given the statType is <statType>\r\n    When the stat is queried\r\n    Then the stat is filtered by <decodedFilter>\r\n    And a value <mayBe> rendered\r\n    Examples:\r\n      | statType                                | decodedFilter     | may   |\r\n      | /rewardBalance/CREDIT/COFFEE            | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CENTS             | CENTS             | is    |\r\n      | /rewardBalance/CREDIT/COFFEE%2FUSD      | COFFEE/USD        | is    |\r\n      | /rewardBalance/CREDIT/COFFEE/USD        | COFFEE            | is    |\r\n      | /rewardBalance/CREDIT/CASH              | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH/USD          | CASH              | is    |\r\n      | /rewardBalance/CREDIT/CASH%2FUSD        | CASH/USD          | is    |\r\n      | /programGoals/count/My-Goal             | My-Goal           | is    |\r\n      | /programGoals/count/My-Goal/referrals   |                   | isn't |\r\n      | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: User custom fields can be queried\r\n    Given the StatType is <statType>\r\n    When the stat is queried\r\n    Then the value matches that of the users <customField>\r\n    Examples:\r\n      | statType                         | customField        |\r\n      | /customFields/videosShared       | videosShared       |\r\n      | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n  @motivating\r\n  Scenario Outline: Some stats can use a global value instead of filtered by program\r\n    Given the stat <statName>\r\n    Then the global value <mayBe> available\r\n    Examples:\r\n      | statName                        | mayBe |\r\n      | referralsCount                  | isn't |\r\n      | referralsMonth                  | isn't |\r\n      | referralsWeek                   | isn't |\r\n      | rewardsCount                    | is    |\r\n      | rewardsCountFiltered            | is    |\r\n      | integrationRewardsCountFiltered | is    |\r\n      | rewardsMonth                    | is    |\r\n      | rewardsWeek                     | is    |\r\n      | rewardsAssigned                 | is    |\r\n      | rewardsRedeemed                 | is    |\r\n      | rewardsRedeemedWeek             | is    |\r\n      | rewardsRedeemedMonth            | is    |\r\n      | rewardsPending                  | is    |\r\n      | rewardsAvailable                | is    |\r\n      | rewardBalance                   | is    |\r\n\r\n  @motivating\r\n  Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n    Given statType prop is <statType>\r\n    Then the stat returned has a <filter>\r\n    Examples:\r\n      | statType                  | filter                                                   |\r\n      | /referralsCount           | { programId_eq: programId }                              |\r\n      | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true }  |\r\n      | /referralsCount/started   | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n  @motivating\r\n  Scenario: Program context is used by default to source the programId used for queries\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the stat is loaded in an environment for \"program-a\"\r\n    And the \"program-id\" prop is not used\r\n    When the stat is queried\r\n    Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n    And only results from \"program-a\" are returned\r\n\r\n  @motivating\r\n  Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n    Given a valid \"statType\"\r\n    And its not a global stat\r\n    And the \"program-id\" prop has <value>\r\n    When the stat is queried\r\n    Then the query has a <filter>\r\n    And only results from <value> are returned\r\n    Examples:\r\n      | value     | filter                        |\r\n      | program-b | { programId_eq: \"program-b\" } |\r\n      | program-c | { programId_eq: \"program-c\" } |\r\n\r\n\r\n  @motivating\r\n  Scenario: \"/rewardsReedemedWeek\" stat shows rewards that have been redeemed this week\r\n    Given a user reeemed the following rewards\r\n      | reward     | dateRedeemed | programId |\r\n      | $1.00 USD  | 2023-08-18   | A         |\r\n      | $1.00 CAD  | 2023-08-18   | A         |\r\n      | $1.00 AUD  | 2023-08-18   | A         |\r\n      | $1.00 USD  | 2023-08-10   | A         |\r\n      | $20.00 USD | 2023-08-18   | B         |\r\n      | $20.00 CAD | 2023-08-18   | B         |\r\n      | $20.00 AUD | 2023-08-18   | B         |\r\n      | $20.00 USD | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-20   |           |\r\n    And the current date is \"2023-08-22\"\r\n    And the program of the stat is <programId>\r\n    And the statType is <statType>\r\n    Then the stat displays <statValue>\r\n      | programId | statType                               | statValue |\r\n      | A         | /rewardsReedemedWeek/CREDIT/USD        | USD1.00   |\r\n      | A         | /rewardsReedemedWeek/CREDIT/CAD        | CAD1.00   |\r\n      | A         | /rewardsReedemedWeek/CREDIT/AUD        | AUD1.00   |\r\n      | B         | /rewardsReedemedWeek/CREDIT/USD        | USD20.00  |\r\n      | B         | /rewardsReedemedWeek/CREDIT/CAD        | CAD20.00  |\r\n      | B         | /rewardsReedemedWeek/CREDIT/AUD        | AUD20.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/USD/global | USD21.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/CAD/global | CAD21.00  |\r\n      | N/A       | /rewardsReedemedWeek/CREDIT/GBP/global | GBP20.00  |\r\n\r\n  @motivating\r\n  Scenario: \"/rewardsReedemedMonth\" stat shows rewards that have been redeemed this month\r\n    Given a user reeemed the following rewards\r\n      | reward     | dateRedeemed | programId |\r\n      | $1.00 USD  | 2023-08-18   | A         |\r\n      | $1.00 CAD  | 2023-08-18   | A         |\r\n      | $1.00 AUD  | 2023-08-18   | A         |\r\n      | $1.00 USD  | 2023-07-31   | A         |\r\n      | $20.00 USD | 2023-08-18   | B         |\r\n      | $20.00 CAD | 2023-08-18   | B         |\r\n      | $20.00 AUD | 2023-08-18   | B         |\r\n      | $20.00 USD | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-01   | B         |\r\n      | $20.00 GBP | 2023-08-20   |           |\r\n      | $20.00 GBP | 2023-07-31   |           |\r\n    And the current date is \"2023-08-22\"\r\n    And the program of the stat is <programId>\r\n    And the statType is <statType>\r\n    Then the stat displays <statValue>\r\n      | programId | statType                                | statValue |\r\n      | A         | /rewardsReedemedMonth/CREDIT/USD        | USD1.00   |\r\n      | A         | /rewardsReedemedMonth/CREDIT/CAD        | CAD1.00   |\r\n      | A         | /rewardsReedemedMonth/CREDIT/AUD        | AUD1.00   |\r\n      | B         | /rewardsReedemedMonth/CREDIT/USD        | USD20.00  |\r\n      | B         | /rewardsReedemedMonth/CREDIT/CAD        | CAD20.00  |\r\n      | B         | /rewardsReedemedMonth/CREDIT/AUD        | AUD20.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/USD/global | USD41.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/CAD/global | CAD21.00  |\r\n      | N/A       | /rewardsReedemedMonth/CREDIT/GBP/global | GBP40.00  |\r\n\r\n\r\n  @landmine\r\n  Scenario Outline: Rewards redeemed by week and month stats only include rewards that have been fully redeemed\r\n    Given statType prop is <statType>\r\n    And the user has fully redeemed a $50.00 USD reward\r\n    And the user has redeemed <amountRedeemed> of a $50.00 USD reward\r\n    Then the stat displays <statValue>\r\n    Examples:\r\n      | statType                                | amountRedeemed | statValue |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $0.00          | $50.00    |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $0.00          | $50.00    |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $0.00          | $50.00    |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $25.00         | $75.00    |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $25.00         | $50.00    |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $25.00         | $50.00    |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | $50.00         | $100.00   |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | $50.00         | $100.00   |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | $50.00         | $100.00   |\r\n\r\n  @landmine\r\n  Scenario Outline: Rewards redeemed by week and month stats can only count up to 1000 redeemed rewards during the period\r\n    Given statType prop is <statType>\r\n    And the user has fully redeemed 1001 $1.00 USD rewards in the past <timeframe>\r\n    Then the stat displays <statValue>\r\n    Examples:\r\n      | statType                                | timeframe | statValue |\r\n      | /rewardsRedeemed/CREDIT/USD/global      | N/A       | $1001.00  |\r\n      | /rewardsRedeemedWeek/CREDIT/USD/global  | week      | $1000.00  |\r\n      | /rewardsRedeemedMonth/CREDIT/USD/global | month     | $1000.00  |\r\n";
 
 const BigStat_stories = {
   title: "Components/Big Stat",
@@ -2905,6 +2905,8 @@ const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth
 const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
 const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
 const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+const RewardsPending = createHookStory(() => View("/rewardsPending/CREDIT/USD", "/(rewardsPending)/:statType/:unit/:global?"));
+const RewardsPendingGlobal = createHookStory(() => View("/rewardsPending/CREDIT/USD/global", "/(rewardsPending)/:statType/:unit/:global?"));
 const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/USD", "/(rewardsRedeemed)/:statType/:unit/:global?"));
 const RewardsRedeemedWeek = createHookStory(() => View("/rewardsRedeemedWeek/CREDIT/USD", "/(rewardsRedeemedWeek)/:statType/:unit/:global?"));
 const RewardsRedeemedMonth = createHookStory(() => View("/rewardsRedeemedMonth/CREDIT/USD", "/(rewardsRedeemedMonth)/:statType/:unit/:global?"));
@@ -2963,6 +2965,8 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsWeek: RewardsWeek,
   RewardsAssigned: RewardsAssigned,
   RewardsAssignedCashUSD: RewardsAssignedCashUSD,
+  RewardsPending: RewardsPending,
+  RewardsPendingGlobal: RewardsPendingGlobal,
   RewardsRedeemed: RewardsRedeemed,
   RewardsRedeemedWeek: RewardsRedeemedWeek,
   RewardsRedeemedMonth: RewardsRedeemedMonth,