Feature: add create new campaign flow

src/Campaigns/Actions/LoadCampaignsListTableAssets.php

@@ -3,6 +3,7 @@
 namespace Give\Campaigns\Actions;
 
 use Give\Campaigns\ListTable\CampaignsListTable;
+use Give\Framework\Support\Facades\Scripts\ScriptAsset;
 
 /**
  * @unreleased
@@ -15,12 +16,13 @@ class LoadCampaignsListTableAssets
     public function __invoke()
     {
         $handleName = 'givewp-admin-campaigns-list-table';
+        $asset = ScriptAsset::get(GIVE_PLUGIN_DIR . 'assets/dist/js/give-admin-campaigns-list-table.asset.php');
 
         wp_register_script(
             $handleName,
             GIVE_PLUGIN_URL . 'assets/dist/js/give-admin-campaigns-list-table.js',
-            [],
-            GIVE_VERSION,
+            $asset['dependencies'],
+            $asset['version'],
             true
         );
 

src/Campaigns/Routes/CreateCampaign.php

@@ -41,15 +41,30 @@ public function registerRoute()
                         'required' => true,
                         'sanitize_callback' => 'sanitize_text_field',
                     ],
-                    'description' => [
+                    'shortDescription' => [
                         'type' => 'string',
                         'required' => false,
                         'sanitize_callback' => 'sanitize_text_field',
                     ],
+                    'image' => [
+                        'type' => 'string',
+                        'required' => false,
+                        'sanitize_callback' => 'sanitize_url',
+                    ],
+                    'goalType' => [
+                        'type' => 'string',
+                        'required' => true,
+                        'sanitize_callback' => 'sanitize_text_field',
+                    ],
+                    'goal' => [
+                        'type' => 'int',
+                        'required' => true,
+                        'sanitize_callback' => 'absint',
+                    ],
                     'startDateTime' => [
                         'type' => 'string',
                         'format' => 'date-time', // @link https://datatracker.ietf.org/doc/html/rfc3339#section-5.8
-                        'required' => true,
+                        'required' => false,
                         'validate_callback' => 'rest_parse_date',
                         'sanitize_callback' => function ($value) {
                             return new DateTime($value);
@@ -78,17 +93,18 @@ public function handleRequest(WP_REST_Request $request): WP_REST_Response
     {
         $campaign = Campaign::create([
             'type' => CampaignType::CORE(),
-            'title' => $request->get_param('title'),
-            'shortDescription' => $request->get_param('shortDescription'),
+            'title' => $request->get_param('title') ?? '',
+            'shortDescription' => $request->get_param('shortDescription') ?? '',
             'longDescription' => '',
             'logo' => '',
-            'image' => '',
+            'image' => $request->get_param('image') ?? '',
             'primaryColor' => '',
             'secondaryColor' => '',
-            'goal' => 0,
+            //'goalType' => $request->get_param('goalType') ?? '',
+            'goal' => $request->get_param('goal') ?? '',
             'status' => CampaignStatus::DRAFT(),
-            'startDate' => $request->get_param('startDateTime'),
-            'endDate' => $request->get_param('endDateTime'),
+            'startDate' => $request->get_param('startDateTime') ?? null,
+            'endDate' => $request->get_param('endDateTime') ?? null,
         ]);
 
         return new WP_REST_Response($campaign->toArray(), 201);

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

@@ -7,5 +7,89 @@
         padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
         text-align: center;
     }
+
+    input,
+    label {
+        font-size: 1rem;
+    }
+
+    .description {
+        font-size: 0.875rem;
+        margin-bottom: 0.4rem;
+    }
+}
+
+.fieldRequired {
+    color: var(--givewp-red-500);
 }
 
+.goalType {
+
+    .goalTypeOption {
+        margin: 0.5rem 0 0.5rem 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+
+        cursor: pointer;
+        border: 1px solid #9CA0AF;
+        border-radius: 1rem;
+        padding: 0.75rem 1.5rem 0.75rem 1.5rem;
+    }
+
+    .goalTypeOptionIcon {
+
+        svg {
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+
+        path {
+            stroke: #9CA0AF;
+        }
+    }
+
+    .goalTypeOptionText {
+
+        label,
+        span {
+            cursor: pointer;
+        }
+
+        span {
+            margin-top: 0.2rem;
+            display: inline-block;
+            line-height: 1rem !important;
+        }
+
+        /* Hide the radio button input */
+        input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+        }
+    }
+
+    .goalTypeOptionSelected {
+        background-color: #374151;
+
+        .goalTypeOptionIcon {
+            svg path {
+                stroke: #F9FAFB;
+            }
+        }
+
+        .goalTypeOptionText {
+            label,
+            span {
+                color: #F9FAFB !important;
+            }
+        }
+    }
+}
+
+
+

src/Campaigns/resources/admin/components/CampaignFormModal/GoalTypeIcons.tsx

