From bde7d1c7d60a1b4ead6bfbba83e466b3a2c29885 Mon Sep 17 00:00:00 2001
From: "Kyle B. Johnson" <kyle.johnson@hey.com>
Date: Mon, 27 Jan 2025 10:46:37 -0500
Subject: [PATCH 1/3] fix: Prevent NaN display in stat widget

---
 .../CampaignDetailsPage/Components/CampaignStats/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
index 1de9b3d5b8..3d37525b9c 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -93,7 +93,7 @@ const StatWidget = ({label, values, description, formatter = null}) => {
             </header>
             <div className={styles.statWidgetAmount}>
                 <DisplayText>
-                    {formatter?.format(values[0]) ?? values[0]}
+                    {!isNaN(values[0]) ? formatter?.format(values[0]) ?? values[0] : (<span>&nbsp;</span>)}
                 </DisplayText>
                 {!! values[1] && (
                     <PercentChangePill value={values[0]} comparison={values[1]} />

From fe1658db1599d23cfa5a7709774d7239a416bd4e Mon Sep 17 00:00:00 2001
From: "Kyle B. Johnson" <kyle.johnson@hey.com>
Date: Tue, 28 Jan 2025 17:42:13 -0500
Subject: [PATCH 2/3] chore: Formatting

---
 .../Components/CampaignStats/index.tsx        | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
index 3d37525b9c..421832e7c2 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -3,7 +3,7 @@ import {useEffect, useState} from "react";
 import RevenueChart from "../RevenueChart";
 import GoalProgressChart from "../GoalProgressChart";
 import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
+import {addQueryArgs} from '@wordpress/url';
 import HeaderText from '../HeaderText';
 import HeaderSubText from '../HeaderSubText';
 import DefaultFormWidget from "../DefaultForm";
@@ -21,11 +21,11 @@ declare const window: {
 const pluck = (array: any[], property: string) => array.map(element => element[property])
 
 const filterOptions = [
-    { label: __('Today', 'give'), value: 1, description: __('from today', 'give') },
-    { label: __('Last 7 days', 'give'), value: 7, description: __('from the last 7 days', 'give') },
-    { label: __('Last 30 days', 'give'), value: 30, description: __('from the last 30 days', 'give') },
-    { label: __('Last 90 days', 'give'), value: 90, description: __('from the last 90 days', 'give') },
-    { label: __('All-time', 'give'), value: 0, description: __('total for all-time', 'give') },
+    {label: __('Today', 'give'), value: 1, description: __('from today', 'give')},
+    {label: __('Last 7 days', 'give'), value: 7, description: __('from the last 7 days', 'give')},
+    {label: __('Last 30 days', 'give'), value: 30, description: __('from the last 30 days', 'give')},
+    {label: __('Last 90 days', 'give'), value: 90, description: __('from the last 90 days', 'give')},
+    {label: __('All-time', 'give'), value: 0, description: __('total for all-time', 'give')},
 ]
 
 const currency = new Intl.NumberFormat('en-US', {
@@ -46,7 +46,7 @@ const CampaignStats = () => {
     const onDayRangeChange = async (days: number) => {
         setDayRange(days)
 
-        apiFetch({path: addQueryArgs( '/give-api/v2/campaigns/' + campaignId +'/statistics', {rangeInDays: days} ) } )
+        apiFetch({path: addQueryArgs('/give-api/v2/campaigns/' + campaignId + '/statistics', {rangeInDays: days})})
             .then(setStats);
     }
 
@@ -56,10 +56,13 @@ const CampaignStats = () => {
         <>
             <DateRangeFilters selected={dayRange} options={filterOptions} onSelect={onDayRangeChange} />
             <div className={styles.mainGrid}>
-                    <StatWidget label={__('Amount raised', 'give')} values={pluck(stats, 'amountRaised')} description={widgetDescription} formatter={currency} />
-                    <StatWidget label={__('Number of donations', 'give')} values={pluck(stats, 'donationCount')} description={widgetDescription} />
-                    <StatWidget label={__('Number of donors', 'give')} values={pluck(stats, 'donorCount')} description={widgetDescription} />
-                    <RevenueWidget />
+                <StatWidget label={__('Amount raised', 'give')} values={pluck(stats, 'amountRaised')}
+                            description={widgetDescription} formatter={currency} />
+                <StatWidget label={__('Number of donations', 'give')} values={pluck(stats, 'donationCount')}
+                            description={widgetDescription} />
+                <StatWidget label={__('Number of donors', 'give')} values={pluck(stats, 'donorCount')}
+                            description={widgetDescription} />
+                <RevenueWidget />
                 <div className={styles.nestedGrid}>
                     <GoalProgressWidget />
                     <DefaultFormWidget defaultForm={campaign.defaultFormTitle} />
@@ -95,7 +98,7 @@ const StatWidget = ({label, values, description, formatter = null}) => {
                 <DisplayText>
                     {!isNaN(values[0]) ? formatter?.format(values[0]) ?? values[0] : (<span>&nbsp;</span>)}
                 </DisplayText>
-                {!! values[1] && (
+                {!!values[1] && (
                     <PercentChangePill value={values[0]} comparison={values[1]} />
                 )}
             </div>

From d3077e7d6192bbefd8e30d8305b883145e5cf0cb Mon Sep 17 00:00:00 2001
From: "Kyle B. Johnson" <kyle.johnson@hey.com>
Date: Tue, 28 Jan 2025 17:42:41 -0500
Subject: [PATCH 3/3] refactor: Replace NaN check with undefined check

---
 .../CampaignDetailsPage/Components/CampaignStats/index.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
index 421832e7c2..d18e52888a 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -96,7 +96,10 @@ const StatWidget = ({label, values, description, formatter = null}) => {
             </header>
             <div className={styles.statWidgetAmount}>
                 <DisplayText>
-                    {!isNaN(values[0]) ? formatter?.format(values[0]) ?? values[0] : (<span>&nbsp;</span>)}
+                    {'undefined' !== typeof values[0]
+                        ? formatter?.format(values[0]) ?? values[0]
+                        : <span>&nbsp;</span>
+                    }
                 </DisplayText>
                 {!!values[1] && (
                     <PercentChangePill value={values[0]} comparison={values[1]} />