Feature: Campaign Goal Block

src/Campaigns/Blocks/CampaignGoal/app.tsx

@@ -0,0 +1,26 @@
+import {render} from '@wordpress/element';
+import useCampaign from '../shared/hooks/useCampaign';
+import App from './app/index';
+
+const BlockApp = ({campaignId}: { campaignId: number }) => {
+    const {campaign, hasResolved} = useCampaign(campaignId);
+
+    if (!hasResolved || !campaignId) {
+        return null;
+    }
+
+    return <App campaign={campaign} />;
+}
+
+/**
+ * @unreleased
+ */
+const nodeList = document.querySelectorAll('.give-campaigns-goalBlock-container');
+
+if (nodeList) {
+    const containers = Array.from(nodeList);
+
+    containers.map((container: any) => {
+        return render(<BlockApp campaignId={container.dataset?.id} />, container);
+    });
+}

src/Campaigns/Blocks/CampaignGoal/app/index.tsx

@@ -0,0 +1,34 @@
+import {__} from '@wordpress/i18n';
+import {Campaign} from '@givewp/campaigns/admin/components/types';
+import {getGoalDescription, getGoalFormattedValue} from '../utils';
+
+import './styles.scss';
+
+export default ({campaign}: { campaign: Campaign }) => {
+    return (
+        <div className="give-campaign-goal">
+            <div className="give-campaign-goal__container">
+                <div className="give-campaign-goal__container-item">
+                    <span>{getGoalDescription(campaign.goalType)}</span>
+                    <strong>
+                        {getGoalFormattedValue(campaign.goalType, campaign.goalStats.actual)}
+                    </strong>
+                </div>
+                <div className="give-campaign-goal__container-item">
+                    <span>{__('Our goal', 'give')}</span>
+                    <strong>
+                        {getGoalFormattedValue(campaign.goalType, campaign.goal)}
+                    </strong>
+                </div>
+            </div>
+            <div className="give-campaign-goal__progress-bar">
+                <div className="give-campaign-goal__progress-bar-container">
+                    <div
+                        className="give-campaign-goal__progress-bar-progress"
+                        style={{width: `${campaign.goalStats.percentage}%`}}>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/Campaigns/Blocks/CampaignGoal/block.json

@@ -19,5 +19,7 @@
     },
     "textdomain": "give",
     "editorScript": "file:../../../../build/campaignGoalBlock.js",
+    "viewScript": "file:../../../../build/campaignGoalBlockApp.js",
+    "style": "file:../../../../build/campaignGoalBlockApp.css",
     "render": "file:./render.php"
 }

src/Campaigns/Blocks/CampaignGoal/edit.tsx

@@ -1,30 +1,12 @@
 import {__} from '@wordpress/i18n';
 import {useSelect} from '@wordpress/data';
 import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
 import {BlockEditProps} from '@wordpress/blocks';
 import {ExternalLink, PanelBody, TextControl} from '@wordpress/components';
 import useCampaign from '../shared/hooks/useCampaign';
+import CampaignGoalApp from './app/index';
 import {CampaignSelector} from '../shared/components/CampaignSelector';
