Feature: Add Campaign Donations block

src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Give\Campaigns\Blocks\CampaignDonationsBlock;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\Support\ValueObjects\Money;
+use Give\Framework\Views\View;
+
+/**
+ * @unreleased
+ */
+class CampaignDonationsBlockViewModel
+{
+    /**
+     * @var Campaign $campaign
+     */
+    private $campaign;
+
+    /**
+     * @var array
+     */
+    private $donations;
+
+    /**
+     * @var array $attributes
+     */
+    private $attributes;
+
+    /**
+     * @unreleased
+     */
+    public function __construct(Campaign $campaign, array $donations, array $attributes)
+    {
+        $this->attributes = $attributes;
+        $this->campaign = $campaign;
+        $this->donations = $donations;
+    }
+
+    /**
+     * @unreleased
+     */
+    public function render(): void
+    {
+        View::render('Campaigns/Blocks/CampaignDonationsBlock.render', [
+            'campaign' => $this->campaign,
+            'donations' => $this->formatDonationsData($this->donations),
+            'attributes' => $this->attributes,
+        ]);
+    }
+
+
+    /**
+     * @unreleased
+     */
+    private function formatDonationsData(array $donations): array
+    {
+        return array_map(static function ($entry) {
+            $entry->date = human_time_diff(strtotime($entry->date));
+            $entry->amount = Money::fromDecimal($entry->amount, give_get_currency());
+
+            return $entry;
+        }, $donations);
+    }
+}

src/Campaigns/Blocks/CampaignDonationsBlock/block.json

@@ -0,0 +1,48 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 3,
+    "name": "givewp/campaign-donations-block",
+    "version": "1.0.0",
+    "title": "Campaign Donations",
+    "category": "give",
+    "description": "Display all the donations associated with a campaign.",
+    "attributes": {
+        "campaignId": {
+            "type": "integer"
+        },
+        "showAnonymous": {
+            "type": "boolean",
+            "default": true
+        },
+        "showIcon": {
+            "type": "boolean",
+            "default": true
+        },
+        "showButton": {
+            "type": "boolean",
+            "default": true
+        },
+        "donateButtonText": {
+            "type": "string",
+            "default": "Donate"
+        },
+        "sortBy": {
+            "type": "string",
+            "default": "top-donations"
+        },
+        "donationsPerPage": {
+            "type": "number",
+            "default": 5
+        },
+        "loadMoreButtonText": {
+            "type": "string",
+            "default": "Load more"
+        }
+    },
+    "supports": {
+        "className": true
+    },
+    "textdomain": "give",
+    "render": "file:./render.php",
+    "style": "givewp-CampaignDonationsBlock-style"
+}

src/Campaigns/Blocks/CampaignDonationsBlock/edit.tsx

