+ {
+ fetch(campaignWindowData.adminUrl + '/admin-ajax.php?action=givewp_campaign_interaction_notice', {method: 'POST'})
+ .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 0000000000..b1e8520057
--- /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 0000000000..db984f729f
--- /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 0000000000..d3ec09cc98
--- /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 0000000000..4ba00cebc3
--- /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 0000000000..6b995a365e
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/block.json
@@ -0,0 +1,93 @@
+{
+ "$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
+ }
+ }
+ },
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "viewScript": "file:../../../../build/campaignCommentsBlockApp.js",
+ "editorScript": "file:../../../../build/campaignBlocks.js",
+ "style": "file:../../../../build/campaignCommentsBlockApp.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignComments/render.php b/src/Campaigns/Blocks/CampaignComments/render.php
new file mode 100644
index 0000000000..67853a368c
--- /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 0000000000..df16583dd0
--- /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 0000000000..b20fdc846c
--- /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 0000000000..905ac7ee25
--- /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 0000000000..63acbf8664
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/styles.scss
@@ -0,0 +1,67 @@
+.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;
+ padding: .5rem;
+ border-radius: 50%;
+
+ img {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 40px;
+ width: 100%;
+ height: auto;
+ padding: .5rem;
+ 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 0000000000..704f5dcda9
--- /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 0000000000..89e322723b
--- /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 0000000000..797cf6d4da
--- /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 0000000000..6c893fba1c
--- /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 0000000000..98d48cfbd8
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/block.json
@@ -0,0 +1,88 @@
+{
+ "$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,
+ "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
+ }
+ }
+ },
+ "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 0000000000..3de83a616a
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/edit.tsx
@@ -0,0 +1,144 @@
+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, ResizableBox, 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`;
+
+ const handleResizeStop = (event: MouseEvent | TouchEvent, direction, refToElement: HTMLDivElement, delta: {
+ height: number,
+ width: number
+ }) => {
+ setAttributes({
+ height: attributes.height + delta.height,
+ width: attributes.width + delta.width,
+ });
+ toggleSelection(true);
+ };
+
+ const isSizeAligned = attributes.align === 'full' || attributes.align === 'wide';
+
+ return (
+
+
+
+
+
+ {__('Leave a supportive message by', 'give')}
+
+
+ + {__('donating to the campaign.', 'give')} +
++ {__('Shows the cover image of the campaign.', 'give')} +
+ + {__('Change campaign cover', 'give')} +
+ 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.ts b/src/Campaigns/Blocks/CampaignDonations/index.ts
new file mode 100644
index 0000000000..c8aa8a4ea5
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/index.ts
@@ -0,0 +1,16 @@
+import {paragraph 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/CampaignDonations/render.php b/src/Campaigns/Blocks/CampaignDonations/render.php
new file mode 100644
index 0000000000..ae40989775
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/render.php
@@ -0,0 +1,47 @@
+getById($attributes['campaignId']);
+
+if ( ! $campaign) {
+ return;
+}
+
+$sortBy = $attributes['sortBy'] ?? 'top-donations';
+$query = (new CampaignDonationQuery($campaign))
+ ->select(
+ 'donation.ID as id',
+ 'donorIdMeta.meta_value as donorId',
+ 'amountMeta.meta_value as amount',
+ 'donation.post_date as date',
+ 'donors.name as donorName'
+ )
+ ->joinDonationMeta(DonationMetaKeys::DONOR_ID, 'donorIdMeta')
+ ->joinDonationMeta(DonationMetaKeys::AMOUNT, 'amountMeta')
+ ->leftJoin('give_donors', 'donorIdMeta.meta_value', 'donors.id', 'donors')
+ ->orderBy($sortBy === 'top-donations' ? 'amount' : 'donation.ID', 'DESC')
+ ->limit($attributes['donationsPerPage'] ?? 5);
+
+if ( ! $attributes['showAnonymous']) {
+ $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
+ ->where('anonymousMeta.meta_value', '0');
+}
+
+(new CampaignDonationsBlockViewModel($campaign, $query->getAll(), $attributes))->render();
diff --git a/src/Campaigns/Blocks/CampaignDonations/resources/icons/empty-state.svg b/src/Campaigns/Blocks/CampaignDonations/resources/icons/empty-state.svg
new file mode 100644
index 0000000000..97c9d126fe
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/resources/icons/empty-state.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/Campaigns/Blocks/CampaignDonations/resources/icons/ribbon.svg b/src/Campaigns/Blocks/CampaignDonations/resources/icons/ribbon.svg
new file mode 100644
index 0000000000..5b8803f0be
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/resources/icons/ribbon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/Campaigns/Blocks/CampaignDonations/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonations/resources/views/render.php
new file mode 100644
index 0000000000..9f9740a47e
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonations/resources/views/render.php
@@ -0,0 +1,128 @@
+primaryColor ?? '#0b72d9'),
+ esc_attr($campaign->secondaryColor ?? '#27ae60')
+);
+?>
+ '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 0000000000..9b938f52d0
--- /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 0000000000..d00f95ddbc
--- /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 0000000000..e39aaa19eb
--- /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 0000000000..3b53e3453e
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/block.json
@@ -0,0 +1,52 @@
+{
+ "$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
+ },
+ "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 0000000000..cc67208d25
--- /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.ts b/src/Campaigns/Blocks/CampaignDonors/index.ts
new file mode 100644
index 0000000000..c8aa8a4ea5
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/index.ts
@@ -0,0 +1,16 @@
+import {paragraph 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/CampaignDonors/render.php b/src/Campaigns/Blocks/CampaignDonors/render.php
new file mode 100644
index 0000000000..23dda1d0a0
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/render.php
@@ -0,0 +1,61 @@
+getById($attributes['campaignId']);
+
+if ( ! $campaign) {
+ return;
+}
+
+$sortBy = $attributes['sortBy'] ?? 'top-donors';
+$query = (new CampaignDonationQuery($campaign))
+ ->joinDonationMeta(DonationMetaKeys::DONOR_ID, 'donorIdMeta')
+ ->joinDonationMeta(DonationMetaKeys::AMOUNT, 'amountMeta')
+ ->leftJoin('give_donors', 'donorIdMeta.meta_value', 'donors.id', 'donors')
+ ->limit($attributes['donorsPerPage'] ?? 5);
+
+if ($sortBy === 'top-donors') {
+ $query->select(
+ 'donorIdMeta.meta_value as id',
+ 'SUM(amountMeta.meta_value) as amount',
+ 'donors.name as name'
+ )
+ ->groupBy('donorIdMeta.meta_value')
+ ->orderBy('amount', 'DESC');
+} else {
+ $query->joinDonationMeta(DonationMetaKeys::COMPANY, 'companyMeta')
+ ->select(
+ 'donation.ID as donationID',
+ 'donorIdMeta.meta_value as id',
+ 'companyMeta.meta_value as company',
+ 'donation.post_date as date',
+ 'amountMeta.meta_value as amount',
+ 'donors.name as name'
+ )
+ ->orderBy('donation.ID', 'DESC');
+}
+
+if ( ! $attributes['showAnonymous']) {
+ $query->joinDonationMeta(DonationMetaKeys::ANONYMOUS, 'anonymousMeta')
+ ->where('anonymousMeta.meta_value', '0');
+}
+
+(new CampaignDonorsBlockViewModel($campaign, $query->getAll(), $attributes))->render();
diff --git a/src/Campaigns/Blocks/CampaignDonors/resources/icons/empty-state.svg b/src/Campaigns/Blocks/CampaignDonors/resources/icons/empty-state.svg
new file mode 100644
index 0000000000..0e8992b4a0
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/resources/icons/empty-state.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/Campaigns/Blocks/CampaignDonors/resources/icons/ribbon.svg b/src/Campaigns/Blocks/CampaignDonors/resources/icons/ribbon.svg
new file mode 100644
index 0000000000..5b8803f0be
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/resources/icons/ribbon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/Campaigns/Blocks/CampaignDonors/resources/views/render.php b/src/Campaigns/Blocks/CampaignDonors/resources/views/render.php
new file mode 100644
index 0000000000..82496362a8
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignDonors/resources/views/render.php
@@ -0,0 +1,145 @@
+primaryColor ?? '#0b72d9'),
+ esc_attr($campaign->secondaryColor ?? '#27ae60')
+);
+?>
+ '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 0000000000..3e8d04ab04
--- /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 0000000000..072983484a
--- /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 0000000000..b98f4b8b2f
--- /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 0000000000..0145bccb61
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/block.json
@@ -0,0 +1,24 @@
+{
+ "$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"
+ }
+ },
+ "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 0000000000..d62837de59
--- /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 0000000000..fd153a0135
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGoal/icon.jsx
@@ -0,0 +1,11 @@
+export default () => (
+
+)
diff --git a/src/Campaigns/Blocks/CampaignGoal/index.tsx b/src/Campaigns/Blocks/CampaignGoal/index.tsx
new file mode 100644
index 0000000000..a79fbc4283
--- /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 0000000000..7b507bdf08
--- /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 0000000000..8a81a38016
--- /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 0000000000..c6a6de366e
--- /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 0000000000..a73426857b
--- /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 0000000000..9802d87600
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignGrid/block.json
@@ -0,0 +1,72 @@
+{
+ "$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
+ }
+ },
+ "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 0000000000..8535a21d10
--- /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 0000000000..b1e8520057
--- /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 0000000000..8ae939b0da
--- /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 0000000000..b8e68daa9f
--- /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 0000000000..e39aaa19eb
--- /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 0000000000..ee52e1e2bd
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignStats/block.json
@@ -0,0 +1,71 @@
+{
+ "$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
+ }
+ }
+ },
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "viewScript": "file:../../../../build/campaignStatsApp.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 0000000000..3b676a6a20
--- /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 0000000000..1e035d8a69
--- /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 0000000000..575b3afbda
--- /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 0000000000..7d21c84eb0
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/block.json
@@ -0,0 +1,69 @@
+{
+ "$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
+ }
+ }
+ },
+ "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 0000000000..efb6ab33d5
--- /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 0000000000..031ddc43f7
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignTitle/editor.scss
@@ -0,0 +1,13 @@
+.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;
+ }
+ }
+}
diff --git a/src/Campaigns/Blocks/CampaignTitle/index.ts b/src/Campaigns/Blocks/CampaignTitle/index.ts
new file mode 100644
index 0000000000..2d86c84f64
--- /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 0000000000..e69de29bb2
diff --git a/src/Campaigns/Blocks/CampaignTitle/render.php b/src/Campaigns/Blocks/CampaignTitle/render.php
new file mode 100644
index 0000000000..6a9a5b9833
--- /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 0000000000..1fefcae93e
--- /dev/null
+++ b/src/Campaigns/Blocks/DonateButton/block.json
@@ -0,0 +1,33 @@
+{
+ "$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"
+ }
+ },
+ "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 0000000000..417d80ed1f
--- /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 0000000000..c6cf79da0b
--- /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 0000000000..32356f1fec
--- /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 0000000000..463e99ca13
--- /dev/null
+++ b/src/Campaigns/Blocks/landingPage.ts
@@ -0,0 +1,33 @@
+/**
+ * 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';
+
+export const getAllBlocks = () => {
+ return [
+ campaignCover,
+ campaignDonateButton,
+ campaignDonations,
+ campaignDonors,
+ campaignTitle,
+ campaignGoal,
+ campaignStats
+ ];
+};
+
+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 0000000000..d059d82fb5
--- /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 0000000000..08617f5c4c
--- /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 0000000000..9a95c8e3ec
--- /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 0000000000..166821b8ac
--- /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 0000000000..b812a5f2f4
--- /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 0000000000..bc895867f0
--- /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 0000000000..3d0ed8f3ad
--- /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 0000000000..42da3a9cf7
--- /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 0000000000..5eb66afaab
--- /dev/null
+++ b/src/Campaigns/CampaignDonationQuery.php
@@ -0,0 +1,127 @@
+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->joinDonationMeta('_give_completed_date', 'completed');
+ $query->whereBetween(
+ 'completed.meta_value',
+ $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 getDonationsByDay(): 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->joinDonationMeta('_give_completed_date', 'completed');
+ $query->select('DATE(completed.meta_value) as date');
+ $query->groupBy('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/CampaignsAdminPage.php b/src/Campaigns/CampaignsAdminPage.php
new file mode 100644
index 0000000000..cf6be15b93
--- /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 0000000000..2fea7b2c47
--- /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 0000000000..780de8c704
--- /dev/null
+++ b/src/Campaigns/DataTransferObjects/CampaignGoalData.php
@@ -0,0 +1,126 @@
+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 = new CampaignDonationQuery($this->campaign);
+
+ switch ($this->campaign->goalType->getValue()) {
+ case GoalType::DONATIONS():
+ return $query->countDonations();
+
+ case GoalType::DONORS():
+ return $query->countDonors();
+
+ case GoalType::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 == GoalType::AMOUNT) {
+ return give_currency_filter(give_format_amount($this->actual));
+ }
+
+ return $this->actual;
+ }
+
+ /**
+ * @unreleased
+ */
+ private function getGoalFormatted(): string
+ {
+ if ($this->campaign->goalType == GoalType::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 0000000000..1cc64f9510
--- /dev/null
+++ b/src/Campaigns/Factories/CampaignFactory.php
@@ -0,0 +1,42 @@
+ CampaignType::CORE(),
+ 'enableCampaignPage' => true,
+ 'defaultFormId' => 1,
+ 'title' => __('GiveWP Campaign', 'give'),
+ 'shortDescription' => __('Campaign short description', 'give'),
+ 'longDescription' => __('Campaign long description', 'give'),
+ 'goal' => 10000000,
+ 'goalType' => CampaignGoalType::AMOUNT(),
+ 'status' => CampaignStatus::ACTIVE(),
+ 'logo' => '',
+ 'image' => '',
+ 'primaryColor' => '#28C77B',
+ 'secondaryColor' => '#FFA200',
+ 'createdAt' => Temporal::withoutMicroseconds($currentDate),
+ 'startDate' => Temporal::withoutMicroseconds($currentDate),
+ 'endDate' => Temporal::withoutMicroseconds($currentDate->modify('+1 day')),
+ ];
+ }
+}
diff --git a/src/Campaigns/ListTable/CampaignsListTable.php b/src/Campaigns/ListTable/CampaignsListTable.php
new file mode 100644
index 0000000000..27ef0ea570
--- /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 0000000000..77bb6dcd91
--- /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 0000000000..a06e0461bf
--- /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 0000000000..eeaba73645
--- /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 0000000000..2fc68dd58d
--- /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/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
new file mode 100644
index 0000000000..101915be04
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -0,0 +1,174 @@
+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 {useCampaignEntityRecord, amountFormatter, getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
+
+import styles from "./styles.module.scss"
+
+const campaignId = new URLSearchParams(window.location.search).get('id');
+
+const {currency} = getCampaignOptionsWindowData();
+const currencyFormatter = amountFormatter(currency);
+
+const pluck = (array: any[], property: string) => array.map(element => element[property])
+
+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 CampaignStats = () => {
+
+ const [dayRange, setDayRange] = useState(null);
+ const [stats, setStats] = useState([]);
+ const {campaign} = useCampaignEntityRecord();
+
+ useEffect(() => {
+ onDayRangeChange(0)
+ }, [])
+
+ const onDayRangeChange = async (days: number) => {
+ setDayRange(days)
+
+ apiFetch({path: addQueryArgs('/give-api/v2/campaigns/' + campaignId + '/statistics', {rangeInDays: days})})
+ .then(setStats);
+ }
+
+ const widgetDescription = filterOptions.find(option => option.value === dayRange)?.description
+
+ return (
+ <>
+
+
+
+ )
+}
+
+const FooterText = ({children}) => {
+ return (
+
+
+
+ {children}
+
+ )
+}
+
+const DisplayText = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const StatWidget = ({label, values, description, formatter = null}) => {
+ return (
+
+
+ {label}
+
+
+ )
+}
+
+const PercentChangePill = ({value, comparison}) => {
+
+ const change = Math.round(100 * ((value - comparison) / comparison)) ?? 0
+
+ const [color, backgroundColor, symbol] = change == 0
+ ? ['#060c1a', '#f2f2f2', '⯈']
+ : change > 0
+ ? ['#2d802f', '#f2fff3', '⯅']
+ : ['#e35f45', '#fff4f2', '⯆']
+
+ return (
+
+ {symbol} {Math.abs(change)}%
+
+ )
+
+}
+
+
+const RevenueWidget = () => {
+ return (
+
+
+ {'undefined' !== typeof values[0]
+ ? formatter?.format(values[0]) ?? values[0]
+ :
+ }
+
+ {!!values[1] && (
+
+
+
+
+ {__('Revenue', 'give')}
+ {__('Show your revenue over time', 'give')}
+
+
+ );
+}
+
+const GoalProgressWidget = () => {
+
+ const {campaign} = useCampaignEntityRecord();
+
+ return (
+
+
+ {__('Goal progress', 'give')}
+ {__('Show your campaign performance', 'give')}
+
+
+ )
+}
+
+const DateRangeFilters = ({options, onSelect, selected}) => {
+ return (
+
+ {options.map((option, index) => (
+
+ ))}
+
+ )
+}
+
+
+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 0000000000..623b30cd74
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
@@ -0,0 +1,137 @@
+.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 {
+ padding: 0.5rem;
+ font-size: .8rem;
+ border-radius: var(--givewp-rounded-16);
+}
+
+.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);
+ }
+}
\ No newline at end of file
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 0000000000..c4a28928c1
--- /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 0000000000..a8598b4d80
--- /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 0000000000..4020522af3
--- /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
+
+ )}
+ />
+ );
+};
+
+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 0000000000..d9f49d43f2
--- /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 0000000000..47325399af
--- /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 0000000000..bcd283f09f
--- /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 0000000000..eec49a17fd
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/index.tsx
@@ -0,0 +1,73 @@
+import {__} from '@wordpress/i18n';
+import Chart from "react-apexcharts";
+import React from "react";
+
+import styles from "./styles.module.scss"
+import {getCampaignOptionsWindowData, amountFormatter} from '@givewp/campaigns/utils';
+
+const {currency} = getCampaignOptionsWindowData();
+const currencyFormatter = amountFormatter(currency);
+
+type GoalProgressChartProps = {
+ value: number;
+ goal: number;
+}
+
+const GoalProgressChart = ({ value, goal }: GoalProgressChartProps) => {
+ const progress = Math.ceil((value / goal) * 100);
+ const percentage = Math.min(progress, 100);
+
+ return (
+
+
+
+ {__('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 0000000000..f6555196c6
--- /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 0000000000..112b63a917
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/HeaderSubText.tsx
@@ -0,0 +1,17 @@
+/**
+ * @unreleased
+ */
+const HeaderSubText = ({children}) => {
+ return (
+
+
+
+
+ {__('Goal', 'give')}
+ {currencyFormatter.format(goal)}
+ {__('Amount raised', 'give')}
+
+ {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 0000000000..fe969ed252
--- /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 0000000000..a4064b9e9f
--- /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 0000000000..a002b25593
--- /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 0000000000..56f19fd070
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/RevenueChart.tsx
@@ -0,0 +1,92 @@
+import React, {useEffect, useState} from "react";
+import Chart from "react-apexcharts";
+import apiFetch from "@wordpress/api-fetch";
+import {addQueryArgs} from "@wordpress/url";
+
+const campaignId = new URLSearchParams(window.location.search).get('id');
+
+const RevenueChart = () => {
+
+ const [max, setMax] = useState(0);
+ const [categories, setCategories] = useState([]);
+ const [series, setSeries] = useState([{name: "Revenue", data: []}]);
+
+ useEffect(() => {
+ apiFetch({path: addQueryArgs( '/give-api/v2/campaigns/' + campaignId +'/revenue' ) } )
+ .then((data: {date: string, amount: number}[]) => {
+
+ setMax(Math.max(...data.map(item => item.amount)) * 1.1)
+
+ setCategories(data.map(item => item.date))
+
+ setSeries([{
+ name: "Revenue",
+ data: data.map(item => item.amount)
+ }])
+ });
+ }, [])
+
+ const options = {
+ chart: {
+ id: "campaign-revenue",
+ zoom: {
+ enabled: false
+ },
+ },
+ xaxis: {
+ categories,
+ type: 'datetime' as "datetime" | "category" | "numeric",
+ },
+ yaxis: {
+ max,
+ min: 0,
+ },
+ 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')}
+
+
+