From 669247f924a0692f0c5ef478d0f7f1b254e6a620 Mon Sep 17 00:00:00 2001
From: Paulo Iankoski <me@wpdev.com.br>
Date: Fri, 31 Jan 2025 08:31:16 -0300
Subject: [PATCH 1/6] feature: add Campaign Donations block

---
 .../Blocks/CampaignDonationsBlock/block.json  |  48 ++++
 .../Blocks/CampaignDonationsBlock/edit.tsx    |  98 +++++++
 .../Blocks/CampaignDonationsBlock/index.ts    |  14 +
 .../Blocks/CampaignDonationsBlock/render.php  | 247 ++++++++++++++++++
 .../Blocks/CampaignDonationsBlock/style.css   | 190 ++++++++++++++
 src/Campaigns/Blocks/blocks.ts                |   3 +-
 6 files changed, 599 insertions(+), 1 deletion(-)
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/block.json
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/edit.tsx
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/index.ts
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/render.php
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/style.css

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/block.json b/src/Campaigns/Blocks/CampaignDonationsBlock/block.json
new file mode 100644
index 0000000000..e188c2e76e
--- /dev/null
+++ b/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"
+}
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/edit.tsx b/src/Campaigns/Blocks/CampaignDonationsBlock/edit.tsx
new file mode 100644
index 0000000000..0cb486a486
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/index.ts b/src/Campaigns/Blocks/CampaignDonationsBlock/index.ts
new file mode 100644
index 0000000000..1468f6677c
--- /dev/null
+++ b/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});
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
new file mode 100644
index 0000000000..066a360974
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
@@ -0,0 +1,247 @@
+<?php
+
+namespace Give\Campaigns\Blocks\CampaignDonationsBlock;
+
+use Give\Campaigns\CampaignDonationQuery;
+use Give\Campaigns\Models\Campaign;
+use Give\Campaigns\Repositories\CampaignRepository;
+use Give\DonationForms\Blocks\DonationFormBlock\Controllers\BlockRenderController;
+use Give\Donations\ValueObjects\DonationMetaKeys;
+use Give\Framework\Support\ValueObjects\Money;
+
+/**
+ * @unreleased
+ */
+if ( ! class_exists(CampaignDonationsBlockRenderer::class)) {
+    class CampaignDonationsBlockRenderer
+    {
+        /**
+         * @var Campaign $campaign
+         */
+        private $campaign;
+
+        /**
+         * @var array $attributes
+         */
+        private $attributes;
+
+        /**
+         * @unreleased
+         */
+        public function __construct($attributes)
+        {
+            $this->attributes = $attributes;
+            $this->campaign = $this->fetchCampaign();
+        }
+
+        /**
+         * @unreleased
+         */
+        private function fetchCampaign(): ?Campaign
+        {
+            if ( ! isset($this->attributes['campaignId'])) {
+                return null;
+            }
+
+            return give(CampaignRepository::class)->getById($this->attributes['campaignId']);
+        }
+
+        /**
+         * @unreleased
+         */
+        public function render(): void
+        {
+            if ( ! $this->campaign) {
+                return;
+            }
+
+            $query = $this->buildDonationsQuery();
+            $donations = $this->formatDonationsData($query->getAll());
+            $this->renderBlockHtml($donations);
+        }
+
+        /**
+         * @unreleased
+         */
+        private function buildDonationsQuery(): CampaignDonationQuery
+        {
+            $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
+            $query = (new CampaignDonationQuery($this->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($this->attributes['donationsPerPage'] ?? 5);
+
+            if ( ! $this->attributes['showAnonymous']) {
+                $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
+                    ->where('anonymousMeta.meta_value', '0');
+            }
+
+            return $query;
+        }
+
+        /**
+         * @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);
+        }
+
+        /**
+         * @unreleased
+         */
+        private function renderBlockHtml($donations): void
+        {
+            $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
+            $blockTitle = $sortBy === 'top-donations' ? __('Top Donations', 'give') : __(
+                'Recent Donations',
+                'give'
+            );
+            $donateButtonText = $this->attributes['donateButtonText'] ?? __('Donate', 'give');
+
+            $blockInlineStyles = sprintf(
+                '--givewp-primary-color: %s; --givewp-secondary-color: %s;',
+                esc_attr('#0b72d9'),
+                esc_attr('#27ae60')
+            );
+            ?>
+            <div
+                <?php
+                echo wp_kses_data(get_block_wrapper_attributes(['class' => 'givewp-campaign-donations-block'])); ?>
+                style="<?php
+                echo esc_attr($blockInlineStyles); ?>">
+                <div class="givewp-campaign-donations-block__header">
+                    <h2 class="givewp-campaign-donations-block__title"><?php
+                        echo esc_html($blockTitle); ?></h2>
+                    <?php
+                    if ($this->attributes['showButton'] && ! empty($donations)) : ?>
+                        <div class="givewp-campaign-donations-block__donate-button">
+                            <?php
+                            $params = [
+                                'formId' => $this->campaign->defaultFormId,
+                                'openFormButton' => $donateButtonText,
+                                'formFormat' => 'modal',
+                            ];
+
+                            echo (new BlockRenderController())->render($params);
+                            ?>
+                        </div>
+                    <?php
+                    endif; ?>
+                </div>
+
+                <?php
+                if (empty($donations)) : ?>
+                    <div class="givewp-campaign-donations-block__empty-state">
+                        <h3 class="givewp-campaign-donations-block__empty-title">
+                            <?php
+                            _e('Every campaign starts with one donation.', 'give'); ?>
+                        </h3>
+                        <p class="givewp-campaign-donations-block__empty-description">
+                            <?php
+                            _e('Be the one to mate it happen!', 'give'); ?>
+                        </p>
+
+                        <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
+                             fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M5 33.333c3.893-4.129 9.178-6.666 15-6.666 5.822 0 11.107 2.537 15 6.666M27.5 12.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0z"
+                                stroke="currentColor" stroke-width="3.333" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+
+                        <?php
+                        if ($this->attributes['showButton']) : ?>
+                            <div class="givewp-campaign-donations-block__empty-button">
+                                <?php
+                                $params = [
+                                    'formId' => $this->campaign->defaultFormId,
+                                    'openFormButton' => __('Be the first', 'give'),
+                                    'formFormat' => 'modal',
+                                ];
+
+                                echo (new BlockRenderController())->render($params);
+                                ?>
+                            </div>
+                        <?php
+                        endif; ?>
+                    </div>
+                <?php
+                else : ?>
+                    <ul class="givewp-campaign-donations-block__donations">
+                        <?php
+                        foreach ($donations as $key => $donation) : ?>
+                            <li class="givewp-campaign-donations-block__donation">
+                                <?php
+                                if ($this->attributes['showIcon']) : ?>
+                                    <div class="givewp-campaign-donations-block__donation-icon">
+                                        <img
+                                            src="<?php
+                                            echo get_avatar_url($donation->donorId, ['size' => 64]); ?>"
+                                            alt="<?php
+                                            _e('Donation icon', 'give'); ?>"
+                                        />
+                                    </div>
+                                <?php
+                                endif; ?>
+
+                                <div class="givewp-campaign-donations-block__donation-info">
+                                    <div class="givewp-campaign-donations-block__donation-description">
+                                        <?php
+                                        printf(
+                                            __('%s donated %s', 'give'),
+                                            '<strong>' . esc_html($donation->donorName) . '</strong>',
+                                            '<strong>' . esc_html($donation->amount->formatToLocale()) . '</strong>'
+                                        );
+                                        ?>
+                                    </div>
+
+                                    <span class="givewp-campaign-donations-block__donation-date"><?php
+                                        echo esc_html(
+                                            sprintf(
+                                                _x('%s ago', 'human-readable time difference', 'give'),
+                                                $donation->date
+                                            )
+                                        ); ?></span>
+                                </div>
+
+                                <?php
+                                if ($sortBy === 'top-donations' && $key < 3) : ?>
+                                    <div class="givewp-campaign-donations-block__donation-ribbon" data-position="<?php
+                                    echo esc_attr($key + 1); ?>">
+                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+                                                 xmlns="http://www.w3.org/2000/svg">
+                                                <path fill-rule="evenodd" clip-rule="evenodd"
+                                                      d="M6 .5a4 4 0 0 0-2.55 7.082l-.446 3.352a.5.5 0 0 0 .753.495L6 10.083l2.243 1.346a.5.5 0 0 0 .753-.495L8.55 7.581A4 4 0 0 0 6 .5zM4.382 8.16c.495.218 1.042.34 1.618.34.576 0 1.124-.122 1.619-.341l.249 1.879-1.405-.843-.014-.01a.958.958 0 0 0-.288-.126.75.75 0 0 0-.322 0 .958.958 0 0 0-.288.127l-.014.009-1.405.843.25-1.879z"
+                                                      fill="currentColor" />
+                                            </svg>
+                                    </div>
+                                <?php
+                                endif; ?>
+                            </li>
+                        <?php
+                        endforeach; ?>
+                    </ul>
+                <?php
+                endif; ?>
+            </div>
+            <?php
+        }
+    }
+}
+
+(new CampaignDonationsBlockRenderer($attributes))->render();
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/style.css b/src/Campaigns/Blocks/CampaignDonationsBlock/style.css
new file mode 100644
index 0000000000..cdf17aae11
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/style.css
@@ -0,0 +1,190 @@
+.givewp-campaign-donations-block {
+    padding: 1.5rem 0;
+}
+
+.givewp-campaign-donations-block * {
+    font-family: 'Inter', sans-serif;
+}
+
+.givewp-campaign-donations-block__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.givewp-campaign-donations-block__title {
+    color: var(--givewp-neutral-900);
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.56;
+    margin: 0;
+}
+
+:is(.givewp-campaign-donations-block__donate-button, .givewp-campaign-donations-block__empty-button) button.givewp-donation-form-modal__open {
+    background: none;
+    border-radius: 0.5rem;
+    border: 1px solid var(--givewp-primary-color);
+    color: var(--givewp-primary-color) !important;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.43;
+    padding: 0.25rem 1rem !important;
+}
+
+:is(.givewp-campaign-donations-block__donate-button, .givewp-campaign-donations-block__empty-button) button.givewp-donation-form-modal__open:hover {
+    background: var(--givewp-primary-color);
+    color: var(--givewp-shades-white) !important;
+}
+
+.givewp-campaign-donations-block__donations {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+}
+
+.givewp-campaign-donations-block__donation {
+    align-items: center;
+    background-color: var(--givewp-shades-white);
+    border-radius: 0.5rem;
+    border: 1px solid var(--givewp-neutral-50);
+    display: flex;
+    gap: 0.75rem;
+    padding: 1rem;
+}
+
+.givewp-campaign-donations-block__donation-icon {
+    display: flex;
+    align-items: center;
+}
+
+.givewp-campaign-donations-block__donation-icon img {
+    border-radius: 100%;
+    height: 2.5rem;
+    object-fit: cover;
+    width: 2.5rem;
+}
+
+.givewp-campaign-donations-block__donation-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    row-gap: 0.25rem;
+}
+
+.givewp-campaign-donations-block__donation-description {
+    color: var(--givewp-neutral-500);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    margin: 0;
+}
+
+.givewp-campaign-donations-block__donation-description strong {
+    color: var(--givewp-neutral-700);
+    font-weight: 600;
+}
+
+.givewp-campaign-donations-block__donation-date {
+    align-items: center;
+    color: var(--givewp-neutral-400);
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.43;
+}
+
+.givewp-campaign-donations-block__donation-ribbon {
+    align-items: center;
+    border-radius: 100%;
+    color: #1F2937;
+    display: flex;
+    height: 1.25rem;
+    justify-content: center;
+    margin-left: auto;
+    width: 1.25rem;
+}
+
+.givewp-campaign-donations-block__donation-ribbon[data-position="1"] {
+    background-color: #ffd700;
+}
+
+.givewp-campaign-donations-block__donation-ribbon[data-position="2"] {
+    background-color: #c0c0c0;
+}
+
+.givewp-campaign-donations-block__donation-ribbon[data-position="3"] {
+    background-color: #cd7f32;
+    color: #fffaf2;
+}
+
+.givewp-campaign-donations-block__donation-amount {
+    color: var(--givewp-neutral-700);
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.56;
+    margin-left: auto;
+}
+
+.givewp-campaign-donations-block__footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
+}
+
+.givewp-campaign-donations-block__load-more-button {
+    background: none;
+    border-radius: 0.5rem;
+    border: 1px solid var(--givewp-primary-color);
+    color: var(--givewp-primary-color);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.43;
+    padding: 0.25rem 1rem;
+}
+
+.givewp-campaign-donations-block__load-more-button:hover {
+    background: var(--givewp-primary-color);
+    color: var(--givewp-shades-white);
+}
+
+.givewp-campaign-donations-block__empty-state {
+    align-items: center;
+    background-color: var(--givewp-shades-white);
+    border-radius: 0.5rem;
+    border: 1px solid var(--givewp-neutral-50);
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+}
+
+.givewp-campaign-donations-block__empty-title {
+    color: var(--givewp-neutral-700);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    margin: 0;
+}
+
+.givewp-campaign-donations-block__empty-description {
+    color: var(--givewp-neutral-700);
+    font-size: 0.875rem;
+    line-height: 1.43;
+    margin: 0.25rem 0 0;
+}
+
+.givewp-campaign-donations-block__empty-icon {
+    color: var(--givewp-secondary-color);
+    margin-bottom: 0.875rem;
+    order: -1;
+}
+
+.givewp-campaign-donations-block__empty-button {
+    margin-top: 0.875rem;
+}
+
+.givewp-campaign-donations-block__empty-button button.givewp-donation-form-modal__open {
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem !important;
+}
diff --git a/src/Campaigns/Blocks/blocks.ts b/src/Campaigns/Blocks/blocks.ts
index 21f8f96575..87e4ff7c8d 100644
--- a/src/Campaigns/Blocks/blocks.ts
+++ b/src/Campaigns/Blocks/blocks.ts
@@ -1,8 +1,9 @@
 import * as campaignTitleBlock from './CampaignTitleBlock';
 import * as campaignDonorsBlock from './CampaignDonorsBlock';
