Feature: add campaign page settings (#7624)

src/Campaigns/Actions/ConvertQueryDataToCampaign.php

@@ -21,6 +21,7 @@ public function __invoke(object $queryObject): Campaign
         return new Campaign([
             'id' => (int)$queryObject->id,
             'type' => new CampaignType($queryObject->type),
+            'enableCampaignPage' => (bool)$queryObject->enableCampaignPage,
             'title' => $queryObject->title,
             'shortDescription' => $queryObject->shortDescription,
             'longDescription' => $queryObject->longDescription,

src/Campaigns/Actions/LoadCampaignDetailsAssets.php

@@ -49,7 +49,8 @@ public function __invoke()
         wp_enqueue_style(
             $handleName,
             GIVE_PLUGIN_URL . 'build/campaignDetails.css',
-            [],
+            /** @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/#usage */
+            ['wp-components'],
             $scriptAsset['version']
         );
     }

src/Campaigns/Factories/CampaignFactory.php

@@ -22,6 +22,7 @@ public function definition(): array
 
         return [
             'type' => CampaignType::CORE(),
+            'enableCampaignPage' => true,
             'title' => __('GiveWP Campaign', 'give'),
             'shortDescription' => __('Campaign short description', 'give'),
             'longDescription' => __('Campaign long description', 'give'),

src/Campaigns/Migrations/Tables/CreateCampaignsTable.php

@@ -53,6 +53,7 @@ public function run()
             campaign_page_id INT UNSIGNED NULL,
             form_id INT NOT NULL,
             campaign_type VARCHAR(12) NOT NULL DEFAULT '',
+            enable_campaign_page BOOLEAN NOT NULL DEFAULT 1,
             campaign_title TEXT NOT NULL,
             campaign_url TEXT NOT NULL,
             short_desc TEXT NOT NULL,

src/Campaigns/Models/Campaign.php

@@ -25,6 +25,7 @@
  *
  * @property int              $id
  * @property CampaignType     $type
+ * @property bool $enableCampaignPage
  * @property string           $title
  * @property string           $url
  * @property string           $shortDescription
@@ -48,6 +49,7 @@ class Campaign extends Model implements ModelCrud, ModelHasFactory
     protected $properties = [
         'id' => 'int',
         'type' => CampaignType::class,
+        'enableCampaignPage' => ['bool', true],
         'title' => 'string',
         'shortDescription' => 'string',
         'longDescription' => 'string',

src/Campaigns/Repositories/CampaignRepository.php

@@ -76,6 +76,7 @@ public function insert(Campaign $campaign): void
             DB::table('give_campaigns')
                 ->insert([
                     'campaign_type' => $campaign->type->getValue(),
+                    'enable_campaign_page' => $campaign->enableCampaignPage,
                     'campaign_title' => $campaign->title,
                     'short_desc' => $campaign->shortDescription,
                     'long_desc' => $campaign->longDescription,
@@ -130,6 +131,7 @@ public function update(Campaign $campaign): void
                 ->where('id', $campaign->id)
                 ->update([
                     'campaign_type' => $campaign->type->getValue(),
+                    'enable_campaign_page' => $campaign->enableCampaignPage,
                     'campaign_title' => $campaign->title,
                     'short_desc' => $campaign->shortDescription,
                     'long_desc' => $campaign->longDescription,
@@ -344,6 +346,7 @@ public function prepareQuery(): ModelQueryBuilder
             ->select(
                 'id',
                 ['campaign_type', 'type'],
+                ['enable_campaign_page', 'enableCampaignPage'],
                 ['campaign_title', 'title'],
                 ['short_desc', 'shortDescription'],
                 ['long_desc', 'longDescription'],

src/Campaigns/Routes/RegisterCampaignRoutes.php

@@ -230,6 +230,11 @@ public function getSchema(): array
                     ],
                     'description' => esc_html__('Campaign goal type', 'give'),
                 ],
+                'enableCampaignPage' => [
+                    'type' => 'boolean',
+                    'default' => true,
+                    'description' => esc_html__('Enable campaign page for your campaign.', 'give'),
+                ],
                 'defaultFormId' => [
                     'type' => 'integer',
                     'description' => esc_html__('Default campaign form ID', 'give'),

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

@@ -44,7 +44,7 @@
 .page {
     box-sizing: border-box;
     color: #333;
-    font-family: Open Sans, system-ui, sans-serif;
+    font-family: Inter, system-ui, sans-serif;
     font-size: 1rem;
 
     *,
@@ -311,6 +311,74 @@ select[name="campaignId"] {
             }
         }
     }
+
+    .toggle {
+        margin: 1rem 0;
+
+        span:is(:global(.components-form-toggle .components-form-toggle__track)) {
+            width: 48px;
+            height: 24px;
+            border-radius: 133.3px;
+        }
+
+        span:is(:global(.components-form-toggle .components-form-toggle__thumb)) {
+            width: 1rem;
+            height: 1rem;
+            top: 4px;
+            left: 4px;
+        }
+
+        span:is(:global(.components-form-toggle.is-checked .components-form-toggle__thumb)) {
+
+            left: 12px;
+        }
+
+        span:is(:global(.components-form-toggle.is-checked .components-form-toggle__track)) {
+            background-color: #007cba;
+        }
+
+        span:is(:global(.components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track)) {
+            box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #007cba;
+        }
+
+        label {
+            font-family: Inter, system-ui, sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 1.5;
+            color: #1f2937;
+            padding: var(--givewp-spacing-2) 0;
+            margin-left: 0.5rem;
+        }
+
+        p {
+            font-family: Inter, system-ui, sans-serif;
+            font-size: 14px;
+            color: #4b5563;
+            margin-top: -0.1rem;
+            margin-left: 1.5rem;
+        }
+    }
+
+    .warningNotice {
+        display: flex;
+        margin: 1rem 0 -0.2rem 0;
+        gap: 0.3rem;
+        padding: 0 0.5rem 0 0.5rem;
+        background-color: #fffaf2;
+        border-radius: 4px;
+        border: 1px solid var(--givewp-orange-400);
+        border-left-width: 4px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #1a0f00;
+
+        svg {
+            margin: 0.8rem 0.3rem;
+            height: 1.25rem;
+            width: 1.25rem;
+        }
+    }
 }
 
 .loadingContainer {
@@ -336,6 +404,9 @@ select[name="campaignId"] {
 }
 
 :global(#give-admin-campaigns-root) {
+
+
+    .editCampaignPageButton,
     .updateCampaignButton {
         display: flex;
         align-content: center;
@@ -350,6 +421,12 @@ select[name="campaignId"] {
         }
     }
 
+    .editCampaignPageButton {
+        color: #060c1a;
+        background-color: #d1d5db;
+        border-color: #d1d5db;
+    }
+
 
     .campaignButtonDots {
         background-color: #d1d5db;
@@ -394,5 +471,4 @@ select[name="campaignId"] {
             font-weight: bold;
         }
     }
-
 }

src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx

@@ -3,6 +3,9 @@ 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;
@@ -19,11 +22,62 @@ export default () => {
         formState: {errors},
     } = useFormContext();
 
-    const [goalType, image, status, shortDescription] = watch(['goalType', 'image', 'status', 'shortDescription']);
+    const [goalType, image, status, shortDescription, enableCampaignPage] = watch([
+        'goalType',
+        'image',
+        'status',
+        'shortDescription',
+        'enableCampaignPage',
+    ]);
     const isDisabled = status === 'archived';
 
     return (
         <div className={styles.sections}>
+            <div className={styles.section}>
+                <div className={styles.leftColumn}>
+                    <div className={styles.sectionTitle}>{__('Campaign page', 'give')}</div>
+                    <div className={styles.sectionDescription}>
+                        {__(
+                            'Set up a landing page for your campaign. The default campaign page has the campaign details, the campaign form, and donor wall.',
+                            'give'
+                        )}
+                    </div>
+                </div>
+                <div className={styles.rightColumn}>
+                    <div className={styles.sectionField}>
+                        <img
+                            style={{marginTop: '1rem'}}
+                            src={campaignPageImage}
+                            alt={__('Enable campaign page for your campaign.', 'give')}
+                        />
+                        <div className={styles.toggle}>
+                            <ToggleControl
+                                label={__('Enable campaign page for your campaign.', 'give')}
+                                help={__('This will create a default campaign page for your campaign.', 'give')}
+                                name="enableCampaignPage"
+                                checked={enableCampaignPage}
+                                onChange={(value) => {
+                                    setValue('enableCampaignPage', value, {shouldDirty: true});
+                                }}
+                            />
+                        </div>
+                        {!enableCampaignPage && (
+                            <div className={styles.warningNotice}>
+                                <WarningIcon />
+                                <p>
+                                    {__(
+                                        'This will affect the campaign blocks associated with this campaign. Ensure that no campaign blocks are being used on any page.',
+                                        'give'
+                                    )}
+                                </p>
+                            </div>
+                        )}
+                        {errors.enableCampaignPage && (
+                            <div className={styles.errorMsg}>{`${errors.enableCampaignPage.message}`}</div>
+                        )}
+                    </div>
+                </div>
+            </div>
             <div className={styles.section}>
                 <div className={styles.leftColumn}>
                     <div className={styles.sectionTitle}>{__('Campaign Details', 'give')}</div>
@@ -159,10 +213,7 @@ const goalDescription = (type: string) => {
         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'
-            );
+            return __('Only the donors that subscribed to a recurring donation are counted toward the goal.', 'give');
         default:
             return null;
     }