refactor(marketing): Standardize marketing wizard steps with initial data support

- Add support for initial data in all marketing wizard step components
- Update step presenters to accept and handle initial data
- Modify forwardRef implementations to include initialData prop
- Add TypeScript interfaces for step component props
- Improve type safety and data handling across marketing wizard steps
- Prepare components for edit and create workflows with consistent data management

src/app/marketing/_components/BenefitsStep.tsx

@@ -5,7 +5,11 @@ import useBenefitsStepPresenter, {
   IBenefitsStepFields,
 } from "./useBenefitsStepPresenter";
 
-const BenefitsStep = forwardRef((props, ref) => {
+interface BenefitsStepProps {
+  initialData?: IBenefitsStepFields;
+}
+
+const BenefitsStep = forwardRef<unknown, BenefitsStepProps>(({ initialData }, ref) => {
   const {
     errors,
     handleSubmit,
@@ -16,7 +20,7 @@ const BenefitsStep = forwardRef((props, ref) => {
     remove,
     control,
     getValues,
-  } = useBenefitsStepPresenter();
+  } = useBenefitsStepPresenter(initialData);
 
   useImperativeHandle(ref, () => ({
     getData: () => getValues(),

src/app/marketing/_components/ChallengesStep.tsx

@@ -5,7 +5,12 @@ import useChallengesStepPresenter, {
   IChallengesStepFields,
 } from "./useChallengesStepPresenter";
 
-const ChallengesStep = forwardRef((props, ref) => {
+interface ChallengesStepProps {
+  initialData?: IChallengesStepFields;
+}
+
+const ChallengesStep = forwardRef<unknown, ChallengesStepProps>(
+  ({ initialData }, ref) => {
     const {
       errors,
       handleSubmit,
@@ -16,7 +21,7 @@ const ChallengesStep = forwardRef((props, ref) => {
       remove,
       control,
       getValues,
-  } = useChallengesStepPresenter();
+    } = useChallengesStepPresenter(initialData);
 
     useImperativeHandle(ref, () => ({
       getData: () => getValues(),
@@ -37,7 +42,8 @@ const ChallengesStep = forwardRef((props, ref) => {
         defaultValues={{ icon: "", title: "", description: "" }}
       />
     );
-});
+  },
+);
 
 ChallengesStep.displayName = "ChallengesStep";
 

src/app/marketing/_components/ChartStep.tsx

@@ -8,7 +8,12 @@ import { forwardRef, useImperativeHandle } from "react";
 import { ChartPreview } from "./ChartPreview";
 import useChartStepPresenter from "./useChartStepPresenter";
 
-const ChartStep = forwardRef((props, ref) => {
+interface ChartStepProps {
+  initialData?: any;
+}
+
+const ChartStep = forwardRef<unknown, ChartStepProps>(
+  ({ initialData }, ref) => {
     const {
       errors,
       handleSubmit,
@@ -19,7 +24,7 @@ const ChartStep = forwardRef((props, ref) => {
       remove,
       watch,
       getValues,
-  } = useChartStepPresenter();
+    } = useChartStepPresenter(initialData);
 
     useImperativeHandle(ref, () => ({
       getData: () => getValues(),
@@ -130,7 +135,8 @@ const ChartStep = forwardRef((props, ref) => {
         <div className="flex flex-col gap-9"></div>
       </form>
     );
-});
+  },
+);
 
 ChartStep.displayName = "ChartStep";
 

src/app/marketing/_components/ContactsStep.tsx

@@ -7,9 +7,14 @@ import { FormErrorMessages } from "@/constants/Texts";
 import { forwardRef, useImperativeHandle } from "react";
 import useContactsStepPresenter from "./useContactsStepPresenter";
 
-const ContactsStep = forwardRef((props, ref) => {
+interface ContactsStepProps {
+  initialData?: any;
+}
+
+const ContactsStep = forwardRef<unknown, ContactsStepProps>(
+  ({ initialData }, ref) => {
     const { errors, handleSubmit, onSubmit, register, fields, getValues } =
-    useContactsStepPresenter();
+      useContactsStepPresenter(initialData);
 
     useImperativeHandle(ref, () => ({
       getData: () => getValues(),
@@ -20,7 +25,10 @@ const ContactsStep = forwardRef((props, ref) => {
         className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
         onSubmit={handleSubmit(onSubmit)}
       >
-      <ShowcaseSection title="Contacts Section" className="flex flex-col gap-5">
+        <ShowcaseSection
+          title="Contacts Section"
+          className="flex flex-col gap-5"
+        >
           <div className="flex flex-col gap-9">
             <InputGroup
               {...register("title", {
@@ -93,7 +101,8 @@ const ContactsStep = forwardRef((props, ref) => {
         </ShowcaseSection>
       </form>
     );
-});
+  },
+);
 
 ContactsStep.displayName = "ContactsStep";
 

src/app/marketing/_components/FeaturesStep.tsx

@@ -5,7 +5,12 @@ import useFeaturesStepPresenter, {
   IFeaturesStepFields,
 } from "./useFeaturesStepPresenter";
 
-const FeaturesStep = forwardRef((props, ref) => {
+interface FeaturesStepProps {
+  initialData?: IFeaturesStepFields;
+}
+
+const FeaturesStep = forwardRef<unknown, FeaturesStepProps>(
+  ({ initialData }, ref) => {
     const {
       errors,
       handleSubmit,
@@ -16,7 +21,7 @@ const FeaturesStep = forwardRef((props, ref) => {
       remove,
       control,
       getValues,
-  } = useFeaturesStepPresenter();
+    } = useFeaturesStepPresenter(initialData);
 
     useImperativeHandle(ref, () => ({
       getData: () => getValues(),
@@ -37,7 +42,8 @@ const FeaturesStep = forwardRef((props, ref) => {
         defaultValues={{ icon: "", title: "", description: "" }}
       />
     );
-});
+  },
+);
 
 FeaturesStep.displayName = "FeaturesStep";
 

src/app/marketing/_components/FooterStep.tsx

@@ -6,9 +6,14 @@ import { FormErrorMessages } from "@/constants/Texts";
 import { forwardRef, useImperativeHandle } from "react";
 import useFooterStepPresenter from "./useFooterStepPresenter";
 
-const FooterStep = forwardRef((props, ref) => {
+interface FooterStepProps {
+  initialData?: any;
+}
+
+const FooterStep = forwardRef<unknown, FooterStepProps>(
+  ({ initialData }, ref) => {
     const { errors, handleSubmit, onSubmit, register, getValues } =
-    useFooterStepPresenter();
+      useFooterStepPresenter(initialData);
 
     useImperativeHandle(ref, () => ({
       getData: () => getValues(),
@@ -71,7 +76,8 @@ const FooterStep = forwardRef((props, ref) => {
         </ShowcaseSection>
       </form>
     );
-});
+  },
+);
 
 FooterStep.displayName = "FooterStep";
 

src/app/marketing/_components/HeroStep.tsx

@@ -7,8 +7,13 @@ import { FormErrorMessages } from "@/constants/Texts";
 import { forwardRef, useImperativeHandle } from "react";
 import useHeroStepPresenter from "./useHeroStepPresenter";
 
-const HeroStep = forwardRef((props, ref) => {
+interface HeroStepProps {
-  const { errors, handleSubmit, onSubmit, register, getValues } = useHeroStepPresenter();
+  initialData?: any;
+}
+
+const HeroStep = forwardRef<unknown, HeroStepProps>(({ initialData }, ref) => {
+  const { errors, handleSubmit, onSubmit, register, getValues } =
+    useHeroStepPresenter(initialData);
 
   useImperativeHandle(ref, () => ({
     getData: () => getValues(),
@@ -114,7 +119,10 @@ const HeroStep = forwardRef((props, ref) => {
           <InputGroup
             {...register("gifFile", {
               required: { message: FormErrorMessages.required, value: true },
-              pattern: {message: FormErrorMessages.invalidPattern, value: REGEX.URL}
+              pattern: {
+                message: FormErrorMessages.invalidPattern,
+                value: REGEX.URL,
+              },
             })}
             label="GIF File URL"
             name="gifFile"

src/app/marketing/_components/MarketingForm.tsx

@@ -0,0 +1,371 @@
+"use client";
+import { GlobeIcon } from "@/assets/icons";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Stepper, { Step } from "@/components/ui/Stepper";
+import { Countries } from "@/constants/countries";
+import { FormErrorMessages } from "@/constants/Texts";
+import { BreadcrumbItem } from "@/types/shared";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import BenefitsStep from "./BenefitsStep";
+import ChallengesStep from "./ChallengesStep";
+import ChartStep from "./ChartStep";
+import ContactsStep from "./ContactsStep";
+import FeaturesStep from "./FeaturesStep";
+import FooterStep from "./FooterStep";
+import HeroStep from "./HeroStep";
+
+interface IPageTypeFields {
+  type: "company" | "organization";
+  language?: string;
+  company_name?: string;
+  country?: string;
+  key: string;
+}
+
+interface MarketingFormProps {
+  breadcrumbItems: BreadcrumbItem[];
+  title: string;
+  onSubmit: (data: any) => void;
+  isPending: boolean;
+  initialData?: any;
+}
+
+const MarketingForm = ({
+  breadcrumbItems,
+  title,
+  onSubmit,
+  isPending,
+  initialData,
+}: MarketingFormProps) => {
+  const [step, setStep] = useState(0);
+  const [formData, setFormData] = useState<any>(initialData || {});
+  const heroRef = useRef<any>(null);
+  const chartRef = useRef<any>(null);
+  const featuresRef = useRef<any>(null);
+  const challengesRef = useRef<any>(null);
+  const benefitsRef = useRef<any>(null);
+  const contactsRef = useRef<any>(null);
+  const footerRef = useRef<any>(null);
+
+  const {
+    register: registerPageType,
+    watch: watchPageType,
+    formState: { errors: pageTypeErrors },
+    getValues: getPageTypeValues,
+    setValue,
+    reset,
+  } = useForm<IPageTypeFields>({
+    defaultValues: {
+      type: "company",
+    },
+  });
+
+  useEffect(() => {
+    if (initialData) {
+      const formValues = {
+        type: initialData.type || "company",
+        language: initialData.language || "",
+        company_name: initialData.company_name || "",
+        country: initialData.country || "",
+        key: initialData.key || "",
+      };
+      reset(formValues);
+      setFormData(initialData);
+    }
+  }, [initialData, reset]);
+
+  const pageType = watchPageType("type");
+  const isCompany = pageType === "company";
+
+  const saveCurrentStepData = async () => {
+    const refs = [
+      heroRef,
+      chartRef,
+      featuresRef,
+      challengesRef,
+      benefitsRef,
+      contactsRef,
+      footerRef,
+    ];
+
+    const keys = [
+      "hero",
+      "chart",
+      "features",
+      "challenges",
+      "advantages",
+      "contact",
+      "footer",
+    ];
+
+    const currentRef = refs[step];
+    if (currentRef?.current?.getData) {
+      try {
+        const data = await currentRef.current.getData();
+        setFormData((prev: any) => ({
+          ...prev,
+          [keys[step]]: data,
+        }));
+      } catch (error) {
+        console.error(`Error collecting data from step ${step}:`, error);
+      }
+    }
+  };
+
+  const collectAllStepsData = async () => {
+    await saveCurrentStepData();
+
+    const refs = [
+      heroRef,
+      chartRef,
+      featuresRef,
+      challengesRef,
+      benefitsRef,
+      contactsRef,
+      footerRef,
+    ];
+
+    const allData: any = { ...formData };
+
+    const keys = [
+      "hero",
+      "chart",
+      "features",
+      "challenges",
+      "advantages",
+      "contact",
+      "footer",
+    ];
+
+    for (let i = 0; i < refs.length; i++) {
+      const ref = refs[i];
+      if (ref?.current?.getData) {
+        try {
+          const data = await ref.current.getData();
+          allData[keys[i]] = data;
+        } catch (error) {
+          console.error(`Error collecting data from step ${i}:`, error);
+        }
+      }
+    }
+
+    return allData;
+  };
+
+  const handleSubmitAll = async () => {
+    const allData = await collectAllStepsData();
+    const pageTypeData = getPageTypeValues();
+
+    const finalData = {
+      ...allData,
+      type: pageTypeData.type,
+      key: pageTypeData.key,
+      ...(pageTypeData.type === "company" && {
+        language: pageTypeData.language,
+        company_name: pageTypeData.company_name,
+        country: pageTypeData.country,
+      }),
+    };
+
+    onSubmit(finalData);
+  };
+
+  const steps: Step[] = [
+    {
+      title: "Hero",
+      description: "Create the hero section",
+      content: <></>,
+    },
+    {
+      title: "Chart",
+      description: "Create the chart",
+      content: <></>,
+    },
+    {
+      title: "Features",
+      description: "Add features",
+      content: <></>,
+    },
+    {
+      title: "Challenges",
+      description: "Create challenges section",
+      content: <></>,
+    },
+    {
+      title: "Benefits",
+      description: "create benefits section",
+      content: <></>,
+    },
+    {
+      title: "Contacts",
+      description: "Create contacts section",
+      content: <></>,
+    },
+    {
+      title: "Footer",
+      description: "Add footer information",
+      content: <></>,
+    },
+  ];
+
+  const handleStepChange = async (newStep: number) => {
+    await saveCurrentStepData();
+    setStep(newStep);
+  };
+
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <ShowcaseSection title={title}>
+        <div className="mb-6 rounded-xl bg-gray-1 p-6 dark:bg-gray-7">
+          <h3 className="mb-4 text-lg font-semibold text-dark dark:text-white">
+            Page Configuration
+          </h3>
+          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+            <Select
+              {...registerPageType("type", {
+                required: { message: FormErrorMessages.required, value: true },
+              })}
+              name="type"
+              label="Page Type"
+              required
+              items={[
+                { value: "company", label: "Company" },
+                { value: "organization", label: "Organization" },
+              ]}
+            />
+            {pageTypeErrors.type && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.type.message}
+              </p>
+            )}
+
+            <InputGroup
+              {...registerPageType("language", {
+                required: isCompany
+                  ? { message: FormErrorMessages.required, value: true }
+                  : false,
+                minLength: isCompany
+                  ? { value: 2, message: FormErrorMessages.minLength(2) }
+                  : undefined,
+                maxLength: isCompany
+                  ? { value: 10, message: FormErrorMessages.maxLength(10) }
+                  : undefined,
+              })}
+              label="Language"
+              name="language"
+              type="text"
+              placeholder="Enter Language (e.g., en, ar)"
+              disabled={!isCompany}
+              required={isCompany}
+            />
+            {pageTypeErrors.language && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.language.message}
+              </p>
+            )}
+
+            <InputGroup
+              {...registerPageType("company_name", {
+                required: isCompany
+                  ? { message: FormErrorMessages.required, value: true }
+                  : false,
+                minLength: isCompany
+                  ? { value: 2, message: FormErrorMessages.minLength(2) }
+                  : undefined,
+                maxLength: isCompany
+                  ? { value: 200, message: FormErrorMessages.maxLength(200) }
+                  : undefined,
+              })}
+              label="Company Name"
+              name="company_name"
+              type="text"
+              placeholder="Enter Company Name"
+              disabled={!isCompany}
+              required={isCompany}
+            />
+            {pageTypeErrors.company_name && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.company_name.message}
+              </p>
+            )}
+            <Select
+              {...registerPageType("country")}
+              name="country"
+              label="Country"
+              items={Countries}
+              defaultValue="USA"
+              clearable
+              prefixIcon={<GlobeIcon />}
+              disabled={!isCompany}
+              required={isCompany}
+              placeholder="Please select country"
+              onClear={() => setValue("country", undefined)}
+            />
+            {pageTypeErrors.country && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.country.message}
+              </p>
+            )}
+            <InputGroup
+              {...registerPageType("key", {
+                required: {
+                  value: true,
+                  message: FormErrorMessages.required,
+                },
+              })}
+              label="Page key"
+              name="key"
+              placeholder="Please enter page key"
+              type="text"
+            />
+            {pageTypeErrors.key && (
+              <p className="mt-1 text-sm text-red-500">
+                {pageTypeErrors.key.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div style={{ display: step === 0 ? "block" : "none" }}>
+          <HeroStep ref={heroRef} initialData={formData.hero} />
+        </div>
+        <div style={{ display: step === 1 ? "block" : "none" }}>
+          <ChartStep ref={chartRef} initialData={formData.chart} />
+        </div>
+        <div style={{ display: step === 2 ? "block" : "none" }}>
+          <FeaturesStep ref={featuresRef} initialData={formData.features} />
+        </div>
+        <div style={{ display: step === 3 ? "block" : "none" }}>
+          <ChallengesStep
+            ref={challengesRef}
+            initialData={formData.challenges}
+          />
+        </div>
+        <div style={{ display: step === 4 ? "block" : "none" }}>
+          <BenefitsStep ref={benefitsRef} initialData={formData.advantages} />
+        </div>
+        <div style={{ display: step === 5 ? "block" : "none" }}>
+          <ContactsStep ref={contactsRef} initialData={formData.contact} />
+        </div>
+        <div style={{ display: step === 6 ? "block" : "none" }}>
+          <FooterStep ref={footerRef} initialData={formData.footer} />
+        </div>
+
+        <Stepper
+          steps={steps}
+          currentStep={step}
+          onStepChange={handleStepChange}
+          onSubmit={handleSubmitAll}
+          isSubmitting={isPending}
+        />
+      </ShowcaseSection>
+    </>
+  );
+};
+
+export default MarketingForm;

src/app/marketing/_components/useBenefitsStepPresenter.ts

@@ -11,7 +11,7 @@ export interface IBenefitsStepFields {
   }[];
 }
 
-const useBenefitsStepPresenter = () => {
+const useBenefitsStepPresenter = (initialData?: IBenefitsStepFields) => {
   const {
     register,
     handleSubmit,
@@ -20,7 +20,7 @@ const useBenefitsStepPresenter = () => {
     formState: { errors },
     getValues,
   } = useForm<IBenefitsStepFields>({
-    defaultValues: {
+    defaultValues: initialData || {
       cards: [{ icon: "", title: "", description: "" }],
     },
   });

src/app/marketing/_components/useChallengesStepPresenter.ts

@@ -11,7 +11,7 @@ export interface IChallengesStepFields {
   }[];
 }
 
-const useChallengesStepPresenter = () => {
+const useChallengesStepPresenter = (initialData?: IChallengesStepFields) => {
   const {
     register,
     handleSubmit,
@@ -20,7 +20,7 @@ const useChallengesStepPresenter = () => {
     formState: { errors },
     getValues,
   } = useForm<IChallengesStepFields>({
-    defaultValues: {
+    defaultValues: initialData || {
       cards: [{ icon: "", title: "", description: "" }],
     },
   });

src/app/marketing/_components/useChartStepPresenter.ts

@@ -7,7 +7,7 @@ export interface IChartStepFields {
   data: { key: string; value: number }[];
 }
 
-const useChartStepPresenter = () => {
+const useChartStepPresenter = (initialData?: IChartStepFields) => {
   const {
     register,
     handleSubmit,
@@ -16,7 +16,7 @@ const useChartStepPresenter = () => {
     formState: { errors },
     getValues,
   } = useForm<IChartStepFields>({
-    defaultValues: {
+    defaultValues: initialData || {
       data: [{ key: "", value: 0 }],
     },
   });

src/app/marketing/_components/useContactsStepPresenter.ts

@@ -13,7 +13,7 @@ export interface IContactsStepFields {
   }[];
 }
 
-const useContactsStepPresenter = () => {
+const useContactsStepPresenter = (initialData?: IContactsStepFields) => {
   const {
     register,
     handleSubmit,
@@ -21,7 +21,7 @@ const useContactsStepPresenter = () => {
     getValues,
     formState: { errors },
   } = useForm<IContactsStepFields>({
-    defaultValues: {
+    defaultValues: initialData || {
       fields: [
         {
           name: "first_name",

src/app/marketing/_components/useFeaturesStepPresenter.ts

@@ -11,7 +11,7 @@ export interface IFeaturesStepFields {
   }[];
 }
 
-const useFeaturesStepPresenter = () => {
+const useFeaturesStepPresenter = (initialData?: IFeaturesStepFields) => {
   const {
     register,
     handleSubmit,
@@ -20,7 +20,7 @@ const useFeaturesStepPresenter = () => {
     formState: { errors },
     getValues,
   } = useForm<IFeaturesStepFields>({
-    defaultValues: {
+    defaultValues: initialData || {
       cards: [{ icon: "", title: "", description: "" }],
     },
   });

src/app/marketing/_components/useFooterStepPresenter.ts

@@ -8,13 +8,15 @@ interface FooterFormValues {
   copyright: string;
 }
 
-const useFooterStepPresenter = () => {
+const useFooterStepPresenter = (initialData?: FooterFormValues) => {
   const {
     register,
     handleSubmit,
     formState: { errors },
     getValues,
-  } = useForm<FooterFormValues>();
+  } = useForm<FooterFormValues>({
+    defaultValues: initialData,
+  });
 
   const onSubmit = (data: FooterFormValues) => {
     console.log(data);

src/app/marketing/_components/useHeroStepPresenter.ts

@@ -9,13 +9,15 @@ export interface IHeroStepFields {
   gifFile: string;
 }
 
-const useHeroStepPresenter = () => {
+const useHeroStepPresenter = (initialData?: IHeroStepFields) => {
   const {
     register,
     handleSubmit,
     formState: { errors },
     getValues,
-  } = useForm<IHeroStepFields>();
+  } = useForm<IHeroStepFields>({
+    defaultValues: initialData,
+  });
 
   const onSubmit = (data: IHeroStepFields) => {
     console.log(data);

src/app/marketing/create/page.tsx

@@ -1,58 +1,9 @@
 "use client";
-import { GlobeIcon } from "@/assets/icons";
-import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
-import InputGroup from "@/components/FormElements/InputGroup";
-import { Select } from "@/components/FormElements/select";
-import { ShowcaseSection } from "@/components/Layouts/showcase-section";
-import Stepper, { Step } from "@/components/ui/Stepper";
-import { Countries } from "@/constants/countries";
-import { FormErrorMessages } from "@/constants/Texts";
 import { useCreateCms } from "@/hooks/queries/useCmsQueries";
 import { BreadcrumbItem } from "@/types/shared";
-import { useRef, useState } from "react";
+import MarketingForm from "../_components/MarketingForm";
-import { useForm } from "react-hook-form";
-import BenefitsStep from "../_components/BenefitsStep";
-import ChallengesStep from "../_components/ChallengesStep";
-import ChartStep from "../_components/ChartStep";
-import ContactsStep from "../_components/ContactsStep";
-import FeaturesStep from "../_components/FeaturesStep";
-import FooterStep from "../_components/FooterStep";
-import HeroStep from "../_components/HeroStep";
-
-interface IPageTypeFields {
-  type: "company" | "organization";
-  language?: string;
-  company_name?: string;
-  country?: string;
-  key: string;
-}
 
 const Marketing = () => {
-  const [step, setStep] = useState(0);
-  const [formData, setFormData] = useState<any>({});
-  const heroRef = useRef<any>(null);
-  const chartRef = useRef<any>(null);
-  const featuresRef = useRef<any>(null);
-  const challengesRef = useRef<any>(null);
-  const benefitsRef = useRef<any>(null);
-  const contactsRef = useRef<any>(null);
-  const footerRef = useRef<any>(null);
-
-  const {
-    register: registerPageType,
-    watch: watchPageType,
-    formState: { errors: pageTypeErrors },
-    getValues: getPageTypeValues,
-    setValue,
-  } = useForm<IPageTypeFields>({
-    defaultValues: {
-      type: "company",
-    },
-  });
-
-  const pageType = watchPageType("type");
-  const isCompany = pageType === "company";
-
   const { mutate: createCms, isPending } = useCreateCms();
 
   const breadcrumbItems: BreadcrumbItem[] = [
@@ -70,101 +21,8 @@ const Marketing = () => {
     },
   ];
 
-  const saveCurrentStepData = async () => {
+  const handleSubmit = (data: any) => {
-    const refs = [
+    createCms(data, {
-      heroRef,
-      chartRef,
-      featuresRef,
-      challengesRef,
-      benefitsRef,
-      contactsRef,
-      footerRef,
-    ];
-
-    const keys = [
-      "hero",
-      "chart",
-      "features",
-      "challenges",
-      "advantages",
-      "contact",
-      "footer",
-    ];
-
-    const currentRef = refs[step];
-    if (currentRef?.current?.getData) {
-      try {
-        const data = await currentRef.current.getData();
-        setFormData((prev: any) => ({
-          ...prev,
-          [keys[step]]: data,
-        }));
-      } catch (error) {
-        console.error(`Error collecting data from step ${step}:`, error);
-      }
-    }
-  };
-
-  const collectAllStepsData = async () => {
-    // First save current step data
-    await saveCurrentStepData();
-
-    const refs = [
-      heroRef,
-      chartRef,
-      featuresRef,
-      challengesRef,
-      benefitsRef,
-      contactsRef,
-      footerRef,
-    ];
-
-    const allData: any = { ...formData };
-
-    const keys = [
-      "hero",
-      "chart",
-      "features",
-      "challenges",
-      "advantages",
-      "contact",
-      "footer",
-    ];
-
-    // Collect any remaining data from refs
-    for (let i = 0; i < refs.length; i++) {
-      const ref = refs[i];
-      if (ref?.current?.getData) {
-        try {
-          const data = await ref.current.getData();
-          allData[keys[i]] = data;
-        } catch (error) {
-          console.error(`Error collecting data from step ${i}:`, error);
-        }
-      }
-    }
-
-    return allData;
-  };
-
-  const handleSubmitAll = async () => {
-    const allData = await collectAllStepsData();
-    const pageTypeData = getPageTypeValues();
-
-    const finalData = {
-      ...allData,
-      type: pageTypeData.type,
-      key: pageTypeData.key,
-      ...(pageTypeData.type === "company" && {
-        language: pageTypeData.language,
-        company_name: pageTypeData.company_name,
-        country: pageTypeData.country,
-      }),
-    };
-
-    console.log("All collected data:", finalData);
-
-    createCms(finalData, {
       onSuccess: () => {
         console.log("CMS created successfully");
       },
@@ -174,196 +32,13 @@ const Marketing = () => {
     });
   };
 
-  const steps: Step[] = [
-    {
-      title: "Hero",
-      description: "Create the hero section",
-      content: <></>,
-    },
-    {
-      title: "Chart",
-      description: "Create the chart",
-      content: <></>,
-    },
-    {
-      title: "Features",
-      description: "Add features",
-      content: <></>,
-    },
-    {
-      title: "Challenges",
-      description: "Create challenges section",
-      content: <></>,
-    },
-    {
-      title: "Benefits",
-      description: "create benefits section",
-      content: <></>,
-    },
-    {
-      title: "Contacts",
-      description: "Create contacts section",
-      content: <></>,
-    },
-    {
-      title: "Footer",
-      description: "Add footer information",
-      content: <></>,
-    },
-  ];
-
-  const handleStepChange = async (newStep: number) => {
-    await saveCurrentStepData();
-    setStep(newStep);
-  };
-
   return (
-    <>
+    <MarketingForm
-      <Breadcrumb items={breadcrumbItems} />
+      breadcrumbItems={breadcrumbItems}
-      <ShowcaseSection title="Create Marketing page">
+      title="Create Marketing page"
-        {/* Page Type Selection */}
+      onSubmit={handleSubmit}
-        <div className="mb-6 rounded-xl bg-gray-1 p-6 dark:bg-gray-7">
+      isPending={isPending}
-          <h3 className="mb-4 text-lg font-semibold text-dark dark:text-white">
-            Page Configuration
-          </h3>
-          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
-            <Select
-              {...registerPageType("type", {
-                required: { message: FormErrorMessages.required, value: true },
-              })}
-              name="type"
-              label="Page Type"
-              required
-              items={[
-                { value: "company", label: "Company" },
-                { value: "organization", label: "Organization" },
-              ]}
     />
-            {pageTypeErrors.type && (
-              <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.type.message}
-              </p>
-            )}
-
-            <InputGroup
-              {...registerPageType("language", {
-                required: isCompany
-                  ? { message: FormErrorMessages.required, value: true }
-                  : false,
-                minLength: isCompany
-                  ? { value: 2, message: FormErrorMessages.minLength(2) }
-                  : undefined,
-                maxLength: isCompany
-                  ? { value: 10, message: FormErrorMessages.maxLength(10) }
-                  : undefined,
-              })}
-              label="Language"
-              name="language"
-              type="text"
-              placeholder="Enter Language (e.g., en, ar)"
-              disabled={!isCompany}
-              required={isCompany}
-            />
-            {pageTypeErrors.language && (
-              <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.language.message}
-              </p>
-            )}
-
-            <InputGroup
-              {...registerPageType("company_name", {
-                required: isCompany
-                  ? { message: FormErrorMessages.required, value: true }
-                  : false,
-                minLength: isCompany
-                  ? { value: 2, message: FormErrorMessages.minLength(2) }
-                  : undefined,
-                maxLength: isCompany
-                  ? { value: 200, message: FormErrorMessages.maxLength(200) }
-                  : undefined,
-              })}
-              label="Company Name"
-              name="company_name"
-              type="text"
-              placeholder="Enter Company Name"
-              disabled={!isCompany}
-              required={isCompany}
-            />
-            {pageTypeErrors.company_name && (
-              <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.company_name.message}
-              </p>
-            )}
-            <Select
-              {...registerPageType("country")}
-              name="country"
-              label="Country"
-              items={Countries}
-              defaultValue="USA"
-              clearable
-              prefixIcon={<GlobeIcon />}
-              disabled={!isCompany}
-              required={isCompany}
-              placeholder="Please select country"
-              onClear={() => setValue("country", undefined)}
-            />
-            {pageTypeErrors.country && (
-              <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.country.message}
-              </p>
-            )}
-            <InputGroup
-              {...registerPageType("key", {
-                required: {
-                  value: true,
-                  message: FormErrorMessages.required,
-                },
-              })}
-              label="Page key"
-              name="key"
-              placeholder="Please enter page key"
-              type="text"
-            />
-            {pageTypeErrors.key && (
-              <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.key.message}
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* Render all steps but only show the current one */}
-        <div style={{ display: step === 0 ? "block" : "none" }}>
-          <HeroStep ref={heroRef} />
-        </div>
-        <div style={{ display: step === 1 ? "block" : "none" }}>
-          <ChartStep ref={chartRef} />
-        </div>
-        <div style={{ display: step === 2 ? "block" : "none" }}>
-          <FeaturesStep ref={featuresRef} />
-        </div>
-        <div style={{ display: step === 3 ? "block" : "none" }}>
-          <ChallengesStep ref={challengesRef} />
-        </div>
-        <div style={{ display: step === 4 ? "block" : "none" }}>
-          <BenefitsStep ref={benefitsRef} />
-        </div>
-        <div style={{ display: step === 5 ? "block" : "none" }}>
-          <ContactsStep ref={contactsRef} />
-        </div>
-        <div style={{ display: step === 6 ? "block" : "none" }}>
-          <FooterStep ref={footerRef} />
-        </div>
-
-        <Stepper
-          steps={steps}
-          currentStep={step}
-          onStepChange={handleStepChange}
-          onSubmit={handleSubmitAll}
-          isSubmitting={isPending}
-        />
-      </ShowcaseSection>
-    </>
   );
 };
 

src/app/marketing/edit/[id]/page.tsx

@@ -1,15 +1,19 @@
+"use client";
 import Loading from "@/app/loading";
-import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import { useGetCmsDetails, useUpdateCms } from "@/hooks/queries/useCmsQueries";
-import { useGetCmsDetails } from "@/hooks/queries/useCmsQueries";
 import { BreadcrumbItem } from "@/types/shared";
 import { use } from "react";
+import MarketingForm from "../../_components/MarketingForm";
 
 interface IProps {
   params: Promise<{ id: string }>;
 }
-const EditMarketingPage = async ({ params }: IProps) => {
+
+const EditMarketingPage = ({ params }: IProps) => {
   const { id } = use(params);
-  const { data, isPending } = useGetCmsDetails(id);
+  const { data, isPending: isLoading } = useGetCmsDetails(id);
+  const { mutate: updateCms, isPending: isUpdating } = useUpdateCms(id);
+
   const breadcrumbItems: BreadcrumbItem[] = [
     {
       href: "/",
@@ -24,10 +28,29 @@ const EditMarketingPage = async ({ params }: IProps) => {
       name: "Edit Marketing",
     },
   ];
-  if (isPending) return <Loading />;
+
+  const handleSubmit = (formData: any) => {
+    updateCms(formData, {
+      onSuccess: () => {
+        console.log("CMS updated successfully");
+      },
+      onError: (error) => {
+        console.error("Error updating CMS:", error);
+      },
+    });
+  };
+
+  if (isLoading || !data?.data) return <Loading />;
+
   return (
-    <>
+    <MarketingForm
-      <Breadcrumb items={breadcrumbItems} />
+      breadcrumbItems={breadcrumbItems}
-    </>
+      title="Edit Marketing page"
+      onSubmit={handleSubmit}
+      isPending={isUpdating}
+      initialData={data.data}
+    />
   );
 };
+
+export default EditMarketingPage;

src/hooks/queries/useCmsQueries.ts

@@ -56,3 +56,25 @@ export const useDeleteCms = (successCallback?: () => void) => {
     },
   });
 };
+export const useUpdateCms = (id: string) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.CMS.BASE(id), "Update cms"],
+    [id],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: (data: any) => cmsService.updateCms({ id, data }),
+    onSuccess: () => {
+      toast.success("CMS updated successfully");
+      router.push("/marketing");
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.CMS.BASE()],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.CMS.BASE(id)],
+      });
+    },
+  });
+};

src/lib/api/services/cms-service.ts

@@ -1,7 +1,7 @@
 import api from "../axios";
 import { API_ENDPOINTS } from "../endpoints";
 import { ApiResponse } from "../types";
-import { TCmsListResponse } from "../types/TCms";
+import { TCms, TCmsListResponse } from "../types/TCms";
 
 export const cmsService = {
   getCms: async (): Promise<ApiResponse<TCmsListResponse>> => {
@@ -36,4 +36,18 @@ export const cmsService = {
       throw error;
     }
   },
+  updateCms: async ({
+    id,
+    data,
+  }: {
+    id: string;
+    data: any;
+  }): Promise<{ data: TCms; message: string }> => {
+    try {
+      return (await api.put(API_ENDPOINTS.CMS.BASE(id), data)).data;
+    } catch (error) {
+      console.error("Error Caught in CMS Service => Update cms", error);
+      throw error;
+    }
+  },
 };