diff --git a/src/Campaigns/Actions/LoadCampaignDetailsAssets.php b/src/Campaigns/Actions/LoadCampaignDetailsAssets.php new file mode 100644 index 0000000000..e806639faa --- /dev/null +++ b/src/Campaigns/Actions/LoadCampaignDetailsAssets.php @@ -0,0 +1,41 @@ + esc_url_raw(rest_url('give-api/v2/campaigns')), + 'apiNonce' => wp_create_nonce('wp_rest'), + 'adminUrl' => admin_url(), + 'pluginUrl' => GIVE_PLUGIN_URL, + 'campaignDetailsPage' => (new CampaignDetailsPage($campaign))->exports(), + ] + ); + + wp_enqueue_script($handleName); + wp_enqueue_style('givewp-design-system-foundation'); + } +} diff --git a/src/Campaigns/CampaignsAdminPage.php b/src/Campaigns/CampaignsAdminPage.php index 3b7c954189..17c3910128 100644 --- a/src/Campaigns/CampaignsAdminPage.php +++ b/src/Campaigns/CampaignsAdminPage.php @@ -2,7 +2,9 @@ namespace Give\Campaigns; +use Give\Campaigns\Actions\LoadCampaignDetailsAssets; use Give\Campaigns\Actions\LoadCampaignsListTableAssets; +use Give\Campaigns\Models\Campaign; /** * @unreleased @@ -30,7 +32,17 @@ public function addCampaignsSubmenuPage() */ public function renderCampaignsPage() { - give(LoadCampaignsListTableAssets::class)(); + if (isset($_GET['id'])) { + $campaign = Campaign::find(absint($_GET['id'])); + + if ( ! $campaign) { + wp_die(__('Campaign not found', 'give'), 404); + } + + give(LoadCampaignDetailsAssets::class)($campaign); + } else { + give(LoadCampaignsListTableAssets::class)(); + } echo '
'; } diff --git a/src/Campaigns/Routes/CreateCampaign.php b/src/Campaigns/Routes/CreateCampaign.php index 6ea2f1c9d9..420e6e9cae 100644 --- a/src/Campaigns/Routes/CreateCampaign.php +++ b/src/Campaigns/Routes/CreateCampaign.php @@ -77,7 +77,6 @@ public function registerRoute() public function handleRequest(WP_REST_Request $request): WP_REST_Response { $campaign = Campaign::create([ - 'pageId' => 0, 'type' => CampaignType::CORE(), 'title' => $request->get_param('title'), 'shortDescription' => $request->get_param('shortDescription'), diff --git a/src/Campaigns/ViewModels/CampaignDetailsPage.php b/src/Campaigns/ViewModels/CampaignDetailsPage.php new file mode 100644 index 0000000000..e61b5a7aca --- /dev/null +++ b/src/Campaigns/ViewModels/CampaignDetailsPage.php @@ -0,0 +1,41 @@ +campaign = $campaign; + } + + /** + * @unreleased + */ + public function exports(): array + { + return [ + 'overviewTab' => $this->campaign->toArray(), + 'settingsTab' => [ + 'landingPageUrl' => admin_url('?action=edit_campaign_page&campaign_id=' . $this->campaign->id), + ], + 'reportTab' => [], + 'updatesTab' => [], + ]; + } +} diff --git a/src/Campaigns/resources/admin/campaign-details.tsx b/src/Campaigns/resources/admin/campaign-details.tsx new file mode 100644 index 0000000000..730821cb88 --- /dev/null +++ b/src/Campaigns/resources/admin/campaign-details.tsx @@ -0,0 +1,6 @@ +import {createRoot} from 'react-dom/client'; +import CampaignsDetailsPage from './components/CampaignDetailsPage'; + +const container = document.getElementById('give-admin-campaigns-root'); +const root = createRoot(container!); +root.render(); diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss new file mode 100644 index 0000000000..a7f810d6f6 --- /dev/null +++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss @@ -0,0 +1,4 @@ +.container { + margin-top: 3rem; + padding: 3rem; +} diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx new file mode 100644 index 0000000000..28947d7465 --- /dev/null +++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx @@ -0,0 +1,52 @@ +import {GiveCampaignDetails} from './types'; +import styles from './CampaignDetailsPage.module.scss'; + +declare const window: { + GiveCampaignDetails: GiveCampaignDetails; +} & Window; + +export function getGiveCampaignDetailsWindowData() { + return window.GiveCampaignDetails; +} + +const {campaignDetailsPage} = getGiveCampaignDetailsWindowData(); + +console.log(Object.values(campaignDetailsPage.overviewTab)); + +export default function CampaignsDetailsPage() { + return ( +
+

+ Campaign details goes here... +

+

Just below you can see a few data from the details page separated by tabs.

+
+

+ Overview Tab +

+ +
+

+ Settings Tab +

+

+ + Edit Campaign Landing Page ⭷ + +

+
+ ); +} diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts b/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts new file mode 100644 index 0000000000..38b95c3f2a --- /dev/null +++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/types.ts @@ -0,0 +1,12 @@ +export interface GiveCampaignDetails { + apiRoot: string; + apiNonce: string; + adminUrl: string; + pluginUrl: string; + campaignDetailsPage: { + overviewTab: any; + settingsTab: { + landingPageUrl: string; + }; + }; +} diff --git a/webpack.mix.js b/webpack.mix.js index bbb3986395..23adaf9664 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -61,6 +61,7 @@ mix.setPublicPath('assets/dist') .ts('src/Promotions/InPluginUpsells/resources/js/payment-gateway.ts', 'js/payment-gateway.js') .ts('src/Promotions/WelcomeBanner/resources/js/index.tsx', 'js/welcome-banner.js') .ts('src/Campaigns/resources/admin/campaigns-list-table.tsx', 'js/give-admin-campaigns-list-table.js') + .ts('src/Campaigns/resources/admin/campaign-details.tsx', 'js/give-admin-campaign-details.js') .react() .sourceMaps(false, 'source-map')