Merge pull request #484 from saasquatch/fix/earned-stat-type

fix: update reward balance query to total all status credit balance

Author: Locrian24

packages/mint-components/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.1.2] - 2026-03-09
+
+### Fixed
+
+- \<sqm-big-stat>
+  - Fix expired rewards query reading `prettyAssignedCredit` instead of `prettyExpiredCredit`
+  - Fix cancelled rewards query reading `prettyAssignedCredit` instead of `prettyCancelledCredit`
+  - Fix earned rewards balance calculation to use sum of `totalAssignedCredit` and `totalPendingCredit`
+
 ## [2.1.1] - 2026-02-26
 
 ### Updated
@@ -1461,7 +1470,8 @@ This major release represents a significant advancement in the theming capabilit
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@2.1.1...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@2.1.2...HEAD
+[2.1.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.1.2
 [2.1.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.1.1
 [2.1.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.1.0
 [2.0.10]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.10

packages/mint-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx

@@ -765,8 +765,8 @@ const rewardsExpiredQuery = (
       const arr = res.data?.viewer?.rewardBalanceDetails;
       const fallback = res.data?.fallback;
       return {
-        value: arr?.[0]?.prettyAssignedCredit || 0,
-        statvalue: arr?.[0]?.prettyAssignedCredit || fallback,
+        value: arr?.[0]?.prettyExpiredCredit || 0,
+        statvalue: arr?.[0]?.prettyExpiredCredit || fallback,
       };
     }
   );
@@ -818,8 +818,8 @@ const rewardsCancelledQuery = (
       const arr = res.data?.viewer?.rewardBalanceDetails;
       const fallback = res.data?.fallback;
       return {
-        value: arr?.[0]?.prettyAssignedCredit || 0,
-        statvalue: arr?.[0]?.prettyAssignedCredit || fallback,
+        value: arr?.[0]?.prettyCancelledCredit || 0,
+        statvalue: arr?.[0]?.prettyCancelledCredit || fallback,
       };
     }
   );
@@ -890,14 +890,16 @@ const rewardsBalanceQuery = (
   format = "prettyValue",
   global = ""
 ) => {
+  const formatType = parseRewardValueFormat[format] ?? "UNIT_FORMATTED";
+
   return debugQuery(
     gql`
       query (
         $programId: ID
         $type: RewardType!
         $unit: String!
-        $format: RewardValueFormatType!
         $locale: RSLocale
+        $format: RewardValueFormatType!
       ) {
         fallback: formatRewardPrettyValue(
           value: 0
@@ -913,7 +915,8 @@ const rewardsBalanceQuery = (
               locale: $locale
             ) {
               ... on CreditRewardBalance {
-                prettyAvailableValue(formatType: $format)
+                totalAssignedCredit
+                totalPendingCredit
               }
             }
           }
@@ -922,18 +925,48 @@ const rewardsBalanceQuery = (
     `,
     {
       programId: !global && programId !== "classic" ? programId : null,
-
       type,
       unit,
-      format: parseRewardValueFormat[format] ?? "UNIT_FORMATTED",
       locale,
+      format: formatType,
     },
     (res) => {
       const arr = res.data?.viewer?.rewardBalanceDetails;
       const fallback = res.data?.fallback;
+      const balance = arr?.[0];
+      const totalEarned = balance
+        ? (balance.totalAssignedCredit || 0) +
+          (balance.totalPendingCredit || 0) 
+        : 0;
+
+      const result = useQuery(
+        gql`
+          query (
+            $value: Int!
+            $unit: String!
+            $locale: RSLocale
+            $format: RewardValueFormatType!
+          ) {
+            formatRewardPrettyValue(
+              value: $value
+              unit: $unit
+              locale: $locale
+              formatType: $format
+            )
+          }
+        `,
+        {
+          value: totalEarned,
+          unit,
+          locale,
+          format: formatType,
+        },
+        res.loading
+      );
+
       return {
-        value: arr?.[0]?.prettyAvailableValue || 0,
-        statvalue: arr?.[0]?.prettyAvailableValue || fallback,
+        value: totalEarned,
+        statvalue: result?.data?.formatRewardPrettyValue || fallback,
       };
     }
   );

packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx

@@ -1,8 +1,8 @@
 import { h, VNode } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { PayoutStatus } from "../sqm-payout-status-alert/usePayoutStatus";
 import { TaxDocumentType } from "../data";
+import { PayoutStatus } from "../sqm-payout-status-alert/usePayoutStatus";
 
 export interface TaxAndCashDashboardProps {
   states: {
@@ -1153,7 +1153,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
                         </span>
                       </div>
                     </span>
-                    {states.noFormNeeded &&
+                    {!states.noFormNeeded &&
                       states.status !== "NOT_VERIFIED" && (
                         <sl-button
                           disabled={states.disabled || states.loading}