+import * as campaignDonationsBock from './CampaignDonationsBlock';
 
 const getAllBlocks = () => {
-    return [campaignTitleBlock, campaignDonorsBlock];
+    return [campaignTitleBlock, campaignDonorsBlock, campaignDonationsBock];
 };
 
 getAllBlocks().forEach((block) => {

From 667d4f666d6939a5394398b2a7ff6c427b205516 Mon Sep 17 00:00:00 2001
From: Paulo Iankoski <me@wpdev.com.br>
Date: Fri, 31 Jan 2025 09:41:43 -0300
Subject: [PATCH 2/6] refactor: replace empty state icon

---
 src/Campaigns/Blocks/CampaignDonationsBlock/render.php | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
index 066a360974..8c9c09e0e3 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
@@ -145,7 +145,7 @@ private function renderBlockHtml($donations): void
                 </div>
 
                 <?php
-                if (empty($donations)) : ?>
+                if (empty($donations) || 1 === 1) : ?>
                     <div class="givewp-campaign-donations-block__empty-state">
                         <h3 class="givewp-campaign-donations-block__empty-title">
                             <?php
@@ -159,8 +159,12 @@ private function renderBlockHtml($donations): void
                         <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
                              fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
-                                d="M5 33.333c3.893-4.129 9.178-6.666 15-6.666 5.822 0 11.107 2.537 15 6.666M27.5 12.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0z"
-                                stroke="currentColor" stroke-width="3.333" stroke-linecap="round"
+                                d="M11.6628 31.6719H28.3294M31.6628 26.6719C32.9578 26.7102 33.7294 26.8552 34.2628 27.3902C34.9961 28.1235 34.9961 29.3035 34.9961 31.6652C34.9961 34.0252 34.9961 35.2052 34.2628 35.9385C33.5311 36.6719 32.3528 36.6719 29.9961 36.6719H9.99609C7.63943 36.6719 6.46109 36.6719 5.72943 35.9385C4.99776 35.2052 4.99609 34.0252 4.99609 31.6652C4.99609 29.3052 4.99609 28.1235 5.72943 27.3902C6.26276 26.8569 7.03443 26.7102 8.32943 26.6719"
+                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            <path
+                                d="M23.8559 31.6691C24.4744 31.1394 24.9712 30.4822 25.3121 29.7426C25.653 29.003 25.8299 28.1984 25.8309 27.3841C25.8309 24.2274 23.2192 21.6691 19.9975 21.6691C16.7759 21.6691 14.1642 24.2274 14.1642 27.3841C14.1651 28.1984 14.3421 29.003 14.683 29.7426C15.0239 30.4822 15.5206 31.1394 16.1392 31.6691M33.3309 16.6691H29.3392C28.8492 16.6691 28.3659 16.5591 27.9275 16.3457L24.5242 14.6991C24.0833 14.4868 23.6002 14.3769 23.1109 14.3774H21.3742C19.6942 14.3774 18.3309 13.0591 18.3309 11.4324C18.3309 11.3657 18.3759 11.3091 18.4409 11.2907L22.6759 10.1207C23.4356 9.91029 24.2459 9.98314 24.9559 10.3257L28.5942 12.0857M18.3309 12.5024L10.6759 14.8541C10.0094 15.0586 9.29545 15.0473 8.6358 14.8219C7.97614 14.5966 7.40453 14.1686 7.00254 13.5991C6.38754 12.7491 6.63754 11.5291 7.5342 11.0124L20.0592 3.78407C20.4508 3.55747 20.8845 3.41297 21.3338 3.35939C21.7831 3.30581 22.2386 3.34426 22.6725 3.4724L33.3309 6.63573"
+                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                                 stroke-linejoin="round" />
                         </svg>
 

From 9392c1085bb153535a92e0fae8d0c3ce9b478e47 Mon Sep 17 00:00:00 2001
From: alaca <ante.laca@gmail.com>
Date: Fri, 31 Jan 2025 19:49:42 +0100
Subject: [PATCH 3/6] refactor: pair programming - use View class; add Campaign

---
 .../CampaignDonationsBlockViewModel.php       | 100 +++++++
 .../Blocks/CampaignDonationsBlock/render.php  | 246 +-----------------
 .../resources/views/render.php                | 141 ++++++++++
 3 files changed, 244 insertions(+), 243 deletions(-)
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
new file mode 100644
index 0000000000..4e1d6f89a2
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
@@ -0,0 +1,100 @@
+<?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;
+use Give\Framework\Support\ValueObjects\Money;
+use Give\Framework\Views\View;
+
+class CampaignDonationsBlockViewModel
+{
+    /**
+     * @var Campaign $campaign
+     */
+    private $campaign;
+
+    /**
+     * @var array $attributes
+     */
+    private $attributes;
+
+    /**
+     * @unreleased
+     */
+    public function __construct($attributes)
+    {
+        $this->attributes = $attributes;
+        $this->campaign = $this->fetchCampaign();
+    }
+
+    /**
+     * @unreleased
+     */
+    private function fetchCampaign(): ?Campaign
+    {
+        if ( ! isset($this->attributes['campaignId'])) {
+            return null;
+        }
+
+        return give(CampaignRepository::class)->getById($this->attributes['campaignId']);
+    }
+
+    /**
+     * @unreleased
+     */
+    public function render(): void
+    {
+        if ( ! $this->campaign) {
+            return;
+        }
+
+        $query = $this->buildDonationsQuery();
+        $donations = $this->formatDonationsData($query->getAll());
+
+        View::render('Campaigns/Blocks/CampaignDonationsBlock.render', ['donations' => $donations]);
+    }
+
+    /**
+     * @unreleased
+     */
+    private function buildDonationsQuery(): CampaignDonationQuery
+    {
+        $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
+        $query = (new CampaignDonationQuery($this->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($this->attributes['donationsPerPage'] ?? 5);
+
+        if ( ! $this->attributes['showAnonymous']) {
+            $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
+                ->where('anonymousMeta.meta_value', '0');
+        }
+
+        return $query;
+    }
+
+    /**
+     * @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);
+    }
+}
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
index 8c9c09e0e3..d161fa41bb 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
@@ -2,250 +2,10 @@
 
 namespace Give\Campaigns\Blocks\CampaignDonationsBlock;
 
-use Give\Campaigns\CampaignDonationQuery;
-use Give\Campaigns\Models\Campaign;
-use Give\Campaigns\Repositories\CampaignRepository;
-use Give\DonationForms\Blocks\DonationFormBlock\Controllers\BlockRenderController;
-use Give\Donations\ValueObjects\DonationMetaKeys;
-use Give\Framework\Support\ValueObjects\Money;
-
 /**
  * @unreleased
+ *
+ * @var array $attributes
  */
-if ( ! class_exists(CampaignDonationsBlockRenderer::class)) {
-    class CampaignDonationsBlockRenderer
-    {
-        /**
-         * @var Campaign $campaign
-         */
-        private $campaign;
-
-        /**
-         * @var array $attributes
-         */
-        private $attributes;
-
-        /**
-         * @unreleased
-         */
-        public function __construct($attributes)
-        {
-            $this->attributes = $attributes;
-            $this->campaign = $this->fetchCampaign();
-        }
-
-        /**
-         * @unreleased
-         */
-        private function fetchCampaign(): ?Campaign
-        {
-            if ( ! isset($this->attributes['campaignId'])) {
-                return null;
-            }
-
-            return give(CampaignRepository::class)->getById($this->attributes['campaignId']);
-        }
-
-        /**
-         * @unreleased
-         */
-        public function render(): void
-        {
-            if ( ! $this->campaign) {
-                return;
-            }
-
-            $query = $this->buildDonationsQuery();
-            $donations = $this->formatDonationsData($query->getAll());
-            $this->renderBlockHtml($donations);
-        }
-
-        /**
-         * @unreleased
-         */
-        private function buildDonationsQuery(): CampaignDonationQuery
-        {
-            $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
-            $query = (new CampaignDonationQuery($this->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($this->attributes['donationsPerPage'] ?? 5);
-
-            if ( ! $this->attributes['showAnonymous']) {
-                $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
-                    ->where('anonymousMeta.meta_value', '0');
-            }
-
-            return $query;
-        }
-
-        /**
-         * @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);
-        }
-
-        /**
-         * @unreleased
-         */
-        private function renderBlockHtml($donations): void
-        {
-            $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
-            $blockTitle = $sortBy === 'top-donations' ? __('Top Donations', 'give') : __(
-                'Recent Donations',
-                'give'
-            );
-            $donateButtonText = $this->attributes['donateButtonText'] ?? __('Donate', 'give');
-
-            $blockInlineStyles = sprintf(
-                '--givewp-primary-color: %s; --givewp-secondary-color: %s;',
-                esc_attr('#0b72d9'),
-                esc_attr('#27ae60')
-            );
-            ?>
-            <div
-                <?php
-                echo wp_kses_data(get_block_wrapper_attributes(['class' => 'givewp-campaign-donations-block'])); ?>
-                style="<?php
-                echo esc_attr($blockInlineStyles); ?>">
-                <div class="givewp-campaign-donations-block__header">
-                    <h2 class="givewp-campaign-donations-block__title"><?php
-                        echo esc_html($blockTitle); ?></h2>
-                    <?php
-                    if ($this->attributes['showButton'] && ! empty($donations)) : ?>
-                        <div class="givewp-campaign-donations-block__donate-button">
-                            <?php
-                            $params = [
-                                'formId' => $this->campaign->defaultFormId,
-                                'openFormButton' => $donateButtonText,
-                                'formFormat' => 'modal',
-                            ];
-
-                            echo (new BlockRenderController())->render($params);
-                            ?>
-                        </div>
-                    <?php
-                    endif; ?>
-                </div>
-
-                <?php
-                if (empty($donations) || 1 === 1) : ?>
-                    <div class="givewp-campaign-donations-block__empty-state">
-                        <h3 class="givewp-campaign-donations-block__empty-title">
-                            <?php
-                            _e('Every campaign starts with one donation.', 'give'); ?>
-                        </h3>
-                        <p class="givewp-campaign-donations-block__empty-description">
-                            <?php
-                            _e('Be the one to mate it happen!', 'give'); ?>
-                        </p>
-
-                        <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
-                             fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M11.6628 31.6719H28.3294M31.6628 26.6719C32.9578 26.7102 33.7294 26.8552 34.2628 27.3902C34.9961 28.1235 34.9961 29.3035 34.9961 31.6652C34.9961 34.0252 34.9961 35.2052 34.2628 35.9385C33.5311 36.6719 32.3528 36.6719 29.9961 36.6719H9.99609C7.63943 36.6719 6.46109 36.6719 5.72943 35.9385C4.99776 35.2052 4.99609 34.0252 4.99609 31.6652C4.99609 29.3052 4.99609 28.1235 5.72943 27.3902C6.26276 26.8569 7.03443 26.7102 8.32943 26.6719"
-                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-                                stroke-linejoin="round" />
-                            <path
-                                d="M23.8559 31.6691C24.4744 31.1394 24.9712 30.4822 25.3121 29.7426C25.653 29.003 25.8299 28.1984 25.8309 27.3841C25.8309 24.2274 23.2192 21.6691 19.9975 21.6691C16.7759 21.6691 14.1642 24.2274 14.1642 27.3841C14.1651 28.1984 14.3421 29.003 14.683 29.7426C15.0239 30.4822 15.5206 31.1394 16.1392 31.6691M33.3309 16.6691H29.3392C28.8492 16.6691 28.3659 16.5591 27.9275 16.3457L24.5242 14.6991C24.0833 14.4868 23.6002 14.3769 23.1109 14.3774H21.3742C19.6942 14.3774 18.3309 13.0591 18.3309 11.4324C18.3309 11.3657 18.3759 11.3091 18.4409 11.2907L22.6759 10.1207C23.4356 9.91029 24.2459 9.98314 24.9559 10.3257L28.5942 12.0857M18.3309 12.5024L10.6759 14.8541C10.0094 15.0586 9.29545 15.0473 8.6358 14.8219C7.97614 14.5966 7.40453 14.1686 7.00254 13.5991C6.38754 12.7491 6.63754 11.5291 7.5342 11.0124L20.0592 3.78407C20.4508 3.55747 20.8845 3.41297 21.3338 3.35939C21.7831 3.30581 22.2386 3.34426 22.6725 3.4724L33.3309 6.63573"
-                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-                                stroke-linejoin="round" />
-                        </svg>
-
-                        <?php
-                        if ($this->attributes['showButton']) : ?>
-                            <div class="givewp-campaign-donations-block__empty-button">
-                                <?php
-                                $params = [
-                                    'formId' => $this->campaign->defaultFormId,
-                                    'openFormButton' => __('Be the first', 'give'),
-                                    'formFormat' => 'modal',
-                                ];
-
-                                echo (new BlockRenderController())->render($params);
-                                ?>
-                            </div>
-                        <?php
-                        endif; ?>
-                    </div>
-                <?php
-                else : ?>
-                    <ul class="givewp-campaign-donations-block__donations">
-                        <?php
-                        foreach ($donations as $key => $donation) : ?>
-                            <li class="givewp-campaign-donations-block__donation">
-                                <?php
-                                if ($this->attributes['showIcon']) : ?>
-                                    <div class="givewp-campaign-donations-block__donation-icon">
-                                        <img
-                                            src="<?php
-                                            echo get_avatar_url($donation->donorId, ['size' => 64]); ?>"
-                                            alt="<?php
-                                            _e('Donation icon', 'give'); ?>"
-                                        />
-                                    </div>
-                                <?php
-                                endif; ?>
-
-                                <div class="givewp-campaign-donations-block__donation-info">
-                                    <div class="givewp-campaign-donations-block__donation-description">
-                                        <?php
-                                        printf(
-                                            __('%s donated %s', 'give'),
-                                            '<strong>' . esc_html($donation->donorName) . '</strong>',
-                                            '<strong>' . esc_html($donation->amount->formatToLocale()) . '</strong>'
-                                        );
-                                        ?>
-                                    </div>
-
-                                    <span class="givewp-campaign-donations-block__donation-date"><?php
-                                        echo esc_html(
-                                            sprintf(
-                                                _x('%s ago', 'human-readable time difference', 'give'),
-                                                $donation->date
-                                            )
-                                        ); ?></span>
-                                </div>
-
-                                <?php
-                                if ($sortBy === 'top-donations' && $key < 3) : ?>
-                                    <div class="givewp-campaign-donations-block__donation-ribbon" data-position="<?php
-                                    echo esc_attr($key + 1); ?>">
-                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                                                 xmlns="http://www.w3.org/2000/svg">
-                                                <path fill-rule="evenodd" clip-rule="evenodd"
-                                                      d="M6 .5a4 4 0 0 0-2.55 7.082l-.446 3.352a.5.5 0 0 0 .753.495L6 10.083l2.243 1.346a.5.5 0 0 0 .753-.495L8.55 7.581A4 4 0 0 0 6 .5zM4.382 8.16c.495.218 1.042.34 1.618.34.576 0 1.124-.122 1.619-.341l.249 1.879-1.405-.843-.014-.01a.958.958 0 0 0-.288-.126.75.75 0 0 0-.322 0 .958.958 0 0 0-.288.127l-.014.009-1.405.843.25-1.879z"
-                                                      fill="currentColor" />
-                                            </svg>
-                                    </div>
-                                <?php
-                                endif; ?>
-                            </li>
-                        <?php
-                        endforeach; ?>
-                    </ul>
-                <?php
-                endif; ?>
-            </div>
-            <?php
-        }
-    }
-}
 
-(new CampaignDonationsBlockRenderer($attributes))->render();
+(new CampaignDonationsBlockViewModel($attributes))->render();
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
new file mode 100644
index 0000000000..30044c0465
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
@@ -0,0 +1,141 @@
+<?php
+
+use Give\DonationForms\Blocks\DonationFormBlock\Controllers\BlockRenderController;
+
+$sortBy = $this->attributes['sortBy'] ?? 'top-donations';
+$blockTitle = $sortBy === 'top-donations' ? __('Top Donations', 'give') : __(
+    'Recent Donations',
+    'give'
+);
+$donateButtonText = $this->attributes['donateButtonText'] ?? __('Donate', 'give');
+
+$blockInlineStyles = sprintf(
+    '--givewp-primary-color: %s; --givewp-secondary-color: %s;',
+    esc_attr('#0b72d9'),
+    esc_attr('#27ae60')
+);
+?>
+<div
+    <?php
+    echo wp_kses_data(get_block_wrapper_attributes(['class' => 'givewp-campaign-donations-block'])); ?>
+    style="<?php
+    echo esc_attr($blockInlineStyles); ?>">
+    <div class="givewp-campaign-donations-block__header">
+        <h2 class="givewp-campaign-donations-block__title"><?php
+            echo esc_html($blockTitle); ?></h2>
+        <?php
+        if ($this->attributes['showButton'] && ! empty($donations)) : ?>
+            <div class="givewp-campaign-donations-block__donate-button">
+                <?php
+                $params = [
+                    'formId' => $this->campaign->defaultFormId,
+                    'openFormButton' => $donateButtonText,
+                    'formFormat' => 'modal',
+                ];
+
+                echo (new BlockRenderController())->render($params);
+                ?>
+            </div>
+        <?php
+        endif; ?>
+    </div>
+
+    <?php
+    if (empty($donations) || 1 === 1) : ?>
+        <div class="givewp-campaign-donations-block__empty-state">
+            <h3 class="givewp-campaign-donations-block__empty-title">
+                <?php
+                _e('Every campaign starts with one donation.', 'give'); ?>
+            </h3>
+            <p class="givewp-campaign-donations-block__empty-description">
+                <?php
+                _e('Be the one to mate it happen!', 'give'); ?>
+            </p>
+
+            <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
+                 fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M11.6628 31.6719H28.3294M31.6628 26.6719C32.9578 26.7102 33.7294 26.8552 34.2628 27.3902C34.9961 28.1235 34.9961 29.3035 34.9961 31.6652C34.9961 34.0252 34.9961 35.2052 34.2628 35.9385C33.5311 36.6719 32.3528 36.6719 29.9961 36.6719H9.99609C7.63943 36.6719 6.46109 36.6719 5.72943 35.9385C4.99776 35.2052 4.99609 34.0252 4.99609 31.6652C4.99609 29.3052 4.99609 28.1235 5.72943 27.3902C6.26276 26.8569 7.03443 26.7102 8.32943 26.6719"
+                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                    stroke-linejoin="round" />
+                <path
+                    d="M23.8559 31.6691C24.4744 31.1394 24.9712 30.4822 25.3121 29.7426C25.653 29.003 25.8299 28.1984 25.8309 27.3841C25.8309 24.2274 23.2192 21.6691 19.9975 21.6691C16.7759 21.6691 14.1642 24.2274 14.1642 27.3841C14.1651 28.1984 14.3421 29.003 14.683 29.7426C15.0239 30.4822 15.5206 31.1394 16.1392 31.6691M33.3309 16.6691H29.3392C28.8492 16.6691 28.3659 16.5591 27.9275 16.3457L24.5242 14.6991C24.0833 14.4868 23.6002 14.3769 23.1109 14.3774H21.3742C19.6942 14.3774 18.3309 13.0591 18.3309 11.4324C18.3309 11.3657 18.3759 11.3091 18.4409 11.2907L22.6759 10.1207C23.4356 9.91029 24.2459 9.98314 24.9559 10.3257L28.5942 12.0857M18.3309 12.5024L10.6759 14.8541C10.0094 15.0586 9.29545 15.0473 8.6358 14.8219C7.97614 14.5966 7.40453 14.1686 7.00254 13.5991C6.38754 12.7491 6.63754 11.5291 7.5342 11.0124L20.0592 3.78407C20.4508 3.55747 20.8845 3.41297 21.3338 3.35939C21.7831 3.30581 22.2386 3.34426 22.6725 3.4724L33.3309 6.63573"
+                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                    stroke-linejoin="round" />
+            </svg>
+
+            <?php
+            if ($this->attributes['showButton']) : ?>
+                <div class="givewp-campaign-donations-block__empty-button">
+                    <?php
+                    $params = [
+                        'formId' => $this->campaign->defaultFormId,
+                        'openFormButton' => __('Be the first', 'give'),
+                        'formFormat' => 'modal',
+                    ];
+
+                    echo (new BlockRenderController())->render($params);
+                    ?>
+                </div>
+            <?php
+            endif; ?>
+        </div>
+    <?php
+    else : ?>
+        <ul class="givewp-campaign-donations-block__donations">
+            <?php
+            foreach ($donations as $key => $donation) : ?>
+                <li class="givewp-campaign-donations-block__donation">
+                    <?php
+                    if ($this->attributes['showIcon']) : ?>
+                        <div class="givewp-campaign-donations-block__donation-icon">
+                            <img
+                                src="<?php
+                                echo get_avatar_url($donation->donorId, ['size' => 64]); ?>"
+                                alt="<?php
+                                _e('Donation icon', 'give'); ?>"
+                            />
+                        </div>
+                    <?php
+                    endif; ?>
+
+                    <div class="givewp-campaign-donations-block__donation-info">
+                        <div class="givewp-campaign-donations-block__donation-description">
+                            <?php
+                            printf(
+                                __('%s donated %s', 'give'),
+                                '<strong>' . esc_html($donation->donorName) . '</strong>',
+                                '<strong>' . esc_html($donation->amount->formatToLocale()) . '</strong>'
+                            );
+                            ?>
+                        </div>
+
+                        <span class="givewp-campaign-donations-block__donation-date"><?php
+                            echo esc_html(
+                                sprintf(
+                                    _x('%s ago', 'human-readable time difference', 'give'),
+                                    $donation->date
+                                )
+                            ); ?></span>
+                    </div>
+
+                    <?php
+                    if ($sortBy === 'top-donations' && $key < 3) : ?>
+                        <div class="givewp-campaign-donations-block__donation-ribbon" data-position="<?php
+                        echo esc_attr($key + 1); ?>">
+                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+                                 xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd"
+                                      d="M6 .5a4 4 0 0 0-2.55 7.082l-.446 3.352a.5.5 0 0 0 .753.495L6 10.083l2.243 1.346a.5.5 0 0 0 .753-.495L8.55 7.581A4 4 0 0 0 6 .5zM4.382 8.16c.495.218 1.042.34 1.618.34.576 0 1.124-.122 1.619-.341l.249 1.879-1.405-.843-.014-.01a.958.958 0 0 0-.288-.126.75.75 0 0 0-.322 0 .958.958 0 0 0-.288.127l-.014.009-1.405.843.25-1.879z"
+                                      fill="currentColor" />
+                            </svg>
+                        </div>
+                    <?php
+                    endif; ?>
+                </li>
+            <?php
+            endforeach; ?>
+        </ul>
+    <?php
+    endif; ?>
+</div>

From b8dc3b75dc41b65001ac7195b3502b80aa705ddb Mon Sep 17 00:00:00 2001
From: alaca <ante.laca@gmail.com>
Date: Fri, 31 Jan 2025 20:12:43 +0100
Subject: [PATCH 4/6] refactor: pair programming - use View class; add Campaign

---
 .../CampaignDonationsBlockViewModel.php       | 65 +++++--------------
 .../Blocks/CampaignDonationsBlock/render.php  | 38 ++++++++++-
 .../resources/views/render.php                | 40 +++++-------
 .../Blocks/CampaignTitleBlock/render.php      |  9 ---
 4 files changed, 70 insertions(+), 82 deletions(-)

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
index 4e1d6f89a2..ac2e03b115 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
@@ -4,8 +4,6 @@
 
 use Give\Campaigns\CampaignDonationQuery;
 use Give\Campaigns\Models\Campaign;
-use Give\Campaigns\Repositories\CampaignRepository;
-use Give\Donations\ValueObjects\DonationMetaKeys;
 use Give\Framework\Support\ValueObjects\Money;
 use Give\Framework\Views\View;
 
@@ -20,26 +18,19 @@ class CampaignDonationsBlockViewModel
      * @var array $attributes
      */
     private $attributes;
-
     /**
-     * @unreleased
+     * @var CampaignDonationQuery
      */
-    public function __construct($attributes)
-    {
-        $this->attributes = $attributes;
-        $this->campaign = $this->fetchCampaign();
-    }
+    private $donations;
 
     /**
      * @unreleased
      */
-    private function fetchCampaign(): ?Campaign
+    public function __construct(Campaign $campaign, array $donations, array $attributes)
     {
-        if ( ! isset($this->attributes['campaignId'])) {
-            return null;
-        }
-
-        return give(CampaignRepository::class)->getById($this->attributes['campaignId']);
+        $this->attributes = $attributes;
+        $this->campaign = $campaign;
+        $this->donations = $donations;
     }
 
     /**
@@ -47,43 +38,17 @@ private function fetchCampaign(): ?Campaign
      */
     public function render(): void
     {
-        if ( ! $this->campaign) {
-            return;
-        }
-
-        $query = $this->buildDonationsQuery();
-        $donations = $this->formatDonationsData($query->getAll());
-
-        View::render('Campaigns/Blocks/CampaignDonationsBlock.render', ['donations' => $donations]);
+        View::render('Campaigns/Blocks/CampaignDonationsBlock.render', [
+            'campaign' => $this->campaign,
+            'donations' => $this->formatDonationsData($this->donations),
+            'params' => [
+                'formId' => $this->campaign->defaultFormId,
+                'openFormButton' => $this->attributes['donateButtonText'],
+                'formFormat' => 'modal',
+            ],
+        ]);
     }
 
-    /**
-     * @unreleased
-     */
-    private function buildDonationsQuery(): CampaignDonationQuery
-    {
-        $sortBy = $this->attributes['sortBy'] ?? 'top-donations';
-        $query = (new CampaignDonationQuery($this->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($this->attributes['donationsPerPage'] ?? 5);
-
-        if ( ! $this->attributes['showAnonymous']) {
-            $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
-                ->where('anonymousMeta.meta_value', '0');
-        }
-
-        return $query;
-    }
 
     /**
      * @unreleased
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
index d161fa41bb..965d0239ae 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/render.php
@@ -2,10 +2,46 @@
 
 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
  */
 
-(new CampaignDonationsBlockViewModel($attributes))->render();
+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();
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
index 30044c0465..0fcbee9f83 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
@@ -1,13 +1,17 @@
 <?php
 
+use Give\Campaigns\Models\Campaign;
 use Give\DonationForms\Blocks\DonationFormBlock\Controllers\BlockRenderController;
 
-$sortBy = $this->attributes['sortBy'] ?? 'top-donations';
-$blockTitle = $sortBy === 'top-donations' ? __('Top Donations', 'give') : __(
-    'Recent Donations',
-    'give'
-);
-$donateButtonText = $this->attributes['donateButtonText'] ?? __('Donate', 'give');
+/**
+ * @var Campaign $campaign
+ * @var array $attributes
+ * @var array $params
+ */
+
+$sortBy = $attributes['sortBy'] ?? 'top-donations';
+$blockTitle = $sortBy === 'top-donations' ? __('Top Donations', 'give') : __('Recent Donations', 'give');
+$donateButtonText = $attributes['donateButtonText'] ?? __('Donate', 'give');
 
 $blockInlineStyles = sprintf(
     '--givewp-primary-color: %s; --givewp-secondary-color: %s;',
@@ -24,32 +28,24 @@
         <h2 class="givewp-campaign-donations-block__title"><?php
             echo esc_html($blockTitle); ?></h2>
         <?php
-        if ($this->attributes['showButton'] && ! empty($donations)) : ?>
+        if ($attributes['showButton'] && ! empty($donations)) : ?>
             <div class="givewp-campaign-donations-block__donate-button">
-                <?php
-                $params = [
-                    'formId' => $this->campaign->defaultFormId,
-                    'openFormButton' => $donateButtonText,
-                    'formFormat' => 'modal',
-                ];
-
-                echo (new BlockRenderController())->render($params);
-                ?>
+                <?= (new BlockRenderController())->render($params); ?>
             </div>
         <?php
         endif; ?>
     </div>
 
     <?php
-    if (empty($donations) || 1 === 1) : ?>
+    if (empty($donations)) : ?>
         <div class="givewp-campaign-donations-block__empty-state">
             <h3 class="givewp-campaign-donations-block__empty-title">
                 <?php
-                _e('Every campaign starts with one donation.', 'give'); ?>
+                esc_html_e('Every campaign starts with one donation.', 'give'); ?>
             </h3>
             <p class="givewp-campaign-donations-block__empty-description">
                 <?php
-                _e('Be the one to mate it happen!', 'give'); ?>
+                esc_html_e('Be the one to mate it happen!', 'give'); ?>
             </p>
 
             <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
@@ -65,11 +61,11 @@
             </svg>
 
             <?php
-            if ($this->attributes['showButton']) : ?>
+            if ($attributes['showButton']) : ?>
                 <div class="givewp-campaign-donations-block__empty-button">
                     <?php
                     $params = [
-                        'formId' => $this->campaign->defaultFormId,
+                        'formId' => $campaign->defaultFormId,
                         'openFormButton' => __('Be the first', 'give'),
                         'formFormat' => 'modal',
                     ];
@@ -87,7 +83,7 @@
             foreach ($donations as $key => $donation) : ?>
                 <li class="givewp-campaign-donations-block__donation">
                     <?php
-                    if ($this->attributes['showIcon']) : ?>
+                    if ($attributes['showIcon']) : ?>
                         <div class="givewp-campaign-donations-block__donation-icon">
                             <img
                                 src="<?php
diff --git a/src/Campaigns/Blocks/CampaignTitleBlock/render.php b/src/Campaigns/Blocks/CampaignTitleBlock/render.php
index ed639e2384..0ba1b5c8d7 100644
--- a/src/Campaigns/Blocks/CampaignTitleBlock/render.php
+++ b/src/Campaigns/Blocks/CampaignTitleBlock/render.php
@@ -3,16 +3,7 @@
 use Give\Campaigns\Models\Campaign;
 use Give\Campaigns\Repositories\CampaignRepository;
 
-if ( ! isset($attributes['campaignId'])) {
-    return;
-}
 
-/** @var Campaign $campaign */
-$campaign = give(CampaignRepository::class)->getById($attributes['campaignId']);
-
-if (! $campaign) {
-    return;
-}
 
 $headingLevel = isset($attributes['headingLevel']) ? (int) $attributes['headingLevel'] : 1;
 $headingTag = 'h' . min(6, max(1, $headingLevel));

From 5b25e145b9284da37dfdcc84bec398b091789e51 Mon Sep 17 00:00:00 2001
From: Paulo Iankoski <me@wpdev.com.br>
Date: Fri, 31 Jan 2025 16:40:42 -0300
Subject: [PATCH 5/6] refactor: cleanup params attributes

---
 .../CampaignDonationsBlockViewModel.php       | 19 +++++++++----------
 .../resources/views/render.php                | 14 ++++++++------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
index ac2e03b115..33017bf3e0 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/CampaignDonationsBlockViewModel.php
@@ -2,11 +2,13 @@
 
 namespace Give\Campaigns\Blocks\CampaignDonationsBlock;
 
-use Give\Campaigns\CampaignDonationQuery;
 use Give\Campaigns\Models\Campaign;
 use Give\Framework\Support\ValueObjects\Money;
 use Give\Framework\Views\View;
 
+/**
+ * @unreleased
+ */
 class CampaignDonationsBlockViewModel
 {
     /**
@@ -15,13 +17,14 @@ class CampaignDonationsBlockViewModel
     private $campaign;
 
     /**
-     * @var array $attributes
+     * @var array
      */
-    private $attributes;
+    private $donations;
+
     /**
-     * @var CampaignDonationQuery
+     * @var array $attributes
      */
-    private $donations;
+    private $attributes;
 
     /**
      * @unreleased
@@ -41,11 +44,7 @@ public function render(): void
         View::render('Campaigns/Blocks/CampaignDonationsBlock.render', [
             'campaign' => $this->campaign,
             'donations' => $this->formatDonationsData($this->donations),
-            'params' => [
-                'formId' => $this->campaign->defaultFormId,
-                'openFormButton' => $this->attributes['donateButtonText'],
-                'formFormat' => 'modal',
-            ],
+            'attributes' => $this->attributes,
         ]);
     }
 
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
index 0fcbee9f83..4518db6812 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
@@ -6,7 +6,6 @@
 /**
  * @var Campaign $campaign
  * @var array $attributes
- * @var array $params
  */
 
 $sortBy = $attributes['sortBy'] ?? 'top-donations';
@@ -30,7 +29,12 @@
         <?php
         if ($attributes['showButton'] && ! empty($donations)) : ?>
             <div class="givewp-campaign-donations-block__donate-button">
-                <?= (new BlockRenderController())->render($params); ?>
+                <?php
+                echo (new BlockRenderController())->render([
+                    'formId' => $campaign->defaultFormId,
+                    'openFormButton' => $attributes['donateButtonText'],
+                    'formFormat' => 'modal',
+                ]); ?>
             </div>
         <?php
         endif; ?>
@@ -64,13 +68,11 @@
             if ($attributes['showButton']) : ?>
                 <div class="givewp-campaign-donations-block__empty-button">
                     <?php
-                    $params = [
+                    echo (new BlockRenderController())->render([
                         'formId' => $campaign->defaultFormId,
                         'openFormButton' => __('Be the first', 'give'),
                         'formFormat' => 'modal',
-                    ];
-
-                    echo (new BlockRenderController())->render($params);
+                    ]);
                     ?>
                 </div>
             <?php

From 4977ca56466eaedfca7789560ffb5138599f45c0 Mon Sep 17 00:00:00 2001
From: Paulo Iankoski <me@wpdev.com.br>
Date: Fri, 31 Jan 2025 16:40:59 -0300
Subject: [PATCH 6/6] refactor: extract icons from the template

---
 .../resources/icons/empty-state.svg           | 11 +++++++++
 .../resources/icons/ribbon.svg                |  6 +++++
 .../resources/views/render.php                | 23 +++++--------------
 3 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/empty-state.svg
 create mode 100644 src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/ribbon.svg

diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/empty-state.svg b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/empty-state.svg
new file mode 100644
index 0000000000..97c9d126fe
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/empty-state.svg
@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40"
+     fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11.6628 31.6719H28.3294M31.6628 26.6719C32.9578 26.7102 33.7294 26.8552 34.2628 27.3902C34.9961 28.1235 34.9961 29.3035 34.9961 31.6652C34.9961 34.0252 34.9961 35.2052 34.2628 35.9385C33.5311 36.6719 32.3528 36.6719 29.9961 36.6719H9.99609C7.63943 36.6719 6.46109 36.6719 5.72943 35.9385C4.99776 35.2052 4.99609 34.0252 4.99609 31.6652C4.99609 29.3052 4.99609 28.1235 5.72943 27.3902C6.26276 26.8569 7.03443 26.7102 8.32943 26.6719"
+        stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path
+        d="M23.8559 31.6691C24.4744 31.1394 24.9712 30.4822 25.3121 29.7426C25.653 29.003 25.8299 28.1984 25.8309 27.3841C25.8309 24.2274 23.2192 21.6691 19.9975 21.6691C16.7759 21.6691 14.1642 24.2274 14.1642 27.3841C14.1651 28.1984 14.3421 29.003 14.683 29.7426C15.0239 30.4822 15.5206 31.1394 16.1392 31.6691M33.3309 16.6691H29.3392C28.8492 16.6691 28.3659 16.5591 27.9275 16.3457L24.5242 14.6991C24.0833 14.4868 23.6002 14.3769 23.1109 14.3774H21.3742C19.6942 14.3774 18.3309 13.0591 18.3309 11.4324C18.3309 11.3657 18.3759 11.3091 18.4409 11.2907L22.6759 10.1207C23.4356 9.91029 24.2459 9.98314 24.9559 10.3257L28.5942 12.0857M18.3309 12.5024L10.6759 14.8541C10.0094 15.0586 9.29545 15.0473 8.6358 14.8219C7.97614 14.5966 7.40453 14.1686 7.00254 13.5991C6.38754 12.7491 6.63754 11.5291 7.5342 11.0124L20.0592 3.78407C20.4508 3.55747 20.8845 3.41297 21.3338 3.35939C21.7831 3.30581 22.2386 3.34426 22.6725 3.4724L33.3309 6.63573"
+        stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+        stroke-linejoin="round" />
+</svg>
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/ribbon.svg b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/ribbon.svg
new file mode 100644
index 0000000000..5b8803f0be
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/icons/ribbon.svg
@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M6 .5a4 4 0 0 0-2.55 7.082l-.446 3.352a.5.5 0 0 0 .753.495L6 10.083l2.243 1.346a.5.5 0 0 0 .753-.495L8.55 7.581A4 4 0 0 0 6 .5zM4.382 8.16c.495.218 1.042.34 1.618.34.576 0 1.124-.122 1.619-.341l.249 1.879-1.405-.843-.014-.01a.958.958 0 0 0-.288-.126.75.75 0 0 0-.322 0 .958.958 0 0 0-.288.127l-.014.009-1.405.843.25-1.879z"
+          fill="currentColor" />
+</svg>
diff --git a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
index 4518db6812..bc6f530c3c 100644
--- a/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
+++ b/src/Campaigns/Blocks/CampaignDonationsBlock/resources/views/render.php
@@ -52,17 +52,10 @@
                 esc_html_e('Be the one to mate it happen!', 'give'); ?>
             </p>
 
-            <svg class="givewp-campaign-donations-block__empty-icon" width="40" height="40" viewBox="0 0 40 40"
-                 fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M11.6628 31.6719H28.3294M31.6628 26.6719C32.9578 26.7102 33.7294 26.8552 34.2628 27.3902C34.9961 28.1235 34.9961 29.3035 34.9961 31.6652C34.9961 34.0252 34.9961 35.2052 34.2628 35.9385C33.5311 36.6719 32.3528 36.6719 29.9961 36.6719H9.99609C7.63943 36.6719 6.46109 36.6719 5.72943 35.9385C4.99776 35.2052 4.99609 34.0252 4.99609 31.6652C4.99609 29.3052 4.99609 28.1235 5.72943 27.3902C6.26276 26.8569 7.03443 26.7102 8.32943 26.6719"
-                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-                    stroke-linejoin="round" />
-                <path
-                    d="M23.8559 31.6691C24.4744 31.1394 24.9712 30.4822 25.3121 29.7426C25.653 29.003 25.8299 28.1984 25.8309 27.3841C25.8309 24.2274 23.2192 21.6691 19.9975 21.6691C16.7759 21.6691 14.1642 24.2274 14.1642 27.3841C14.1651 28.1984 14.3421 29.003 14.683 29.7426C15.0239 30.4822 15.5206 31.1394 16.1392 31.6691M33.3309 16.6691H29.3392C28.8492 16.6691 28.3659 16.5591 27.9275 16.3457L24.5242 14.6991C24.0833 14.4868 23.6002 14.3769 23.1109 14.3774H21.3742C19.6942 14.3774 18.3309 13.0591 18.3309 11.4324C18.3309 11.3657 18.3759 11.3091 18.4409 11.2907L22.6759 10.1207C23.4356 9.91029 24.2459 9.98314 24.9559 10.3257L28.5942 12.0857M18.3309 12.5024L10.6759 14.8541C10.0094 15.0586 9.29545 15.0473 8.6358 14.8219C7.97614 14.5966 7.40453 14.1686 7.00254 13.5991C6.38754 12.7491 6.63754 11.5291 7.5342 11.0124L20.0592 3.78407C20.4508 3.55747 20.8845 3.41297 21.3338 3.35939C21.7831 3.30581 22.2386 3.34426 22.6725 3.4724L33.3309 6.63573"
-                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-                    stroke-linejoin="round" />
-            </svg>
+            <div class="givewp-campaign-donations-block__empty-icon">
+                <?php
+                echo file_get_contents(dirname(__DIR__) . '/icons/empty-state.svg'); ?>
+            </div>
 
             <?php
             if ($attributes['showButton']) : ?>
@@ -121,12 +114,8 @@
                     if ($sortBy === 'top-donations' && $key < 3) : ?>
                         <div class="givewp-campaign-donations-block__donation-ribbon" data-position="<?php
                         echo esc_attr($key + 1); ?>">
-                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                                 xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd" clip-rule="evenodd"
-                                      d="M6 .5a4 4 0 0 0-2.55 7.082l-.446 3.352a.5.5 0 0 0 .753.495L6 10.083l2.243 1.346a.5.5 0 0 0 .753-.495L8.55 7.581A4 4 0 0 0 6 .5zM4.382 8.16c.495.218 1.042.34 1.618.34.576 0 1.124-.122 1.619-.341l.249 1.879-1.405-.843-.014-.01a.958.958 0 0 0-.288-.126.75.75 0 0 0-.322 0 .958.958 0 0 0-.288.127l-.014.009-1.405.843.25-1.879z"
-                                      fill="currentColor" />
-                            </svg>
+                            <?php
+                            echo file_get_contents(dirname(__DIR__) . '/icons/ribbon.svg'); ?>
                         </div>
                     <?php
                     endif; ?>