refactor(marketing): Restructure marketing wizard components and improve project organization

- Move all marketing wizard components from `create/_components` to `_components` directory
- Update import paths in `create/page.tsx` to reflect new component locations
- Add countries constant to support country selection in page type configuration
- Minor formatting and cleanup of `.vscode/settings.json`
- Prepare for more modular and consistent component structure in marketing wizard

src/app/marketing/create/page.tsx

@@ -1,24 +1,26 @@
 "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 { 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";
+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 {
-  page_type: "company" | "organization";
+  type: "company" | "organization";
   language?: string;
   company_name?: string;
   country?: string;
@@ -40,13 +42,14 @@ const Marketing = () => {
     watch: watchPageType,
     formState: { errors: pageTypeErrors },
     getValues: getPageTypeValues,
+    setValue,
   } = useForm<IPageTypeFields>({
     defaultValues: {
-      page_type: "company",
+      type: "company",
     },
   });
 
-  const pageType = watchPageType("page_type");
+  const pageType = watchPageType("type");
   const isCompany = pageType === "company";
 
   const { mutate: createCms, isPending } = useCreateCms();
@@ -146,11 +149,11 @@ const Marketing = () => {
   const handleSubmitAll = async () => {
     const allData = await collectAllStepsData();
     const pageTypeData = getPageTypeValues();
-    
+
     const finalData = {
       ...allData,
-      page_type: pageTypeData.page_type,
-      ...(pageTypeData.page_type === "company" && {
+      page_type: pageTypeData.type,
+      ...(pageTypeData.type === "company" && {
         language: pageTypeData.language,
         company_name: pageTypeData.company_name,
         country: pageTypeData.country,
@@ -223,7 +226,7 @@ const Marketing = () => {
           </h3>
           <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
             <Select
-              {...registerPageType("page_type", {
+              {...registerPageType("type", {
                 required: { message: FormErrorMessages.required, value: true },
               })}
               name="page_type"
@@ -234,9 +237,9 @@ const Marketing = () => {
                 { value: "organization", label: "Organization" },
               ]}
             />
-            {pageTypeErrors.page_type && (
+            {pageTypeErrors.type && (
               <p className="mt-1 text-sm text-red-500">
-                {pageTypeErrors.page_type.message}
+                {pageTypeErrors.type.message}
               </p>
             )}
 
@@ -289,25 +292,18 @@ const Marketing = () => {
                 {pageTypeErrors.company_name.message}
               </p>
             )}
-
-            <InputGroup
-              {...registerPageType("country", {
-                required: isCompany
-                  ? { message: FormErrorMessages.required, value: true }
-                  : false,
-                minLength: isCompany
-                  ? { value: 2, message: FormErrorMessages.minLength(2) }
-                  : undefined,
-                maxLength: isCompany
-                  ? { value: 100, message: FormErrorMessages.maxLength(100) }
-                  : undefined,
-              })}
-              label="Country"
+            <Select
+              {...registerPageType("country")}
               name="country"
-              type="text"
-              placeholder="Enter 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">
@@ -344,17 +340,9 @@ const Marketing = () => {
           steps={steps}
           currentStep={step}
           onStepChange={handleStepChange}
+          onSubmit={handleSubmitAll}
+          isSubmitting={isPending}
         />
-        <div className="mt-6 flex justify-end gap-4">
-          <button
-            type="button"
-            onClick={handleSubmitAll}
-            disabled={isPending}
-            className="rounded-lg bg-primary px-6 py-3 font-medium text-white hover:bg-opacity-90 disabled:opacity-50"
-          >
-            {isPending ? "Submitting..." : "Submit All"}
-          </button>
-        </div>
       </ShowcaseSection>
     </>
   );