diff --git a/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx b/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx index 1710e8eea9..40eba45887 100644 --- a/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx +++ b/src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx @@ -8,12 +8,25 @@ import {CampaignsRowActions} from './CampaignsRowActions'; import styles from './CampaignsListTable.module.scss'; import {GiveCampaignsListTable} from './types'; import CreateCampaignModal from '../CreateCampaignModal'; +import {useState} from "react"; import MergeCampaignModal from '../MergeCampaign/Modal'; declare const window: { GiveCampaignsListTable: GiveCampaignsListTable; } & Window; +/** + * Auto open modal if the URL has the query parameter id as new + * + * @unreleased + */ +const autoOpenModal = () => { + const queryParams = new URLSearchParams(window.location.search); + const newParam = queryParams.get('new'); + + return newParam === 'campaign'; +}; + export function getGiveCampaignsListTableWindowData() { return window.GiveCampaignsListTable; } @@ -112,35 +125,36 @@ const bulkActions: Array = [ }, ]; -/** - * Displays a blank slate for the Campaigns table. - * - * @unreleased - */ -const ListTableBlankSlate = () => { - const imagePath = `${ - getGiveCampaignsListTableWindowData().pluginUrl - }/assets/dist/images/list-table/blank-slate-donation-forms-icon.svg`; - return ( -
- {__('No -

{__('No campaign created yet', 'give')}

-

{__('Don’t worry, let’s help you setup your first campaign.', 'give')}

-

- - {__('Create campaign', 'give')} - -

-
- ); -}; - export default function CampaignsListTable() { + + const [isOpen, setOpen] = useState(autoOpenModal()); + + /** + * Displays a blank slate for the Campaigns table. + * + * @unreleased + */ + const ListTableBlankSlate = () => { + const imagePath = `${ + getGiveCampaignsListTableWindowData().pluginUrl + }/assets/dist/images/list-table/blank-slate-donation-forms-icon.svg`; + return ( +
+ {__('No +

{__('No campaign created yet', 'give')}

+

{__('Don’t worry, let’s help you setup your first campaign.', 'give')}

+

+ setOpen(true)} + className={`button button-primary ${styles.button}`} + > + {__('Create campaign', 'give')} + +

+
+ ); + }; + return ( <> - + diff --git a/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx b/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx index 0c03a36a2d..4f1490131a 100644 --- a/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx +++ b/src/Campaigns/resources/admin/components/CreateCampaignModal/index.tsx @@ -4,25 +4,13 @@ import styles from './CreateCampaignModal.module.scss'; import CampaignFormModal from '../CampaignFormModal'; import {getGiveCampaignsListTableWindowData} from '../CampaignsListTable'; -/** - * Auto open modal if the URL has the query parameter id as new - * - * @unreleased - */ -const autoOpenModal = () => { - const queryParams = new URLSearchParams(window.location.search); - const newParam = queryParams.get('new'); - - return newParam === 'campaign'; -}; - /** * Create Campaign Modal component * * @unreleased */ -export default function CreateCampaignModal() { - const [isOpen, setOpen] = useState(autoOpenModal()); +export default function CreateCampaignModal({isOpen, setOpen}) { + const openModal = () => setOpen(true); const closeModal = (response: ResponseProps = {}) => { setOpen(false);