Feature: add campaign details page (#7531)

src/Campaigns/Actions/LoadCampaignDetailsAssets.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Give\Campaigns\Actions;
+
+use Give\Campaigns\Models\Campaign;
+use Give\Campaigns\ViewModels\CampaignDetailsPage;
+
+/**
+ * @unreleased
+ */
+class LoadCampaignDetailsAssets
+{
+    /**
+     * @unreleased
+     */
+    public function __invoke(Campaign $campaign)
+    {
+        $handleName = 'givewp-admin-campaign-details';
+
+        wp_register_script(
+            $handleName,
+            GIVE_PLUGIN_URL . 'assets/dist/js/give-admin-campaign-details.js',
+            [],
+            GIVE_VERSION,
+            true
+        );
+
+        wp_localize_script($handleName, 'GiveCampaignDetails',
+            [
+                'apiRoot' => 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');
+    }
+}

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 '<div id="give-admin-campaigns-root"></div>';
     }

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'),

src/Campaigns/ViewModels/CampaignDetailsPage.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Give\Campaigns\ViewModels;
+
+use Give\Campaigns\Models\Campaign;
+
+/**
+ * @unreleased
+ */
+class CampaignDetailsPage
+{
+    /**
+     * @unreleased
+     *
+     * @var Campaign
+     */
+    protected $campaign;
+
+    /**
+     * @unreleased
+     */
+    public function __construct(Campaign $campaign)
+    {
+        $this->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' => [],
+        ];
+    }
+}

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(<CampaignsDetailsPage />);

src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss

@@ -0,0 +1,4 @@
+.container {
+    margin-top: 3rem;
+    padding: 3rem;
+}

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 (
+        <div className={styles.container}>
+            <h1>
+                <strong>Campaign details goes here...</strong>
+            </h1>
+            <p>Just below you can see a few data from the details page separated by tabs.</p>
+            <br />
+            <h2>
+                <strong>Overview Tab</strong>
+            </h2>
+            <ul>
+                {Object.entries(campaignDetailsPage.overviewTab).map(([property, value], index) => (
+                    <li key={index}>
+                        <span>
+                            <strong>{property}:</strong> {String(value)}
+                        </span>
+                    </li>
+                ))}
+            </ul>
+            <br />
+            <h2>
+                <strong>Settings Tab</strong>
+            </h2>
+            <p>
+                <a
+                    style={{fontSize: '1.5rem'}}
+                    href={campaignDetailsPage.settingsTab.landingPageUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Edit Campaign Landing Page ⭷
+                </a>
+            </p>
+        </div>
+    );
+}

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;
+        };
+    };
+}

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')