feat(marketing): Refactor marketing wizard steps and add data collection methods

- Moved all marketing wizard step components to `create/_components` directory
- Added `collectData` static method to each step component for data retrieval
- Reorganized file structure to improve component modularity
- Prepared steps for dynamic data collection in wizard workflow
- Added VSCode settings file for project configuration
- Introduced new CMS-related components and services
- Updated API endpoints and added new query hooks

src/app/marketing/create/_components/ChallengesStep.tsx

@@ -33,3 +33,8 @@ const ChallengesStep = () => {
 };
 
 export default ChallengesStep;
+
+ChallengesStep.collectData = async () => {
+  const { getValues } = useChallengesStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/ChartStep.tsx

@@ -125,3 +125,8 @@ const ChartStep = () => {
 };
 
 export default ChartStep;
+
+ChartStep.collectData = async () => {
+  const { getValues } = useChartStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/ContactsStep.tsx

@@ -90,3 +90,13 @@ const ContactsStep = () => {
 };
 
 export default ContactsStep;
+
+ContactsStep.collectData = async () => {
+  const { getValues } = useContactsStepPresenter();
+  return getValues();
+}
+
+ContactsStep.collectData = async () => {
+  const { getValues } = useContactsStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/FeaturesStep.tsx

@@ -33,3 +33,8 @@ const FeaturesStep = () => {
 };
 
 export default FeaturesStep;
+
+FeaturesStep.collectData = async () => {
+  const { getValues } = useFeaturesStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/FooterStep.tsx

@@ -69,4 +69,9 @@ const FooterStep = () => {
   );
 };
 
-export default FooterStep;
+export default FooterStep;
+
+FooterStep.collectData = async () => {
+  const { getValues } = useFooterStepPresenter();
+  return getValues();
+}

src/app/marketing/create/_components/HeroStep.tsx

@@ -131,4 +131,9 @@ const HeroStep = () => {
   );
 };
 
+HeroStep.collectData = async () => {
+  const { getValues } = useHeroStepPresenter();
+  return getValues();
+}
+
 export default HeroStep;

src/app/marketing/create/_components/useChallengesStepPresenter.ts

@@ -18,6 +18,7 @@ const useChallengesStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IChallengesStepFields>({
     defaultValues: {
       challenges: [{ icon: "", title: "", description: "" }],
@@ -33,6 +34,10 @@ const useChallengesStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -43,7 +48,9 @@ const useChallengesStepPresenter = () => {
     remove,
     control,
     watch,
-  };
+    getValues,
+    collectData
+ };
 };
 
 export default useChallengesStepPresenter;

src/app/marketing/create/_components/useChartStepPresenter.ts

@@ -14,6 +14,7 @@ const useChartStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IChartStepFields>({
     defaultValues: {
       chart_points: [{ x: "", y: 0 }],
@@ -29,6 +30,10 @@ const useChartStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -39,6 +44,8 @@ const useChartStepPresenter = () => {
     remove,
     control,
     watch,
+    getValues,
+    collectData
   };
 };
 

src/app/marketing/create/_components/useContactsStepPresenter.ts

@@ -18,6 +18,8 @@ const useContactsStepPresenter = () => {
     register,
     handleSubmit,
     control,
+    getValues,
+
     formState: { errors },
   } = useForm<IContactsStepFields>({
     defaultValues: {
@@ -49,6 +51,10 @@ const useContactsStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -56,6 +62,8 @@ const useContactsStepPresenter = () => {
     onSubmit,
     fields,
     control,
+    collectData,
+    getValues,
   };
 };
 

src/app/marketing/create/_components/useFeaturesStepPresenter.ts

@@ -18,6 +18,7 @@ const useFeaturesStepPresenter = () => {
     control,
     watch,
     formState: { errors },
+    getValues
   } = useForm<IFeaturesStepFields>({
     defaultValues: {
       features: [{ icon: "", title: "", description: "" }],
@@ -33,6 +34,10 @@ const useFeaturesStepPresenter = () => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
@@ -43,7 +48,9 @@ const useFeaturesStepPresenter = () => {
     remove,
     control,
     watch,
-  };
+    getValues,
+    collectData
+ };
 };
 
 export default useFeaturesStepPresenter;

src/app/marketing/create/_components/useFooterStepPresenter.ts

@@ -13,18 +13,25 @@ const useFooterStepPresenter = () => {
     register,
     handleSubmit,
     formState: { errors },
+    getValues
   } = useForm<FooterFormValues>();
 
   const onSubmit = (data: FooterFormValues) => {
     console.log(data);
   };
 
+  const collectData = async () => {
+    return getValues();
+  };
+
   return {
     register,
     handleSubmit,
     onSubmit,
     errors,
-  };
+   collectData,
+   getValues,
+ };
 };
 
 export default useFooterStepPresenter;

src/app/marketing/create/_components/useHeroStepPresenter.ts

@@ -14,6 +14,7 @@ const useHeroStepPresenter = () => {
     register,
     handleSubmit,
     formState: { errors },
+    getValues,
   } = useForm<IHeroStepFields>();
 
   const onSubmit = (data: IHeroStepFields) => {
@@ -25,7 +26,13 @@ const useHeroStepPresenter = () => {
     handleSubmit,
     errors,
     onSubmit,
+    getValues,
   };
 };
 
+(useHeroStepPresenter as any).collectData = async () => {
+  const { getValues } = useForm<IHeroStepFields>();
+  return getValues();
+};
+
 export default useHeroStepPresenter;

src/app/marketing/create/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Stepper, { Step } from "@/components/ui/Stepper";
+import { BreadcrumbItem } from "@/types/shared";
+import { useRef, useState } from "react";
+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";
+
+const Marketing = () => {
+  const [step, setStep] = useState(0);
+  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 breadcrumbItems: BreadcrumbItem[] = [
+    {
+      href: "/",
+      name: "Dashboard",
+    },
+    {
+      href: "/marketing",
+      name: "Marketing",
+    },
+    {
+      href: "/marketing/create",
+      name: "Create Marketing",
+    },
+  ];
+
+  const collectStepData = async (stepIndex: number) => {
+    let stepData = {};
+    const refs = [heroRef, chartRef, featuresRef, challengesRef, benefitsRef, contactsRef, footerRef];
+    
+    const currentRef = refs[stepIndex];
+    if (currentRef?.current?.collectData) {
+      stepData = await currentRef.current.collectData();
+      
+      // Submit data to backend
+      if (stepData) {
+        await submitData(stepData, stepIndex);
+      }
+    }
+  };
+
+  const submitData = async (data: any, stepIndex: number) => {
+    const apiUrl = "/api/marketing-data";
+    console.log(`Submitting data for step ${stepIndex}:`, data);
+  };
+
+  const steps: Step[] = [
+    {
+      title: "Hero",
+      description: "Create the hero section",
+      content: <HeroStep />,
+    },
+    {
+      title: "Chart",
+      description: "Create the chart",
+      content: <ChartStep />,
+    },
+    {
+      title: "Features",
+      description: "Add features",
+      content: <FeaturesStep />,
+    },
+    {
+      title: "Challenges",
+      description: "Create challenges section",
+      content: <ChallengesStep />,
+    },
+    {
+      title: "Benefits",
+      description: "create benefits section",
+      content: <ChallengesStep />,
+    },
+    {
+      title: "Contacts",
+      description: "Create contacts section",
+      content: <ContactsStep />,
+    },
+    {
+      title: "Footer",
+      description: "Add footer information",
+      content: <FooterStep />,
+    },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <ShowcaseSection title="Create Marketing page">
+        <Stepper
+          steps={steps}
+          currentStep={step}
+          onStepChange={(newStep) => {
+            collectStepData(step);
+            setStep(newStep);
+          }}
+        ></Stepper>
+      </ShowcaseSection>
+    </>
+  );
+};
+
+export default Marketing;

src/app/marketing/page.tsx

@@ -1,18 +1,8 @@
-"use client";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
-import Stepper, { Step } from "@/components/ui/Stepper";
+import CmsTable from "@/components/Tables/cms";
 import { BreadcrumbItem } from "@/types/shared";
-import { useState } from "react";
-import { ShowcaseSection } from "../../components/Layouts/showcase-section";
-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";
 
-const Marketing = () => {
-  const [step, setStep] = useState(5);
+const MarketingPage = () => {
   const breadcrumbItems: BreadcrumbItem[] = [
     {
       href: "/",
@@ -23,55 +13,12 @@ const Marketing = () => {
       name: "Marketing",
     },
   ];
-  const steps: Step[] = [
-    {
-      title: "Hero",
-      description: "Create the hero section",
-      content: <HeroStep />,
-    },
-    {
-      title: "Chart",
-      description: "Create the chart",
-      content: <ChartStep />,
-    },
-    {
-      title: "Features",
-      description: "Add features",
-      content: <FeaturesStep />,
-    },
-    {
-      title: "Challenges",
-      description: "Create challenges section",
-      content: <ChallengesStep />,
-    },
-    {
-      title: "Benefits",
-      description: "create benefits section",
-      content: <ChallengesStep />,
-    },
-    {
-      title: "Contacts",
-      description: "Create contacts section",
-      content: <ContactsStep />,
-    },
-    {
-      title: "Footer",
-      description: "Add footer information",
-      content: <FooterStep />,
-    },
-  ];
   return (
     <>
       <Breadcrumb items={breadcrumbItems} />
-      <ShowcaseSection title="Create Marketing page">
-        <Stepper
-          steps={steps}
-          currentStep={step}
-          onStepChange={setStep}
-        ></Stepper>
-      </ShowcaseSection>
+      <CmsTable />
     </>
   );
 };
 
-export default Marketing;
+export default MarketingPage;