+ {
+ updateUserNoticeOptions('givewp_campaign_interaction_notice').then(() => setShowNotification(false))
+ }}>
+
+ {hasResolved && (
+ <>
+ setAttributes({campaignId})}
+ showInspectorControl={true}
+ inspectorControls={
+
+
+
+ setAttributes({showImage})}
+ />
+ setAttributes({showDescription})}
+ />
+ setAttributes({showGoal})}
+ />
+
+
+
+ )}
+
+ )
+}
diff --git a/src/Campaigns/Blocks/Campaign/index.tsx b/src/Campaigns/Blocks/Campaign/index.tsx
new file mode 100644
index 00000000000..b1e85200574
--- /dev/null
+++ b/src/Campaigns/Blocks/Campaign/index.tsx
@@ -0,0 +1,15 @@
+import edit from './edit';
+import GiveIcon from '@givewp/components/GiveIcon';
+import schema from './block.json';
+
+/**
+ * @unreleased
+ */
+export default {
+ schema,
+ settings: {
+ icon: >
diff --git a/src/Campaigns/Blocks/Campaign/types.ts b/src/Campaigns/Blocks/Campaign/types.ts
new file mode 100644
index 00000000000..db984f729f5
--- /dev/null
+++ b/src/Campaigns/Blocks/Campaign/types.ts
@@ -0,0 +1,6 @@
+export type CampaignBlockType = {
+ campaignId: number;
+ showImage: boolean;
+ showDescription: boolean;
+ showGoal: boolean;
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/Controller/BlockRenderController.php b/src/Campaigns/Blocks/CampaignComments/Controller/BlockRenderController.php
new file mode 100644
index 00000000000..d3ec09cc986
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/Controller/BlockRenderController.php
@@ -0,0 +1,25 @@
+toArray());
+
+ $blockId = $blockAttributes->blockId;
+
+ return "";
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/DataTransferObjects/BlockAttributes.php b/src/Campaigns/Blocks/CampaignComments/DataTransferObjects/BlockAttributes.php
new file mode 100644
index 00000000000..4ba00cebc39
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/DataTransferObjects/BlockAttributes.php
@@ -0,0 +1,90 @@
+blockId = !empty($array['blockId']) ? (string)$array['blockId'] : null;
+ $self->campaignId = !empty($array['campaignId']) ? (int)$array['campaignId'] : null;
+ $self->title = !empty($array['title']) ? (string)$array['title'] : '';
+ $self->showAnonymous = !isset($array['showAnonymous']) || (bool)$array['showAnonymous'];
+ $self->showAvatar = !isset($array['showAvatar']) || (bool)$array['showAvatar'];
+ $self->showDate = !isset($array['showDate']) || (bool)$array['showDate'];
+ $self->showName = !isset($array['showName']) || (bool)$array['showName'];
+ $self->commentLength = isset($array['commentLength']) ? (int)$array['commentLength'] : 200;
+ $self->readMoreText = !empty($array['readMoreText']) ? (string)$array['readMoreText'] : '';
+ $self->commentsPerPage = isset($array['commentsPerPage']) ? (int)$array['commentsPerPage'] : 3;
+
+ return $self;
+ }
+
+ /**
+ * @unreleased
+ */
+ public function toArray(): array
+ {
+ return get_object_vars($this);
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/block.json b/src/Campaigns/Blocks/CampaignComments/block.json
new file mode 100644
index 00000000000..d29fb4db019
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/block.json
@@ -0,0 +1,95 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-comments-block",
+ "version": "1.0.0",
+ "title": "Campaign Comments",
+ "category": "give",
+ "description": "Display all the donor comments associated with a campaign.",
+ "attributes": {
+ "blockId": {
+ "type": "string"
+ },
+ "campaignId": {
+ "type": "number"
+ },
+ "title": {
+ "type": "string"
+ },
+ "showAnonymous": {
+ "type": "boolean",
+ "default": true
+ },
+ "showAvatar": {
+ "type": "boolean",
+ "default": true
+ },
+ "showDate": {
+ "type": "boolean",
+ "default": true
+ },
+ "showName": {
+ "type": "boolean",
+ "default": true
+ },
+ "commentLength": {
+ "type": "number",
+ "default": 200
+ },
+ "readMoreText": {
+ "type": "string"
+ },
+ "commentsPerPage": {
+ "type": "number",
+ "default": 3
+ }
+ },
+ "supports": {
+ "anchor": true,
+ "className": true,
+ "splitting": true,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
+ "color": {
+ "gradients": true,
+ "link": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": false,
+ "padding": false
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontStyle": true,
+ "__experimentalFontWeight": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalWritingMode": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ }
+ },
+ "example": {},
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "viewScript": "file:../../../../build/campaignCommentsBlockApp.js",
+ "editorScript": "file:../../../../build/campaignBlocks.js",
+ "style": "file:../../../../build/campaignCommentsBlockApp.css",
+ "editorStyle": "file:../../../../build/assets/dist/css/design-system/foundation.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/render.php b/src/Campaigns/Blocks/CampaignComments/render.php
new file mode 100644
index 00000000000..67853a368c4
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/render.php
@@ -0,0 +1,18 @@
+getById($attributes['campaignId'])
+) {
+ return;
+}
+
+echo (new BlockRenderController())->render($attributes);
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/app.tsx b/src/Campaigns/Blocks/CampaignComments/resources/app.tsx
new file mode 100644
index 00000000000..df16583dd04
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/app.tsx
@@ -0,0 +1,12 @@
+import {createRoot} from '@wordpress/element';
+import CampaignComments from './shared/components/CampaignComments';
+
+const roots = document.querySelectorAll('[data-givewp-campaign-comments]');
+
+if (roots) {
+ roots.forEach((root) => {
+ const attributes = root.getAttribute('data-attributes');
+
+ return createRoot(root).render(
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CampaignComments/styles.scss b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CampaignComments/styles.scss
new file mode 100644
index 00000000000..b20fdc846ca
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CampaignComments/styles.scss
@@ -0,0 +1,32 @@
+.givewp-campaign-comment-block {
+ display: flex;
+ flex-direction: column;
+ gap: var(--givewp-spacing-2);
+ padding: var(--givewp-spacing-6) 0;
+ background-color: var(--givewp-shades-white);
+
+ &__title {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 1.56;
+ text-align: left;
+ color: var(--givewp-neutral-900);
+ }
+
+ &__cta {
+ display: flex;
+ align-items: center;
+ height: 36px;
+ gap: 8px;
+ margin: 0;
+ padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
+ border-radius: 4px;
+ background-color: var(--givewp-neutral-50);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.43;
+ text-align: left;
+ color: var(--giewp-neutral-500);
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/index.tsx b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/index.tsx
new file mode 100644
index 00000000000..905ac7ee25f
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/index.tsx
@@ -0,0 +1,37 @@
+import {useState} from 'react';
+import {__} from '@wordpress/i18n';
+import {Attributes, CommentData} from '../../../types';
+import './styles.scss';
+
+export default function CampaignCommentCard({attributes, data}: {attributes: Attributes; data: CommentData}) {
+ const [fullComment, setFullComment] = useState{title}
++ {__('Leave a supportive message by donating to the campaign.', 'give')} +
+ {data?.map((comment: CommentData, index: number) => ( +
+ {showAvatar && (
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/styles.scss b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/styles.scss
new file mode 100644
index 00000000000..183ed1994ec
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/styles.scss
@@ -0,0 +1,65 @@
+.givewp-campaign-comment-block-card {
+ display: flex;
+ gap: var(--givewp-spacing-3);
+ padding: var(--givewp-spacing-4) 0;
+
+ &__avatar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+
+ img {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 40px;
+ width: 100%;
+ height: auto;
+ border-radius: 50%;
+ }
+ }
+
+ &__donor-name {
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.5;
+ text-align: left;
+ color: var(--givewp-neutral-700);
+ }
+
+ &__details {
+ display: flex;
+ gap: var(--givewp-spacing-2);
+ align-items: center;
+ height: auto;
+ margin: 2px 0 var(--givewp-spacing-3) 0;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.43;
+ text-align: left;
+ color: var(--givewp-neutral-400);
+ }
+
+ &__comment {
+ margin: 0;
+ font-size: 1rem;
+ line-height: 1.5;
+ text-align: left;
+ color: var(--givewp-neutral-700);
+ }
+
+ &__read-more {
+ font-size: 0.875rem;
+ padding: 0;
+ background: none;
+ color: var(--givewp-blue-500);
+ line-height: 1.43;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/index.tsx b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/index.tsx
new file mode 100644
index 00000000000..704f5dcda97
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {__} from '@wordpress/i18n';
+import './styles.scss';
+
+export default function EmptyState() {
+ return (
+
+ 
+
+ )}
+
+ {showName &&
+ {donorName}
} + {showDate &&{date}
} ++ {fullComment ? comment : truncatedComment} +
+ {comment?.length > commentLength && !fullComment && ( + + )} +
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/styles.scss b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/styles.scss
new file mode 100644
index 00000000000..89e322723b7
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/EmptyState/styles.scss
@@ -0,0 +1,36 @@
+.givewp-campaign-comments-block-empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--givewp-spacing-6);
+ background-color: var(--givewp-shades-white);
+ border-radius: 0.5rem;
+ border: 1px solid var(--givewp-neutral-50);
+
+ &__details {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: var(--givewp-spacing-1);
+ margin: .875rem 0;
+ }
+
+ &__title {
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 500;
+ color: var(--givewp-neutral-700);
+ }
+
+ &__description {
+ margin: 0;
+ font-size: .875rem;
+ line-height: 1.43;
+ color: var(--givewp-neutral-700);
+ }
+
+ &__icon {
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/resources/types.ts b/src/Campaigns/Blocks/CampaignComments/resources/types.ts
new file mode 100644
index 00000000000..797cf6d4da3
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/types.ts
@@ -0,0 +1,19 @@
+export type Attributes = {
+ blockId: string;
+ campaignId: number;
+ title: string;
+ commentLength: number;
+ commentsPerPage: number;
+ readMoreText: string;
+ showAvatar: boolean;
+ showDate: boolean;
+ showName: boolean;
+ showAnonymous: boolean;
+};
+
+export type CommentData = {
+ comment: string;
+ date: string;
+ donorName: string;
+ avatar: string;
+};
diff --git a/src/Campaigns/Blocks/CampaignCover/Icon.tsx b/src/Campaigns/Blocks/CampaignCover/Icon.tsx
new file mode 100644
index 00000000000..6c893fba1c1
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/Icon.tsx
@@ -0,0 +1,16 @@
+import {Path, SVG} from "@wordpress/components";
+
+export function GalleryIcon() {
+ return (
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignCover/block.json b/src/Campaigns/Blocks/CampaignCover/block.json
new file mode 100644
index 00000000000..f1e94a6bada
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/block.json
@@ -0,0 +1,52 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-cover-block",
+ "version": "1.0.0",
+ "title": "Campaign Cover",
+ "category": "give",
+ "description": "Displays the cover image of the campaign.",
+ "attributes": {
+ "campaignId": {
+ "type": "integer"
+ },
+ "alt": {
+ "type": "string"
+ },
+ "width": {
+ "type": "number",
+ "default": 645
+ },
+ "height": {
+ "type": "number",
+ "default": 865
+ },
+ "align": {
+ "type": "string",
+ "default": ""
+ }
+ },
+ "supports": {
+ "align": [
+ "wide",
+ "full",
+ "left",
+ "center",
+ "right"
+ ],
+ "filter": {
+ "duotone": true
+ },
+ "selectors": {
+ "filter": {
+ "duotone": ".wp-block-givewp-campaign-cover-block img"
+ }
+ },
+ "anchor": true,
+ "className": true
+ },
+ "example":{},
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "style": "file:../../../../build/campaignCoverBlock.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignCover/edit.tsx b/src/Campaigns/Blocks/CampaignCover/edit.tsx
new file mode 100644
index 00000000000..77aaa42eb2c
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/edit.tsx
@@ -0,0 +1,91 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {__} from '@wordpress/i18n';
+import {useSelect} from '@wordpress/data';
+import {external} from '@wordpress/icons';
+import {BaseControl, Icon, PanelBody, Placeholder, TextareaControl} from '@wordpress/components';
+import {BlockEditProps} from '@wordpress/blocks';
+import CampaignSelector from '../shared/components/CampaignSelector';
+import useCampaign from '../shared/hooks/useCampaign';
+import {GalleryIcon} from "./Icon";
+
+import './editor.scss';
+
+interface EditProps extends BlockEditProps<{
+ campaignId: number;
+ alt: string;
+ width: number;
+ height: number;
+ align: string;
+}> {
+ toggleSelection: (isSelected: boolean) => void;
+}
+
+export default function Edit({attributes, setAttributes, toggleSelection}: EditProps) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+ const adminBaseUrl = useSelect(
+ // @ts-ignore
+ (select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns',
+ []
+ );
+ const editCampaignUrl = `${adminBaseUrl}&id=${attributes.campaignId}&tab=settings`;
+
+ return (
+
+
+
+
+
+ {__('Leave a supportive message by', 'give')}
+
+
+ + {__('donating to the campaign.', 'give')} +
++ {__('Shows the cover image of the campaign.', 'give')} +
+ + {__('Change campaign cover', 'give')} +
+>
+
+ ; ?>)
+
+
diff --git a/src/Campaigns/Blocks/CampaignDonations/CampaignDonationsBlockViewModel.php b/src/Campaigns/Blocks/CampaignDonations/CampaignDonationsBlockViewModel.php
new file mode 100644
index 00000000000..1650215eac6
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/CampaignDonationsBlockViewModel.php
@@ -0,0 +1,64 @@
+attributes = $attributes;
+ $this->campaign = $campaign;
+ $this->donations = $donations;
+ }
+
+ /**
+ * @unreleased
+ */
+ public function render(): void
+ {
+ View::render('Campaigns/Blocks/CampaignDonations.render', [
+ 'campaign' => $this->campaign,
+ 'donations' => $this->formatDonationsData($this->donations),
+ 'attributes' => $this->attributes,
+ ]);
+ }
+
+
+ /**
+ * @unreleased
+ */
+ private function formatDonationsData(array $donations): array
+ {
+ return array_map(static function ($entry) {
+ $entry->date = human_time_diff(strtotime($entry->date));
+ $entry->amount = Money::fromDecimal($entry->amount, give_get_currency());
+
+ return $entry;
+ }, $donations);
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignDonations/app.tsx b/src/Campaigns/Blocks/CampaignDonations/app.tsx
new file mode 100644
index 00000000000..e39aaa19eba
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/app.tsx
@@ -0,0 +1 @@
+import './styles.scss';
diff --git a/src/Campaigns/Blocks/CampaignDonations/block.json b/src/Campaigns/Blocks/CampaignDonations/block.json
new file mode 100644
index 00000000000..4bd6e53072f
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/block.json
@@ -0,0 +1,49 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-donations",
+ "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": "recent-donations"
+ },
+ "donationsPerPage": {
+ "type": "number",
+ "default": 5
+ },
+ "loadMoreButtonText": {
+ "type": "string",
+ "default": "Load more"
+ }
+ },
+ "supports": {
+ "className": true
+ },
+ "example": {},
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "style": "file:../../../../build/campaignDonationsBlockApp.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignDonations/edit.tsx b/src/Campaigns/Blocks/CampaignDonations/edit.tsx
new file mode 100644
index 00000000000..a255c88b37c
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/edit.tsx
@@ -0,0 +1,101 @@
+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 (
+
+ setAttributes({campaignId})}
+ >
+
+
+ {hasResolved && campaign?.id && (
+
+
+ setAttributes({showAnonymous: value})}
+ />
+ setAttributes({showIcon: value})}
+ />
+ setAttributes({showButton: value})}
+ />
+ setAttributes({donateButtonText: value})}
+ help={__('This shows on the header', 'give')}
+ />
+
+
+
+ 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 */}
+ 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
+ setAttributes({loadMoreButtonText: value})}
+ />
+ */}
+
+
+ )}
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignDonations/index.tsx b/src/Campaigns/Blocks/CampaignDonations/index.tsx
new file mode 100644
index 00000000000..c6cf79da0be
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/index.tsx
@@ -0,0 +1,17 @@
+import schema from './block.json';
+import Edit from './edit';
+import GiveIcon from '@givewp/components/GiveIcon';
+
+/**
+ * @unreleased
+ */
+const settings = {
+ icon: 'givewp-campaign-donations-block'])); ?>
+ style="">
+
diff --git a/src/Campaigns/Blocks/CampaignDonations/styles.scss b/src/Campaigns/Blocks/CampaignDonations/styles.scss
new file mode 100644
index 00000000000..9b938f52d0e
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/styles.scss
@@ -0,0 +1,179 @@
+.givewp-campaign-donations-block {
+ padding: 1.5rem 0;
+
+ * {
+ font-family: 'Inter', sans-serif;
+ }
+
+ &__header {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+ }
+
+ &__title {
+ color: var(--givewp-neutral-900);
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.56;
+ margin: 0;
+ }
+
+ &__donations {
+ display: grid;
+ gap: 0.5rem;
+ margin: 0;
+ padding: 0;
+ }
+
+ &__donation,
+ &__empty-state {
+ background-color: var(--givewp-shades-white);
+ border-radius: 0.5rem;
+ border: 1px solid var(--givewp-neutral-50);
+ display: flex;
+ padding: 1rem;
+ }
+
+ &__donation {
+ align-items: center;
+ gap: 0.75rem;
+ }
+
+ &__donation-icon {
+ align-items: center;
+ display: flex;
+
+ img {
+ border-radius: 100%;
+ height: 2.5rem;
+ object-fit: cover;
+ width: 2.5rem;
+ }
+ }
+
+ &__donation-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ row-gap: 0.25rem;
+ }
+
+ &__donation-description {
+ color: var(--givewp-neutral-500);
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.5;
+ margin: 0;
+
+ strong {
+ color: var(--givewp-neutral-700);
+ font-weight: 600;
+ }
+ }
+
+ &__donation-date {
+ align-items: center;
+ color: var(--givewp-neutral-400);
+ display: flex;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.43;
+ }
+
+ &__donation-ribbon {
+ align-items: center;
+ border-radius: 100%;
+ color: #1F2937;
+ display: flex;
+ height: 1.25rem;
+ justify-content: center;
+ margin-left: auto;
+ width: 1.25rem;
+
+ &[data-position="1"] {
+ background-color: #ffd700;
+ }
+
+ &[data-position="2"] {
+ background-color: #c0c0c0;
+ }
+
+ &[data-position="3"] {
+ background-color: #cd7f32;
+ color: #fffaf2;
+ }
+ }
+
+ &__donation-amount {
+ color: var(--givewp-neutral-700);
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.56;
+ margin-left: auto;
+ }
+
+ &__footer {
+ display: flex;
+ justify-content: center;
+ margin-top: 0.5rem;
+ }
+
+ &__load-more-button,
+ &__donate-button button.givewp-donation-form-modal__open,
+ &__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;
+
+ &:hover {
+ background: var(--givewp-primary-color);
+ color: var(--givewp-shades-white) !important;
+ }
+ }
+
+ &__empty-state {
+ align-items: center;
+ flex-direction: column;
+ padding: 1.5rem;
+ }
+
+ &__empty-title,
+ &__empty-description {
+ color: var(--givewp-neutral-700);
+ margin: 0;
+ }
+
+ &__empty-title {
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.5;
+ }
+
+ &__empty-description {
+ font-size: 0.875rem;
+ line-height: 1.43;
+ margin-top: 0.25rem;
+ }
+
+ &__empty-icon {
+ color: var(--givewp-secondary-color);
+ margin-bottom: 0.875rem;
+ order: -1;
+ }
+
+ &__empty-button {
+ margin-top: 0.875rem;
+
+ button.givewp-donation-form-modal__open {
+ border-radius: 0.25rem;
+ padding: 0.5rem 1rem !important;
+ }
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignDonors/CampaignDonorsBlockViewModel.php b/src/Campaigns/Blocks/CampaignDonors/CampaignDonorsBlockViewModel.php
new file mode 100644
index 00000000000..d00f95ddbc5
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/CampaignDonorsBlockViewModel.php
@@ -0,0 +1,66 @@
+attributes = $attributes;
+ $this->campaign = $campaign;
+ $this->donors = $donors;
+ }
+
+ /**
+ * @unreleased
+ */
+ public function render(): void
+ {
+ View::render('Campaigns/Blocks/CampaignDonors.render', [
+ 'campaign' => $this->campaign,
+ 'donors' => $this->formatDonorsData($this->donors),
+ 'attributes' => $this->attributes,
+ ]);
+ }
+
+
+ /**
+ * @unreleased
+ */
+ private function formatDonorsData(array $donors): array
+ {
+ return array_map(static function ($entry) {
+ if (isset($entry->date)) {
+ $entry->date = human_time_diff(strtotime($entry->date));
+ }
+ $entry->amount = Money::fromDecimal($entry->amount, give_get_currency());
+
+ return $entry;
+ }, $donors);
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignDonors/app.tsx b/src/Campaigns/Blocks/CampaignDonors/app.tsx
new file mode 100644
index 00000000000..e39aaa19eba
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/app.tsx
@@ -0,0 +1 @@
+import './styles.scss';
diff --git a/src/Campaigns/Blocks/CampaignDonors/block.json b/src/Campaigns/Blocks/CampaignDonors/block.json
new file mode 100644
index 00000000000..5b41a4856c3
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/block.json
@@ -0,0 +1,53 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-donors",
+ "version": "1.0.0",
+ "title": "Campaign Donors",
+ "category": "give",
+ "description": "Display all the donors associated with a campaign.",
+ "attributes": {
+ "campaignId": {
+ "type": "integer"
+ },
+ "showAnonymous": {
+ "type": "boolean",
+ "default": true
+ },
+ "showCompanyName": {
+ "type": "boolean",
+ "default": true
+ },
+ "showAvatar": {
+ "type": "boolean",
+ "default": true
+ },
+ "showButton": {
+ "type": "boolean",
+ "default": true
+ },
+ "donateButtonText": {
+ "type": "string",
+ "default": "Join the list"
+ },
+ "sortBy": {
+ "type": "string",
+ "default": "top-donors"
+ },
+ "donorsPerPage": {
+ "type": "number",
+ "default": 5
+ },
+ "loadMoreButtonText": {
+ "type": "string",
+ "default": "Load more"
+ }
+ },
+ "supports": {
+ "className": true
+ },
+ "example": {},
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "style": "file:../../../../build/campaignDonorsBlockApp.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignDonors/edit.tsx b/src/Campaigns/Blocks/CampaignDonors/edit.tsx
new file mode 100644
index 00000000000..cc67208d25c
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/edit.tsx
@@ -0,0 +1,115 @@
+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;
+ showCompanyName: boolean;
+ showAvatar: boolean;
+ showButton: boolean;
+ donateButtonText: string;
+ sortBy: string;
+ donorsPerPage: number;
+ loadMoreButtonText: string;
+}>) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+ const {
+ showAnonymous,
+ showCompanyName,
+ showAvatar,
+ showButton,
+ donateButtonText,
+ sortBy,
+ donorsPerPage,
+ loadMoreButtonText,
+ } = attributes;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ + +
++ +
+ + + + + + +-
+ $donation) : ?>
+
-
+
+ ++ + +
+
++ + ++ ' . esc_html($donation->donorName) . '', + '' . esc_html($donation->amount->formatToLocale()) . '' + ); + ?> ++ + date + ) + ); ?> ++ ++ +
+
+
+ setAttributes({campaignId})}
+ >
+
+
+ {hasResolved && campaign?.id && (
+
+
+ setAttributes({showAnonymous: value})}
+ />
+ setAttributes({showCompanyName: value})}
+ />
+ setAttributes({showAvatar: value})}
+ />
+ setAttributes({showButton: value})}
+ />
+ setAttributes({donateButtonText: value})}
+ help={__('This shows on the header', 'give')}
+ />
+
+
+
+ setAttributes({sortBy: value})}
+ help={__('The order donors 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 */}
+ setAttributes({donorsPerPage: parseInt(value)})}
+ help={__('The maximum number of donors to display.', 'give')}
+ />
+ {/* TODO: Revert the field back once the backend for pagination is ready
+ setAttributes({loadMoreButtonText: value})}
+ />
+ */}
+
+
+ )}
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignDonors/index.tsx b/src/Campaigns/Blocks/CampaignDonors/index.tsx
new file mode 100644
index 00000000000..c6cf79da0be
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/index.tsx
@@ -0,0 +1,17 @@
+import schema from './block.json';
+import Edit from './edit';
+import GiveIcon from '@givewp/components/GiveIcon';
+
+/**
+ * @unreleased
+ */
+const settings = {
+ icon: 'givewp-campaign-donors-block'])); ?>
+ style="">
+
diff --git a/src/Campaigns/Blocks/CampaignDonors/styles.scss b/src/Campaigns/Blocks/CampaignDonors/styles.scss
new file mode 100644
index 00000000000..3e8d04ab045
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/styles.scss
@@ -0,0 +1,193 @@
+.givewp-campaign-donors-block {
+ padding: 1.5rem 0;
+
+ * {
+ font-family: 'Inter', sans-serif;
+ }
+
+ &__header {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+ }
+
+ &__title {
+ color: var(--givewp-neutral-900);
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.56;
+ margin: 0;
+ }
+
+ &__donors {
+ display: grid;
+ gap: 0.5rem;
+ margin: 0;
+ padding: 0;
+ }
+
+ &__donor,
+ &__empty-state {
+ background-color: var(--givewp-shades-white);
+ border-radius: 0.5rem;
+ border: 1px solid var(--givewp-neutral-50);
+ display: flex;
+ padding: 1rem;
+ }
+
+ &__donor {
+ align-items: center;
+ gap: 0.75rem;
+ }
+
+ &__donor-avatar {
+ align-items: center;
+ display: flex;
+
+ img {
+ border-radius: 100%;
+ height: 2.5rem;
+ object-fit: cover;
+ width: 2.5rem;
+ }
+ }
+
+ &__donor-info {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 0.25rem;
+ }
+
+ &__donor-name {
+ color: var(--givewp-neutral-900);
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.5;
+ margin: 0;
+ }
+
+ &__donor-date {
+ align-items: center;
+ color: var(--givewp-neutral-400);
+ display: flex;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.43;
+
+ &::before {
+ background: var(--givewp-neutral-100);
+ border-radius: 100%;
+ content: "";
+ display: block;
+ height: 0.25rem;
+ margin: 0 0.5rem;
+ width: 0.25rem;
+ }
+ }
+
+ &__donor-ribbon {
+ align-items: center;
+ border-radius: 100%;
+ color: #1F2937;
+ display: flex;
+ height: 1.25rem;
+ justify-content: center;
+ margin-left: 0.5rem;
+ width: 1.25rem;
+
+ &[data-position="1"] {
+ background-color: #ffd700;
+ }
+
+ &[data-position="2"] {
+ background-color: #c0c0c0;
+ }
+
+ &[data-position="3"] {
+ background-color: #cd7f32;
+ color: #fffaf2;
+ }
+ }
+
+ &__donor-company {
+ color: var(--givewp-neutral-400);
+ display: flex;
+ flex: 0 0 100%;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.43;
+ }
+
+ &__donor-amount {
+ color: var(--givewp-neutral-700);
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.56;
+ margin-left: auto;
+ }
+
+ &__footer {
+ display: flex;
+ justify-content: center;
+ margin-top: 0.5rem;
+ }
+
+ &__load-more-button,
+ &__donate-button button.givewp-donation-form-modal__open,
+ &__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;
+
+ &:hover {
+ background: var(--givewp-primary-color);
+ color: var(--givewp-shades-white) !important;
+ }
+ }
+
+ &__empty-state {
+ align-items: center;
+ flex-direction: column;
+ padding: 1.5rem;
+ }
+
+ &__empty-title,
+ &__empty-description {
+ color: var(--givewp-neutral-700);
+ margin: 0;
+ }
+
+ &__empty-title {
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.5;
+ }
+
+ &__empty-description {
+ font-size: 0.875rem;
+ line-height: 1.43;
+ margin-top: 0.25rem;
+ }
+
+ &__empty-icon {
+ color: var(--givewp-secondary-color);
+ margin-bottom: 0.875rem;
+ order: -1;
+ }
+
+ &__empty-button {
+ margin-top: 0.875rem;
+
+ button.givewp-donation-form-modal__open {
+ border-radius: 0.25rem;
+ padding: 0.5rem 1rem !important;
+ }
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/app.tsx b/src/Campaigns/Blocks/CampaignGoal/app.tsx
new file mode 100644
index 00000000000..072983484ae
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/app.tsx
@@ -0,0 +1,27 @@
+import {createRoot} from '@wordpress/element';
+import useCampaign from '../shared/hooks/useCampaign';
+import App from './app/index';
+
+const BlockApp = ({campaignId}: { campaignId: number }) => {
+ const {campaign, hasResolved} = useCampaign(campaignId);
+
+ if (!hasResolved || !campaignId) {
+ return null;
+ }
+
+ return
+
+
+
+
+
+
+
+
+
+
+ + +
++ +
+ + + + + + +-
+ $donor) : ?>
+
-
+
+ ++ + +
+
+ name); ?> + + + + + + + + date)) : ?> + date + ) + ); ?> + + + company) && $donor->company) : ?> + company); ?> + ++amount->formatToLocale()); ?>+
+
+
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/app/styles.scss b/src/Campaigns/Blocks/CampaignGoal/app/styles.scss
new file mode 100644
index 00000000000..b98f4b8b2f4
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/app/styles.scss
@@ -0,0 +1,51 @@
+.givewp-campaign-goal {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ &__container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &-item {
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+
+ span {
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 18px;
+ color: #4b5563;
+ }
+
+ strong {
+ font-size: 20px;
+ line-height: 32px;
+ color: #060c1a;
+ }
+ }
+ }
+
+ &__progress-bar {
+ display: flex;
+
+ &-container {
+ display: flex;
+ height: 8px;
+ flex-grow: 1;
+ border-radius: 14px;
+ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+ background-color: #f2f2f2;
+ }
+
+ &-progress {
+ display: flex;
+ height: 8px;
+ border-radius: 14px;
+ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+ background-color: #2d802f;
+ }
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/block.json b/src/Campaigns/Blocks/CampaignGoal/block.json
new file mode 100644
index 00000000000..72f73ff94b7
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/block.json
@@ -0,0 +1,25 @@
+{
+ "$schema": "https://json.schemastore.org/block.json",
+ "apiVersion": 2,
+ "name": "givewp/campaign-goal",
+ "version": "1.0.0",
+ "title": "Campaign Goal",
+ "category": "give",
+ "description": "Displays the goal of the campaign.",
+ "supports": {
+ "align": [
+ "wide",
+ "full"
+ ]
+ },
+ "attributes": {
+ "campaignId": {
+ "type": "number"
+ }
+ },
+ "example": {},
+ "textdomain": "give",
+ "viewScript": "file:../../../../build/campaignGoalBlockApp.js",
+ "style": "file:../../../../build/campaignGoalBlockApp.css",
+ "render": "file:./render.php"
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/edit.tsx b/src/Campaigns/Blocks/CampaignGoal/edit.tsx
new file mode 100644
index 00000000000..d62837de59a
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/edit.tsx
@@ -0,0 +1,56 @@
+import {__} from '@wordpress/i18n';
+import {useSelect} from '@wordpress/data';
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {ExternalLink, PanelBody, TextControl} from '@wordpress/components';
+import useCampaign from '../shared/hooks/useCampaign';
+import CampaignGoalApp from './app/index';
+import CampaignSelector from '../shared/components/CampaignSelector';
+import {getGoalDescription} from './utils';
+
+/**
+ * @unreleased
+ */
+export default function Edit({attributes, setAttributes}: BlockEditProps<{
+ campaignId: number;
+ goalType: string;
+}>) {
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+ const blockProps = useBlockProps();
+
+ const adminBaseUrl = useSelect(
+ // @ts-ignore
+ (select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns',
+ []
+ );
+
+ if (!hasResolved) {
+ return null;
+ }
+
+ return (
+
+
+
+ {getGoalDescription(campaign.goalType)}
+
+ {getGoalFormattedValue(campaign.goalType, campaign.goalStats.actual)}
+
+
+
+ {__('Our goal', 'give')}
+
+ {getGoalFormattedValue(campaign.goalType, campaign.goal)}
+
+
+
+
+
+
+
+
+
+ setAttributes({campaignId})}
+ >
+
+
+ {campaign?.id && (
+
+
+
+ {__('Edit campaign goal settings', 'give')}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/icon.jsx b/src/Campaigns/Blocks/CampaignGoal/icon.jsx
new file mode 100644
index 00000000000..00676a29fc8
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/icon.jsx
@@ -0,0 +1,17 @@
+export default function CampaignGoalBlockIcon() {
+ return (
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignGoal/index.tsx b/src/Campaigns/Blocks/CampaignGoal/index.tsx
new file mode 100644
index 00000000000..a79fbc42839
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/index.tsx
@@ -0,0 +1,15 @@
+import edit from './edit';
+import icon from './icon';
+import schema from './block.json';
+
+/**
+ * @unreleased
+ */
+export default {
+ schema,
+ settings: {
+ icon,
+ edit,
+ },
+};
+
diff --git a/src/Campaigns/Blocks/CampaignGoal/render.php b/src/Campaigns/Blocks/CampaignGoal/render.php
new file mode 100644
index 00000000000..7b507bdf089
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/render.php
@@ -0,0 +1,20 @@
+getById($attributes['campaignId'])
+) {
+ return;
+}
+
+?>
+
+
diff --git a/src/Campaigns/Blocks/CampaignGoal/utils.ts b/src/Campaigns/Blocks/CampaignGoal/utils.ts
new file mode 100644
index 00000000000..8a81a380164
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/utils.ts
@@ -0,0 +1,35 @@
+import {__} from '@wordpress/i18n';
+import {getCampaignOptionsWindowData, amountFormatter} from '@givewp/campaigns/utils';
+
+
+export const getGoalDescription = (goalType: string) => {
+ switch (goalType) {
+ case 'amount':
+ return __('Amount raised', 'give');
+ case 'donations':
+ return __('Number of donations', 'give');
+ case 'donors':
+ return __('Number of donors', 'give');
+ case 'amountFromSubscriptions':
+ return __('Recurring amount raised', 'give');
+ case 'subscriptions':
+ return __('Number of recurring donations', 'give');
+ case 'donorsFromSubscriptions':
+ return __('Number of recurring donors', 'give');
+ }
+}
+
+
+export const getGoalFormattedValue = (goalType: string, value: number) => {
+ switch (goalType) {
+ case 'amount':
+ case 'amountFromSubscriptions':
+ const {currency} = getCampaignOptionsWindowData()
+ const currencyFormatter = amountFormatter(currency);
+
+ return currencyFormatter.format(value);
+
+ default:
+ return value;
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignGrid/app.tsx b/src/Campaigns/Blocks/CampaignGrid/app.tsx
new file mode 100644
index 00000000000..c6a6de366e3
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/app.tsx
@@ -0,0 +1,18 @@
+import {createRoot} from '@wordpress/element';
+import {CampaignGridType} from './types';
+import App from './app/index';
+
+/**
+ * @unreleased
+ */
+const nodeList = document.querySelectorAll('[data-givewp-campaign-grid]');
+
+if (nodeList) {
+ const containers = Array.from(nodeList);
+
+ containers.map((container: any) => {
+ const attributes: CampaignGridType = JSON.parse(container.dataset?.attributes);
+ const root = createRoot(container);
+ return root.render(
+ {campaigns?.map((campaign) => (
+
+
+ {attributes.showPagination && totalPages >= page && (
+
+ setPage(number)} />
+
+ )}
+
+ )
+}
diff --git a/src/Campaigns/Blocks/CampaignGrid/app/styles.scss b/src/Campaigns/Blocks/CampaignGrid/app/styles.scss
new file mode 100644
index 00000000000..a73426857b5
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/app/styles.scss
@@ -0,0 +1,11 @@
+.givewp-campaign-grid {
+ display: grid;
+ column-gap: 16px;
+ row-gap: 16px;
+
+ &__pagination {
+ display: flex;
+ justify-content: center;
+ margin-top: 16px;
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignGrid/block.json b/src/Campaigns/Blocks/CampaignGrid/block.json
new file mode 100644
index 00000000000..8eae676feba
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/block.json
@@ -0,0 +1,73 @@
+{
+ "$schema": "https://json.schemastore.org/block.json",
+ "apiVersion": 2,
+ "name": "givewp/campaign-grid",
+ "version": "1.0.0",
+ "title": "Campaign Grid",
+ "category": "give",
+ "description": "Insert an existing campaign into the page.",
+ "supports": {
+ "align": [
+ "wide",
+ "full",
+ "left",
+ "center",
+ "right"
+ ]
+ },
+ "attributes": {
+ "layout": {
+ "type": "string",
+ "default": "full",
+ "enum": [
+ "full",
+ "double",
+ "triple"
+ ]
+ },
+ "showImage": {
+ "type": "boolean",
+ "default": true
+ },
+ "showDescription": {
+ "type": "boolean",
+ "default": true
+ },
+ "showGoal": {
+ "type": "boolean",
+ "default": true
+ },
+ "sortBy": {
+ "type": "string",
+ "default": "date",
+ "enum": [
+ "date"
+ ]
+ },
+ "orderBy": {
+ "type": "string",
+ "default": "desc",
+ "enum": [
+ "asc",
+ "desc"
+ ]
+ },
+ "filterBy": {
+ "type": "array",
+ "default": []
+ },
+ "perPage": {
+ "type": "number",
+ "default": "6"
+ },
+ "showPagination": {
+ "type": "boolean",
+ "default": true
+ }
+ },
+ "example": {},
+ "textdomain": "give",
+ "viewScript": "file:../../../../build/campaignGridApp.js",
+ "viewStyle": "file:../../../../build/campaignGridApp.css",
+ "render": "file:./render.php"
+}
diff --git a/src/Campaigns/Blocks/CampaignGrid/edit.tsx b/src/Campaigns/Blocks/CampaignGrid/edit.tsx
new file mode 100644
index 00000000000..8535a21d109
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/edit.tsx
@@ -0,0 +1,140 @@
+import {__} from '@wordpress/i18n';
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {FormTokenField, PanelBody, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
+import {TokenItem} from '@wordpress/components/build-types/form-token-field/types'
+import GridControl from '../shared/components/GridControl';
+import useCampaigns from '../shared/hooks/useCampaigns';
+import {CampaignGridType} from './types';
+import CampaignGridApp from './app/index'
+
+export default function Edit({attributes, setAttributes}: BlockEditProps
+ {hasResolved && (
+ <>
+
+
+ setAttributes({layout})}
+ options={[
+ {
+ value: 'full',
+ label: __('Full Width', 'give'),
+ },
+ {
+ value: 'double',
+ label: __('Double', 'give'),
+ },
+ {
+ value: 'triple',
+ label: __('Triple', 'give'),
+ }
+ ]}
+ />
+
+
+
+ setAttributes({showImage})}
+ />
+ setAttributes({showDescription})}
+ />
+ setAttributes({showGoal})}
+ />
+
+
+
+ setAttributes({sortBy})}
+ value={attributes.sortBy}
+ help={__('The order campaigns are displayed in.', 'give')}
+ options={[
+ {
+ value: 'date',
+ label: __('Date Created', 'give'),
+ },
+ {
+ value: 'amount',
+ label: __('Total Amount Raised', 'give'),
+ },
+ {
+ value: 'donations',
+ label: __('Number of Donations', 'give'),
+ },
+ {
+ value: 'donors',
+ label: __('Number of Donors', 'give'),
+ }
+ ]}
+ />
+ setAttributes({orderBy})}
+ value={attributes.orderBy}
+ help={__('Choose whether the campaign order ascends or descends.', 'give')}
+ options={[
+ {
+ value: 'desc',
+ label: __('Descending', 'give'),
+ },
+ {
+ value: 'asc',
+ label: __('Ascending', 'give'),
+ }
+ ]}
+ />
+ item.title)}
+ label={__('Filter by Campaign', 'give')}
+ onChange={(values) => {
+ const filterBy = campaigns
+ .filter((campaign) => values.includes(campaign.title))
+ .map((campaign) => {
+ return {
+ value: String(campaign.id),
+ title: campaign.title
+ }
+ });
+
+ setAttributes({filterBy})
+ }}
+ suggestions={suggestions}
+ />
+ setAttributes({perPage: Number(perPage)})}
+ help={__('Set the number of campaigns to be displayed on the first page load.', 'give')}
+ />
+ setAttributes({showPagination})}
+ help={__('All campaigns will be spread across multiple pages.', 'give')}
+ />
+
+
+
+ )}
+
+ )
+}
diff --git a/src/Campaigns/Blocks/CampaignGrid/index.tsx b/src/Campaigns/Blocks/CampaignGrid/index.tsx
new file mode 100644
index 00000000000..b1e85200574
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/index.tsx
@@ -0,0 +1,15 @@
+import edit from './edit';
+import GiveIcon from '@givewp/components/GiveIcon';
+import schema from './block.json';
+
+/**
+ * @unreleased
+ */
+export default {
+ schema,
+ settings: {
+ icon: >
diff --git a/src/Campaigns/Blocks/CampaignGrid/types.ts b/src/Campaigns/Blocks/CampaignGrid/types.ts
new file mode 100644
index 00000000000..8ae939b0da5
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/types.ts
@@ -0,0 +1,13 @@
+import {TokenItem} from '@wordpress/components/build-types/form-token-field/types';
+
+export type CampaignGridType = {
+ layout: string;
+ showImage: boolean;
+ showDescription: boolean;
+ showGoal: boolean;
+ showPagination: boolean;
+ sortBy: string;
+ orderBy: string;
+ filterBy: (string | TokenItem)[];
+ perPage: number;
+}
diff --git a/src/Campaigns/Blocks/CampaignStats/Icon.tsx b/src/Campaigns/Blocks/CampaignStats/Icon.tsx
new file mode 100644
index 00000000000..b8e68daa9f0
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/Icon.tsx
@@ -0,0 +1,20 @@
+import {Path, SVG} from '@wordpress/components';
+
+export function StatsIcon() {
+ return (
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignStats/app.tsx b/src/Campaigns/Blocks/CampaignStats/app.tsx
new file mode 100644
index 00000000000..e39aaa19eba
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/app.tsx
@@ -0,0 +1 @@
+import './styles.scss';
diff --git a/src/Campaigns/Blocks/CampaignStats/block.json b/src/Campaigns/Blocks/CampaignStats/block.json
new file mode 100644
index 00000000000..6d88b1d05b4
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/block.json
@@ -0,0 +1,72 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-stats-block",
+ "version": "1.0.0",
+ "title": "Campaign Statistics",
+ "category": "give",
+ "description": "Displays the campaign’s statistics.",
+ "attributes": {
+ "campaignId": {
+ "type": "integer"
+ },
+ "statistic": {
+ "type": "string",
+ "enum": [
+ "top-donation",
+ "average-donation"
+ ],
+ "default": "top-donation"
+ }
+ },
+ "supports": {
+ "align": [
+ "wide",
+ "full"
+ ],
+ "anchor": true,
+ "className": true,
+ "splitting": true,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
+ "color": {
+ "gradients": true,
+ "link": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": false,
+ "padding": false
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontStyle": true,
+ "__experimentalFontWeight": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalWritingMode": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ }
+ },
+ "example": {},
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "viewScript": "file:../../../../build/campaignStatsBlockApp.js",
+ "style": "file:../../../../build/campaignStatsBlockApp.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignStats/edit.tsx b/src/Campaigns/Blocks/CampaignStats/edit.tsx
new file mode 100644
index 00000000000..3b676a6a205
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/edit.tsx
@@ -0,0 +1,54 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {__} from '@wordpress/i18n';
+import {BlockEditProps} from '@wordpress/blocks';
+import {PanelBody, SelectControl} from '@wordpress/components';
+import CampaignSelector from '../shared/components/CampaignSelector';
+import ServerSideRender from '@wordpress/server-side-render';
+import useCampaign from '../shared/hooks/useCampaign';
+
+import './styles.scss';
+
+type statisticType = 'top-donation' | 'average-donation';
+
+export default function Edit({
+ attributes,
+ setAttributes,
+}: BlockEditProps<{
+ campaignId: number;
+ statistic: statisticType;
+}>) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes?.campaignId);
+
+ const statsHelpText = attributes.statistic === 'top-donation'
+ ? __('Displays the top donation of the selected campaign.', 'give')
+ : __('Displays the average donation of the selected campaign.', 'give');
+
+ return (
+
+ setAttributes({campaignId})}
+ >
+
+
+ {hasResolved && campaign?.id && (
+
+
+ setAttributes({statistic: value})}
+ />
+
+
+ )}
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignStats/index.tsx b/src/Campaigns/Blocks/CampaignStats/index.tsx
new file mode 100644
index 00000000000..1e035d8a69b
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/index.tsx
@@ -0,0 +1,16 @@
+import schema from './block.json';
+import Edit from './edit';
+import {StatsIcon} from './Icon';
+
+/**
+ * @unreleased
+ */
+const settings = {
+ icon:
+
+ formatToLocale()) ?>
+
diff --git a/src/Campaigns/Blocks/CampaignStats/styles.scss b/src/Campaigns/Blocks/CampaignStats/styles.scss
new file mode 100644
index 00000000000..575b3afbdab
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/styles.scss
@@ -0,0 +1,23 @@
+.givewp-campaign-stats-block {
+
+ span {
+ display: block;
+ margin-bottom: 2px;
+ height: 18px;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1.5;
+ letter-spacing: 0.48px;
+ text-align: left;
+ color: var(--givewp-neutral-500);
+ }
+
+ strong {
+ height: 32px;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 1.6;
+ letter-spacing: normal;
+ color: var(--givewp-neutral-900);
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignTitle/block.json b/src/Campaigns/Blocks/CampaignTitle/block.json
new file mode 100644
index 00000000000..badc4d5d7f9
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/block.json
@@ -0,0 +1,74 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-title",
+ "version": "1.0.0",
+ "title": "Campaign Title",
+ "category": "give",
+ "icon": "heading",
+ "description": "Displays the title of the campaign.",
+ "attributes": {
+ "campaignId": {
+ "type": "integer"
+ },
+ "headingLevel": {
+ "type": "number",
+ "default": 1
+ },
+ "textAlign": {
+ "type": "string"
+ }
+ },
+ "supports": {
+ "align": [
+ "wide",
+ "full"
+ ],
+ "className": true,
+ "splitting": true,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
+ "color": {
+ "gradients": true,
+ "link": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": false,
+ "padding": false
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontStyle": true,
+ "__experimentalFontWeight": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalWritingMode": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ }
+ },
+ "example": {
+ "attributes": {
+ "textAlign": "center"
+ }
+ },
+ "textdomain": "give",
+ "editorStyle": "file:../../../../build/campaignTitleBlock.css",
+ "render": "file:./render.php"
+}
diff --git a/src/Campaigns/Blocks/CampaignTitle/edit.tsx b/src/Campaigns/Blocks/CampaignTitle/edit.tsx
new file mode 100644
index 00000000000..efb6ab33d5d
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/edit.tsx
@@ -0,0 +1,80 @@
+import {
+ AlignmentControl,
+ BlockControls,
+ HeadingLevelDropdown,
+ InspectorControls,
+ useBlockProps,
+} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {BaseControl, Icon, PanelBody, TextareaControl} from '@wordpress/components';
+import ServerSideRender from '@wordpress/server-side-render';
+import CampaignSelector from '../shared/components/CampaignSelector';
+import useCampaign from '../shared/hooks/useCampaign';
+import {__} from '@wordpress/i18n';
+import {getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+import {external} from '@wordpress/icons';
+
+import './editor.scss';
+
+export default function Edit({
+ attributes,
+ setAttributes,
+ }: BlockEditProps<{
+ campaignId: number;
+ headingLevel: string;
+ textAlign: string;
+}>) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+ const campaignWindowData = getCampaignOptionsWindowData();
+
+ const editCampaignUrl = `${campaignWindowData.campaignsAdminUrl}&id=${attributes.campaignId}&tab=settings`;
+
+ return (
+
+ setAttributes({campaignId})}
+ >
+
+
+ {hasResolved && campaign && (
+
+
+
+ null}
+ help={
+
+ {__('Edit campaign title', 'give')}
+
+
+
+ )}
+
+
+ setAttributes({headingLevel: newLevel})}
+ />
+ setAttributes({textAlign: nextAlign})}
+ />
+
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignTitle/editor.scss b/src/Campaigns/Blocks/CampaignTitle/editor.scss
new file mode 100644
index 00000000000..5aee0a657e1
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/editor.scss
@@ -0,0 +1,18 @@
+.givewp-campaign-title-block {
+ &__edit-campaign-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.125rem;
+
+ svg {
+ fill: currentColor;
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
+
+// Hide the default Gutenberg's post title block as we don't use that
+.edit-post-visual-editor__post-title-wrapper {
+ display: none;
+}
diff --git a/src/Campaigns/Blocks/CampaignTitle/index.ts b/src/Campaigns/Blocks/CampaignTitle/index.ts
new file mode 100644
index 00000000000..2d86c84f645
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/index.ts
@@ -0,0 +1,16 @@
+import {heading as icon} from '@wordpress/icons';
+import schema from './block.json';
+import Edit from './edit';
+
+/**
+ * @unreleased
+ */
+const settings = {
+ icon,
+ edit: Edit,
+};
+
+export default {
+ schema,
+ settings,
+};
diff --git a/src/Campaigns/Blocks/CampaignTitle/index.tsx b/src/Campaigns/Blocks/CampaignTitle/index.tsx
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/Campaigns/Blocks/CampaignTitle/render.php b/src/Campaigns/Blocks/CampaignTitle/render.php
new file mode 100644
index 00000000000..6a9a5b98333
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/render.php
@@ -0,0 +1,27 @@
+getById($attributes['campaignId']);
+
+if ( ! $campaign) {
+ return;
+}
+
+$headingLevel = isset($attributes['headingLevel']) ? (int) $attributes['headingLevel'] : 1;
+$headingTag = 'h' . min(6, max(1, $headingLevel));
+
+$textAlignClass = isset($attributes['textAlign']) ? 'has-text-align-' . $attributes['textAlign'] : '';
+?>
+
+< $textAlignClass])); ?>>
+title); ?>
+>
diff --git a/src/Campaigns/Blocks/DonateButton/block.json b/src/Campaigns/Blocks/DonateButton/block.json
new file mode 100644
index 00000000000..2ed1a48d7b1
--- /dev/null
+++ b/src/Campaigns/Blocks/DonateButton/block.json
@@ -0,0 +1,34 @@
+{
+ "$schema": "https://json.schemastore.org/block.json",
+ "apiVersion": 2,
+ "name": "givewp/campaign-donate-button",
+ "version": "1.0.0",
+ "title": "Donate Button",
+ "category": "give",
+ "description": "The GiveWP Donate Button inserts an donate button into the page.",
+ "supports": {
+ "align": [
+ "wide",
+ "full"
+ ]
+ },
+ "attributes": {
+ "campaignId": {
+ "type": "number"
+ },
+ "useDefaultForm": {
+ "type": "boolean",
+ "default": true
+ },
+ "selectedForm": {
+ "type": "string"
+ },
+ "buttonText": {
+ "type": "string",
+ "default": "Donate now"
+ }
+ },
+ "example": {},
+ "textdomain": "give",
+ "render": "file:./render.php"
+}
diff --git a/src/Campaigns/Blocks/DonateButton/edit.tsx b/src/Campaigns/Blocks/DonateButton/edit.tsx
new file mode 100644
index 00000000000..417d80ed1fc
--- /dev/null
+++ b/src/Campaigns/Blocks/DonateButton/edit.tsx
@@ -0,0 +1,105 @@
+import {__} from '@wordpress/i18n';
+import {useSelect} from '@wordpress/data';
+import {addQueryArgs} from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+import useSWR from 'swr';
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {PanelBody, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
+import {Button} from 'react-aria-components';
+import useCampaign from '../shared/hooks/useCampaign';
+import CampaignSelector from '../shared/components/CampaignSelector';
+
+
+/**
+ * @unreleased
+ */
+export default function Edit({attributes, setAttributes}: BlockEditProps<{
+ campaignId: number;
+ buttonText: string;
+ useDefaultForm: boolean;
+ selectedForm: string;
+}>) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+ const adminBaseUrl = useSelect(
+ // @ts-ignore
+ (select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns',
+ []
+ );
+
+ const campaignForms = (() => {
+ const {data, isLoading}: { data: { items: [] }, isLoading: boolean } = useSWR(
+ addQueryArgs('/give-api/v2/admin/forms', {campaignId: attributes.campaignId, status: 'publish'}),
+ path => apiFetch({path})
+ )
+
+ if (isLoading) {
+ return [{label: __('Loading...', 'give'), value: ''}]
+ }
+
+ const options = data?.items.map((form: { name: string, id: string }) => ({
+ label: form.name,
+ value: form.id
+ }))
+
+ return [
+ {label: __('Select form', 'give'), value: ''},
+ ...options
+ ];
+ })();
+
+ return (
+
+ setAttributes({campaignId})}
+ >
+
+
+
+ {hasResolved && campaign?.id && (
+
+
+ setAttributes({buttonText})}
+ />
+ setAttributes({useDefaultForm})}
+ help={
+ <>
+ {__('Uses the campaign’s default form.', 'give')}
+ {` `}
+
+ {__('Change default form', 'give')}
+
+
+ }
+ />
+ {!attributes.useDefaultForm && (
+ setAttributes({selectedForm})}
+ options={campaignForms}
+ value={attributes.selectedForm}
+ help={__('Donations are collected through this form.', 'give')}
+ />
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/src/Campaigns/Blocks/DonateButton/index.tsx b/src/Campaigns/Blocks/DonateButton/index.tsx
new file mode 100644
index 00000000000..c6cf79da0be
--- /dev/null
+++ b/src/Campaigns/Blocks/DonateButton/index.tsx
@@ -0,0 +1,17 @@
+import schema from './block.json';
+import Edit from './edit';
+import GiveIcon from '@givewp/components/GiveIcon';
+
+/**
+ * @unreleased
+ */
+const settings = {
+ icon: 'givewp-campaign-donate-button-block'])); ?>
+ style="">
+ render($params); ?>
+
diff --git a/src/Campaigns/Blocks/blocks.ts b/src/Campaigns/Blocks/blocks.ts
new file mode 100644
index 00000000000..32356f1fecc
--- /dev/null
+++ b/src/Campaigns/Blocks/blocks.ts
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import {BlockConfiguration, getBlockType, registerBlockType} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import campaignGrid from './CampaignGrid';
+import campaignBlock from './Campaign';
+
+export const getAllBlocks = () => {
+ return [
+ campaignGrid,
+ campaignBlock,
+ ];
+};
+
+getAllBlocks().forEach((block) => {
+ if (!getBlockType(block.schema.name)) {
+ registerBlockType(block.schema as BlockConfiguration, block.settings);
+ }
+});
diff --git a/src/Campaigns/Blocks/landingPage.ts b/src/Campaigns/Blocks/landingPage.ts
new file mode 100644
index 00000000000..47e0c418dbd
--- /dev/null
+++ b/src/Campaigns/Blocks/landingPage.ts
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {BlockConfiguration, getBlockType, registerBlockType} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import campaignCover from './CampaignCover';
+import campaignDonateButton from './DonateButton';
+import campaignDonations from './CampaignDonations';
+import campaignDonors from './CampaignDonors';
+import campaignTitle from './CampaignTitle';
+import campaignGoal from './CampaignGoal';
+import campaignStats from './CampaignStats';
+import campaignComments from './CampaignComments/resources';
+
+export const getAllBlocks = () => {
+ return [
+ campaignCover,
+ campaignDonateButton,
+ campaignDonations,
+ campaignDonors,
+ campaignTitle,
+ campaignGoal,
+ campaignStats,
+ campaignComments
+ ];
+};
+
+getAllBlocks().forEach((block) => {
+ if (!getBlockType(block.schema.name)) {
+ registerBlockType(block.schema as BlockConfiguration, block.settings);
+ }
+});
diff --git a/src/Campaigns/Blocks/shared/components/CampaignCard/index.tsx b/src/Campaigns/Blocks/shared/components/CampaignCard/index.tsx
new file mode 100644
index 00000000000..d059d82fb5a
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/CampaignCard/index.tsx
@@ -0,0 +1,71 @@
+import {__} from '@wordpress/i18n';
+import {getGoalDescription, getGoalFormattedValue} from '../../../CampaignGoal/utils';
+import {Campaign} from '@givewp/campaigns/admin/components/types';
+import {getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+
+import './styles.scss';
+
+export default ({showImage, showGoal, showDescription, campaign}: {
+ showImage: boolean,
+ showDescription: boolean,
+ showGoal: boolean,
+ campaign: Campaign
+}) => {
+
+ const campaignWindowData = getCampaignOptionsWindowData();
+
+ return (
+ window.location = campaign.pagePermalink
+ })}
+ >
+ {showImage && campaign.image && (
+
+ )
+}
diff --git a/src/Campaigns/Blocks/shared/components/CampaignCard/styles.scss b/src/Campaigns/Blocks/shared/components/CampaignCard/styles.scss
new file mode 100644
index 00000000000..08617f5c4c1
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/CampaignCard/styles.scss
@@ -0,0 +1,97 @@
+.give-campaigns-component-campaign {
+
+ padding: 0 0 24px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+ border: solid 1px var(--neutral-100);
+ background-color: #fff;
+
+
+ &-image {
+ background-size: cover;
+ height: 180px;
+ border-radius: 8px 8px 0 0;
+ }
+
+ &-title {
+ padding: 8px;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 1.5;
+ color: #060c1a;
+ }
+
+ &-description {
+ padding: 0 8px;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 1.43;
+ color: #363636;
+ }
+
+ &__goal {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 8px;
+ margin-top: 8px;
+
+ &-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &-item {
+ display: flex;
+ flex-direction: column;
+
+ span {
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1.5;
+ letter-spacing: 0.48px;
+ color: #4b5563;
+ }
+
+ strong {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.5;
+ color: #060c1a;
+ }
+ }
+
+ &-item:first-child {
+ margin-bottom: 8px;
+ }
+ }
+
+ &-progress {
+ display: flex;
+
+ &-container {
+ display: flex;
+ height: 8px;
+ flex-grow: 1;
+ border-radius: 14px;
+ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+ background-color: #f2f2f2;
+ }
+
+ &-bar {
+ display: flex;
+ height: 8px;
+ border-radius: 14px;
+ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+ background-color: #2d802f;
+ }
+ }
+ }
+
+ &__pagination {
+ display: flex;
+ justify-content: center;
+ margin-top: 16px;
+ }
+}
diff --git a/src/Campaigns/Blocks/shared/components/CampaignSelector/Inspector.tsx b/src/Campaigns/Blocks/shared/components/CampaignSelector/Inspector.tsx
new file mode 100644
index 00000000000..9a95c8e3ece
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/CampaignSelector/Inspector.tsx
@@ -0,0 +1,63 @@
+import {__} from '@wordpress/i18n';
+import {PanelBody, SelectControl} from '@wordpress/components';
+import {InspectorControls} from '@wordpress/block-editor';
+import {Campaign} from '@givewp/campaigns/admin/components/types';
+import {getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+
+type CampaignDropdownProps = {
+ campaignId: number;
+ campaigns: Campaign[],
+ hasResolved: boolean;
+ handleSelect: (id: number) => void;
+ inspectorControls?: JSX.Element | JSX.Element[];
+}
+
+export default function Inspector({campaignId, campaigns, hasResolved, handleSelect, inspectorControls = null}: CampaignDropdownProps) {
+ const campaignWindowData = getCampaignOptionsWindowData();
+ const options = (() => {
+ if (!hasResolved) {
+ return [{label: __('Loading...', 'give'), value: ''}];
+ }
+
+ if (campaigns.length) {
+ const campaignOptions = campaigns.map((campaign) => ({
+ label: campaign.title,
+ value: campaign.id.toString(),
+ }));
+
+ return [{label: __('Select...', 'give'), value: ''}, ...campaignOptions];
+ }
+
+ return [{label: __('No campaigns found.', 'give'), value: ''}];
+ })();
+
+ return (
+
+
+ )}
+
+ {campaign.title}
+
+ {showDescription && (
+
+ {campaign.shortDescription}
+
+ )}
+
+ {showGoal && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {getGoalDescription(campaign.goalType)}
+
+ {getGoalFormattedValue(campaign.goalType, campaign.goalStats.actual)}
+
+
+
+ {__('Our goal', 'give')}
+
+ {getGoalFormattedValue(campaign.goalType, campaign.goal)}
+
+
+
+ 
+
+ );
+}
diff --git a/src/Campaigns/Blocks/shared/components/CampaignSelector/images/givewp-logo.svg b/src/Campaigns/Blocks/shared/components/CampaignSelector/images/givewp-logo.svg
new file mode 100644
index 00000000000..166821b8ace
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/CampaignSelector/images/givewp-logo.svg
@@ -0,0 +1,76 @@
+
diff --git a/src/Campaigns/Blocks/shared/components/CampaignSelector/index.tsx b/src/Campaigns/Blocks/shared/components/CampaignSelector/index.tsx
new file mode 100644
index 00000000000..b812a5f2f45
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/CampaignSelector/index.tsx
@@ -0,0 +1,55 @@
+import {useEffect} from 'react';
+import {select} from '@wordpress/data';
+import Inspector from './Inspector';
+import useCampaigns from '../../hooks/useCampaigns';
+import Selector from './Selector';
+
+type CampaignSelectorProps = {
+ campaignId: number;
+ children: JSX.Element | JSX.Element[],
+ handleSelect: (id: number) => void;
+ inspectorControls?: JSX.Element | JSX.Element[];
+ showInspectorControl?: boolean;
+}
+
+export default ({campaignId, handleSelect, children, inspectorControls = null, showInspectorControl = false}: CampaignSelectorProps) => {
+
+ // set campaign id from context
+ useEffect(() => {
+ if (campaignId) {
+ return;
+ }
+ // @ts-ignore
+ const id = select('core/editor').getEditedPostAttribute('campaignId');
+
+ if (id) {
+ handleSelect(id);
+ }
+ }, []);
+
+ const {campaigns, hasResolved} = useCampaigns();
+
+ return (
+ <>
+ {!campaignId && (
+
+
+
+ setSelectedCampaign(option?.value)}
+ noOptionsMessage={() =>
+
+
+ {__('No campaigns were found.', 'give')}
} + //@ts-ignore + options={campaignOptions} + loadingMessage={() => <>{__('Loading Campaigns...', 'give')}} + isLoading={!hasResolved} + theme={reactSelectThemeStyles} + styles={reactSelectStyles} + /> +
+
+
+
+ {Array(index + 1).fill()}
+
+
+
+ );
+}
+
+interface PaginationProps {
+ currentPage: number,
+ totalPages: number,
+ setPage: (page: number) => void
+}
diff --git a/src/Campaigns/Blocks/shared/components/Pagination/styles.scss b/src/Campaigns/Blocks/shared/components/Pagination/styles.scss
new file mode 100644
index 00000000000..bc895867f03
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/components/Pagination/styles.scss
@@ -0,0 +1,61 @@
+.give-campaign-components-pagination {
+ display: flex;
+ padding: 8px 0;
+ flex-direction: row;
+
+ &__pages {
+ display: flex;
+
+ &-links {
+ display: flex;
+ flex-direction: row;
+ gap: 4px;
+
+ button {
+ flex-grow: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ text-decoration: none !important;
+ border-radius: 4px;
+ border: solid 1px #e5e7eb;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 1.43;
+ }
+
+ &-arrow {
+ padding: 8px;
+
+ &-disabled {
+ padding: 8px;
+ opacity: 0.7;
+ cursor: not-allowed;
+
+ svg {
+ opacity: 0.7;
+ }
+ }
+ }
+
+ &-page {
+ padding: 8px 14px;
+ color: #060c1a !important;
+ }
+
+ button:not(.give-campaign-components-pagination__pages-links-current, .give-campaign-components-pagination__pages-links-arrow-disabled):hover {
+ border: solid 1px #459948;
+ background-color: #f2fff3;
+ }
+
+ &-current {
+ border: solid 1px #459948;
+ background-color: #459948;
+ color: #fff !important;
+ }
+
+ }
+ }
+}
diff --git a/src/Campaigns/Blocks/shared/hooks/useCampaign.ts b/src/Campaigns/Blocks/shared/hooks/useCampaign.ts
new file mode 100644
index 00000000000..3d0ed8f3adc
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/hooks/useCampaign.ts
@@ -0,0 +1,13 @@
+import {useEntityRecord} from '@wordpress/core-data';
+import {Campaign} from '@givewp/campaigns/admin/components/types';
+
+export default function useCampaign(campaignId: number) {
+ const campaignData = useEntityRecord('givewp', 'campaign', campaignId);
+
+ return {
+ campaign: {
+ ...campaignData?.record as Campaign
+ },
+ hasResolved: campaignData?.hasResolved,
+ };
+}
diff --git a/src/Campaigns/Blocks/shared/hooks/useCampaigns.ts b/src/Campaigns/Blocks/shared/hooks/useCampaigns.ts
new file mode 100644
index 00000000000..42da3a9cf7c
--- /dev/null
+++ b/src/Campaigns/Blocks/shared/hooks/useCampaigns.ts
@@ -0,0 +1,38 @@
+import {useEntityRecords} from '@wordpress/core-data';
+import {Campaign} from '@givewp/campaigns/admin/components/types';
+
+type useCampaignsParams = {
+ ids?: number[],
+ page?: number,
+ per_page?: number;
+ status?: 'active' | 'draft' | 'archived';
+ sortBy?: string;
+ orderBy?: string;
+}
+
+export default function useCampaigns({
+ ids = [],
+ page = 1,
+ per_page = 30,
+ status = 'active',
+ sortBy = 'date',
+ orderBy = 'desc',
+ }: useCampaignsParams = {}) {
+ const data = useEntityRecords('givewp', 'campaign', {
+ ids,
+ page,
+ per_page,
+ status,
+ sortBy,
+ orderBy
+ });
+
+ return {
+ campaigns: data?.records as Campaign[],
+ //@ts-ignore
+ totalItems: data.totalItems,
+ //@ts-ignore
+ totalPages: data.totalPages,
+ hasResolved: data?.hasResolved,
+ };
+}
diff --git a/src/Campaigns/CampaignDonationQuery.php b/src/Campaigns/CampaignDonationQuery.php
new file mode 100644
index 00000000000..046d302c1fd
--- /dev/null
+++ b/src/Campaigns/CampaignDonationQuery.php
@@ -0,0 +1,155 @@
+from('posts', 'donation');
+ $this->where('post_type', 'give_payment');
+
+ // Include only valid statuses
+ $this->whereIn('donation.post_status', ['publish', 'give_subscription']);
+
+ // Include only current payment "mode"
+ $this->joinDonationMeta(DonationMetaKeys::MODE, 'paymentMode');
+ $this->where('paymentMode.meta_value', give_is_test_mode() ? 'test' : 'live');
+
+ // Include only forms associated with the Campaign.
+ $this->joinDonationMeta(DonationMetaKeys::CAMPAIGN_ID, 'campaignId');
+ $this->where('campaignId.meta_value', $campaign->id);
+ }
+
+ /**
+ * @unreleased
+ */
+ public function between(DateTimeInterface $startDate, DateTimeInterface $endDate): self
+ {
+ $query = clone $this;
+ $query->whereBetween(
+ 'donation.post_date',
+ $startDate->format('Y-m-d H:i:s'),
+ $endDate->format('Y-m-d H:i:s')
+ );
+ return $query;
+ }
+
+ /**
+ * Returns a calculated sum of the intended amounts (without recovered fees) for the donations.
+ *
+ * @unreleased
+ *
+ * @return int|float
+ */
+ public function sumIntendedAmount()
+ {
+ $query = clone $this;
+ $query->joinDonationMeta(DonationMetaKeys::AMOUNT, 'amount');
+ $query->joinDonationMeta('_give_fee_donation_amount', 'intendedAmount');
+ return $query->sum(
+ /**
+ * The intended amount meta and the amount meta could either be 0 or NULL.
+ * So we need to use the NULLIF function to treat the 0 values as NULL.
+ * Then we coalesce the values to select the first non-NULL value.
+ * @link https://github.com/impress-org/givewp/pull/7411
+ */
+ 'COALESCE(NULLIF(intendedAmount.meta_value,0), NULLIF(amount.meta_value,0), 0)'
+ );
+ }
+
+ /**
+ * @unreleased
+ */
+ public function countDonations(): int
+ {
+ $query = clone $this;
+ return $query->count('donation.ID');
+ }
+
+ /**
+ * @unreleased
+ */
+ public function countDonors(): int
+ {
+ $query = clone $this;
+ $query->joinDonationMeta(DonationMetaKeys::DONOR_ID, 'donorId');
+ return $query->count('DISTINCT donorId.meta_value');
+ }
+
+ /**
+ * @unreleased
+ */
+ public function getOldestDonationDate()
+ {
+ $query = clone $this;
+ $query->select('DATE(donation.post_date) as date_created');
+ $query->orderBy('donation.post_date', 'ASC');
+ $query->limit(1);
+ $result = $query->get();
+
+ if (!$result) {
+ return null;
+ }
+
+ return $result->date_created;
+ }
+
+ /**
+ * @unreleased
+ */
+ public function getDonationsByDate($groupBy = 'DATE'): array
+ {
+ $query = clone $this;
+
+ $query->joinDonationMeta(DonationMetaKeys::AMOUNT, 'amount');
+ $query->joinDonationMeta('_give_fee_donation_amount', 'intendedAmount');
+ $query->select(
+ 'SUM(COALESCE(NULLIF(intendedAmount.meta_value,0), NULLIF(amount.meta_value,0), 0)) as amount'
+ );
+
+ $query->select('YEAR(donation.post_date) as year');
+ $query->select('MONTH(donation.post_date) as month');
+ $query->select('DAY(donation.post_date) as day');
+ $query->select("DATE(donation.post_date) as date_created");
+
+ if ($groupBy === 'DAY') {
+ $query->groupBy('DATE(date_created)');
+ } else if ($groupBy === 'MONTH') {
+ $query->groupBy('YEAR(donation.post_date), MONTH(donation.post_date)');
+ } elseif ($groupBy === 'YEAR') {
+ $query->groupBy('YEAR(donation.post_date)');
+ } else {
+ $query->groupBy("$groupBy(donation.post_date)");
+ }
+
+ return $query->getAll();
+ }
+
+ /**
+ * An opinionated join method for the donation meta table.
+ * @unreleased
+ */
+ public function joinDonationMeta($key, $alias): self
+ {
+ $this->join(function (JoinQueryBuilder $builder) use ($key, $alias) {
+ $builder
+ ->leftJoin('give_donationmeta', $alias)
+ ->on('donation.ID', $alias . '.donation_id')
+ ->andOn($alias . '.meta_key', $key, true);
+ });
+ return $this;
+ }
+}
diff --git a/src/Campaigns/CampaignSubscriptionQuery.php b/src/Campaigns/CampaignSubscriptionQuery.php
new file mode 100644
index 00000000000..b11c4f9fc7f
--- /dev/null
+++ b/src/Campaigns/CampaignSubscriptionQuery.php
@@ -0,0 +1,109 @@
+from('give_subscriptions', 'subscription');
+
+ // Include only current payment "mode"
+ $this->where('payment_mode', give_is_test_mode() ? 'test' : 'live');
+
+ // Include only valid statuses
+ $this->joinDonation('donation');
+ $this->whereIn('donation.post_status', ['publish', 'give_subscription']);
+
+ // Include only forms associated with the Campaign.
+ $this->joinDonationMeta(DonationMetaKeys::CAMPAIGN_ID, 'campaignId');
+ $this->where('campaignId.meta_value', $campaign->id);
+
+ }
+
+ /**
+ * @unreleased
+ */
+ public function between(DateTimeInterface $startDate, DateTimeInterface $endDate): self
+ {
+ $query = clone $this;
+ $query->whereBetween(
+ 'created',
+ $startDate->format('Y-m-d H:i:s'),
+ $endDate->format('Y-m-d H:i:s')
+ );
+ return $query;
+ }
+
+ /**
+ * Returns a calculated sum of the intended amounts (without recovered fees) for the donations.
+ *
+ * @unreleased
+ *
+ * @return int|float
+ */
+ public function sumInitialAmount()
+ {
+ return (clone $this)->sum('initial_amount');
+ }
+
+ /**
+ * @unreleased
+ */
+ public function countDonations(): int
+ {
+ return (clone $this)->count('donation.ID');
+ }
+
+ /**
+ * @unreleased
+ */
+ public function countDonors(): int
+ {
+ $query = clone $this;
+ $query->joinDonationMeta(DonationMetaKeys::DONOR_ID, 'donorId');
+ return $query->count('DISTINCT donorId.meta_value');
+ }
+
+ /**
+ * @unreleased
+ */
+ public function joinDonation($alias): self
+ {
+ $this->join(function (JoinQueryBuilder $builder) use ($alias) {
+ $builder
+ ->leftJoin('posts', $alias)
+ ->on('subscription.parent_payment_id', $alias . '.ID');
+ });
+ $this->where($alias . '.post_type', 'give_payment');
+
+ return $this;
+ }
+
+ /**
+ * An opinionated join method for the donation meta table.
+ * @unreleased
+ */
+ public function joinDonationMeta($key, $alias): self
+ {
+ $this->join(function (JoinQueryBuilder $builder) use ($key, $alias) {
+ $builder
+ ->leftJoin('give_donationmeta', $alias)
+ ->on('subscription.parent_payment_id', $alias . '.donation_id')
+ ->andOn($alias . '.meta_key', $key, true);
+ });
+ return $this;
+ }
+}
diff --git a/src/Campaigns/CampaignsAdminPage.php b/src/Campaigns/CampaignsAdminPage.php
new file mode 100644
index 00000000000..cf6be15b938
--- /dev/null
+++ b/src/Campaigns/CampaignsAdminPage.php
@@ -0,0 +1,57 @@
+';
+ }
+
+ /**
+ * @unreleased
+ */
+ public static function isShowingDetailsPage(): bool
+ {
+ return isset($_GET['id'], $_GET['page']) && 'give-campaigns' === $_GET['page'];
+ }
+}
diff --git a/src/Campaigns/Controllers/CampaignRequestController.php b/src/Campaigns/Controllers/CampaignRequestController.php
new file mode 100644
index 00000000000..2fea7b2c47e
--- /dev/null
+++ b/src/Campaigns/Controllers/CampaignRequestController.php
@@ -0,0 +1,257 @@
+get_param('id'));
+
+ if ( ! $campaign) {
+ return new WP_Error('campaign_not_found', __('Campaign not found', 'give'), ['status' => 404]);
+ }
+
+ return new WP_REST_Response((new CampaignViewModel($campaign))->exports());
+ }
+
+ /**
+ * @unreleased
+ */
+ public function getCampaigns(WP_REST_Request $request): WP_REST_Response
+ {
+ $ids = $request->get_param('ids');
+ $page = $request->get_param('page');
+ $perPage = $request->get_param('per_page');
+ $status = $request->get_param('status');
+ $sortBy = $request->get_param('sortBy');
+ $orderBy = $request->get_param('orderBy');
+
+ $query = Campaign::query();
+
+ $query->where('status', $status);
+
+ if ( ! empty($ids)) {
+ $query->whereIn('id', $ids);
+ }
+
+ $totalQuery = clone $query;
+
+ $query
+ ->limit($perPage)
+ ->offset(($page - 1) * $perPage);
+
+ $this->orderCampaigns($query, $sortBy, $orderBy);
+
+ $campaigns = $query->getAll() ?? [];
+ $totalCampaigns = empty($campaigns) ? 0 : $totalQuery->count();
+ $totalPages = (int)ceil($totalCampaigns / $perPage);
+
+ $campaigns = array_map(function ($campaign) {
+ return (new CampaignViewModel($campaign))->exports();
+ }, $campaigns);
+
+ $response = rest_ensure_response($campaigns);
+ $response->header('X-WP-Total', $totalCampaigns);
+ $response->header('X-WP-TotalPages', $totalPages);
+
+ $base = add_query_arg(
+ map_deep($request->get_query_params(), function ($value) {
+ if (is_bool($value)) {
+ $value = $value ? 'true' : 'false';
+ }
+
+ return urlencode($value);
+ }),
+ rest_url(CampaignRoute::CAMPAIGNS)
+ );
+
+ if ($page > 1) {
+ $prevPage = $page - 1;
+
+ if ($prevPage > $totalPages) {
+ $prevPage = $totalPages;
+ }
+
+ $response->link_header('prev', add_query_arg('page', $prevPage, $base));
+ }
+
+ if ($totalPages > $page) {
+ $nextPage = $page + 1;
+ $response->link_header('next', add_query_arg('page', $nextPage, $base));
+ }
+
+ return $response;
+ }
+
+ /**
+ * @unreleased
+ *
+ * @return WP_Error | WP_REST_Response
+ *
+ * @throws Exception
+ */
+ public function updateCampaign(WP_REST_Request $request)
+ {
+ $campaign = Campaign::find($request->get_param('id'));
+
+ if ( ! $campaign) {
+ return new WP_Error('campaign_not_found', __('Campaign not found', 'give'), ['status' => 404]);
+ }
+
+ $statusMap = [
+ 'archived' => CampaignStatus::ARCHIVED(),
+ 'draft' => CampaignStatus::DRAFT(),
+ 'active' => CampaignStatus::ACTIVE(),
+ ];
+
+ foreach ($request->get_params() as $key => $value) {
+ switch ($key) {
+ case 'id':
+ break;
+ case 'status':
+ $status = array_key_exists($value, $statusMap)
+ ? $statusMap[$value]
+ : CampaignStatus::DRAFT();
+
+ $campaign->status = $status;
+
+ break;
+ case 'goal':
+ $campaign->goal = (int)$value;
+ break;
+ case 'goalType':
+ $campaign->goalType = new CampaignGoalType($value);
+ break;
+ case 'defaultFormId':
+ give(CampaignRepository::class)->updateDefaultCampaignForm($campaign,
+ $request->get_param('defaultFormId'));
+ break;
+ default:
+ if ($campaign->hasProperty($key)) {
+ $campaign->$key = $value;
+ }
+ }
+ }
+
+ if ($campaign->isDirty()) {
+ $campaign->save();
+ }
+
+ return new WP_REST_Response((new CampaignViewModel($campaign))->exports());
+ }
+
+ /**
+ * @unreleased
+ *
+ * @throws Exception
+ */
+ public function mergeCampaigns(WP_REST_Request $request): WP_REST_Response
+ {
+ $destinationCampaign = Campaign::find($request->get_param('id'));
+ $campaignsToMerge = Campaign::query()->whereIn('id', $request->get_param('campaignsToMergeIds'))->getAll();
+
+ $campaignsMerged = $destinationCampaign->merge(...$campaignsToMerge);
+
+ return new WP_REST_Response($campaignsMerged);
+ }
+
+
+ /**
+ * @unreleased
+ *
+ * @throws Exception
+ */
+ public function createCampaign(WP_REST_Request $request): WP_REST_Response
+ {
+ $campaign = Campaign::create([
+ 'type' => CampaignType::CORE(),
+ 'title' => $request->get_param('title'),
+ 'shortDescription' => $request->get_param('shortDescription') ?? '',
+ 'longDescription' => '',
+ 'logo' => '',
+ 'image' => $request->get_param('image') ?? '',
+ 'primaryColor' => '#0b72d9',
+ 'secondaryColor' => '#27ae60',
+ 'goal' => (int)$request->get_param('goal'),
+ 'goalType' => new CampaignGoalType($request->get_param('goalType')),
+ 'status' => CampaignStatus::DRAFT(),
+ 'startDate' => $request->get_param('startDateTime'),
+ 'endDate' => $request->get_param('endDateTime'),
+ ]);
+
+ return new WP_REST_Response((new CampaignViewModel($campaign))->exports(), 201);
+ }
+
+ /**
+ * @unreleased
+ */
+ private function orderCampaigns(ModelQueryBuilder $query, $sortBy, $orderBy)
+ {
+ switch ($sortBy) {
+ case 'date':
+ $query->orderBy('date_created', $orderBy);
+
+ break;
+ case 'amount':
+ $query
+ ->selectRaw('(SELECT SUM(amount) FROM %1s WHERE campaign_id = campaigns.id) AS amount',
+ DB::prefix('give_revenue'))
+ ->orderBy('amount', $orderBy);
+
+ break;
+ case 'donations':
+ $query
+ ->selectRaw('(SELECT COUNT(donation_id) FROM %1s WHERE campaign_id = campaigns.id) AS donationsCount',
+ DB::prefix('give_revenue'))
+ ->orderBy('donationsCount', $orderBy);
+
+ break;
+ case 'donors':
+
+ $postsTable = DB::prefix('posts');
+ $metaTable = DB::prefix('give_donationmeta');
+ $campaignIdKey = DonationMetaKeys::CAMPAIGN_ID;
+ $donorIdKey = DonationMetaKeys::DONOR_ID;
+
+ $query
+ ->selectRaw(
+ "(
+ SELECT COUNT(DISTINCT donorId.meta_value)
+ FROM {$postsTable} AS donation
+ LEFT JOIN {$metaTable} campaignId ON donation.ID = campaignId.donation_id AND campaignId.meta_key = '{$campaignIdKey}'
+ LEFT JOIN {$metaTable} donorId ON donation.ID = donorId.donation_id AND donorId.meta_key = '{$donorIdKey}'
+ WHERE post_type = 'give_payment'
+ AND donation.post_status IN ('publish', 'give_subscription')
+ AND campaignId.meta_value = campaigns.id
+ ) AS donorsCount"
+ )
+ ->orderBy('donorsCount', $orderBy);
+
+ break;
+ }
+ }
+}
diff --git a/src/Campaigns/DataTransferObjects/CampaignGoalData.php b/src/Campaigns/DataTransferObjects/CampaignGoalData.php
new file mode 100644
index 00000000000..db77fece6d8
--- /dev/null
+++ b/src/Campaigns/DataTransferObjects/CampaignGoalData.php
@@ -0,0 +1,138 @@
+campaign = $campaign;
+ $this->actual = $this->getActual();
+ $this->actualFormatted = $this->getActualFormatted();
+ $this->percentage = $this->getPercentage();
+ $this->goal = $campaign->goal;
+ $this->goalFormatted = $this->getGoalFormatted();
+ }
+
+ /**
+ * @unreleased
+ */
+ private function getActual(): int
+ {
+ $query = $this->campaign->goalType->isOneOf(
+ CampaignGoalType::SUBSCRIPTIONS(),
+ CampaignGoalType::AMOUNT_FROM_SUBSCRIPTIONS(),
+ CampaignGoalType::DONORS_FROM_SUBSCRIPTIONS()
+ )
+ ? new CampaignSubscriptionQuery($this->campaign)
+ : new CampaignDonationQuery($this->campaign);
+
+ switch ($this->campaign->goalType->getValue()) {
+ case CampaignGoalType::DONATIONS():
+ case CampaignGoalType::SUBSCRIPTIONS():
+ return $query->countDonations();
+
+ case CampaignGoalType::DONORS():
+ case CampaignGoalType::DONORS_FROM_SUBSCRIPTIONS():
+ return $query->countDonors();
+
+ case CampaignGoalType::AMOUNT_FROM_SUBSCRIPTIONS():
+ return $query->sumInitialAmount();
+
+ case CampaignGoalType::AMOUNT():
+ default:
+ return $query->sumIntendedAmount();
+ }
+ }
+
+ /**
+ * @unreleased
+ */
+ private function getPercentage(): float
+ {
+ $percentage = $this->campaign->goal
+ ? $this->actual / $this->campaign->goal
+ : 0;
+ return round($percentage * 100, 2);
+ }
+
+ /**
+ * @unreleased
+ */
+ private function getActualFormatted(): string
+ {
+ if ($this->campaign->goalType == CampaignGoalType::AMOUNT) {
+ return give_currency_filter(give_format_amount($this->actual));
+ }
+
+ return $this->actual;
+ }
+
+ /**
+ * @unreleased
+ */
+ private function getGoalFormatted(): string
+ {
+ if ($this->campaign->goalType == CampaignGoalType::AMOUNT) {
+ return give_currency_filter(give_format_amount($this->goal));
+ }
+
+ return $this->goal;
+ }
+
+ /**
+ * @unreleased
+ */
+ public function toArray(): array
+ {
+ return [
+ 'actual' => $this->actual,
+ 'actualFormatted' => $this->actualFormatted,
+ 'percentage' => $this->percentage,
+ 'goal' => $this->goal,
+ 'goalFormatted' => $this->goalFormatted,
+ ];
+ }
+}
diff --git a/src/Campaigns/Factories/CampaignFactory.php b/src/Campaigns/Factories/CampaignFactory.php
new file mode 100644
index 00000000000..6b32994ac2a
--- /dev/null
+++ b/src/Campaigns/Factories/CampaignFactory.php
@@ -0,0 +1,46 @@
+ CampaignType::CORE(),
+ 'enableCampaignPage' => true,
+ 'defaultFormId' => 1,
+ 'title' => __('GiveWP Campaign', 'give'),
+ 'shortDescription' => __('Campaign short description', 'give'),
+ 'longDescription' => __('Campaign long description', 'give'),
+ 'goal' => 5000,
+ 'goalType' => CampaignGoalType::AMOUNT(),
+ 'status' => CampaignStatus::ACTIVE(),
+ 'logo' => '',
+ 'image' => '',
+ 'primaryColor' => '#28C77B',
+ 'secondaryColor' => '#FFA200',
+ 'createdAt' => $createdAt,
+ 'startDate' => $createdAt,
+ 'endDate' => null,
+ ];
+ }
+}
diff --git a/src/Campaigns/ListTable/CampaignsListTable.php b/src/Campaigns/ListTable/CampaignsListTable.php
new file mode 100644
index 00000000000..27ef0ea570b
--- /dev/null
+++ b/src/Campaigns/ListTable/CampaignsListTable.php
@@ -0,0 +1,69 @@
+createdAt->format($format);
+ }
+}
diff --git a/src/Campaigns/ListTable/Columns/DescriptionColumn.php b/src/Campaigns/ListTable/Columns/DescriptionColumn.php
new file mode 100644
index 00000000000..77bb6dcd912
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/DescriptionColumn.php
@@ -0,0 +1,38 @@
+shortDescription, true);
+ }
+}
diff --git a/src/Campaigns/ListTable/Columns/DonationsCountColumn.php b/src/Campaigns/ListTable/Columns/DonationsCountColumn.php
new file mode 100644
index 00000000000..a06e0461bf2
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/DonationsCountColumn.php
@@ -0,0 +1,59 @@
+countDonations();
+
+ $label = $totalDonations > 0
+ ? sprintf(
+ _n(
+ '%1$s donation',
+ '%1$s donations',
+ $totalDonations,
+ 'give'
+ ),
+ $totalDonations
+ ) : __('No donations', 'give');
+
+
+ return sprintf(
+ '%s',
+ admin_url("edit.php?post_type=give_forms&page=give-payment-history&form_id=$model->id"),
+ __('Visit donations page', 'give'),
+ apply_filters("givewp_list_table_cell_value_{$this::getId()}_content", $label, $model, $this)
+ );
+ }
+}
diff --git a/src/Campaigns/ListTable/Columns/EndDateColumn.php b/src/Campaigns/ListTable/Columns/EndDateColumn.php
new file mode 100644
index 00000000000..eeaba736452
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/EndDateColumn.php
@@ -0,0 +1,42 @@
+endDate->format($format);
+ }
+}
diff --git a/src/Campaigns/ListTable/Columns/GoalColumn.php b/src/Campaigns/ListTable/Columns/GoalColumn.php
new file mode 100644
index 00000000000..5551c9de26c
--- /dev/null
+++ b/src/Campaigns/ListTable/Columns/GoalColumn.php
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+ {previousPage > 0 ? (
+
+ ) : (
+
+ )}
+
+ {[...Array(totalPages)].map((e, i) => {
+ const page = i + 1;
+ return (
+
+ )
+ })}
+
+ {nextPage <= totalPages ? (
+
+ ) : (
+
+ )}
+
+
+ %3$s%4$s %5$s
+
+ ';
+
+ return sprintf(
+ $template,
+ $model->id,
+ $goalData->percentage,
+ $goalData->actualFormatted,
+ sprintf(
+ ' %s %s',
+ __('of', 'give'),
+ $goalData->goalFormatted
+ ),
+ sprintf(
+ '%2$s
+ {__('Are you sure you want to archive your campaign? All forms associated with this campaign will be inaccessible to donors.', 'give')}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/DateRangeFilters.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/DateRangeFilters.tsx
new file mode 100644
index 00000000000..1176b960379
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/DateRangeFilters.tsx
@@ -0,0 +1,25 @@
+import {filterOptions} from '../CampaignStats';
+import styles from './styles.module.scss';
+
+type DateRangeFiltersProps = {
+ options: typeof filterOptions;
+ onSelect: (value: number) => void;
+ selected: number;
+}
+
+const DateRangeFilters = ({options, onSelect, selected}: DateRangeFiltersProps) => {
+ return (
+
+ {options.map((option, index) => (
+
+ ))}
+
+ );
+};
+export default DateRangeFilters;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/PercentChangePill.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/PercentChangePill.tsx
new file mode 100644
index 00000000000..56cf8d1f0ed
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/PercentChangePill.tsx
@@ -0,0 +1,58 @@
+import styles from './styles.module.scss';
+import type {PercentChangePillProps} from './types';
+
+/**
+ * @unreleased
+ */
+const getPercentageChange = (previousValue: number, currentValue: number) => {
+ if (previousValue === 0) {
+ return currentValue === 0 ? 0 : 100;
+ }
+
+ const value = currentValue - previousValue / Math.abs(previousValue) * 100;
+ if (value !== 100) {
+ return value.toFixed(1);
+ }
+
+ return value;
+}
+
+const IconArrowUp = () => (
+
+);
+
+const IconArrowDown = () => (
+
+)
+
+const IconArrowRight = () => (
+
+)
+
+/**
+ * @unreleased
+ */
+const PercentChangePill = ({value, comparison}: PercentChangePillProps) => {
+ const change = getPercentageChange(comparison, value);
+
+ const [color, backgroundColor, symbol] =
+ change === 0
+ ? ['#060c1a', '#f2f2f2',
+ {symbol} {change}%
+
+ );
+};
+
+export default PercentChangePill;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/StatWidget.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/StatWidget.tsx
new file mode 100644
index 00000000000..58598cc3637
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/StatWidget.tsx
@@ -0,0 +1,29 @@
+import styles from './styles.module.scss';
+import PercentChangePill from './PercentChangePill';
+import HeaderText from '../HeaderText';
+import type {StatWidgetProps} from './types';
+import {Spinner} from '@givewp/components';
+
+/**
+ * @unreleased
+ */
+const StatWidget = ({label, value, previousValue, description, formatter = null, loading = false}: StatWidgetProps) => {
+ return (
+
+
+ {label}
+
+
+ );
+};
+
+export default StatWidget;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
new file mode 100644
index 00000000000..6a76b20e80d
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -0,0 +1,120 @@
+import {__} from '@wordpress/i18n';
+import {useEffect, useState} from 'react';
+import RevenueChart from '../RevenueChart';
+import GoalProgressChart from '../GoalProgressChart';
+import apiFetch from '@wordpress/api-fetch';
+import {addQueryArgs} from '@wordpress/url';
+import HeaderText from '../HeaderText';
+import HeaderSubText from '../HeaderSubText';
+import DefaultFormWidget from '../DefaultForm';
+import StatWidget from './StatWidget';
+import DateRangeFilters from './DateRangeFilters';
+import {amountFormatter, getCampaignOptionsWindowData, useCampaignEntityRecord} from '@givewp/campaigns/utils';
+import type {CampaignOverViewStat} from './types';
+import styles from './styles.module.scss';
+
+const campaignId = new URLSearchParams(window.location.search).get('id');
+
+const {currency} = getCampaignOptionsWindowData();
+const currencyFormatter = amountFormatter(currency);
+
+export const filterOptions = [
+ {label: __('Today', 'give'), value: 1, description: __('from today', 'give')},
+ {label: __('Last 7 days', 'give'), value: 7, description: __('from the last 7 days', 'give')},
+ {label: __('Last 30 days', 'give'), value: 30, description: __('from the last 30 days', 'give')},
+ {label: __('Last 90 days', 'give'), value: 90, description: __('from the last 90 days', 'give')},
+ {label: __('All-time', 'give'), value: 0, description: __('total for all-time', 'give')},
+];
+
+const fetchCampaignOverviewStats = async (days: number, setLoading: Function, setStats: Function) => {
+ setLoading(true);
+
+ try {
+ const response = await apiFetch({
+ path: addQueryArgs(`/givewp/v3/campaigns/${campaignId}/statistics`, {rangeInDays: days}),
+ });
+
+ setStats(response as CampaignOverViewStat[]);
+ setLoading(false);
+ } catch (error) {
+ console.error('Error fetching campaign stats:', error);
+ setLoading(false);
+ }
+ };
+
+const CampaignStats = () => {
+ const [dayRange, setDayRange] = useState
+
+
+
+ {!loading ? formatter?.format(value) ?? value : {
+ {previousValue !== null &&
+
+
+ );
+};
+
+export default CampaignStats;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
new file mode 100644
index 00000000000..05fbd9ff68b
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
@@ -0,0 +1,143 @@
+.dateRangeFilter {
+ padding: var(--givewp-spacing-2);
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin-bottom: var(--givewp-spacing-2);
+ background-color: var(--givewp-neutral-50);
+ border-radius: var(--givewp-rounded-8);
+}
+
+.dateRangeFilter button {
+ padding: 0.5rem 1rem;
+ background-color: transparent;
+ color: var(--givewp-neutral-900);
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.25rem;
+ border: 0;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--givewp-neutral-100);
+ }
+
+ &:first-child {
+ border-radius: var(--givewp-rounded-4) 0 0 var(--givewp-rounded-4);
+ }
+
+ &:last-child {
+ border-radius: 0 var(--givewp-rounded-4) var(--givewp-rounded-4) 0;
+ }
+}
+
+.dateRangeFilter .selectedDateRange {
+ background-color: var(--givewp-shades-white);
+ font-weight: 600;
+
+ &:hover {
+ background-color: var(--givewp-shades-white);
+ }
+}
+
+.statWidget {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: var(--givewp-spacing-2);
+ padding: var(--givewp-spacing-6);
+ background-color: var(--givewp-shades-white);
+ color: var(--givewp-neutral-700);
+ font-weight: 600;
+ border-radius: var(--givewp-rounded-8);
+ grid-column: span 1;
+}
+
+.statWidget header, .statWidget footer {
+ flex: 1;
+}
+
+.statWidget footer{
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: var(--givewp-neutral-700);
+}
+
+.statWidgetAmount {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: baseline;
+}
+
+.statWidgetDisplay {
+ font-size: 2.25rem;
+ font-weight: 600;
+ line-height: 44px;
+ color: var(--givewp-neutral-900);
+}
+
+.revenueWidget {
+ flex: 2;
+ background-color: var(--givewp-shades-white);
+ padding: 20px;
+ border-radius: var(--givewp-rounded-8);
+ grid-column: span 2;
+}
+
+.percentChangePill {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px 12px 2px 4px;
+ font-size: .8rem;
+ border-radius: var(--givewp-rounded-16);
+ min-width: 71px;
+ height: 24px;
+ gap: 2px;
+}
+
+.progressWidget {
+ flex: 1;
+ background-color: var(--givewp-shades-white);
+ padding: 20px;
+ border-radius: var(--givewp-rounded-8);
+}
+
+.headerSpacing {
+ display: flex;
+ flex-direction: column;
+ gap: .25rem;
+}
+
+.mainGrid{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: var(--givewp-spacing-6);
+ column-gap: var(--givewp-spacing-4);
+}
+
+.nestedGrid {
+ grid-column: span 1;
+ display: grid;
+ gap: var(--givewp-spacing-6);
+}
+
+@media (max-width: 768px) {
+ .mainGrid {
+ grid-template-columns: 1fr;
+ gap: var(--givewp-spacing-3);
+ }
+
+ .revenueWidget {
+ grid-column: span 1;
+ }
+
+ .nestGrid {
+ grid-template-columns: 1fr;
+ gap: var(--givewp-spacing-3);
+ }
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/types.ts b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/types.ts
new file mode 100644
index 00000000000..9529ab2f011
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/types.ts
@@ -0,0 +1,28 @@
+/**
+ * @unreleased
+ */
+export type StatWidgetProps = {
+ label: string;
+ value: number;
+ previousValue?: number;
+ description: string;
+ formatter?: Intl.NumberFormat;
+ loading?: boolean;
+};
+
+/**
+ * @unreleased
+ */
+export type CampaignOverViewStat = {
+ amountRaised: number;
+ donationCount: number;
+ donorCount: number;
+};
+
+/**
+ * @unreleased
+ */
+export type PercentChangePillProps = {
+ value: number;
+ comparison: number;
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/CheckIcon.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/CheckIcon.tsx
new file mode 100644
index 00000000000..c4a28928c1a
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/CheckIcon.tsx
@@ -0,0 +1,24 @@
+export default function CheckIcon({refColor}) {
+ return (
+
+ );
+}
+
+function getContrastColor(hexColor){
+ hexColor = hexColor.replace(/^#/, '');
+
+ let r = parseInt(hexColor.substring(0, 2), 16);
+ let g = parseInt(hexColor.substring(2, 4), 16);
+ let b = parseInt(hexColor.substring(4, 6), 16);
+
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+ return luminance > 0.5 ? '#000000' : '#FFFFFF';
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/EditIcon.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/EditIcon.tsx
new file mode 100644
index 00000000000..a8598b4d803
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/Icons/EditIcon.tsx
@@ -0,0 +1,12 @@
+export default function EditIcon() {
+ return (
+
+ );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/index.tsx
new file mode 100644
index 00000000000..4020522af30
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/index.tsx
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import {useCallback, useState} from 'react';
+import {Controller, useFormContext} from 'react-hook-form';
+
+/**
+ * WordPress dependencies
+ */
+import {ColorIndicator, ColorPalette, Popover} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import EditIcon from './Icons/EditIcon';
+import CheckIcon from './Icons/CheckIcon';
+import './styles.scss';
+
+interface ColorOption {
+ name: string;
+ slug: string;
+ color: string;
+}
+
+const defaultColors: ColorOption[] = [
+ {name: 'Blue', slug: 'blue', color: '#0b72d9'},
+ {name: 'Green', slug: 'green', color: '#27ae60'},
+ {name: 'Purple', slug: 'purple', color: '#19078c'},
+ {name: 'Orange', slug: 'orange', color: '#f29718'},
+ {name: 'Lavender', slug: 'lavender', color: '#9b51e0'},
+ {name: 'Terracotta', slug: 'terracotta', color: '#e26f56'},
+ {name: 'Red', slug: 'red', color: '#cc1818'},
+];
+
+/**
+ * @unreleased
+ */
+function ColorControl({name, disabled = false, className}: { name: string; disabled?: boolean; className?: string }) {
+ const [popoverIsVisible, setPopoverIsVisible] = useState
+
+ {__('Revenue', 'give')}
+
+ {__('This graph shows revenue for the campaign over its lifetime.', 'give')}
+
+
+
+
+
+
+
+ {__('Goal progress', 'give')}
+ {__('This chart shows your campaign goal progress.', 'give')}
+
+
+
+
+ )}
+ />
+ );
+};
+
+export default ColorControl;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/styles.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/styles.scss
new file mode 100644
index 00000000000..d9f49d43f2b
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ColorControl/styles.scss
@@ -0,0 +1,63 @@
+.givewp-color-control {
+ align-items: center;
+ display: flex;
+ gap: var(--givewp-spacing-4);
+
+ &__indicator {
+ align-items: center;
+ display: flex;
+ position: relative;
+
+ span {
+ border-radius: 0.5rem;
+ border: 0;
+ box-shadow: none;
+ height: 3rem;
+ width: 3rem;
+ }
+
+ svg {
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ &__edit-button {
+ align-items: center;
+ background: none;
+ border-radius: 0.5rem;
+ border: solid 1px var(--givewp-neutral-300);
+ color: var(--givewp-neutral-900);
+ display: flex;
+ font-size: 1rem;
+ font-weight: 500;
+ gap: var(--givewp-spacing-2);
+ height: 3rem;
+ line-height: 1.5;
+ padding: var(--givewp-spacing-3) var(--givewp-spacing-6) var(--givewp-spacing-3) var(--givewp-spacing-4);
+
+ &:hover {
+ background: var(--givewp-neutral-50);
+ cursor: pointer;
+ }
+
+ &--active {
+ background: var(--givewp-neutral-700);
+ border: solid 1px var(--givewp-neutral-700);
+ color: var(--givewp-neutral-25);
+
+ &:hover {
+ background: var(--givewp-neutral-900);
+ }
+ }
+ }
+
+ &__popover-content {
+ .components-popover__content {
+ padding: var(--givewp-spacing-4);
+ width: auto;
+ }
+ }
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/index.tsx
new file mode 100644
index 00000000000..47325399af4
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/index.tsx
@@ -0,0 +1,26 @@
+import {__} from '@wordpress/i18n';
+import HeaderText from '../HeaderText';
+import HeaderSubText from '../HeaderSubText';
+
+import styles from './styles.module.scss';
+
+/**
+ * @unreleased
+ */
+const DefaultFormWidget = ({defaultForm}: {defaultForm: string}) => {
+ return (
+
+
+
+ {!disabled && (
+
+
+ {popoverIsVisible && (
+
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default DefaultFormWidget;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/styles.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/styles.module.scss
new file mode 100644
index 00000000000..bcd283f09f4
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/styles.module.scss
@@ -0,0 +1,46 @@
+.defaultForm {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ background-color: var(--givewp-shades-white);
+ padding: 1rem 1.5rem 1.5rem 1.5rem;
+ border-radius: var(--givewp-rounded-8);
+}
+
+.description {
+ display: flex;
+ gap: 1rem;
+ align-items: flex-start;
+ justify-content: space-between;
+}
+
+.headerSpacing {
+ display: flex;
+ flex-direction: column;
+ gap: .25rem;
+}
+
+.edit {
+ font-size: 0.875rem;
+ color: var(--givewp-neutral-900);
+ font-weight: 500;
+ background-color: var(--givewp-neutral-100);
+ padding: .5rem 1rem;
+ border-radius: var(--givewp-rounded-4);
+ text-decoration: none;
+
+ &:hover {
+ background-color: var(--givewp-neutral-200);
+ color: var(--givewp-neutral-900);
+ }
+}
+
+.formName {
+ font-weight: 500;
+ background-color: var(--givewp-neutral-25);
+ padding: 0.75rem 1rem;
+ border-radius: var(--givewp-rounded-4);
+ border: solid 1px var(--givewp-neutral-100);
+ cursor: default;
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/index.tsx
new file mode 100644
index 00000000000..a52e4daa5a6
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/index.tsx
@@ -0,0 +1,88 @@
+import {__} from '@wordpress/i18n';
+import Chart from 'react-apexcharts';
+import React from 'react';
+
+import styles from './styles.module.scss';
+import {amountFormatter, getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+import type {Campaign} from '@givewp/campaigns/admin/components/types';
+
+const {currency} = getCampaignOptionsWindowData();
+const currencyFormatter = amountFormatter(currency);
+
+type GoalProgressChartProps = {
+ value: number;
+ goal: number;
+ goalType: Partial
+
+
+ {__('Default campaign form', 'give')}
+ {__('Your campaign page and blocks will collect donations through this form by default.', 'give')}
+
+
+ {defaultForm}
+
+
+
+ );
+};
+
+export default GoalProgressChart;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/styles.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/styles.module.scss
new file mode 100644
index 00000000000..f6555196c6d
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/styles.module.scss
@@ -0,0 +1,43 @@
+.goalProgressChart {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+}
+
+/**
+ * The size of the chart is relative to the container.
+ * To get close to the design,
+ * the size is balanced at flex 3/2
+ * and the margins use negative values to control padding.
+ */
+.chartContainer {
+ flex: 3;
+ margin: 0 -50px;
+}
+
+.goalDetails {
+ flex: 2;
+}
+
+.goal {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ margin-bottom: 4px;
+ color: #1F2937;
+}
+
+.amount {
+ color: #2D802F;
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 2px;
+ line-height: 28px;
+}
+
+.goalType {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ color: #4b5563;
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderSubText.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderSubText.tsx
new file mode 100644
index 00000000000..112b63a917c
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderSubText.tsx
@@ -0,0 +1,17 @@
+/**
+ * @unreleased
+ */
+const HeaderSubText = ({children}) => {
+ return (
+
+
+
+
+ {__('Goal', 'give')}
+ {formattedGoal}
+ {goalTypeLabels[goalType]}
+
+ {children}
+
+ )
+}
+
+export default HeaderSubText;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderText.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderText.tsx
new file mode 100644
index 00000000000..fe969ed252c
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderText.tsx
@@ -0,0 +1,17 @@
+/**
+ * @unreleased
+ */
+const HeaderText = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default HeaderText;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/ArchivedCampaignNotice.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/ArchivedCampaignNotice.tsx
new file mode 100644
index 00000000000..a4064b9e9fa
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/ArchivedCampaignNotice.tsx
@@ -0,0 +1,16 @@
+import {__} from '@wordpress/i18n';
+import {TriangleIcon} from '@givewp/campaigns/admin/components/Icons';
+
+export default ({handleClick}) => (
+ <>
+
+
+)
+
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/styles.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/styles.module.scss
new file mode 100644
index 00000000000..a002b25593d
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/styles.module.scss
@@ -0,0 +1,37 @@
+.tooltip {
+ position: absolute;
+ top: 420px; // hacky but I can't think of any other way as the entire list table is wrapped in an element that has the overflow property set
+ left: 100px;
+ z-index: 9;
+ width: 377px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ gap: 16px;
+ padding: 16px 24px 24px;
+ border-radius: 8px;
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
+ border: solid 2px #6b7280;
+ background-color: #fff;
+
+ .close {
+ cursor: pointer;
+ position: absolute;
+ right: 13px;
+ top: 13px;
+ }
+
+ h3 {
+ padding: 0;
+ margin: 0;
+ font-size: 16px;
+ color: #060c1a;
+ }
+
+ .content {
+ font-size: 14px;
+ color: #1f2937;
+ font-weight: normal;
+ }
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/RevenueChart.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/RevenueChart.tsx
new file mode 100644
index 00000000000..0efe3465b3c
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/RevenueChart.tsx
@@ -0,0 +1,117 @@
+import React, {useEffect, useState} from 'react';
+import Chart from 'react-apexcharts';
+import apiFetch from '@wordpress/api-fetch';
+import {addQueryArgs} from '@wordpress/url';
+import {amountFormatter, getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+
+const campaignId = new URLSearchParams(window.location.search).get('id');
+
+const getDefaultData = (days = 7) => {
+ const data = [];
+
+ for (let i = 0; i < days; i++) {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ data.push({x: date.toISOString().split('T')[0], y: 0});
+ }
+
+ return data;
+};
+
+const RevenueChart = () => {
+ const {currency} = getCampaignOptionsWindowData();
+ const currencyFormatter = amountFormatter(currency);
+ const [max, setMax] = useState(100);
+ const [series, setSeries] = useState([{name: 'Revenue', data: getDefaultData()}]);
+
+ useEffect(() => {
+ apiFetch({path: addQueryArgs('/givewp/v3/campaigns/' + campaignId + '/revenue')}).then(
+ (data: {date: string; amount: number}[]) => {
+ if (data?.length > 0) {
+ // By default we set a max value so the chart does not look empty.
+ // once we have data we can reset the max value for the chart to auto calculate
+ setMax(undefined);
+ setSeries([
+ {
+ name: 'Revenue',
+ data: data.map((item) => {
+ return {
+ x: item.date,
+ y: item.amount,
+ };
+ }),
+ },
+ ]);
+ }
+ }
+ );
+ }, []);
+
+ const options = {
+ chart: {
+ id: 'campaign-revenue',
+ zoom: {
+ enabled: false,
+ },
+ toolbar: {
+ show: false,
+ },
+ },
+ xaxis: {
+ type: 'datetime' as 'datetime' | 'category' | 'numeric',
+ },
+ yaxis: {
+ min: 0,
+ max,
+ showForNullSeries: false,
+ labels: {
+ formatter: (value) => {
+ return currencyFormatter.format(Math.ceil(Number(value)));
+ },
+ },
+ },
+ stroke: {
+ color: ['#60a1e2'],
+ width: 1.5,
+ curve: 'smooth' as
+ | 'straight'
+ | 'smooth'
+ | 'monotoneCubic'
+ | 'stepline'
+ | 'linestep'
+ | ('straight' | 'smooth' | 'monotoneCubic' | 'stepline' | 'linestep')[],
+ lineCap: 'butt' as 'butt' | 'square' | 'round',
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ colorStops: [
+ [
+ {
+ offset: 0,
+ color: '#eee',
+ opacity: 1,
+ },
+ {
+ offset: 0.6,
+ color: '#b7d4f2',
+ opacity: 50,
+ },
+ {
+ offset: 100,
+ color: '#f0f7ff',
+ opacity: 1,
+ },
+ ],
+ ],
+ },
+ },
+ };
+
+ return
+
+ + {__('Default campaign form', 'give')} +
+
+ {__('The default form will always appear at the top of this list. Your campaign page and blocks will collect donations through this form by default. You can change it at any time.', 'give')}
+
+
+