-
-import './styles.scss';
-
-const getGoalDescription = (goalType: string) => {
-    switch (goalType) {
-        case 'amount':
-            return __('Amount raised', 'give');
-        case 'donations':
-            return __('Number of donations', 'give');
-        case 'donors':
-            return __('Number of donors', 'give');
-        case 'amountFromSubscriptions':
-            return __('Recurring amount raised', 'give');
-        case 'subscriptions':
-            return __('Number of recurring donations', 'give');
-        case 'donorsFromSubscriptions':
-            return __('Number of recurring donors', 'give');
-    }
-}
+import {getGoalDescription} from './utils';
 
 /**
  * @unreleased
@@ -50,10 +32,10 @@ export default function Edit({attributes, setAttributes}: BlockEditProps<{
     return (
         <div {...blockProps}>
             <CampaignSelector attributes={attributes} setAttributes={setAttributes}>
-                <ServerSideRender block="givewp/campaign-goal" attributes={attributes} />
+                <CampaignGoalApp campaign={campaign} />
             </CampaignSelector>
 
-            {hasResolved && campaign?.id && (
+            {campaign?.id && (
                 <InspectorControls>
                     <PanelBody title={__('Settings', 'give')} initialOpen={true}>
                         <TextControl value={getGoalDescription(campaign.goalType)} onChange={null} disabled={true} />

src/Campaigns/Blocks/CampaignGoal/render.php

@@ -2,8 +2,6 @@
 
 use Give\Campaigns\Models\Campaign;
 use Give\Campaigns\Repositories\CampaignRepository;
-use Give\Campaigns\ValueObjects\CampaignGoalType;
-use Give\Framework\Support\ValueObjects\Money;
 
 /**
  * @var array    $attributes
@@ -17,53 +15,6 @@
     return;
 }
 
-$stats = $campaign->getGoalStats();
-
-$getGoalDescription = function(CampaignGoalType $goalType) {
-    $data = [
-        'amount' => __('Amount raised', 'give'),
-        'donations' => __('Number of donations', 'give'),
-        'donors' => __('Number of donors', 'give'),
-        'amountFromSubscriptions' => __('Recurring amount raised', 'give'),
-        'subscriptions' => __('Number of recurring donations', 'give'),
-        'donorsFromSubscriptions' => __('Number of recurring donors', 'give'),
-    ];
-
-    return $data[$goalType->getvalue()];
-};
-
-$getGoalFormattedValue = function($goalType, $value) {
-    switch ($goalType) {
-        case 'amount':
-        case 'amountFromSubscriptions':
-            $amount = Money::fromDecimal($value, give_get_currency());
-            return $amount->formatToLocale();
-        default:
-            return $value;
-    }
-};
-
 ?>
 
-<div class="give-campaign-goal">
-    <div class="give-campaign-goal__container">
-        <div class="give-campaign-goal__container-item">
-            <span><?= $getGoalDescription($campaign->goalType); ?></span>
-            <strong>
-                <?= $getGoalFormattedValue($campaign->goalType, $stats['actual']); ?>
-            </strong>
-        </div>
-        <div class="give-campaign-goal__container-item">
-            <span><?= esc_html__('Our goal', 'give'); ?></span>
-            <strong><?= $getGoalFormattedValue($campaign->goalType, $campaign->goal); ?></strong>
-        </div>
-    </div>
-    <div class="give-campaign-goal__progress-bar">
-        <div class="give-campaign-goal__progress-bar-container">
-            <div class="give-campaign-goal__progress-bar-progress"
-                 style="width: <?= $stats['percentage']; ?>%">
-            </div>
-        </div>
-    </div>
-</div>
-
+<div class="give-campaigns-goalBlock-container" data-id="<?= $campaign->id; ?>"></div>

src/Campaigns/Blocks/CampaignGoal/utils.ts

@@ -0,0 +1,29 @@
+import {__} from '@wordpress/i18n';
+
+export const getGoalDescription = (goalType: string) => {
+    switch (goalType) {
+        case 'amount':
+            return __('Amount raised', 'give');
+        case 'donations':
+            return __('Number of donations', 'give');
+        case 'donors':
+            return __('Number of donors', 'give');
+        case 'amountFromSubscriptions':
+            return __('Recurring amount raised', 'give');
+        case 'subscriptions':
+            return __('Number of recurring donations', 'give');
+        case 'donorsFromSubscriptions':
+            return __('Number of recurring donors', 'give');
+    }
+}
+
+
+export const getGoalFormattedValue = (goalType: string, value: number) => {
+    switch (goalType) {
+        case 'amount':
+        case 'amountFromSubscriptions':
+
+        default:
+            return value;
+    }
+}

wordpress-scripts-webpack.config.js

@@ -66,6 +66,7 @@ module.exports = {
         campaignBlocks: srcPath('Campaigns/Blocks/blocks.ts'),
         campaignDonationsBlockApp: srcPath('Campaigns/Blocks/CampaignDonations/app.tsx'),
         campaignDonorsBlockApp: srcPath('Campaigns/Blocks/CampaignDonors/app.tsx'),
+        campaignGoalBlockApp: srcPath('Campaigns/Blocks/CampaignGoal/app.tsx'),
     },
 };