Feature: add new routes for donations and donors

src/Campaigns/Actions/LoadCampaignsListTableAssets.php

@@ -3,6 +3,7 @@
 namespace Give\Campaigns\Actions;
 
 use Give\Campaigns\ListTable\CampaignsListTable;
+use Give\Campaigns\ValueObjects\CampaignRoute;
 use Give\Framework\Support\Facades\Scripts\ScriptAsset;
 
 /**
@@ -28,7 +29,7 @@ public function __invoke()
 
         wp_localize_script($handleName, 'GiveCampaignsListTable',
             [
-                'apiRoot' => esc_url_raw(rest_url('give-api/v2/campaigns/list-table')),
+                'apiRoot' => esc_url_raw(rest_url(CampaignRoute::NAMESPACE . '/campaigns/list-table')),
                 'apiNonce' => wp_create_nonce('wp_rest'),
                 'table' => give(CampaignsListTable::class)->toArray(),
                 'adminUrl' => admin_url(),

src/Campaigns/Routes/DeleteCampaignListTable.php

@@ -5,6 +5,7 @@
 use Give\API\RestRoute;
 use Give\Campaigns\ListTable\CampaignsListTable;
 use Give\Campaigns\Repositories\CampaignRepository;
+use Give\Campaigns\ValueObjects\CampaignRoute;
 use Give\Framework\Exceptions\Primitives\Exception;
 use WP_Error;
 use WP_REST_Request;
@@ -37,7 +38,7 @@ class DeleteCampaignListTable implements RestRoute
     public function registerRoute()
     {
         register_rest_route(
-            'give-api/v2',
+            CampaignRoute::NAMESPACE,
             $this->endpoint,
             [
                 [

src/Campaigns/Routes/GetCampaignsListTable.php

@@ -6,6 +6,7 @@
 use Give\Campaigns\ListTable\CampaignsListTable;
 use Give\Campaigns\Models\Campaign;
 use Give\Campaigns\Repositories\CampaignRepository;
+use Give\Campaigns\ValueObjects\CampaignRoute;
 use Give\Framework\QueryBuilder\QueryBuilder;
 use WP_Error;
 use WP_REST_Request;
@@ -38,7 +39,7 @@ class GetCampaignsListTable implements RestRoute
     public function registerRoute(): void
     {
         register_rest_route(
-            'give-api/v2',
+            CampaignRoute::NAMESPACE,
             $this->endpoint,
             [
                 [

src/Campaigns/ValueObjects/CampaignRoute.php

@@ -16,7 +16,7 @@
  */
 class CampaignRoute extends Enum
 {
-    const NAMESPACE = 'give-api/v2';
+    const NAMESPACE = 'givewp/v3';
     const CAMPAIGN = 'campaigns/(?P<id>[0-9]+)';
     const CAMPAIGNS = 'campaigns';
 }

src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx

@@ -1,89 +1,94 @@
 import {__} from '@wordpress/i18n';
-import {useEffect, useState} from "react";
-import RevenueChart from "../RevenueChart";
-import GoalProgressChart from "../GoalProgressChart";
+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";
-import {GiveCampaignDetails} from "@givewp/campaigns/admin/components/CampaignDetailsPage/types";
+import DefaultFormWidget from '../DefaultForm';
+import {GiveCampaignDetails} from '@givewp/campaigns/admin/components/CampaignDetailsPage/types';
 import {useCampaignEntityRecord} from '@givewp/campaigns/utils';
 
-import styles from "./styles.module.scss"
+import styles from './styles.module.scss';
 
 const campaignId = new URLSearchParams(window.location.search).get('id');
 
 declare const window: {
     GiveCampaignDetails: GiveCampaignDetails;
 } & Window;
 
-const pluck = (array: any[], property: string) => array.map(element => element[property])
+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', {
     style: 'currency',
     currency: 'USD',
