From 99d42e5e1d34bb031fc0d96c865718fd4df0386f Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Thu, 5 Sep 2024 04:26:43 -0300
Subject: [PATCH 1/3] Feature: add list table for campaigns (#7524)

---
 .../Actions/LoadCampaignsListTableAssets.php  |  41 ++++
 src/Campaigns/CampaignsAdminPage.php          |   6 +-
 .../ListTable/CampaignsListTable.php          |  63 ++++++
 .../ListTable/Columns/DescriptionColumn.php   |  38 ++++
 .../Columns/DonationsCountColumn.php          |  38 ++++
 .../ListTable/Columns/EndDateColumn.php       |  42 ++++
 src/Campaigns/ListTable/Columns/IdColumn.php  |  40 ++++
 .../ListTable/Columns/StartDateColumn.php     |  42 ++++
 .../ListTable/Columns/StatusColumn.php        |  61 ++++++
 .../ListTable/Columns/TitleColumn.php         |  45 +++++
 src/Campaigns/Routes/CreateCampaign.php       |  97 ++++++++++
 .../Routes/DeleteCampaignListTable.php        | 116 +++++++++++
 .../Routes/GetCampaignsListTable.php          | 182 ++++++++++++++++++
 src/Campaigns/ServiceProvider.php             |  11 ++
 .../resources/admin/campaigns-list-table.tsx  |   6 +
 .../CampaignFormModal.module.scss             |  11 ++
 .../components/CampaignFormModal/index.tsx    | 162 ++++++++++++++++
 .../CampaignsListTable.module.scss            |  36 ++++
 .../CampaignsRowActions.tsx                   |  53 +++++
 .../components/CampaignsListTable/index.tsx   | 103 ++++++++++
 .../components/CampaignsListTable/types.ts    |   7 +
 .../CreateCampaignModal.module.scss           |  10 +
 .../components/CreateCampaignModal/index.tsx  |  59 ++++++
 .../components/FormModal/ErrorMessages.tsx    |  24 +++
 .../FormModal/FormModal.module.scss           |  98 ++++++++++
 .../admin/components/FormModal/index.tsx      |  44 +++++
 .../resources/admin/components/api.ts         |  38 ++++
 .../Components/ListTable/hooks/useDebounce.ts |   2 +-
 webpack.mix.js                                |   1 +
 29 files changed, 1474 insertions(+), 2 deletions(-)
 create mode 100644 src/Campaigns/Actions/LoadCampaignsListTableAssets.php
 create mode 100644 src/Campaigns/ListTable/CampaignsListTable.php
 create mode 100644 src/Campaigns/ListTable/Columns/DescriptionColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/DonationsCountColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/EndDateColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/IdColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/StartDateColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/StatusColumn.php
 create mode 100644 src/Campaigns/ListTable/Columns/TitleColumn.php
 create mode 100644 src/Campaigns/Routes/CreateCampaign.php
 create mode 100644 src/Campaigns/Routes/DeleteCampaignListTable.php
 create mode 100644 src/Campaigns/Routes/GetCampaignsListTable.php
 create mode 100644 src/Campaigns/resources/admin/campaigns-list-table.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignFormModal/CampaignFormModal.module.scss
 create mode 100644 src/Campaigns/resources/admin/components/CampaignFormModal/index.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsListTable.module.scss
 create mode 100644 src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsRowActions.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignsListTable/types.ts
 create mode 100644 src/Campaigns/resources/admin/components/CreateCampaignModal/CreateCampaignModal.module.scss
 create mode 100644 src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx
 create mode 100644 src/Campaigns/resources/admin/components/FormModal/ErrorMessages.tsx
 create mode 100644 src/Campaigns/resources/admin/components/FormModal/FormModal.module.scss
 create mode 100644 src/Campaigns/resources/admin/components/FormModal/index.tsx
 create mode 100644 src/Campaigns/resources/admin/components/api.ts

diff --git a/src/Campaigns/Actions/LoadCampaignsListTableAssets.php b/src/Campaigns/Actions/LoadCampaignsListTableAssets.php
new file mode 100644
index 0000000000..14e50a8129
--- /dev/null
+++ b/src/Campaigns/Actions/LoadCampaignsListTableAssets.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Give\Campaigns\Actions;
+
+use Give\Campaigns\ListTable\CampaignsListTable;
+
+/**
+ * @unreleased
+ */
+class LoadCampaignsListTableAssets
+{
+    /**
+     * @unreleased
+     */
+    public function __invoke()
+    {
+        $handleName = 'givewp-admin-campaigns-list-table';
+
+        wp_register_script(
+            $handleName,
+            GIVE_PLUGIN_URL . 'assets/dist/js/give-admin-campaigns-list-table.js',
+            [],
+            GIVE_VERSION,
+            true
+        );
+
+        wp_localize_script($handleName, 'GiveCampaignsListTable',
+            [
+                'apiRoot' => esc_url_raw(rest_url('give-api/v2/campaigns/list-table')),
+                'apiNonce' => wp_create_nonce('wp_rest'),
+                'table' => give(CampaignsListTable::class)->toArray(),
+                'adminUrl' => admin_url(),
+                'paymentMode' => give_is_test_mode(),
+                'pluginUrl' => GIVE_PLUGIN_URL,
+            ]
+        );
+
+        wp_enqueue_script($handleName);
+        wp_enqueue_style('givewp-design-system-foundation');
+    }
+}
diff --git a/src/Campaigns/CampaignsAdminPage.php b/src/Campaigns/CampaignsAdminPage.php
index 5d4e0cdf52..3b7c954189 100644
--- a/src/Campaigns/CampaignsAdminPage.php
+++ b/src/Campaigns/CampaignsAdminPage.php
@@ -2,6 +2,8 @@
 
 namespace Give\Campaigns;
 
+use Give\Campaigns\Actions\LoadCampaignsListTableAssets;
+
 /**
  * @unreleased
  */
@@ -28,6 +30,8 @@ public function addCampaignsSubmenuPage()
      */
     public function renderCampaignsPage()
     {
-        echo '<div id="give-admin-campaigns-root"><p style="padding: 200px 30px">The campaigns list table will be loaded here...</p></div>';
+        give(LoadCampaignsListTableAssets::class)();
+
+        echo '<div id="give-admin-campaigns-root"></div>';
     }
 }
