Feature: add merge campaigns UI (#7612)

src/Campaigns/ListTable/CampaignsListTable.php

@@ -5,9 +5,9 @@
 use Give\Campaigns\ListTable\Columns\DonationsCountColumn;
 use Give\Campaigns\ListTable\Columns\GoalColumn;
 use Give\Campaigns\ListTable\Columns\IdColumn;
-use Give\Campaigns\ListTable\Columns\NameColumn;
 use Give\Campaigns\ListTable\Columns\RevenueColumn;
 use Give\Campaigns\ListTable\Columns\StatusColumn;
+use Give\Campaigns\ListTable\Columns\TitleColumn;
 use Give\Framework\ListTable\ListTable;
 use Give\Framework\ListTable\ModelColumn;
 
@@ -34,7 +34,7 @@ protected function getDefaultColumns(): array
         // TODO We need to decide which columns should be displayed
         return [
             new IdColumn(),
-            new NameColumn(),
+            new TitleColumn(),
             new GoalColumn(),
             new DonationsCountColumn(),
             new RevenueColumn(),
@@ -55,7 +55,7 @@ protected function getDefaultVisibleColumns(): array
     {
         return [
             IdColumn::getId(),
-            NameColumn::getId(),
+            TitleColumn::getId(),
             GoalColumn::getId(),
             DonationsCountColumn::getId(),
             RevenueColumn::getId(),

src/Campaigns/ListTable/Columns/NameColumn.php → src/Campaigns/ListTable/Columns/TitleColumn.php

@@ -8,16 +8,16 @@
 /**
  * @unreleased
  */
-class NameColumn extends ModelColumn
+class TitleColumn extends ModelColumn
 {
-    protected $sortColumn = 'name';
+    protected $sortColumn = 'title';
 
     /**
      * @unreleased
      */
     public static function getId(): string
     {
-        return 'name';
+        return 'title';
     }
 
     /**

src/Campaigns/resources/admin/components/CampaignsListTable/index.tsx

@@ -8,6 +8,7 @@ import {CampaignsRowActions} from './CampaignsRowActions';
 import styles from './CampaignsListTable.module.scss';
 import {GiveCampaignsListTable} from './types';
 import CreateCampaignModal from '../CreateCampaignModal';
+import MergeCampaignModal from '../MergeCampaign/Modal';
 
 declare const window: {
     GiveCampaignsListTable: GiveCampaignsListTable;
@@ -90,6 +91,25 @@ const bulkActions: Array<BulkActionsConfig> = [
             </>
         ),
     },
+    {
+        label: __('Merge', 'give'),
+        value: 'merge',
+        type: 'urlAction',
+        action: async (selected) => {
+            return await new Promise((resolve) => setTimeout(resolve, 0));
+        },
+        confirm: (selected, names) => {
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.set('action', 'merge');
+            window.history.replaceState(
+                {selected: selected, names: names},
+                __('Merge Campaings', 'give'),
+                `${window.location.pathname}?${urlParams.toString()}`
+            );
+
+            return null;
+        },
+    },
 ];
 
 /**
@@ -134,6 +154,7 @@ export default function CampaignsListTable() {
                 listTableBlankSlate={ListTableBlankSlate()}
             >
                 <CreateCampaignModal />
+                <MergeCampaignModal />
             </ListTablePage>
         </>
     );

src/Campaigns/resources/admin/components/MergeCampaign/Form/Form.module.scss

@@ -0,0 +1,96 @@
+.campaignForm {
+
+    .intro {
+        font-size: 1rem;
+        color: #4b5563;
+        align-self: stretch;
+        padding: 0 1.25rem 0 0.625rem;
+        margin: unset;
+    }
+
+    .submitButton {
+        border-radius: 0;
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 1.43;
+        padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
+        text-align: center;
+    }
+
+    label {
+        font-size: 1rem;
+    }
+
+    input,
+    select,
+    textarea {
+        font-size: 1rem;
+        line-height: 2;
+        display: block;
+        width: 100%;
+        border: 1px solid #9ca0af;
+        border-radius: var(--givewp-spacing-1);
+        padding: var(--givewp-spacing-2);
+    }
+
+    select {
+        max-width: 100%;
+    }
+
+    .description {
+        font-size: 0.875rem;
+        margin-bottom: 0.4rem;
+    }
+
+    .notice {
+        display: flex;
+        margin: 1rem 0 -0.2rem 0;
+        gap: 0.3rem;
+        padding: 0 0.5rem 0 0.5rem;
+        background-color: var(--givewp-blue-25);
+        border-radius: 4px;
+        border: 1px solid var(--givewp-blue-400);
+        border-left-width: 4px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #1a0f00;
+
+        svg {
+            margin: 0.7rem 0.3rem;
+            height: 1.25rem;
+            width: 1.25rem;
+        }
+    }
+
+    .returnMessage {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        gap: 1.5rem;
+
+        span {
+            margin: -1rem 3rem 1rem 3rem;
+        }
+    }
+}
+
+.fieldRequired {
+    color: var(--givewp-red-500);
+}
+
+.button:is(:global(.button)) {
+    border-radius: var(--givewp-rounded-8)
+}
+
+.previousButton:is(:global(.button)) {
+    background-color: transparent;
+    border: solid 1px #9ca0af;
+    color: #060c1a;
+
+    &:hover {
+        border: solid 1px #9ca0af;
+        color: #060c1a;
+    }
+}