Feature: Archive campaigns

src/Campaigns/Controllers/CampaignRequestController.php

@@ -101,6 +101,7 @@ public function updateCampaign(WP_REST_Request $request)
         }
 
         $statusMap = [
+            'archived' => CampaignStatus::ARCHIVED(),
             'draft' => CampaignStatus::DRAFT(),
             'active' => CampaignStatus::ACTIVE(),
         ];

src/Campaigns/ListTable/Columns/StatusColumn.php

@@ -40,6 +40,9 @@ public function getCellValue($model)
             case 'inactive':
                 $statusLabel = __('Inactive', 'give');
                 break;
+            case 'archived':
+                $statusLabel = __('Archived', 'give');
+                break;
             case 'draft':
                 $statusLabel = __('Draft', 'give');
                 break;

src/Campaigns/Routes/RegisterCampaignRoutes.php

@@ -206,7 +206,7 @@ public function getSchema(): array
                     'errorMessage' => esc_html__('Campaign title is required', 'give'),
                 ],
                 'status' => [
-                    'enum' => ['active', 'inactive', 'draft', 'pending', 'processing', 'failed'],
+                    'enum' => ['active', 'inactive', 'draft', 'pending', 'processing', 'failed', 'archived'],
                     'description' => esc_html__('Campaign status', 'give'),
                 ],
                 'shortDescription' => [

src/Campaigns/ValueObjects/CampaignStatus.php

@@ -9,12 +9,14 @@
  *
  * Statuses copied from https://github.com/impress-org/give-peer-to-peer/blob/develop/src/P2P/ValueObjects/Status.php
  *
+ * @method static CampaignStatus ARCHIVED()
  * @method static CampaignStatus ACTIVE()
  * @method static CampaignStatus INACTIVE()
  * @method static CampaignStatus DRAFT()
  * @method static CampaignStatus PENDING()
  * @method static CampaignStatus PROCESSING()
  * @method static CampaignStatus FAILED()
+ * @method bool isArchived()
  * @method bool isActive()
  * @method bool isInactive()
  * @method bool isDraft()
@@ -24,6 +26,7 @@
  */
 class CampaignStatus extends Enum
 {
+    const ARCHIVED  = 'archived';
     const ACTIVE  = 'active';
     const INACTIVE  = 'inactive';
     const DRAFT = 'draft';

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

@@ -73,6 +73,7 @@
 }
 
 .flexRow {
+    position: relative;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -118,6 +119,34 @@
     font-weight: 600;
 }
 
+.status {
+    padding-inline: 0.5rem;
+    padding-block: 0.185rem;
+    border-radius: 1rem;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: capitalize;
+    letter-spacing: 0.04rem;
+    transform: translateY(0.075rem);
+    color: #ffffff;
+
+    &.draftStatus {
+        background: #FFDAA6;
+        color: #1A0F00;
+
+    }
+
+    &.activeStatus {
+        background: #CEF2CF;
+        color: #022603;
+    }
+
+    &.archiveStatus {
+        background: #dadada;
+        color: #0e0e0e;
+    }
+}
+
 select[name="campaignId"] {
     display: none;
 }
@@ -133,7 +162,6 @@ select[name="campaignId"] {
     border-bottom: 0.0625rem solid #dbdbdb;
 
     &:not(.fullWidth) {
-        margin-bottom: var(--givewp-spacing-6);
         padding: 0 var(--givewp-spacing-6);
     }
 }
@@ -181,11 +209,50 @@ select[name="campaignId"] {
     background-color: #66bb6a;
 }
 
+.archiveDialogContent {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.5;
+    padding: var(--givewp-spacing-3);
+}
+
+.archiveDialogButtons {
+    display: flex;
+    flex-direction: row;
+    padding: var(--givewp-spacing-3);
+    justify-content: space-between;
+    gap: 10px;
+
+    button {
+        cursor: pointer;
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        border-radius: 4px;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        padding: var(--givewp-spacing-3) var(--givewp-spacing-6);
+        border: none;
+    }
+
+    .cancelButton {
+        border: 1px solid #9ca0af;
+        background-color: #fff;
+        color: #1f2937;
+    }
+
+    .confirmButton {
+        border: 1px solid #d92d0b;
+        background-color: #d92d0b;
+        color: #fff;
+    }
+}
+
 .pageContent {
     /*padding: 0 var(--givewp-spacing-6) var(--givewp-spacing-6);*/
 
     &:not(.fullWidth) {
-        padding: 0 var(--givewp-spacing-6) var(--givewp-spacing-6);
+        padding: var(--givewp-spacing-6) var(--givewp-spacing-6);
     }
 
     section {
@@ -255,7 +322,8 @@ select[name="campaignId"] {
             }
 
             input,
-            select {
+            select,
+            textarea {
                 font-size: 16px;
                 line-height: 2;
                 display: block;
@@ -309,4 +377,50 @@ select[name="campaignId"] {
             margin: 3px 0 0 8px !important;
         }
     }
+
+
+    .campaignButtonDots {
+        background-color: #d1d5db;
+        border-color: #d1d5db;
+        border-radius: var(--givewp-rounded-4);
+        line-height: 0;
+        padding: var(--givewp-spacing-2);
+    }
+
+    .contextMenu {
+        position: absolute;
+        z-index: 9999;
+        padding: var(--givewp-spacing-1);
+        top: 50px;
+        width: 203px;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        border: solid 1px #f3f4f6;
+        background-color: #fff;
+
+        .contextMenuItem {
+            text-decoration: none;
+            gap: 5px;
+            display: flex;
+            align-items: center;
+            padding: var(--givewp-spacing-2);
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 1.43;
+            color: #1f2937;
+
+            &:hover {
+                background-color: #f3f4f6;
+            }
+        }
+
+        .archive {
+            color: #d92d0b;
+        }
+
+        .draft {
+            font-weight: bold;
+        }
+    }
+
 }

src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/ArchiveCampaignDialog.tsx

@@ -0,0 +1,53 @@
+import {__} from '@wordpress/i18n'
+import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
+import {ErrorIcon} from '../../Icons';
+import styles from '../CampaignDetailsPage.module.scss'
+
+/**
+ * @unreleased
+ */
+export default ({
+    isOpen,
+    title,
+    handleClose,
+    handleConfirm,
+    className,
+}: {
+    isOpen: boolean;
+    handleClose: () => void;
+    handleConfirm: () => void;
+    title: string;
+    className?: string;
+}) => {
+    return (
+        <ModalDialog
+            icon={<ErrorIcon />}
+            isOpen={isOpen}
+            showHeader={true}
+            handleClose={handleClose}
+            title={title}
+            wrapperClassName={className}
+        >
+            <>
+                <div className={styles.archiveDialogContent}>
+                    {__('Are you sure you want to archive your campaign? All forms associated with this campaign will be inaccessible to donors.', 'give')}
+                </div>
+                <div className={styles.archiveDialogButtons}>
+                    <button
+                        className={styles.cancelButton}
+                        onClick={handleClose}
+
+                    >
+                        {__('Cancel', 'give')}
+                    </button>
+                    <button
+                        className={styles.confirmButton}
+                        onClick={handleConfirm}
+                    >
+                        {__('Archive campaign', 'give')}
+                    </button>
+                </div>
+            </>
+        </ModalDialog>
+    );
+}

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

@@ -1,6 +1,3 @@
-import {__} from '@wordpress/i18n';
-
-import styles from '../CampaignDetailsPage.module.scss';
 import CampaignStats from "../Components/CampaignStats";
 
 /**

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

@@ -35,8 +35,8 @@ export default () => {
         }
     };
 
-    const goalType = watch('goalType');
-    const image = watch('image');
+    const [goalType, image, status, shortDescription] = watch(['goalType', 'image', 'status', 'shortDescription']);
+    const isDisabled = status === 'archived';
 
     return (
         <div className={styles.sections}>
@@ -54,7 +54,7 @@ export default () => {
                             {__("Give your campaign a title that tells donors what it's about.", 'give')}
                         </div>
 
-                        <input {...register('title')} />
+                        <input {...register('title')} disabled={isDisabled} />
 
                         {errors.title && <div className={styles.errorMsg}>{`${errors.title.message}`}</div>}
                     </div>
@@ -65,7 +65,11 @@ export default () => {
                             {__('Let your donors know the story behind your campaign.', 'give')}
                         </div>
 
-                        <Editor name="shortDescription" />
+                        {isDisabled ? (
+                            <textarea disabled={true} rows={10}>{shortDescription.replace(/(<([^>]+)>)/gi, '')}</textarea>
+                        ) : (
+                            <Editor name="shortDescription" />
+                        )}
 
                         {errors.shortDescription && (
                             <div className={styles.errorMsg}>{`${errors.shortDescription.message}`}</div>
@@ -81,6 +85,7 @@ export default () => {
                         </div>
 
                         <Upload
+                            disabled={isDisabled}
                             id="givewp-campaigns-upload-cover-image"
                             label={__('Cover', 'give')}
                             actionLabel={__('Select to upload', 'give')}
@@ -109,7 +114,7 @@ export default () => {
                             {__('Set the details of your campaign goal here.', 'give')}
                         </div>
 
-                        <select {...register('goalType')}>
+                        <select {...register('goalType')} disabled={isDisabled}>
                             <option value="amount">{__('Amount raised', 'give')}</option>
                             <option value="donation">{__('Number of Donations', 'give')}</option>
                             <option value="donors">{__('Number of Donors', 'give')}</option>
@@ -126,9 +131,9 @@ export default () => {
                     </div>
 
                     {goalType === 'amount' ? (
-                        <Currency name="goal" currency={window.GiveCampaignDetails.currency} />
+                        <Currency name="goal" currency={window.GiveCampaignDetails.currency} disabled={isDisabled} />
                     ) : (
-                        <input type="number" {...register('goal', {valueAsNumber: true})} />
+                        <input type="number" {...register('goal', {valueAsNumber: true})} disabled={isDisabled} />
                     )}
 
                     {errors.goal && <div className={styles.errorMsg}>{`${errors.goal.message}`}</div>}

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

@@ -5,6 +5,7 @@ import {CampaignDetailsTab} from '../types';
 
 import styles from '../CampaignDetailsPage.module.scss';
 import tabsDefinitions from './definitions';
+import NotificationsPlaceholder from '../../Notifications';
 
 const tabs: CampaignDetailsTab[] = tabsDefinitions;
 
@@ -74,6 +75,8 @@ export default () => {
 
             <div className={cx('wp-header-end', 'hidden')} />
 
+            <NotificationsPlaceholder type="notice" />
+
             <div className={`${styles.pageContent} ${activeTab.fullwidth ? styles.fullWidth : ''}`}>
                 {Object.values(tabs).map((tab) => (
                     <TabPanel key={tab.id} id={tab.id}>