@@ -0,0 +1,98 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {
+    __experimentalNumberControl as NumberControl,
+    PanelBody,
+    SelectControl,
+    TextControl,
+    ToggleControl,
+} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+import {CampaignSelector} from '../shared/components/CampaignSelector';
+import useCampaign from '../shared/hooks/useCampaign';
+
+export default function Edit({
+    attributes,
+    setAttributes,
+}: BlockEditProps<{
+    campaignId: number;
+    showAnonymous: boolean;
+    showIcon: boolean;
+    showButton: boolean;
+    donateButtonText: string;
+    sortBy: string;
+    donationsPerPage: number;
+    loadMoreButtonText: string;
+}>) {
+    const blockProps = useBlockProps();
+    const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+    const {showAnonymous, showIcon, showButton, donateButtonText, sortBy, donationsPerPage, loadMoreButtonText} =
+        attributes;
+
+    return (
+        <div {...blockProps}>
+            <CampaignSelector attributes={attributes} setAttributes={setAttributes}>
+                <ServerSideRender block="givewp/campaign-donations-block" attributes={attributes} />
+            </CampaignSelector>
+
+            {hasResolved && campaign?.id && (
+                <InspectorControls>
+                    <PanelBody title={__('Display Elements', 'give')} initialOpen={true}>
+                        <ToggleControl
+                            label={__('Show anonymous', 'give')}
+                            checked={showAnonymous}
+                            onChange={(value) => setAttributes({showAnonymous: value})}
+                        />
+                        <ToggleControl
+                            label={__('Show icon', 'give')}
+                            checked={showIcon}
+                            onChange={(value) => setAttributes({showIcon: value})}
+                        />
+                        <ToggleControl
+                            label={__('Show button', 'give')}
+                            checked={showButton}
+                            onChange={(value) => setAttributes({showButton: value})}
+                        />
+                        <TextControl
+                            label={__('Donate Button', 'give')}
+                            value={donateButtonText}
+                            onChange={(value) => setAttributes({donateButtonText: value})}
+                            help={__('This shows on the header', 'give')}
+                        />
+                    </PanelBody>
+
+                    <PanelBody title={__('Settings', 'give')} initialOpen={true}>
+                        <SelectControl
+                            label={__('Sort by', 'give')}
+                            value={sortBy}
+                            options={[
+                                {label: __('Top donations', 'give'), value: 'top-donations'},
+                                {label: __('Recent donations', 'give'), value: 'recent-donations'},
+                            ]}
+                            onChange={(value) => setAttributes({sortBy: value})}
+                            help={__('The order donations are displayed in.', 'give')}
+                        />
+                        {/* TODO: Revert the label and help text back to what are in the designs once the backend for pagination is ready */}
+                        <NumberControl
+                            label={__('Limit', 'give')}
+                            value={donationsPerPage}
+                            min={1}
+                            max={100}
+                            onChange={(value) => setAttributes({donationsPerPage: parseInt(value)})}
+                            help={__('The maximum number of donations to display.', 'give')}
+                        />
+                        {/* TODO: Revert the field back once the backend for pagination is ready
+                        <TextControl
+                            label={__('Load More Button', 'give')}
+                            value={loadMoreButtonText}
+                            onChange={(value) => setAttributes({loadMoreButtonText: value})}
+                        />
+                        */}
+                    </PanelBody>
+                </InspectorControls>
+            )}
+        </div>
+    );
+}

src/Campaigns/Blocks/CampaignDonationsBlock/index.ts

@@ -0,0 +1,14 @@
+import {paragraph as icon} from '@wordpress/icons';
+import metadata from './block.json';
+import Edit from './edit';
+import initBlock from '../shared/utils/init-block';
+
+const {name} = metadata;
+
+export {metadata, name};
+export const settings = {
+    icon,
+    edit: Edit,
+};
+
+export const init = () => initBlock({name, metadata, settings});

src/Campaigns/Blocks/CampaignDonationsBlock/render.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Give\Campaigns\Blocks\CampaignDonationsBlock;
+
+use Give\Campaigns\CampaignDonationQuery;
+use Give\Campaigns\Models\Campaign;
+use Give\Campaigns\Repositories\CampaignRepository;
+use Give\Donations\ValueObjects\DonationMetaKeys;
+
+/**
+ * @unreleased
+ *
+ * @var array $attributes
+ */
+
+if ( ! isset($attributes['campaignId'])) {
+    return;
+}
+
+/** @var Campaign $campaign */
+$campaign = give(CampaignRepository::class)->getById($attributes['campaignId']);
+
+if ( ! $campaign) {
+    return;
+}
+
+$sortBy = $attributes['sortBy'] ?? 'top-donations';
+$query = (new CampaignDonationQuery($campaign))
+    ->select(
+        'donation.ID as id',
+        'donorIdMeta.meta_value as donorId',
+        'amountMeta.meta_value as amount',
+        'donation.post_date as date',
+        'donors.name as donorName'
+    )
+    ->joinDonationMeta(DonationMetaKeys::DONOR_ID, 'donorIdMeta')
+    ->joinDonationMeta(DonationMetaKeys::AMOUNT, 'amountMeta')
+    ->leftJoin('give_donors', 'donorIdMeta.meta_value', 'donors.id', 'donors')
+    ->orderBy($sortBy === 'top-donations' ? 'amount' : 'donation.ID', 'DESC')
+    ->limit($attributes['donationsPerPage'] ?? 5);
+
+if ( ! $attributes['showAnonymous']) {
+    $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
+        ->where('anonymousMeta.meta_value', '0');
+}
+
+(new CampaignDonationsBlockViewModel($campaign, $query->getAll(), $attributes))->render();