@@ -0,0 +1,40 @@
+export const AmountIcon = () => (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M21.6668 8.33333C21.6668 10.1743 17.5628 11.6667 12.5002 11.6667C7.43755 11.6667 3.3335 10.1743 3.3335 8.33333M21.6668 8.33333C21.6668 6.49238 17.5628 5 12.5002 5C7.43755 5 3.3335 6.49238 3.3335 8.33333M21.6668 8.33333V10.8333M3.3335 8.33333V28.3333C3.3335 30.1743 7.43755 31.6667 12.5002 31.6667M12.5002 18.3333C12.2193 18.3333 11.9413 18.3287 11.6668 18.3197C6.99474 18.1666 3.3335 16.7388 3.3335 15M12.5002 25C7.43755 25 3.3335 23.5076 3.3335 21.6667M36.6668 19.1667C36.6668 21.0076 32.5628 22.5 27.5002 22.5C22.4376 22.5 18.3335 21.0076 18.3335 19.1667M36.6668 19.1667C36.6668 17.3257 32.5628 15.8333 27.5002 15.8333C22.4376 15.8333 18.3335 17.3257 18.3335 19.1667M36.6668 19.1667V31.6667C36.6668 33.5076 32.5628 35 27.5002 35C22.4376 35 18.3335 33.5076 18.3335 31.6667V19.1667M36.6668 25.4167C36.6668 27.2576 32.5628 28.75 27.5002 28.75C22.4376 28.75 18.3335 27.2576 18.3335 25.4167"
+            stroke="#9CA0AF"
+            strokeWidth="3.33333"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export const DonationsIcon = () => (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            opacity="0.12"
+            d="M20.0002 24.1663C22.3013 24.1663 24.1668 22.3009 24.1668 19.9997C24.1668 17.6985 22.3013 15.833 20.0002 15.833C17.699 15.833 15.8335 17.6985 15.8335 19.9997C15.8335 22.3009 17.699 24.1663 20.0002 24.1663Z"
+            fill="black"
+        />
+        <path
+            d="M10.0002 18.3337V25.0003M30.0002 15.0003V21.667M28.3335 6.66699C32.4147 6.66699 34.6221 7.29159 35.7204 7.77606C35.8666 7.84058 35.9398 7.87284 36.1508 8.07428C36.2774 8.19502 36.5083 8.54931 36.5677 8.71381C36.6668 8.98822 36.6668 9.13822 36.6668 9.43823V27.3522C36.6668 28.8668 36.6668 29.6242 36.4397 30.0134C36.2087 30.4094 35.9858 30.5935 35.5534 30.7456C35.1283 30.8952 34.2701 30.7304 32.5538 30.4006C31.3525 30.1698 29.9277 30.0003 28.3335 30.0003C23.3335 30.0003 18.3335 33.3337 11.6668 33.3337C7.58565 33.3337 5.37827 32.7091 4.27997 32.2246C4.1337 32.1601 4.06057 32.1278 3.8495 31.9264C3.72297 31.8056 3.49203 31.4513 3.43261 31.2868C3.3335 31.0124 3.3335 30.8624 3.3335 30.5624L3.3335 12.6484C3.3335 11.1338 3.3335 10.3765 3.56063 9.98723C3.79167 9.59127 4.01448 9.40719 4.44693 9.25501C4.87206 9.10541 5.73022 9.2703 7.44654 9.60007C8.64786 9.83089 10.0726 10.0003 11.6668 10.0003C16.6668 10.0003 21.6668 6.66699 28.3335 6.66699ZM24.1668 20.0003C24.1668 22.3015 22.3014 24.167 20.0002 24.167C17.699 24.167 15.8335 22.3015 15.8335 20.0003C15.8335 17.6991 17.699 15.8337 20.0002 15.8337C22.3014 15.8337 24.1668 17.6991 24.1668 20.0003Z"
+            stroke="#9CA0AF"
+            strokeWidth="3.3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export const DonorsIcon = () => (
+    <svg width="38" height="34" viewBox="0 0 38 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M35.6668 32V28.6667C35.6668 25.5603 33.5422 22.9501 30.6668 22.21M24.8335 2.4846C27.2767 3.47358 29.0002 5.86885 29.0002 8.66667C29.0002 11.4645 27.2767 13.8598 24.8335 14.8487M27.3335 32C27.3335 28.8937 27.3335 27.3406 26.826 26.1154C26.1494 24.4819 24.8516 23.1841 23.2181 22.5075C21.9929 22 20.4398 22 17.3335 22H12.3335C9.22722 22 7.67408 22 6.44894 22.5075C4.81542 23.1841 3.51759 24.4819 2.84097 26.1154C2.3335 27.3406 2.3335 28.8937 2.3335 32M21.5002 8.66667C21.5002 12.3486 18.5154 15.3333 14.8335 15.3333C11.1516 15.3333 8.16683 12.3486 8.16683 8.66667C8.16683 4.98477 11.1516 2 14.8335 2C18.5154 2 21.5002 4.98477 21.5002 8.66667Z"
+            stroke="#9CA0AF"
+            strokeWidth="3.3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);