+ %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..1de9b3d5b8
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -0,0 +1,175 @@
+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 {GiveCampaignDetails} from "@givewp/campaigns/admin/components/CampaignDetailsPage/types";
+import {useCampaignEntityRecord} from '@givewp/campaigns/utils';
+
+import styles from "./styles.module.scss"
+
+const campaignId = new URLSearchParams(window.location.search).get('id');
+
+declare const window: {
+ GiveCampaignDetails: GiveCampaignDetails;
+} & Window;
+
+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 currency = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+})
+
+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 (
+
+
+ {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/DefaultForm/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/index.tsx
new file mode 100644
index 0000000000..85018e707b
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/DefaultForm/index.tsx
@@ -0,0 +1,29 @@
+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 (
+
+
+ )
+}
+
+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..7ecd274610
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart/index.tsx
@@ -0,0 +1,67 @@
+import {__} from '@wordpress/i18n';
+import Chart from "react-apexcharts";
+import React from "react";
+
+import styles from "./styles.module.scss"
+
+const currency = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+})
+
+const GoalProgressChart = ({ value, goal }) => {
+ const percentage: number = Math.abs((value / goal) * 100);
+ return (
+
+
+
+ {__('Default campaign form', 'give')}
+ {__('Your campaign page and blocks will collect donations through this form by default.', 'give')}
+
+
+ {__('Edit', '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')}
+ {currency.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..5beed0ab01
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/RevenueChart.tsx
@@ -0,0 +1,91 @@
+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,
+ },
+ 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')}
+
+
+
+ );
+}
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx
new file mode 100644
index 0000000000..214b23eedc
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx
@@ -0,0 +1,232 @@
+import {__} from '@wordpress/i18n';
+import {useFormContext} from 'react-hook-form';
+import {Currency, Editor, Upload} from '../../Inputs';
+import {GiveCampaignDetails} from '../types';
+import styles from '../CampaignDetailsPage.module.scss';
+import {ToggleControl} from '@wordpress/components';
+import campaignPageImage from './images/campaign-page.svg';
+import {WarningIcon} from '@givewp/campaigns/admin/components/Icons';
+
+declare const window: {
+ GiveCampaignDetails: GiveCampaignDetails;
+} & Window;
+
+/**
+ * @unreleased
+ */
+export default () => {
+ const {
+ register,
+ watch,
+ setValue,
+ formState: {errors},
+ } = useFormContext();
+
+ const [goalType, image, status, shortDescription, enableCampaignPage] = watch([
+ 'goalType',
+ 'image',
+ 'status',
+ 'shortDescription',
+ 'enableCampaignPage',
+ ]);
+ const isDisabled = status === 'archived';
+
+ return (
+
+
+
+
+ {/* Campaign Page */}
+
+ );
+};
+
+const goalDescription = (type: string) => {
+ switch (type) {
+ case 'amount':
+ return __(
+ 'Your goal progress is measured by the total amount of funds raised eg. $500 of $1,000 raised.',
+ 'give'
+ );
+ case 'donations':
+ return __('Your goal progress is measured by the number of donations. eg. 1 of 5 donations.', 'give');
+ case 'donors':
+ return __(
+ 'Your goal progress is measured by the number of donors. eg. 10 of 50 donors have given.',
+ 'give'
+ );
+ case 'amountFromSubscriptions':
+ return __('Only the first donation amount of a recurring donation is counted toward the goal.', 'give');
+ case 'subscriptions':
+ return __('Only the first donation of a recurring donation is counted toward the goal.', 'give');
+ case 'donorsFromSubscriptions':
+ return __('Only the donors that subscribed to a recurring donation are counted toward the goal.', 'give');
+ default:
+ return null;
+ }
+};
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/definitions.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/definitions.tsx
new file mode 100644
index 0000000000..d082e31bf3
--- /dev/null
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/definitions.tsx
@@ -0,0 +1,26 @@
+import {CampaignDetailsTab} from '../types';
+import {__} from '@wordpress/i18n';
+import OverviewTab from './Overview';
+import SettingsTab from './Settings';
+import FormsTab from './Forms';
+
+const campaignDetailsTabs: CampaignDetailsTab[] = [
+ {
+ id: 'overview',
+ title: __('Overview', 'give'),
+ content: () =>
+
+
+ {/* Campaign Details */}
+
+
+
+ {__('Campaign page', 'give')}
+
+ {__(
+ 'Set up a landing page for your campaign. The default campaign page has the campaign details, the campaign form, and donor wall.',
+ 'give'
+ )}
+
+
+
+
+ 
+
+
+ {
+ setValue('enableCampaignPage', value, {shouldDirty: true});
+ }}
+ />
+
+
+ {!enableCampaignPage && (
+
+
+ )}
+
+ {errors.enableCampaignPage && (
+ + {__( + 'This will affect the campaign blocks associated with this campaign. Ensure that no campaign blocks are being used on any page.', + 'give' + )} +
+{`${errors.enableCampaignPage.message}`}
+ )}
+
+
+
+ {/* Campaign Goal */}
+
+
+
+ {__('Campaign Details', 'give')}
+
+ {__('This includes the campaign title, description, and the cover of your campaign.', 'give')}
+
+
+
+
+
+
+ {__("What's the title of your campaign?", 'give')}
+
+ {__("Give your campaign a title that tells donors what it's about.", 'give')}
+
+
+
+ {errors.title && {`${errors.title.message}`}
}
+
+
+
+ {__("What's your campaign about?", 'give')}
+
+ {__('Let your donors know the story behind your campaign.', 'give')}
+
+
+ {isDisabled ? (
+
+ ) : (
+
+
+ )}
+
+ {errors.shortDescription && (
+ {`${errors.shortDescription.message}`}
+ )}
+
+
+
+ {__('Add a cover image or video for your campaign.', 'give')}
+
+
+ {__('Upload an image or video to represent and inspire your campaign.', 'give')}
+
+
+ {
+ setValue('image', coverImageUrl, {shouldDirty: true});
+ }}
+ reset={() => setValue('image', '', {shouldDirty: true})}
+ />
+
+
+ {errors.title && {`${errors.title.message}`}
}
+
+
+
+
+
+ {__('Campaign Goal', 'give')}
+
+ {__('How would you like to set your goal?', 'give')}
+
+
+
+
+
+
+
+ {__('Set the details of your campaign goal here.', 'give')}
+
+
+
+ {goalDescription(goalType)}
+
+ {errors.goalType && {`${errors.goalType.message}`}
}
+
+
+ {__('How much do you want to raise?', 'give')}
+
+ {__('Let us know the target amount you’re aiming for in your campaign.', 'give')}
+
+
+ {goalType === 'amount' || goalType === 'amountFromSubscriptions' ? (
+ {`${errors.goal.message}`}
}
+
+
+ {Object.values(tabs).map((tab) => (
+
+ {tab.title}{' '}
+
+ ))}
+
+
+
+
+
+
+ {Object.values(tabs).map((tab) => (
+
+
+ ))}
+
+
+
+ );
+};
+
+export default function CampaignsDetailsPage({campaignId}) {
+ const [resolver, setResolver] = useState({});
+ const [isSaving, setIsSaving] = useState
+
+ {statusMap[status]}
+
+
+ );
+ }
+
+ return (
+
+
+ {__('Loading campaign...', 'give')}
+
+
+ );
+};
+
+/**
+ * Campaign Form Modal component
+ *
+ * @unreleased
+ */
+export default function CampaignFormModal({isOpen, handleClose, apiSettings, title, campaign}: CampaignModalProps) {
+ const API = new CampaignsApi(apiSettings);
+ const [step, setStep] = useState{getGoalTypeIcon(type)}
+
+
+ {description}
+
+
+
+ {__("Give your campaign a title that tells donors what it's about.", 'give')}
+
+ {errors.title && (
+
+
+
+ )}
+ {errors.title.message}
+
+
+ {__('Let your donors know the story behind your campaign.', 'give')}
+
+
+
+
+
+ {__('Upload an image or video to represent and inspire your campaign.', 'give')}
+
+ {
+ setValue('image', coverImageUrl);
+ }}
+ reset={() => setValue('image', '')}
+ />
+
+
+
+ )}
+ {step === 2 && (
+ <>
+
+
+ {__('Set the goal your fundraising efforts will work toward.', 'give')}
+
+ {selectedGoalType && (
+
+
+ {errors.goalType && (
+
+
+ )}
+ {errors.goalType.message}
+
+
+ {goalInputAttributes[selectedGoalType].description}
+ {selectedGoalType === 'amount' || selectedGoalType === 'amountFromSubscriptions' ? (
+
+ )}
+ {/*
+
+ )}
+ {errors.goal.message}
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {sprintf(__('Really delete campaign #%d?', 'give'), item.id)}
; + + const confirmModal = (campaign) => { + // TODO We need decide if we should have some restriction that block deletion. + /*if (donationsCount > 0) { + alert(__('This campaign cannot be deleted because it has donations associated with it.', 'give')); + return; + }*/ + + showConfirmModal(__('Delete', 'give'), confirmDelete, deleteItem, 'danger'); + }; + + return ( + <> +{__('Really delete the following campaigns?', 'give')}
+-
+ {selected.map((campaignId, index) => (
+
-
+
{' '} + + {__('from ', 'give')} + +
+ ))}
+
+ 
+
+ );
+ };
+
+ return (
+ <>
+ {__('No campaign created yet', 'give')}
++ {__('Don’t worry, let’s help you setup your first campaign.', 'give')} +
+ +