-})
+});
 
 const CampaignStats = () => {
-
     const [dayRange, setDayRange] = useState(null);
     const [stats, setStats] = useState([]);
     const {campaign} = useCampaignEntityRecord();
 
     useEffect(() => {
-        onDayRangeChange(0)
-    }, [])
+        onDayRangeChange(0);
+    }, []);
 
     const onDayRangeChange = async (days: number) => {
-        setDayRange(days)
+        setDayRange(days);
 
-        apiFetch({path: addQueryArgs( '/give-api/v2/campaigns/' + campaignId +'/statistics', {rangeInDays: days} ) } )
-            .then(setStats);
-    }
+        apiFetch({path: addQueryArgs('/givewp/v3/campaigns/' + campaignId + '/statistics', {rangeInDays: days})}).then(
+            setStats
+        );
+    };
 
-    const widgetDescription = filterOptions.find(option => option.value === dayRange)?.description
+    const widgetDescription = filterOptions.find((option) => option.value === dayRange)?.description;
 
     return (
         <>
             <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} />
                 </div>
             </div>
         </>
-    )
-}
+    );
+};
 
 const FooterText = ({children}) => {
-    return (
-        <div className={styles.footerText}>
-            {children}
-        </div>
-    )
-}
+    return <div className={styles.footerText}>{children}</div>;
+};
 
 const DisplayText = ({children}) => {
-    return (
-        <div className={styles.statWidgetDisplay}>
-            {children}
-        </div>
-    )
-}
+    return <div className={styles.statWidgetDisplay}>{children}</div>;
+};
 
 const StatWidget = ({label, values, description, formatter = null}) => {
     return (
@@ -92,41 +97,32 @@ const StatWidget = ({label, values, description, formatter = null}) => {
                 <HeaderText>{label}</HeaderText>
             </header>
             <div className={styles.statWidgetAmount}>
-                <DisplayText>
-                    {formatter?.format(values[0]) ?? values[0]}
-                </DisplayText>
-                {!! values[1] && (
-                    <PercentChangePill value={values[0]} comparison={values[1]} />
-                )}
+                <DisplayText>{formatter?.format(values[0]) ?? values[0]}</DisplayText>
+                {!!values[1] && <PercentChangePill value={values[0]} comparison={values[1]} />}
             </div>
             <footer>
                 <FooterText>{description}</FooterText>
             </footer>
         </div>
-    )
-}
+    );
+};
 
 const PercentChangePill = ({value, comparison}) => {
+    const change = Math.round(100 * ((value - comparison) / comparison)) ?? 0;
 
-    const change = Math.round(100 * ((value - comparison) / comparison)) ?? 0
-
-    const [color, backgroundColor, symbol] = change == 0
-        ? ['#060c1a', '#f2f2f2', '⯈']
-        : change > 0
+    const [color, backgroundColor, symbol] =
+        change == 0
+            ? ['#060c1a', '#f2f2f2', '⯈']
+            : change > 0
             ? ['#2d802f', '#f2fff3', '⯅']
-            : ['#e35f45', '#fff4f2', '⯆']
+            : ['#e35f45', '#fff4f2', '⯆'];
 
     return (
-        <span
-            className={styles.percentChangePill}
-            style={{backgroundColor: backgroundColor, color: color,}}
-        >
+        <span className={styles.percentChangePill} style={{backgroundColor: backgroundColor, color: color}}>
             <small>{symbol}</small> {Math.abs(change)}%
         </span>
-    )
-
-}
-
+    );
+};
 
 const RevenueWidget = () => {
     return (
@@ -138,10 +134,9 @@ const RevenueWidget = () => {
             <RevenueChart />
         </div>
     );
-}
+};
 
 const GoalProgressWidget = () => {
-
     const {campaign} = useCampaignEntityRecord();
 
     return (
@@ -152,8 +147,8 @@ const GoalProgressWidget = () => {
             </header>
             <GoalProgressChart value={campaign.goalProgress} goal={campaign.goal} />
         </div>
-    )
-}
+    );
+};
 
 const DateRangeFilters = ({options, onSelect, selected}) => {
     return (
@@ -168,8 +163,7 @@ const DateRangeFilters = ({options, onSelect, selected}) => {
                 </button>
             ))}
         </div>
-    )
-}
-
+    );
+};
 
 export default CampaignStats;