diff --git a/src/Campaigns/ListTable/CampaignsListTable.php b/src/Campaigns/ListTable/CampaignsListTable.php
new file mode 100644
index 0000000000..b3b713d55b
--- /dev/null
+++ b/src/Campaigns/ListTable/CampaignsListTable.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Give\Campaigns\ListTable;
+
+use Give\Campaigns\ListTable\Columns\DescriptionColumn;
+use Give\Campaigns\ListTable\Columns\EndDateColumn;
+use Give\Campaigns\ListTable\Columns\IdColumn;
+use Give\Campaigns\ListTable\Columns\StartDateColumn;
+use Give\Campaigns\ListTable\Columns\StatusColumn;
+use Give\Campaigns\ListTable\Columns\TitleColumn;
+use Give\Framework\ListTable\ListTable;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class CampaignsListTable extends ListTable
+{
+    /**
+     * @unreleased
+     */
+    public function id(): string
+    {
+        return 'campaigns';
+    }
+
+    /**
+     * @unreleased
+     *
+     * @return array|ModelColumn[]
+     */
+    protected function getDefaultColumns(): array
+    {
+        // TODO We need to decide which columns should be displayed
+        return [
+            new IdColumn(),
+            new TitleColumn(),
+            new DescriptionColumn(),
+            //new DonationsCountColumn(),
+            new StartDateColumn(),
+            new EndDateColumn(),
+            new StatusColumn(),
+        ];
+    }
+
+    /**
+     * @unreleased
+     *
+     * @return array|string[]
+     */
+    protected function getDefaultVisibleColumns(): array
+    {
+        return [
+            IdColumn::getId(),
+            TitleColumn::getId(),
+            DescriptionColumn::getId(),
+            //DonationsCountColumn::getId(),
+            StartDateColumn::getId(),
+            EndDateColumn::getId(),
+            StatusColumn::getId(),
+        ];
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/DescriptionColumn.php b/src/Campaigns/ListTable/Columns/DescriptionColumn.php
new file mode 100644
index 0000000000..cf209fd23f
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/DescriptionColumn.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class DescriptionColumn extends ModelColumn
+{
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'shortDescription';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('Short Description', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model): string
+    {
+        return wpautop($model->shortDescription);
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/DonationsCountColumn.php b/src/Campaigns/ListTable/Columns/DonationsCountColumn.php
new file mode 100644
index 0000000000..9626752c0f
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/DonationsCountColumn.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class DonationsCountColumn extends ModelColumn
+{
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'donationsCount';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('Donations Count', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model): string
+    {
+        return (string)$model->query()->count(); //Temp count
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/EndDateColumn.php b/src/Campaigns/ListTable/Columns/EndDateColumn.php
new file mode 100644
index 0000000000..eeaba73645
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/EndDateColumn.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class EndDateColumn extends ModelColumn
+{
+    protected $sortColumn = 'endDate';
+
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'endDate';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('End Date', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model, $locale = ''): string
+    {
+        $format = _x('m/d/Y \a\t g:ia', 'date format', 'give');
+
+        return $model->endDate->format($format);
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/IdColumn.php b/src/Campaigns/ListTable/Columns/IdColumn.php
new file mode 100644
index 0000000000..1a5a616cc5
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/IdColumn.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class IdColumn extends ModelColumn
+{
+    protected $sortColumn = 'id';
+
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'id';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('ID', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model): int
+    {
+        return $model->id;
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/StartDateColumn.php b/src/Campaigns/ListTable/Columns/StartDateColumn.php
new file mode 100644
index 0000000000..3a420f5191
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/StartDateColumn.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class StartDateColumn extends ModelColumn
+{
+    protected $sortColumn = 'startDate';
+
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'startDate';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('Start Date', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model, $locale = ''): string
+    {
+        $format = _x('m/d/Y \a\t g:ia', 'date format', 'give');
+
+        return $model->startDate->format($format);
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/StatusColumn.php b/src/Campaigns/ListTable/Columns/StatusColumn.php
new file mode 100644
index 0000000000..7c19f1f2d4
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/StatusColumn.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class StatusColumn extends ModelColumn
+{
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'status';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('Status', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model)
+    {
+        switch ($model->status->getValue()) {
+            case 'active':
+                $status = __('Active', 'give');
+                break;
+            case 'inactive':
+                $status = __('Inactive', 'give');
+                break;
+            case 'draft':
+                $status = __('Draft', 'give');
+                break;
+            case 'pending':
+                $status = __('Pending', 'give');
+                break;
+            case 'processing':
+                $status = __('Processing', 'give');
+                break;
+            case 'failed':
+                $status = __('Failed', 'give');
+                break;
+            default:
+                $status = __('Draft', 'give');
+        }
+
+        return $status;
+    }
+}
diff --git a/src/Campaigns/ListTable/Columns/TitleColumn.php b/src/Campaigns/ListTable/Columns/TitleColumn.php
new file mode 100644
index 0000000000..4c14886542
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/TitleColumn.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Give\Campaigns\ListTable\Columns;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Framework\ListTable\ModelColumn;
+
+/**
+ * @unreleased
+ */
+class TitleColumn extends ModelColumn
+{
+    protected $sortColumn = 'title';
+
+    /**
+     * @unreleased
+     */
+    public static function getId(): string
+    {
+        return 'title';
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getLabel(): string
+    {
+        return __('Title', 'give');
+    }
+
+    /**
+     * @unreleased
+     *
+     * @param Campaign $model
+     */
+    public function getCellValue($model): string
+    {
+        return sprintf(
+            '<a href="%s" aria-label="%s">%s</a>',
+            admin_url("edit.php?post_type=give_forms&page=give-campaigns&id=$model->id"),
+            __('Visit campaign page', 'give'),
+            $model->title
+        );
+    }
+}
diff --git a/src/Campaigns/Routes/CreateCampaign.php b/src/Campaigns/Routes/CreateCampaign.php
new file mode 100644
index 0000000000..6ea2f1c9d9
--- /dev/null
+++ b/src/Campaigns/Routes/CreateCampaign.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace Give\Campaigns\Routes;
+
+use DateTime;
+use Give\API\RestRoute;
+use Give\Campaigns\Models\Campaign;
+use Give\Campaigns\ValueObjects\CampaignStatus;
+use Give\Campaigns\ValueObjects\CampaignType;
+use Give\Framework\Exceptions\Primitives\Exception;
+use WP_REST_Request;
+use WP_REST_Response;
+
+/**
+ * @unreleased
+ */
+class CreateCampaign implements RestRoute
+{
+    /** @var string */
+    protected $endpoint = 'campaigns';
+
+    /**
+     * @unreleased
+     */
+    public function registerRoute()
+    {
+        register_rest_route(
+            'give-api/v2',
+            $this->endpoint,
+            [
+                [
+                    'methods' => 'POST',
+                    'callback' => [$this, 'handleRequest'],
+                    'permission_callback' => function () {
+                        return current_user_can('manage_options');
+                    },
+                ],
+                'args' => [
+                    'title' => [
+                        'type' => 'string',
+                        'required' => true,
+                        'sanitize_callback' => 'sanitize_text_field',
+                    ],
+                    'description' => [
+                        'type' => 'string',
+                        'required' => false,
+                        'sanitize_callback' => 'sanitize_text_field',
+                    ],
+                    'startDateTime' => [
+                        'type' => 'string',
+                        'format' => 'date-time', // @link https://datatracker.ietf.org/doc/html/rfc3339#section-5.8
+                        'required' => true,
+                        'validate_callback' => 'rest_parse_date',
+                        'sanitize_callback' => function ($value) {
+                            return new DateTime($value);
+                        },
+                    ],
+                    'endDateTime' => [
+                        'type' => 'string',
+                        'format' => 'date-time', // @link https://datatracker.ietf.org/doc/html/rfc3339#section-5.8
+                        'required' => false,
+                        'validate_callback' => 'rest_parse_date',
+                        'sanitize_callback' => function ($value) {
+                            return new DateTime($value);
+                        },
+                    ],
+                ],
+            ]
+        );
+    }
+
+    /**
+     * @unreleased
+     *
+     * @throws Exception
+     */
+    public function handleRequest(WP_REST_Request $request): WP_REST_Response
+    {
+        $campaign = Campaign::create([
+            'pageId' => 0,
+            'type' => CampaignType::CORE(),
+            'title' => $request->get_param('title'),
+            'shortDescription' => $request->get_param('shortDescription'),
+            'longDescription' => '',
+            'logo' => '',
+            'image' => '',
+            'primaryColor' => '',
+            'secondaryColor' => '',
+            'goal' => 0,
+            'status' => CampaignStatus::DRAFT(),
+            'startDate' => $request->get_param('startDateTime'),
+            'endDate' => $request->get_param('endDateTime'),
+        ]);
+
+        return new WP_REST_Response($campaign->toArray(), 201);
+    }
+}
diff --git a/src/Campaigns/Routes/DeleteCampaignListTable.php b/src/Campaigns/Routes/DeleteCampaignListTable.php
new file mode 100644
index 0000000000..616f095d80
--- /dev/null
+++ b/src/Campaigns/Routes/DeleteCampaignListTable.php
@@ -0,0 +1,116 @@
+<?php
+
+namespace Give\Campaigns\Routes;
+
+use Give\API\RestRoute;
+use Give\Campaigns\ListTable\CampaignsListTable;
+use Give\Campaigns\Repositories\CampaignRepository;
+use Give\Framework\Exceptions\Primitives\Exception;
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
+use WP_REST_Server;
+
+/**
+ * @unreleased
+ */
+class DeleteCampaignListTable implements RestRoute
+{
+    /**
+     * @var string
+     */
+    protected $endpoint = 'campaigns/list-table';
+
+    /**
+     * @var WP_REST_Request
+     */
+    protected $request;
+
+    /**
+     * @var CampaignsListTable
+     */
+    protected $listTable;
+
+    /**
+     * @inheritDoc
+     */
+    public function registerRoute()
+    {
+        register_rest_route(
+            'give-api/v2',
+            $this->endpoint,
+            [
+                [
+                    'methods' => WP_REST_Server::DELETABLE,
+                    'callback' => [$this, 'handleRequest'],
+                    'permission_callback' => [$this, 'permissionsCheck'],
+                ],
+                'args' => [
+                    'ids' => [
+                        'type' => 'string',
+                        'required' => true,
+                        'validate_callback' => function ($ids) {
+                            foreach ($this->splitString($ids) as $id) {
+                                if ( ! filter_var($id, FILTER_VALIDATE_INT)) {
+                                    return false;
+                                }
+                            }
+
+                            return true;
+                        },
+                    ],
+                ],
+            ]
+        );
+    }
+
+    /**
+     * @unreleased
+     *
+     * @throws Exception
+     */
+    public function handleRequest(WP_REST_Request $request): WP_Rest_Response
+    {
+        $ids = $this->splitString($request->get_param('ids'));
+        $errors = [];
+        $successes = [];
+
+        foreach ($ids as $id) {
+            $campaignDeleted = give(CampaignRepository::class)->getById($id)->delete();
+            $campaignDeleted ? $successes[] = $id : $errors[] = $id;
+        }
+
+        return new WP_REST_Response(['errors' => $errors, 'successes' => $successes]);
+    }
+
+
+    /**
+     * Split string
+     *
+     * @unreleased
+     *
+     * @return string[]
+     */
+    protected function splitString(string $ids): array
+    {
+        if (strpos($ids, ',')) {
+            return array_map('trim', explode(',', $ids));
+        }
+
+        return [trim($ids)];
+    }
+
+    /**
+     * @unreleased
+     *
+     * @return bool|WP_Error
+     */
+    public function permissionsCheck()
+    {
+        return current_user_can('delete_posts') ?: new WP_Error(
+            'rest_forbidden',
+            esc_html__("You don't have permission to delete Campaigns", 'give'),
+            ['status' => is_user_logged_in() ? 403 : 401]
+        );
+    }
+}
diff --git a/src/Campaigns/Routes/GetCampaignsListTable.php b/src/Campaigns/Routes/GetCampaignsListTable.php
new file mode 100644
index 0000000000..82d6dc2d08
--- /dev/null
+++ b/src/Campaigns/Routes/GetCampaignsListTable.php
@@ -0,0 +1,182 @@
+<?php
+
+namespace Give\Campaigns\Routes;
+
+use Give\API\RestRoute;
+use Give\Campaigns\ListTable\CampaignsListTable;
+use Give\Campaigns\Repositories\CampaignRepository;
+use Give\Framework\Database\DB;
+use Give\Framework\QueryBuilder\QueryBuilder;
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
+use WP_REST_Server;
+
+/**
+ * @unreleased
+ */
+class GetCampaignsListTable implements RestRoute
+{
+    /**
+     * @var string
+     */
+    protected $endpoint = 'campaigns/list-table';
+
+    /**
+     * @var WP_REST_Request
+     */
+    protected $request;
+
+    /**
+     * @var CampaignsListTable
+     */
+    protected $listTable;
+
+    /**
+     * @unreleased
+     */
+    public function registerRoute(): void
+    {
+        register_rest_route(
+            'give-api/v2',
+            $this->endpoint,
+            [
+                [
+                    'methods' => WP_REST_Server::READABLE,
+                    'callback' => [$this, 'handleRequest'],
+                    'permission_callback' => [$this, 'permissionsCheck'],
+                ],
+                'args' => [
+                    'page' => [
+                        'type' => 'integer',
+                        'default' => 1,
+                        'minimum' => 1,
+                    ],
+                    'perPage' => [
+                        'type' => 'integer',
+                        'default' => 30,
+                        'minimum' => 1,
+                    ],
+                    'search' => [
+                        'type' => 'string',
+                        'required' => false,
+                        'sanitize_callback' => 'sanitize_text_field',
+                    ],
+                    'sortColumn' => [
+                        'type' => 'string',
+                        'default' => 'id',
+                        'sanitize_callback' => 'sanitize_text_field',
+                    ],
+                    'sortDirection' => [
+                        'type' => 'string',
+                        'default' => 'asc',
+                        'enum' => ['asc', 'desc'],
+                    ],
+                    'locale' => [
+                        'type' => 'string',
+                        'required' => false,
+                        'default' => get_locale(),
+                    ],
+                ],
+            ]
+        );
+    }
+
+    /**
+     * @unreleased
+     */
+    public function handleRequest(WP_REST_Request $request): WP_REST_Response
+    {
+        $this->request = $request;
+        $this->listTable = give(CampaignsListTable::class);
+
+        $campaigns = $this->getCampaigns();
+        $campaignsCount = $this->getTotalCampaignsCount();
+        $pageCount = (int)ceil($campaignsCount / $request->get_param('perPage'));
+
+        $this->listTable->items($campaigns, $this->request->get_param('locale') ?? '');
+        $items = $this->listTable->getItems();
+
+
+        return new WP_REST_Response(
+            [
+                'items' => $items,
+                'totalItems' => $campaignsCount,
+                'totalPages' => $pageCount,
+            ]
+        );
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getCampaigns(): array
+    {
+        $page = $this->request->get_param('page');
+        $perPage = $this->request->get_param('perPage');
+        $sortColumns = $this->listTable->getSortColumnById($this->request->get_param('sortColumn') ?: 'id');
+        $sortDirection = $this->request->get_param('sortDirection') ?: 'desc';
+
+        $query = give(CampaignRepository::class)->prepareQuery();
+        $query = $this->getWhereConditions($query);
+
+        foreach ($sortColumns as $sortColumn) {
+            $query->orderBy($sortColumn, $sortDirection);
+        }
+
+        $query->limit($perPage)
+            ->offset(($page - 1) * $perPage);
+
+        $campaigns = $query->getAll();
+
+        if ( ! $campaigns) {
+            return [];
+        }
+
+        return $campaigns;
+    }
+
+    /**
+     * @unreleased
+     */
+    public function getTotalCampaignsCount(): int
+    {
+        $query = DB::table('give_campaigns');
+        $query = $this->getWhereConditions($query);
+
+        return $query->count();
+    }
+
+    /**
+     * @unreleased
+     */
+    private function getWhereConditions(QueryBuilder $query): QueryBuilder
+    {
+        $search = $this->request->get_param('search');
+
+        if ($search) {
+            if (ctype_digit($search)) {
+                $query->where('id', $search);
+            } else {
+                $query->whereLike('campaign_title', $search);
+                $query->orWhereLike('short_desc', $search);
+            }
+        }
+
+        return $query;
+    }
+
+    /**
+     * @unreleased
+     *
+     * @return bool|WP_Error
+     */
+    public function permissionsCheck()
+    {
+        return current_user_can('edit_posts') ?: new WP_Error(
+            'rest_forbidden',
+            esc_html__("You don't have permission to view Campaigns", 'give'),
+            ['status' => is_user_logged_in() ? 403 : 401]
+        );
+    }
+}
diff --git a/src/Campaigns/ServiceProvider.php b/src/Campaigns/ServiceProvider.php
index 9ccefd7611..f66874cc74 100644
--- a/src/Campaigns/ServiceProvider.php
+++ b/src/Campaigns/ServiceProvider.php
@@ -35,6 +35,17 @@ public function boot(): void
         $this->registerActions();
         $this->setupCampaignPages();
         $this->registerMigrations();
+        $this->registerRoutes();
+    }
+
+    /**
+     * @unreleased
+     */
+    private function registerRoutes()
+    {
+        Hooks::addAction('rest_api_init', Routes\CreateCampaign::class, 'registerRoute');
+        Hooks::addAction('rest_api_init', Routes\GetCampaignsListTable::class, 'registerRoute');
+        Hooks::addAction('rest_api_init', Routes\DeleteCampaignListTable::class, 'registerRoute');
     }
 
     /**
diff --git a/src/Campaigns/resources/admin/campaigns-list-table.tsx b/src/Campaigns/resources/admin/campaigns-list-table.tsx
new file mode 100644
index 0000000000..d99f8b1c98
--- /dev/null
+++ b/src/Campaigns/resources/admin/campaigns-list-table.tsx
@@ -0,0 +1,6 @@
+import {createRoot} from 'react-dom/client';
+import CampaignsListTable from './components/CampaignsListTable';
+
+const container = document.getElementById('give-admin-campaigns-root');
+const root = createRoot(container!);
+root.render(<CampaignsListTable />);
diff --git a/src/Campaigns/resources/admin/components/CampaignFormModal/CampaignFormModal.module.scss b/src/Campaigns/resources/admin/components/CampaignFormModal/CampaignFormModal.module.scss
new file mode 100644
index 0000000000..ed8a49dcc7
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignFormModal/CampaignFormModal.module.scss
@@ -0,0 +1,11 @@
+.campaignForm {
+    .submitButton {
+        border-radius: 0;
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 1.43;
+        padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
+        text-align: center;
+    }
+}
+
diff --git a/src/Campaigns/resources/admin/components/CampaignFormModal/index.tsx b/src/Campaigns/resources/admin/components/CampaignFormModal/index.tsx
new file mode 100644
index 0000000000..bcff7452ab
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignFormModal/index.tsx
@@ -0,0 +1,162 @@
+import {SubmitHandler, useForm} from 'react-hook-form';
+import {__} from '@wordpress/i18n';
+import styles from './CampaignFormModal.module.scss';
+import FormModal from '../FormModal';
+import CampaignsApi from '../api';
+
+type Campaign = {
+    id?: number;
+    title: string;
+    shortDescription: string;
+    startDateTime: {
+        date: string;
+        timezone_type: number;
+        timezone: string;
+    };
+    endDateTime: {
+        date: string;
+        timezone_type: number;
+        timezone: string;
+    };
+    createdAt: string;
+    updatedAt: string;
+};
+
+type Inputs = {
+    title: string;
+    shortDescription: string;
+    startDateTime: string;
+    endDateTime: string;
+};
+
+interface CampaignModalProps {
+    isOpen: boolean;
+    handleClose: (response?: any) => void;
+    apiSettings: {
+        apiRoot: string;
+        apiNonce: string;
+    };
+    title: string;
+    campaign?: Campaign;
+}
+
+/**
+ * Get the next sharp hour
+ *
+ * @unreleased
+ */
+const getNextSharpHour = (hoursToAdd: number) => {
+    const date = new Date();
+    date.setHours(date.getHours() + hoursToAdd, 0, 0, 0);
+
+    return date;
+};
+
+/**
+ * Format a given date to be used in datetime inputs
+ *
+ * @unreleased
+ */
+const getDateString = (date: Date) => {
+    const offsetInMilliseconds = date.getTimezoneOffset() * 60 * 1000;
+    const dateWithOffset = new Date(date.getTime() - offsetInMilliseconds);
+
+    return removeTimezoneFromDateISOString(dateWithOffset.toISOString());
+};
+
+/**
+ * Remove timezone from date string
+ *
+ * @unreleased
+ */
+const removeTimezoneFromDateISOString = (date: string) => {
+    return date.slice(0, -5);
+};
+
+/**
+ * Campaign Form Modal component
+ *
+ * @unreleased
+ */
+export default function CampaignFormModal({isOpen, handleClose, apiSettings, title, campaign}: CampaignModalProps) {
+    const API = new CampaignsApi(apiSettings);
+
+    const {
+        register,
+        handleSubmit,
+        formState: {errors, isDirty},
+    } = useForm<Inputs>({
+        defaultValues: {
+            title: campaign?.title ?? '',
+            shortDescription: campaign?.shortDescription ?? '',
+            startDateTime: getDateString(
+                campaign?.startDateTime?.date ? new Date(campaign?.startDateTime?.date) : getNextSharpHour(1)
+            ),
+            endDateTime: getDateString(
+                campaign?.endDateTime?.date ? new Date(campaign?.endDateTime?.date) : getNextSharpHour(2)
+            ),
+        },
+    });
+
+    const onSubmit: SubmitHandler<Inputs> = async (inputs) => {
+        try {
+            inputs.startDateTime = getDateString(new Date(inputs.startDateTime));
+            inputs.endDateTime = getDateString(new Date(inputs.endDateTime));
+
+            const endpoint = campaign?.id ? `/campaign/${campaign.id}` : '';
+            const response = await API.fetchWithArgs(endpoint, inputs, 'POST');
+
+            handleClose(response);
+        } catch (error) {
+            console.error('Error submitting campaign campaign', error);
+        }
+    };
+
+    return (
+        <FormModal
+            isOpen={isOpen}
+            handleClose={handleClose}
+            title={title}
+            handleSubmit={handleSubmit(onSubmit)}
+            errors={errors}
+            className={styles.campaignForm}
+        >
+            <div className="givewp-campaigns__form-row">
+                <label htmlFor="title">{__('Campaign Name', 'give')}</label>
+                <input
+                    type="text"
+                    {...register('title', {required: __('The campaign must have a name!', 'give')})}
+                    aria-invalid={errors.title ? 'true' : 'false'}
+                    placeholder={__('Enter campaign name', 'give')}
+                />
+            </div>
+            <div className="givewp-campaigns__form-row">
+                <label htmlFor="shortDescription">{__('Short Description', 'give')}</label>
+                <textarea {...register('shortDescription')} rows={4} />
+            </div>
+            <div className="givewp-campaigns__form-row givewp-campaigns__form-row--half">
+                <div className="givewp-campaigns__form-column">
+                    <label htmlFor="startDateTime">{__('Start date and time', 'give')}</label>
+                    <input
+                        type="datetime-local"
+                        {...register('startDateTime', {required: __('The campaign must have a start date!', 'give')})}
+                        aria-invalid={errors.startDateTime ? 'true' : 'false'}
+                    />
+                </div>
+                <div className="givewp-campaigns__form-column">
+                    <label htmlFor="endDateTime">{__('End date and time', 'give')}</label>
+                    <input type="datetime-local" {...register('endDateTime')} />
+                </div>
+            </div>
+
+            <button
+                type="submit"
+                className={`button button-primary ${!isDirty ? 'disabled' : ''}`}
+                aria-disabled={!isDirty}
+                disabled={!isDirty}
+            >
+                {campaign?.id ? __('Save changes', 'give') : __('Save campaign', 'give')}
+            </button>
+        </FormModal>
+    );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsListTable.module.scss b/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsListTable.module.scss
new file mode 100644
index 0000000000..ed807500e9
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsListTable.module.scss
@@ -0,0 +1,36 @@
+.container {
+    text-align: center;
+    color: #424242;
+    margin: var(--givewp-spacing-2) 0;
+
+    img {
+        margin-bottom: 1rem;
+    }
+
+    > h3 {
+        font-size: 1.125rem;
+        line-height: 1.22;
+        margin: 0;
+        padding: 0;
+    }
+
+    > p:last-child {
+        margin-bottom: 0;
+    }
+
+    .helpMessage {
+        font-size:0.875rem;
+        font-weight: 400;
+        line-height: 1.57;
+    }
+
+    .button {
+        border-radius: var(--givewp-rounded-4);
+        font-size: 1rem;
+        font-weight: 500;
+        line-height: 1.5;
+        min-width: 13.75rem;
+        padding: var(--givewp-spacing-3) var(--givewp-spacing-8);
+        text-align: center;
+    }
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsRowActions.tsx b/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsRowActions.tsx
new file mode 100644
index 0000000000..379795cc33
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignsListTable/CampaignsRowActions.tsx
@@ -0,0 +1,53 @@
+import {useContext} from 'react';
+import {ShowConfirmModalContext} from '@givewp/components/ListTable/ListTablePage';
+import {__, sprintf} from '@wordpress/i18n';
+import RowAction from '@givewp/components/ListTable/RowAction';
+import {useSWRConfig} from 'swr';
+import ListTableApi from '@givewp/components/ListTable/api';
+import {getGiveCampaignsListTableWindowData} from './index';
+
+const campaignsApi = new ListTableApi(getGiveCampaignsListTableWindowData());
+
+export function CampaignsRowActions({item, setUpdateErrors, parameters}) {
+    const showConfirmModal = useContext(ShowConfirmModalContext);
+    const {mutate} = useSWRConfig();
+
+    const donationsCount = parseInt(item?.donationsCount?.match(/^\d+/)[0], 10);
+
+    const fetchAndUpdateErrors = async (parameters, endpoint, id, method) => {
+        const response = await campaignsApi.fetchWithArgs(endpoint, {ids: [id]}, method);
+        setUpdateErrors(response);
+        await mutate(parameters);
+        return response;
+    };
+
+    const deleteItem = async (selected) => await fetchAndUpdateErrors(parameters, '', item.id, 'DELETE');
+
+    const confirmDelete = (selected) => <p>{sprintf(__('Really delete campaign #%d?', 'give'), item.id)}</p>;
+
+    const confirmModal = (campaign) => {
+        // TODO We need decide if we should have some restriction that block deletion.
+        /*if (donationsCount > 0) {
+            alert(__('This campaign cannot be deleted because it has donations associated with it.', 'give'));
+            return;
+        }*/
+
+        showConfirmModal(__('Delete', 'give'), confirmDelete, deleteItem, 'danger');
+    };
+
+    return (
+        <>
+            <RowAction
+                href={`edit.php?post_type=give_forms&page=give-campaigns&id=${item.id}`}
+                displayText={__('Edit', 'give')}
+            />
+            <RowAction
+                onClick={confirmModal}
+                actionId={item.id}
+                displayText={__('Delete', 'give')}
+                hiddenText={item.title}
+                highlight
+            />
+        </>
+    );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx b/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx
new file mode 100644
index 0000000000..38722fed07
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx
@@ -0,0 +1,103 @@
+import {__} from '@wordpress/i18n';
+import {ListTablePage} from '@givewp/components';
+import ListTableApi from '@givewp/components/ListTable/api';
+import {BulkActionsConfig, FilterConfig} from '@givewp/components/ListTable/ListTablePage';
+import {IdBadge} from '@givewp/components/ListTable/TableCell';
+import {Interweave} from 'interweave';
+import {CampaignsRowActions} from './CampaignsRowActions';
+import styles from './CampaignsListTable.module.scss';
+import {GiveCampaignsListTable} from './types';
+import CreateCampaignModal from '../CreateCampaignModal';
+
+declare const window: {
+    GiveCampaignsListTable: GiveCampaignsListTable;
+} & Window;
+
+export function getGiveCampaignsListTableWindowData() {
+    return window.GiveCampaignsListTable;
+}
+
+const API = new ListTableApi(getGiveCampaignsListTableWindowData());
+
+const filters: Array<FilterConfig> = [
+    {
+        name: 'search',
+        type: 'search',
+        inlineSize: '14rem',
+        text: __('Search by keyword', 'give'),
+        ariaLabel: __('search campaigns', 'give'),
+    },
+];
+
+const bulkActions: Array<BulkActionsConfig> = [
+    {
+        label: __('Delete', 'give'),
+        value: 'delete',
+        type: 'danger',
+        action: async (selected) => {
+            return await API.fetchWithArgs('', {ids: selected.join(',')}, 'DELETE');
+        },
+        confirm: (selected, names) => (
+            <>
+                <p>{__('Really delete the following campaigns?', 'give')}</p>
+                <ul role="document" tabIndex={0}>
+                    {selected.map((campaignId, index) => (
+                        <li key={campaignId}>
+                            <IdBadge id={campaignId} />{' '}
+                            <span>
+                                {__('from ', 'give')} <Interweave content={names[index]} />
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            </>
+        ),
+    },
+];
+
+/**
+ * Displays a blank slate for the Campaigns table.
+ *
+ * @unreleased
+ */
+const ListTableBlankSlate = () => {
+    const imagePath = `${
+        getGiveCampaignsListTableWindowData().pluginUrl
+    }/assets/dist/images/list-table/blank-slate-donation-forms-icon.svg`;
+    return (
+        <div className={styles.container}>
+            <img src={imagePath} alt={__('No campaign created yet', 'give')} />
+            <h3>{__('No campaign created yet', 'give')}</h3>
+            <p className={styles.helpMessage}>{__('Don’t worry, let’s help you setup your first campaign.', 'give')}</p>
+            <p>
+                <a
+                    href={`${
+                        getGiveCampaignsListTableWindowData().adminUrl
+                    }edit.php?post_type=give_forms&page=give-campaigns&new=campaign`}
+                    className={`button button-primary ${styles.button}`}
+                >
+                    {__('Create campaign', 'give')}
+                </a>
+            </p>
+        </div>
+    );
+};
+
+export default function CampaignsListTable() {
+    return (
+        <>
+            <ListTablePage
+                title={__('Campaigns', 'give')}
+                singleName={__('campaign', 'give')}
+                pluralName={__('campaigns', 'give')}
+                apiSettings={getGiveCampaignsListTableWindowData()}
+                filterSettings={filters}
+                bulkActions={bulkActions}
+                rowActions={CampaignsRowActions}
+                listTableBlankSlate={ListTableBlankSlate()}
+            >
+                <CreateCampaignModal />
+            </ListTablePage>
+        </>
+    );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignsListTable/types.ts b/src/Campaigns/resources/admin/components/CampaignsListTable/types.ts
new file mode 100644
index 0000000000..951a2d29a6
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignsListTable/types.ts
@@ -0,0 +1,7 @@
+export interface GiveCampaignsListTable {
+    apiNonce: string;
+    apiRoot: string;
+    table: {columns: Array<object>};
+    adminUrl: string;
+    pluginUrl: string;
+}
diff --git a/src/Campaigns/resources/admin/components/CreateCampaignModal/CreateCampaignModal.module.scss b/src/Campaigns/resources/admin/components/CreateCampaignModal/CreateCampaignModal.module.scss
new file mode 100644
index 0000000000..7de8a80964
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CreateCampaignModal/CreateCampaignModal.module.scss
@@ -0,0 +1,10 @@
+:global(#give-admin-campaigns-root) {
+    .createCampaignButton {
+        border-radius: 0;
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 1.43;
+        padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
+        text-align: center;
+    }
+}
diff --git a/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx b/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx
new file mode 100644
index 0000000000..5f63a22f94
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx
@@ -0,0 +1,59 @@
+import {useState} from 'react';
+import {__} from '@wordpress/i18n';
+import styles from './CreateCampaignModal.module.scss';
+import CampaignFormModal from '../CampaignFormModal';
+import {getGiveCampaignsListTableWindowData} from '../CampaignsListTable';
+
+/**
+ * Auto open modal if the URL has the query parameter id as new
+ *
+ * @unreleased
+ */
+const autoOpenModal = () => {
+    const queryParams = new URLSearchParams(window.location.search);
+    const newParam = queryParams.get('new');
+
+    return newParam === 'campaign';
+};
+
+/**
+ * Create Campaign Modal component
+ *
+ * @unreleased
+ */
+export default function CreateCampaignModal() {
+    const [isOpen, setOpen] = useState<boolean>(autoOpenModal());
+    const openModal = () => setOpen(true);
+    const closeModal = (response: ResponseProps = {}) => {
+        setOpen(false);
+
+        if (response?.id) {
+            window.location.href =
+                getGiveCampaignsListTableWindowData().adminUrl +
+                'edit.php?post_type=give_forms&page=give-campaigns&id=' +
+                response?.id;
+        }
+    };
+
+    const apiSettings = getGiveCampaignsListTableWindowData();
+    // Remove the /list-table from the apiRoot. This is a hack to make the API work while we don't refactor other list tables.
+    apiSettings.apiRoot = apiSettings.apiRoot.replace('/list-table', '');
+
+    return (
+        <>
+            <a className={`button button-primary ${styles.createCampaignButton}`} onClick={openModal}>
+                {__('Create campaign', 'give')}
+            </a>
+            <CampaignFormModal
+                isOpen={isOpen}
+                handleClose={closeModal}
+                title={__('Create your campaign', 'give')}
+                apiSettings={apiSettings}
+            />
+        </>
+    );
+}
+
+type ResponseProps = {
+    id?: string;
+};
diff --git a/src/Campaigns/resources/admin/components/FormModal/ErrorMessages.tsx b/src/Campaigns/resources/admin/components/FormModal/ErrorMessages.tsx
new file mode 100644
index 0000000000..ff1c1ac924
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/FormModal/ErrorMessages.tsx
@@ -0,0 +1,24 @@
+import {FieldError, FieldErrors} from 'react-hook-form';
+
+/**
+ * Output error messages
+ *
+ * @unreleased
+ */
+export default function ErrorMessages({errors}: ErrorMessagesProps) {
+    if (!(Object.values(errors).length > 0)) return null;
+
+    return (
+        <>
+            <ul className="givewp-campaigns__form-errors">
+                {Object.values(errors).map((error: FieldError, key) => (
+                    <li key={key}>{error?.message}</li>
+                ))}
+            </ul>
+        </>
+    );
+}
+
+interface ErrorMessagesProps {
+    errors: FieldErrors;
+}
diff --git a/src/Campaigns/resources/admin/components/FormModal/FormModal.module.scss b/src/Campaigns/resources/admin/components/FormModal/FormModal.module.scss
new file mode 100644
index 0000000000..b720ac70d7
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/FormModal/FormModal.module.scss
@@ -0,0 +1,98 @@
+.formModal {
+    :global {
+        .givewp-modal-dialog {
+            max-width: 37.5rem;
+
+            .givewp-modal-header {
+                font-size: 1.25rem;
+                font-weight: 600;
+                line-height: 1.6;
+            }
+
+            .givewp-modal-close {
+                translateY: 4.5px;
+            }
+        }
+
+        .givewp-campaigns {
+            &__form {
+                label {
+                    color: var(--givewp-grey-700);
+                    font-size: 1rem;
+                    font-weight: 500;
+                    line-height: 1.5;
+                }
+
+                input, textarea {
+                    border-color: var(--givewp-grey-400);
+                    font-size: 1rem;
+                    line-height: 1.5;
+                    padding: var(--givewp-spacing-3) var(--givewp-spacing-4);
+
+                    &::placeholder {
+                        color: var(--givewp-grey-400);
+                    }
+
+                    &[aria-invalid="true"] {
+                        border-color: var(--givewp-red-500);
+                        outline-color: var(--givewp-red-500);
+                    }
+                }
+
+                span {
+                    color: var(--givewp-grey-400);
+                    font-size: 0.75rem;
+                    line-height: 1.5;
+
+                    strong {
+                        color: var(--givewp-grey-500);
+                        font-weight: 600;
+                    }
+                }
+
+                button[type="submit"].button {
+                    display: block;
+                    font-size: 1rem;
+                    font-weight: 500;
+                    line-height: 1.5;
+                    padding: var(--givewp-spacing-3) var(--givewp-spacing-5);
+                    width: 100%;
+                }
+            }
+
+            &__form-row {
+                display: flex;
+                flex-direction: column;
+                gap: var(--givewp-spacing-1);
+                margin-bottom: var(--givewp-spacing-6);
+
+                &--half {
+                    flex-direction: row;
+                    gap: var(--givewp-spacing-6);
+                }
+            }
+
+            &__form-column {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                gap: var(--givewp-spacing-1);
+            }
+
+            &__form-errors {
+                list-style: disc;
+                margin-bottom: var(--givewp-spacing-6);
+                margin-top: 0;
+                padding-left: var(--givewp-spacing-4);
+
+                li {
+                    color: var(--givewp-red-500);
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    line-height: 1.5;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/src/Campaigns/resources/admin/components/FormModal/index.tsx b/src/Campaigns/resources/admin/components/FormModal/index.tsx
new file mode 100644
index 0000000000..fd46bdd118
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/FormModal/index.tsx
@@ -0,0 +1,44 @@
+import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
+import ErrorMessages from './ErrorMessages';
+import styles from './FormModal.module.scss';
+
+/**
+ * Form Modal component that renders a modal with a styled form inside
+ *
+ * @unreleased
+ */
+export default function FormModal({
+    isOpen,
+    handleClose,
+    title,
+    handleSubmit,
+    errors,
+    className,
+    children,
+}: FormModalProps) {
+    return (
+        <ModalDialog
+            isOpen={isOpen}
+            showHeader={true}
+            handleClose={handleClose}
+            title={title}
+            wrapperClassName={styles.formModal}
+        >
+            <form className={`givewp-campaigns__form ${className}`} onSubmit={handleSubmit}>
+                <ErrorMessages errors={errors} />
+
+                {children}
+            </form>
+        </ModalDialog>
+    );
+}
+
+interface FormModalProps {
+    isOpen: boolean;
+    handleClose: () => void;
+    title: string;
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    errors: Record<string, any>;
+    className: string;
+    children: JSX.Element | JSX.Element[];
+}
diff --git a/src/Campaigns/resources/admin/components/api.ts b/src/Campaigns/resources/admin/components/api.ts
new file mode 100644
index 0000000000..00f527f64a
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/api.ts
@@ -0,0 +1,38 @@
+export default class CampaignsApi {
+    private readonly apiRoot: string;
+    private readonly headers: {'X-WP-Nonce': string; 'Content-Type': string};
+
+    constructor({apiNonce, apiRoot}) {
+        this.apiRoot = apiRoot;
+        this.headers = {
+            'Content-Type': 'application/json',
+            'X-WP-Nonce': apiNonce,
+        };
+    }
+
+    fetchWithArgs = (endpoint, args, method = 'GET', signal = null) => {
+        const url = new URL(this.apiRoot + endpoint);
+        for (const [param, value] of Object.entries(args)) {
+            value !== '' && url.searchParams.set(param, value as string);
+        }
+        return fetch(url.href, {
+            method: method,
+            signal: signal,
+            headers: this.headers,
+        })
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error();
+                }
+                return res.text();
+            })
+            .then((text) => {
+                try {
+                    return text ? JSON.parse(text) : {};
+                } catch (error) {
+                    console.error('Failed to parse JSON:', error);
+                    return {};
+                }
+            });
+    };
+}
diff --git a/src/Views/Components/ListTable/hooks/useDebounce.ts b/src/Views/Components/ListTable/hooks/useDebounce.ts
index abb52fa08a..80958ba68c 100644
--- a/src/Views/Components/ListTable/hooks/useDebounce.ts
+++ b/src/Views/Components/ListTable/hooks/useDebounce.ts
@@ -1,5 +1,5 @@
 import {useEffect, useRef} from 'react';
-import {debounce} from 'lodash';
+import debounce from 'lodash.debounce';
 
 export default function useDebounce(callback) {
     const debouncedCallback = useRef(debounce(callback, 500)).current;
diff --git a/webpack.mix.js b/webpack.mix.js
index 8c7be78756..bbb3986395 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -60,6 +60,7 @@ mix.setPublicPath('assets/dist')
     .ts('src/Promotions/InPluginUpsells/resources/js/donation-options.ts', 'js/donation-options.js')
     .ts('src/Promotions/InPluginUpsells/resources/js/payment-gateway.ts', 'js/payment-gateway.js')
     .ts('src/Promotions/WelcomeBanner/resources/js/index.tsx', 'js/welcome-banner.js')
+    .ts('src/Campaigns/resources/admin/campaigns-list-table.tsx', 'js/give-admin-campaigns-list-table.js')
 
     .react()
     .sourceMaps(false, 'source-map')

From fac70e4577aeb58cb800d105b8f6988a0f80d1f3 Mon Sep 17 00:00:00 2001
From: "Kyle B. Johnson" <kjohnson@users.noreply.github.com>
Date: Thu, 5 Sep 2024 03:34:17 -0400
Subject: [PATCH 2/3] Feature: Relate Campaigns to Donation Forms with
 one-to-many relationship (#7526)

---
 .../Tables/CreateCampaignFormsTable.php        |  5 +++--
 src/Campaigns/Models/Campaign.php              | 14 ++++++++++++++
 .../Repositories/DonationFormRepository.php    |  2 +-
 .../Campaigns/Models/CampaignModelTest.php     | 18 ++++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/Campaigns/Migrations/Tables/CreateCampaignFormsTable.php b/src/Campaigns/Migrations/Tables/CreateCampaignFormsTable.php
index ac5df25ae5..49c32034c2 100644
--- a/src/Campaigns/Migrations/Tables/CreateCampaignFormsTable.php
+++ b/src/Campaigns/Migrations/Tables/CreateCampaignFormsTable.php
@@ -51,8 +51,9 @@ public function run(): void
         $sql = "CREATE TABLE $table (
             campaign_id INT UNSIGNED NOT NULL,
             form_id INT UNSIGNED NOT NULL,
-            PRIMARY KEY  (campaign_id),
-            KEY form_id (form_id)
+            KEY form_id (form_id),
+            KEY campaign_id (campaign_id),
+            PRIMARY KEY (campaign_id, form_id)
         ) $charset";
 
         try {
diff --git a/src/Campaigns/Models/Campaign.php b/src/Campaigns/Models/Campaign.php
index 211c9ac8ac..a858c6f7bf 100644
--- a/src/Campaigns/Models/Campaign.php
+++ b/src/Campaigns/Models/Campaign.php
@@ -9,12 +9,14 @@
 use Give\Campaigns\Repositories\CampaignRepository;
 use Give\Campaigns\ValueObjects\CampaignStatus;
 use Give\Campaigns\ValueObjects\CampaignType;
+use Give\DonationForms\Models\DonationForm;
 use Give\Framework\Exceptions\Primitives\Exception;
 use Give\Framework\Exceptions\Primitives\InvalidArgumentException;
 use Give\Framework\Models\Contracts\ModelCrud;
 use Give\Framework\Models\Contracts\ModelHasFactory;
 use Give\Framework\Models\Model;
 use Give\Framework\Models\ModelQueryBuilder;
+use Give\Framework\QueryBuilder\JoinQueryBuilder;
 
 /**
  * @unreleased
@@ -57,6 +59,18 @@ class Campaign extends Model implements ModelCrud, ModelHasFactory
         'createdAt' => DateTime::class,
     ];
 
+    /**
+     * @unreleased
+     */
+    public function forms(): ModelQueryBuilder
+    {
+        return DonationForm::query()
+            ->join(function (JoinQueryBuilder $builder) {
+                $builder->leftJoin('give_campaign_forms', 'campaign_forms')
+                    ->on('campaign_forms.form_id', 'forms.id');
+            })->where('campaign_forms.campaign_id', $this->id);
+    }
+
     /**
      * @unreleased
      */
diff --git a/src/DonationForms/Repositories/DonationFormRepository.php b/src/DonationForms/Repositories/DonationFormRepository.php
index e508be8757..18e2770121 100644
--- a/src/DonationForms/Repositories/DonationFormRepository.php
+++ b/src/DonationForms/Repositories/DonationFormRepository.php
@@ -274,7 +274,7 @@ public function prepareQuery(): ModelQueryBuilder
     {
         $builder = new ModelQueryBuilder(DonationForm::class);
 
-        return $builder->from('posts')
+        return $builder->from('posts', 'forms')
             ->select(
                 ['ID', 'id'],
                 ['post_date', 'createdAt'],
diff --git a/tests/Unit/Campaigns/Models/CampaignModelTest.php b/tests/Unit/Campaigns/Models/CampaignModelTest.php
index 6d0153b219..5b3b20abda 100644
--- a/tests/Unit/Campaigns/Models/CampaignModelTest.php
+++ b/tests/Unit/Campaigns/Models/CampaignModelTest.php
@@ -3,6 +3,8 @@
 namespace Give\Tests\Unit\Campaigns\Models;
 
 use Give\Campaigns\Models\Campaign;
+use Give\DonationForms\Models\DonationForm;
+use Give\Framework\Database\DB;
 use Give\Tests\TestCase;
 use Give\Tests\TestTraits\RefreshDatabase;
 
@@ -24,4 +26,20 @@ public function testFindShouldReturnCampaign()
         $this->assertInstanceOf(Campaign::class, $campaign);
         $this->assertEquals($mockCampaign->toArray(), $campaign->toArray());
     }
+
+    /**
+     * @unreleased
+     */
+    public function testCampaignHasManyForms()
+    {
+        $campaign = Campaign::factory()->create();
+        $form1 = DonationForm::factory()->create();
+        $form2 = DonationForm::factory()->create();
+
+        $db = DB::table('give_campaign_forms');
+        $db->insert(['form_id' => $form1->id, 'campaign_id' => $campaign->id]);
+        $db->insert(['form_id' => $form2->id, 'campaign_id' => $campaign->id]);
+
+        $this->assertEquals(2, $campaign->forms()->count());
+    }
 }

From e288b63193a29fb2b8ec9f51ae5dadbc6a7ab7e8 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Fri, 6 Sep 2024 11:45:45 -0300
Subject: [PATCH 3/3] Feature: add campaign details page (#7531)

---
 .../Actions/LoadCampaignDetailsAssets.php     | 41 +++++++++++++++
 src/Campaigns/CampaignsAdminPage.php          | 14 ++++-
 src/Campaigns/Routes/CreateCampaign.php       |  1 -
 .../ViewModels/CampaignDetailsPage.php        | 41 +++++++++++++++
 .../resources/admin/campaign-details.tsx      |  6 +++
 .../CampaignDetailsPage.module.scss           |  4 ++
 .../components/CampaignDetailsPage/index.tsx  | 52 +++++++++++++++++++
 .../components/CampaignDetailsPage/types.ts   | 12 +++++
 webpack.mix.js                                |  1 +
 9 files changed, 170 insertions(+), 2 deletions(-)
 create mode 100644 src/Campaigns/Actions/LoadCampaignDetailsAssets.php
 create mode 100644 src/Campaigns/ViewModels/CampaignDetailsPage.php
 create mode 100644 src/Campaigns/resources/admin/campaign-details.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
 create mode 100644 src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
 create mode 100644 src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts

diff --git a/src/Campaigns/Actions/LoadCampaignDetailsAssets.php b/src/Campaigns/Actions/LoadCampaignDetailsAssets.php
new file mode 100644
index 0000000000..e806639faa
--- /dev/null
+++ b/src/Campaigns/Actions/LoadCampaignDetailsAssets.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Give\Campaigns\Actions;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Campaigns\ViewModels\CampaignDetailsPage;
+
+/**
+ * @unreleased
+ */
+class LoadCampaignDetailsAssets
+{
+    /**
+     * @unreleased
+     */
+    public function __invoke(Campaign $campaign)
+    {
+        $handleName = 'givewp-admin-campaign-details';
+
+        wp_register_script(
+            $handleName,
+            GIVE_PLUGIN_URL . 'assets/dist/js/give-admin-campaign-details.js',
+            [],
+            GIVE_VERSION,
+            true
+        );
+
+        wp_localize_script($handleName, 'GiveCampaignDetails',
+            [
+                'apiRoot' => esc_url_raw(rest_url('give-api/v2/campaigns')),
+                'apiNonce' => wp_create_nonce('wp_rest'),
+                'adminUrl' => admin_url(),
+                'pluginUrl' => GIVE_PLUGIN_URL,
+                'campaignDetailsPage' => (new CampaignDetailsPage($campaign))->exports(),
+            ]
+        );
+
+        wp_enqueue_script($handleName);
+        wp_enqueue_style('givewp-design-system-foundation');
+    }
+}
diff --git a/src/Campaigns/CampaignsAdminPage.php b/src/Campaigns/CampaignsAdminPage.php
index 3b7c954189..17c3910128 100644
--- a/src/Campaigns/CampaignsAdminPage.php
+++ b/src/Campaigns/CampaignsAdminPage.php
@@ -2,7 +2,9 @@
 
 namespace Give\Campaigns;
 
+use Give\Campaigns\Actions\LoadCampaignDetailsAssets;
 use Give\Campaigns\Actions\LoadCampaignsListTableAssets;
+use Give\Campaigns\Models\Campaign;
 
 /**
  * @unreleased
@@ -30,7 +32,17 @@ public function addCampaignsSubmenuPage()
      */
     public function renderCampaignsPage()
     {
-        give(LoadCampaignsListTableAssets::class)();
+        if (isset($_GET['id'])) {
+            $campaign = Campaign::find(absint($_GET['id']));
+
+            if ( ! $campaign) {
+                wp_die(__('Campaign not found', 'give'), 404);
+            }
+
+            give(LoadCampaignDetailsAssets::class)($campaign);
+        } else {
+            give(LoadCampaignsListTableAssets::class)();
+        }
 
         echo '<div id="give-admin-campaigns-root"></div>';
     }
diff --git a/src/Campaigns/Routes/CreateCampaign.php b/src/Campaigns/Routes/CreateCampaign.php
index 6ea2f1c9d9..420e6e9cae 100644
--- a/src/Campaigns/Routes/CreateCampaign.php
+++ b/src/Campaigns/Routes/CreateCampaign.php
@@ -77,7 +77,6 @@ public function registerRoute()
     public function handleRequest(WP_REST_Request $request): WP_REST_Response
     {
         $campaign = Campaign::create([
-            'pageId' => 0,
             'type' => CampaignType::CORE(),
             'title' => $request->get_param('title'),
             'shortDescription' => $request->get_param('shortDescription'),
diff --git a/src/Campaigns/ViewModels/CampaignDetailsPage.php b/src/Campaigns/ViewModels/CampaignDetailsPage.php
new file mode 100644
index 0000000000..e61b5a7aca
--- /dev/null
+++ b/src/Campaigns/ViewModels/CampaignDetailsPage.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Give\Campaigns\ViewModels;
+
+use Give\Campaigns\Models\Campaign;
+
+/**
+ * @unreleased
+ */
+class CampaignDetailsPage
+{
+    /**
+     * @unreleased
+     *
+     * @var Campaign
+     */
+    protected $campaign;
+
+    /**
+     * @unreleased
+     */
+    public function __construct(Campaign $campaign)
+    {
+        $this->campaign = $campaign;
+    }
+
+    /**
+     * @unreleased
+     */
+    public function exports(): array
+    {
+        return [
+            'overviewTab' => $this->campaign->toArray(),
+            'settingsTab' => [
+                'landingPageUrl' => admin_url('?action=edit_campaign_page&campaign_id=' . $this->campaign->id),
+            ],
+            'reportTab' => [],
+            'updatesTab' => [],
+        ];
+    }
+}
diff --git a/src/Campaigns/resources/admin/campaign-details.tsx b/src/Campaigns/resources/admin/campaign-details.tsx
new file mode 100644
index 0000000000..730821cb88
--- /dev/null
+++ b/src/Campaigns/resources/admin/campaign-details.tsx
@@ -0,0 +1,6 @@
+import {createRoot} from 'react-dom/client';
+import CampaignsDetailsPage from './components/CampaignDetailsPage';
+
+const container = document.getElementById('give-admin-campaigns-root');
+const root = createRoot(container!);
+root.render(<CampaignsDetailsPage />);
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
new file mode 100644
index 0000000000..a7f810d6f6
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
@@ -0,0 +1,4 @@
+.container {
+    margin-top: 3rem;
+    padding: 3rem;
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
new file mode 100644
index 0000000000..28947d7465
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx
@@ -0,0 +1,52 @@
+import {GiveCampaignDetails} from './types';
+import styles from './CampaignDetailsPage.module.scss';
+
+declare const window: {
+    GiveCampaignDetails: GiveCampaignDetails;
+} & Window;
+
+export function getGiveCampaignDetailsWindowData() {
+    return window.GiveCampaignDetails;
+}
+
+const {campaignDetailsPage} = getGiveCampaignDetailsWindowData();
+
+console.log(Object.values(campaignDetailsPage.overviewTab));
+
+export default function CampaignsDetailsPage() {
+    return (
+        <div className={styles.container}>
+            <h1>
+                <strong>Campaign details goes here...</strong>
+            </h1>
+            <p>Just below you can see a few data from the details page separated by tabs.</p>
+            <br />
+            <h2>
+                <strong>Overview Tab</strong>
+            </h2>
+            <ul>
+                {Object.entries(campaignDetailsPage.overviewTab).map(([property, value], index) => (
+                    <li key={index}>
+                        <span>
+                            <strong>{property}:</strong> {String(value)}
+                        </span>
+                    </li>
+                ))}
+            </ul>
+            <br />
+            <h2>
+                <strong>Settings Tab</strong>
+            </h2>
+            <p>
+                <a
+                    style={{fontSize: '1.5rem'}}
+                    href={campaignDetailsPage.settingsTab.landingPageUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Edit Campaign Landing Page ⭷
+                </a>
+            </p>
+        </div>
+    );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts b/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts
new file mode 100644
index 0000000000..38b95c3f2a
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts
@@ -0,0 +1,12 @@
+export interface GiveCampaignDetails {
+    apiRoot: string;
+    apiNonce: string;
+    adminUrl: string;
+    pluginUrl: string;
+    campaignDetailsPage: {
+        overviewTab: any;
+        settingsTab: {
+            landingPageUrl: string;
+        };
+    };
+}
diff --git a/webpack.mix.js b/webpack.mix.js
index bbb3986395..23adaf9664 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -61,6 +61,7 @@ mix.setPublicPath('assets/dist')
     .ts('src/Promotions/InPluginUpsells/resources/js/payment-gateway.ts', 'js/payment-gateway.js')
     .ts('src/Promotions/WelcomeBanner/resources/js/index.tsx', 'js/welcome-banner.js')
     .ts('src/Campaigns/resources/admin/campaigns-list-table.tsx', 'js/give-admin-campaigns-list-table.js')
+    .ts('src/Campaigns/resources/admin/campaign-details.tsx', 'js/give-admin-campaign-details.js')
 
     .react()
     .sourceMaps(false, 'source-map')