From b0769df10014bd434cd08658dbe6e289b12c3a30 Mon Sep 17 00:00:00 2001
From: josephchimebuka <chimebujoseph@gmail.com>
Date: Mon, 22 Jun 2026 14:36:54 +0000
Subject: [PATCH] feat: multi-step campaign creation form (#86)

Build the multi-step form container that manages step navigation.

- Add src/pages/campaigns/CreateCampaignPage.jsx as the step container
- Manage the current step via formStep in the campaigns Redux slice
- Render the correct step component based on formStep (Details -> Funding -> Media -> Review)
- Add Next and Back buttons plus a progress indicator for navigation
- Persist form inputs in draftCampaign Redux state so data is retained when going back
- Warn on unsaved changes via useBeforeUnload when leaving the page
- Route /create (and /campaigns/create) to the new page, replacing the placeholder

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/features/campaigns/campaignsSlice.js   |  48 +++++++-
 src/pages/CreateCampaign.jsx               |  10 --
 src/pages/campaigns/CreateCampaignPage.jsx | 137 +++++++++++++++++++++
 src/pages/campaigns/steps/DetailsStep.jsx  |  66 ++++++++++
 src/pages/campaigns/steps/FundingStep.jsx  |  45 +++++++
 src/pages/campaigns/steps/MediaStep.jsx    |  45 +++++++
 src/pages/campaigns/steps/ReviewStep.jsx   |  35 ++++++
 src/routes/AppRouter.jsx                   |  11 +-
 8 files changed, 383 insertions(+), 14 deletions(-)
 delete mode 100644 src/pages/CreateCampaign.jsx
 create mode 100644 src/pages/campaigns/CreateCampaignPage.jsx
 create mode 100644 src/pages/campaigns/steps/DetailsStep.jsx
 create mode 100644 src/pages/campaigns/steps/FundingStep.jsx
 create mode 100644 src/pages/campaigns/steps/MediaStep.jsx
 create mode 100644 src/pages/campaigns/steps/ReviewStep.jsx

diff --git a/src/features/campaigns/campaignsSlice.js b/src/features/campaigns/campaignsSlice.js
index 2929833..9bec630 100644
--- a/src/features/campaigns/campaignsSlice.js
+++ b/src/features/campaigns/campaignsSlice.js
@@ -1,18 +1,64 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+export const CAMPAIGN_STEPS = ['details', 'funding', 'media', 'review'];
+
+const emptyDraft = {
+    title: '',
+    category: '',
+    description: '',
+    goalAmount: '',
+    deadline: '',
+    coverImageUrl: '',
+};
+
 const initialState = {
     items: [],
     loading: false,
     error: null,
+    // Multi-step "Create Campaign" form state
+    formStep: 0,
+    draftCampaign: { ...emptyDraft },
 };
 
 const campaignsSlice = createSlice({
     name: 'campaigns',
     initialState,
     reducers: {
-        // Reducer placeholders
+        setFormStep(state, action) {
+            const step = action.payload;
+            if (step >= 0 && step < CAMPAIGN_STEPS.length) {
+                state.formStep = step;
+            }
+        },
+        nextStep(state) {
+            if (state.formStep < CAMPAIGN_STEPS.length - 1) {
+                state.formStep += 1;
+            }
+        },
+        prevStep(state) {
+            if (state.formStep > 0) {
+                state.formStep -= 1;
+            }
+        },
+        updateDraftCampaign(state, action) {
+            state.draftCampaign = { ...state.draftCampaign, ...action.payload };
+        },
+        resetCampaignForm(state) {
+            state.formStep = 0;
+            state.draftCampaign = { ...emptyDraft };
+        },
     },
 });
 
+export const {
+    setFormStep,
+    nextStep,
+    prevStep,
+    updateDraftCampaign,
+    resetCampaignForm,
+} = campaignsSlice.actions;
+
+export const selectFormStep = (state) => state.campaigns.formStep;
+export const selectDraftCampaign = (state) => state.campaigns.draftCampaign;
 
 export default campaignsSlice.reducer;
diff --git a/src/pages/CreateCampaign.jsx b/src/pages/CreateCampaign.jsx
deleted file mode 100644
index 5f26b00..0000000
--- a/src/pages/CreateCampaign.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const CreateCampaign = () => {
-  return (
-    <div>
-      <h1>Create Campaign</h1>
-      <p>Start a new social impact project.</p>
-    </div>
-  );
-};
-
-export default CreateCampaign;
diff --git a/src/pages/campaigns/CreateCampaignPage.jsx b/src/pages/campaigns/CreateCampaignPage.jsx
new file mode 100644
index 0000000..5eac9ec
--- /dev/null
+++ b/src/pages/campaigns/CreateCampaignPage.jsx
@@ -0,0 +1,137 @@
+import { useCallback, useMemo } from 'react';
+import { useBeforeUnload } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  CAMPAIGN_STEPS,
+  nextStep,
+  prevStep,
+  resetCampaignForm,
+  selectDraftCampaign,
+  selectFormStep,
+} from '../../features/campaigns/campaignsSlice';
+import DetailsStep from './steps/DetailsStep';
+import FundingStep from './steps/FundingStep';
+import MediaStep from './steps/MediaStep';
+import ReviewStep from './steps/ReviewStep';
+
+const STEP_META = [
+  { id: 'details', title: 'Campaign Details', Component: DetailsStep },
+  { id: 'funding', title: 'Funding Goal', Component: FundingStep },
+  { id: 'media', title: 'Media', Component: MediaStep },
+  { id: 'review', title: 'Review & Submit', Component: ReviewStep },
+];
+
+const hasUnsavedData = (draft) =>
+  Object.values(draft).some((value) => String(value).trim() !== '');
+
+const CreateCampaignPage = () => {
+  const dispatch = useDispatch();
+  const formStep = useSelector(selectFormStep);
+  const draft = useSelector(selectDraftCampaign);
+
+  const isDirty = useMemo(() => hasUnsavedData(draft), [draft]);
+
+  // Warn the user before leaving/refreshing the tab when there are unsaved changes.
+  useBeforeUnload(
+    useCallback(
+      (event) => {
+        if (isDirty) {
+          event.preventDefault();
+          event.returnValue = '';
+        }
+      },
+      [isDirty]
+    )
+  );
+
+  const isFirstStep = formStep === 0;
+  const isLastStep = formStep === CAMPAIGN_STEPS.length - 1;
+  const { title, Component } = STEP_META[formStep];
+
+  const handleNext = () => dispatch(nextStep());
+  const handleBack = () => dispatch(prevStep());
+
+  const handleSubmit = () => {
+    // Placeholder submit; integrates with campaign service in a later issue.
+    console.log('Submitting campaign draft:', draft);
+    dispatch(resetCampaignForm());
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-primary">Create Campaign</h1>
+        <p className="text-slate-500">Start a new social impact project.</p>
+      </div>
+
+      {/* Step progress indicator */}
+      <ol className="flex items-center gap-2">
+        {STEP_META.map((step, index) => {
+          const isComplete = index < formStep;
+          const isCurrent = index === formStep;
+          return (
+            <li key={step.id} className="flex flex-1 items-center gap-2">
+              <span
+                className={[
+                  'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold',
+                  isCurrent
+                    ? 'bg-accent text-white'
+                    : isComplete
+                      ? 'bg-green-500 text-white'
+                      : 'bg-slate-200 text-slate-500',
+                ].join(' ')}
+              >
+                {isComplete ? '✓' : index + 1}
+              </span>
+              {index < STEP_META.length - 1 && (
+                <span
+                  className={`hidden h-0.5 flex-1 rounded sm:block ${
+                    isComplete ? 'bg-green-500' : 'bg-slate-200'
+                  }`}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h2 className="mb-4 text-lg font-semibold text-primary">
+          Step {formStep + 1}: {title}
+        </h2>
+        <Component />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={handleBack}
+          disabled={isFirstStep}
+          className="rounded-lg border border-slate-300 px-5 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Back
+        </button>
+
+        {isLastStep ? (
+          <button
+            type="button"
+            onClick={handleSubmit}
+            className="rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
+          >
+            Submit Campaign
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={handleNext}
+            className="rounded-lg bg-accent px-5 py-2 text-sm font-medium text-white transition-colors hover:opacity-90"
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CreateCampaignPage;
diff --git a/src/pages/campaigns/steps/DetailsStep.jsx b/src/pages/campaigns/steps/DetailsStep.jsx
new file mode 100644
index 0000000..75ad09e
--- /dev/null
+++ b/src/pages/campaigns/steps/DetailsStep.jsx
@@ -0,0 +1,66 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { selectDraftCampaign, updateDraftCampaign } from '../../../features/campaigns/campaignsSlice';
+
+const CATEGORIES = ['Education', 'Health', 'Environment', 'Disaster Relief', 'Community'];
+
+const DetailsStep = () => {
+  const dispatch = useDispatch();
+  const draft = useSelector(selectDraftCampaign);
+
+  const handleChange = (field) => (event) => {
+    dispatch(updateDraftCampaign({ [field]: event.target.value }));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="title" className="mb-1 block text-sm font-medium text-slate-700">
+          Campaign Title
+        </label>
+        <input
+          id="title"
+          type="text"
+          value={draft.title}
+          onChange={handleChange('title')}
+          placeholder="e.g. Clean Water Initiative"
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="category" className="mb-1 block text-sm font-medium text-slate-700">
+          Category
+        </label>
+        <select
+          id="category"
+          value={draft.category}
+          onChange={handleChange('category')}
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        >
+          <option value="">Select a category</option>
+          {CATEGORIES.map((category) => (
+            <option key={category} value={category}>
+              {category}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="description" className="mb-1 block text-sm font-medium text-slate-700">
+          Description
+        </label>
+        <textarea
+          id="description"
+          rows={5}
+          value={draft.description}
+          onChange={handleChange('description')}
+          placeholder="Tell backers about your campaign..."
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DetailsStep;
diff --git a/src/pages/campaigns/steps/FundingStep.jsx b/src/pages/campaigns/steps/FundingStep.jsx
new file mode 100644
index 0000000..d6af83c
--- /dev/null
+++ b/src/pages/campaigns/steps/FundingStep.jsx
@@ -0,0 +1,45 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { selectDraftCampaign, updateDraftCampaign } from '../../../features/campaigns/campaignsSlice';
+
+const FundingStep = () => {
+  const dispatch = useDispatch();
+  const draft = useSelector(selectDraftCampaign);
+
+  const handleChange = (field) => (event) => {
+    dispatch(updateDraftCampaign({ [field]: event.target.value }));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="goalAmount" className="mb-1 block text-sm font-medium text-slate-700">
+          Funding Goal (XLM)
+        </label>
+        <input
+          id="goalAmount"
+          type="number"
+          min="0"
+          value={draft.goalAmount}
+          onChange={handleChange('goalAmount')}
+          placeholder="e.g. 10000"
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="deadline" className="mb-1 block text-sm font-medium text-slate-700">
+          Campaign Deadline
+        </label>
+        <input
+          id="deadline"
+          type="date"
+          value={draft.deadline}
+          onChange={handleChange('deadline')}
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FundingStep;
diff --git a/src/pages/campaigns/steps/MediaStep.jsx b/src/pages/campaigns/steps/MediaStep.jsx
new file mode 100644
index 0000000..41cc4aa
--- /dev/null
+++ b/src/pages/campaigns/steps/MediaStep.jsx
@@ -0,0 +1,45 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { selectDraftCampaign, updateDraftCampaign } from '../../../features/campaigns/campaignsSlice';
+
+const MediaStep = () => {
+  const dispatch = useDispatch();
+  const draft = useSelector(selectDraftCampaign);
+
+  const handleChange = (field) => (event) => {
+    dispatch(updateDraftCampaign({ [field]: event.target.value }));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="coverImageUrl" className="mb-1 block text-sm font-medium text-slate-700">
+          Cover Image URL
+        </label>
+        <input
+          id="coverImageUrl"
+          type="url"
+          value={draft.coverImageUrl}
+          onChange={handleChange('coverImageUrl')}
+          placeholder="https://example.com/image.jpg"
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-accent focus:ring-accent"
+        />
+      </div>
+
+      {draft.coverImageUrl ? (
+        <div className="overflow-hidden rounded-lg border border-slate-200">
+          <img
+            src={draft.coverImageUrl}
+            alt="Campaign cover preview"
+            className="h-48 w-full object-cover"
+          />
+        </div>
+      ) : (
+        <div className="flex h-48 items-center justify-center rounded-lg border border-dashed border-slate-300 text-sm text-slate-400">
+          Image preview will appear here
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MediaStep;
diff --git a/src/pages/campaigns/steps/ReviewStep.jsx b/src/pages/campaigns/steps/ReviewStep.jsx
new file mode 100644
index 0000000..c4e16ea
--- /dev/null
+++ b/src/pages/campaigns/steps/ReviewStep.jsx
@@ -0,0 +1,35 @@
+import { useSelector } from 'react-redux';
+import { selectDraftCampaign } from '../../../features/campaigns/campaignsSlice';
+
+const FIELDS = [
+  { key: 'title', label: 'Title' },
+  { key: 'category', label: 'Category' },
+  { key: 'description', label: 'Description' },
+  { key: 'goalAmount', label: 'Funding Goal (XLM)' },
+  { key: 'deadline', label: 'Deadline' },
+  { key: 'coverImageUrl', label: 'Cover Image URL' },
+];
+
+const ReviewStep = () => {
+  const draft = useSelector(selectDraftCampaign);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-slate-500">
+        Review your campaign details before submitting.
+      </p>
+      <dl className="divide-y divide-slate-100 rounded-lg border border-slate-200">
+        {FIELDS.map((field) => (
+          <div key={field.key} className="grid grid-cols-1 gap-1 px-4 py-3 sm:grid-cols-3">
+            <dt className="text-sm font-medium text-slate-500">{field.label}</dt>
+            <dd className="break-words text-sm text-slate-900 sm:col-span-2">
+              {draft[field.key] || <span className="text-slate-400">Not provided</span>}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+export default ReviewStep;
diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx
index d26d6e3..8a74778 100644
--- a/src/routes/AppRouter.jsx
+++ b/src/routes/AppRouter.jsx
@@ -20,7 +20,7 @@ import VerifyEmailPage from '../pages/auth/VerifyEmailPage';
 const Home = lazy(() => import('../pages/Home'));
 const Explore = lazy(() => import('../pages/Explore'));
 const CampaignDetails = lazy(() => import('../pages/CampaignDetails'));
-const CreateCampaign = lazy(() => import('../pages/CreateCampaign'));
+const CreateCampaignPage = lazy(() => import('../pages/campaigns/CreateCampaignPage'));
 const Admin = lazy(() => import('../pages/Admin'));
 
 // Dashboard sub-pages
@@ -50,7 +50,12 @@ const AppRouter = () => {
               <Route path="campaign/:id" element={<CampaignDetails />} />
               <Route path="create" element={
                 <ProtectedRoute>
-                  <CreateCampaign />
+                  <CreateCampaignPage />
+                </ProtectedRoute>
+              } />
+              <Route path="campaigns/create" element={
+                <ProtectedRoute>
+                  <CreateCampaignPage />
                 </ProtectedRoute>
               } />
               <Route path="test-error" element={<ErrorTest />} />
@@ -92,4 +97,4 @@ const AppRouter = () => {
   );
 };
 
-export default AppRouter;
\ No newline at end of file
+export default AppRouter;