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

.vscode/settings.json

@@ -1,2 +1 @@
-{
+{}
-}

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 BenefitsStep from "../_components/BenefitsStep";
-import ChallengesStep from "./_components/ChallengesStep";
+import ChallengesStep from "../_components/ChallengesStep";
-import ChartStep from "./_components/ChartStep";
+import ChartStep from "../_components/ChartStep";
-import ContactsStep from "./_components/ContactsStep";
+import ContactsStep from "../_components/ContactsStep";
-import FeaturesStep from "./_components/FeaturesStep";
+import FeaturesStep from "../_components/FeaturesStep";
-import FooterStep from "./_components/FooterStep";
+import FooterStep from "../_components/FooterStep";
-import HeroStep from "./_components/HeroStep";
+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,
+      page_type: pageTypeData.type,
-      ...(pageTypeData.page_type === "company" && {
+      ...(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>
             )}
-
+            <Select
-            <InputGroup
+              {...registerPageType("country")}
-              {...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"
               name="country"
-              type="text"
+              label="Country"
-              placeholder="Enter 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>
     </>
   );

src/components/FormElements/select.tsx

@@ -64,13 +64,15 @@ export function Select<T extends FieldValues>({
   }, [controlledValue]);
 
   const handleClear = () => {
-    setValue("");
+    if (controlledValue === undefined) {
+      setValue("");
+    }
     setIsOptionSelected(false);
     onClear?.();
     if (onChange) {
       const event = {
-        target: { value: "" },
+        target: { value: "", name },
-      } as ChangeEvent<HTMLSelectElement>;
+      } as unknown as ChangeEvent<HTMLSelectElement>;
       onChange(event);
     }
   };
@@ -113,11 +115,7 @@ export function Select<T extends FieldValues>({
             clearable && value && "pr-20",
           )}
         >
-          {placeholder && (
+          {placeholder && <option value="">{placeholder}</option>}
-            <option value="" disabled hidden>
-              {placeholder}
-            </option>
-          )}
 
           {items.map((item) => (
             <option key={item.value} value={item.value}>

src/components/ui/Stepper.tsx

@@ -10,12 +10,16 @@ interface StepperProps {
   steps: Step[];
   currentStep?: number;
   onStepChange?: (step: number) => void;
+  onSubmit?: () => void;
+  isSubmitting?: boolean;
 }
 
 const Stepper: React.FC<StepperProps> = ({
   steps,
   currentStep: controlledStep,
   onStepChange,
+  onSubmit,
+  isSubmitting = false,
 }) => {
   const [internalStep, setInternalStep] = useState(0);
   const currentStep =
@@ -32,7 +36,12 @@ const Stepper: React.FC<StepperProps> = ({
   };
 
   const nextStep = () => {
-    if (currentStep < steps.length - 1) {
+    if (currentStep === steps.length - 1) {
+      // On last step, trigger submit
+      if (onSubmit) {
+        onSubmit();
+      }
+    } else if (currentStep < steps.length - 1) {
       const newStep = currentStep + 1;
       if (onStepChange) {
         onStepChange(newStep);
@@ -124,14 +133,18 @@ const Stepper: React.FC<StepperProps> = ({
         </button>
         <button
           onClick={nextStep}
-          disabled={currentStep === steps.length - 1}
+          disabled={isSubmitting}
           className={`rounded-lg px-6 py-2 font-medium transition-all ${
-            currentStep === steps.length - 1
+            isSubmitting
               ? "cursor-not-allowed bg-gray-1 text-gray-4"
               : "bg-primary text-white hover:bg-primary/90"
           }`}
         >
-          {currentStep === steps.length - 1 ? "Completed" : "Next"}
+          {isSubmitting
+            ? "Submitting..."
+            : currentStep === steps.length - 1
+              ? "Submit"
+              : "Next"}
         </button>
       </div>
     </div>

src/constants/countries.ts

@@ -0,0 +1,258 @@
+export const Countries = [
+  { value: "AF", label: "Afghanistan" },
+  { value: "AX", label: "Åland Islands" },
+  { value: "AL", label: "Albania" },
+  { value: "DZ", label: "Algeria" },
+  { value: "AS", label: "American Samoa" },
+  { value: "AD", label: "Andorra" },
+  { value: "AO", label: "Angola" },
+  { value: "AI", label: "Anguilla" },
+  { value: "AQ", label: "Antarctica" },
+  { value: "AG", label: "Antigua and Barbuda" },
+  { value: "AR", label: "Argentina" },
+  { value: "AM", label: "Armenia" },
+  { value: "AW", label: "Aruba" },
+  { value: "AU", label: "Australia" },
+  { value: "AT", label: "Austria" },
+  { value: "AZ", label: "Azerbaijan" },
+  { value: "BS", label: "Bahamas (The)" },
+  { value: "BH", label: "Bahrain" },
+  { value: "BD", label: "Bangladesh" },
+  { value: "BB", label: "Barbados" },
+  { value: "BY", label: "Belarus" },
+  { value: "BE", label: "Belgium" },
+  { value: "BZ", label: "Belize" },
+  { value: "BJ", label: "Benin" },
+  { value: "BM", label: "Bermuda" },
+  { value: "BT", label: "Bhutan" },
+  { value: "BO", label: "Bolivia (Plurinational State of)" },
+  { value: "BQ", label: "Bonaire, Sint Eustatius and Saba" },
+  { value: "BA", label: "Bosnia and Herzegovina" },
+  { value: "BW", label: "Botswana" },
+  { value: "BV", label: "Bouvet Island" },
+  { value: "BR", label: "Brazil" },
+  { value: "IO", label: "British Indian Ocean Territory" },
+  { value: "BN", label: "Brunei Darussalam" },
+  { value: "BG", label: "Bulgaria" },
+  { value: "BF", label: "Burkina Faso" },
+  { value: "BI", label: "Burundi" },
+  { value: "CV", label: "Cabo Verde" },
+  { value: "KH", label: "Cambodia" },
+  { value: "CM", label: "Cameroon" },
+  { value: "CA", label: "Canada" },
+  { value: "KY", label: "Cayman Islands" },
+  { value: "CF", label: "Central African Republic" },
+  { value: "TD", label: "Chad" },
+  { value: "CL", label: "Chile" },
+  { value: "CN", label: "China" },
+  { value: "CX", label: "Christmas Island" },
+  { value: "CC", label: "Cocos (Keeling) Islands" },
+  { value: "CO", label: "Colombia" },
+  { value: "KM", label: "Comoros" },
+  { value: "CG", label: "Congo (Republic of the)" },
+  { value: "CD", label: "Congo (Democratic Republic of the)" },
+  { value: "CK", label: "Cook Islands" },
+  { value: "CR", label: "Costa Rica" },
+  { value: "CI", label: "Côte d’Ivoire" },
+  { value: "HR", label: "Croatia" },
+  { value: "CU", label: "Cuba" },
+  { value: "CW", label: "Curaçao" },
+  { value: "CY", label: "Cyprus" },
+  { value: "CZ", label: "Czechia" },
+  { value: "DK", label: "Denmark" },
+  { value: "DJ", label: "Djibouti" },
+  { value: "DM", label: "Dominica" },
+  { value: "DO", label: "Dominican Republic" },
+  { value: "EC", label: "Ecuador" },
+  { value: "EG", label: "Egypt" },
+  { value: "SV", label: "El Salvador" },
+  { value: "GQ", label: "Equatorial Guinea" },
+  { value: "ER", label: "Eritrea" },
+  { value: "EE", label: "Estonia" },
+  { value: "SZ", label: "Eswatini" },
+  { value: "ET", label: "Ethiopia" },
+  { value: "FK", label: "Falkland Islands (Malvinas)" },
+  { value: "FO", label: "Faroe Islands" },
+  { value: "FJ", label: "Fiji" },
+  { value: "FI", label: "Finland" },
+  { value: "FR", label: "France" },
+  { value: "GF", label: "French Guiana" },
+  { value: "PF", label: "French Polynesia" },
+  { value: "TF", label: "French Southern Territories" },
+  { value: "GA", label: "Gabon" },
+  { value: "GM", label: "Gambia (The)" },
+  { value: "GE", label: "Georgia" },
+  { value: "DE", label: "Germany" },
+  { value: "GH", label: "Ghana" },
+  { value: "GI", label: "Gibraltar" },
+  { value: "GR", label: "Greece" },
+  { value: "GL", label: "Greenland" },
+  { value: "GD", label: "Grenada" },
+  { value: "GP", label: "Guadeloupe" },
+  { value: "GU", label: "Guam" },
+  { value: "GT", label: "Guatemala" },
+  { value: "GG", label: "Guernsey" },
+  { value: "GN", label: "Guinea" },
+  { value: "GW", label: "Guinea-Bissau" },
+  { value: "GY", label: "Guyana" },
+  { value: "HT", label: "Haiti" },
+  { value: "HM", label: "Heard Island and McDonald Islands" },
+  { value: "VA", label: "Holy See (Vatican City State)" },
+  { value: "HN", label: "Honduras" },
+  { value: "HK", label: "Hong Kong" },
+  { value: "HU", label: "Hungary" },
+  { value: "IS", label: "Iceland" },
+  { value: "IN", label: "India" },
+  { value: "ID", label: "Indonesia" },
+  { value: "IR", label: "Iran" },
+  { value: "IQ", label: "Iraq" },
+  { value: "IE", label: "Ireland" },
+  { value: "IM", label: "Isle of Man" },
+  { value: "IL", label: "Israel" },
+  { value: "IT", label: "Italy" },
+  { value: "JM", label: "Jamaica" },
+  { value: "JP", label: "Japan" },
+  { value: "JE", label: "Jersey" },
+  { value: "JO", label: "Jordan" },
+  { value: "KZ", label: "Kazakhstan" },
+  { value: "KE", label: "Kenya" },
+  { value: "KI", label: "Kiribati" },
+  { value: "KP", label: "Korea (Democratic People’s Republic of)" },
+  { value: "KR", label: "Korea (Republic of)" },
+  { value: "KW", label: "Kuwait" },
+  { value: "KG", label: "Kyrgyzstan" },
+  { value: "LA", label: "Lao People’s Democratic Republic" },
+  { value: "LV", label: "Latvia" },
+  { value: "LB", label: "Lebanon" },
+  { value: "LS", label: "Lesotho" },
+  { value: "LR", label: "Liberia" },
+  { value: "LY", label: "Libya" },
+  { value: "LI", label: "Liechtenstein" },
+  { value: "LT", label: "Lithuania" },
+  { value: "LU", label: "Luxembourg" },
+  { value: "MO", label: "Macao" },
+  { value: "MG", label: "Madagascar" },
+  { value: "MW", label: "Malawi" },
+  { value: "MY", label: "Malaysia" },
+  { value: "MV", label: "Maldives" },
+  { value: "ML", label: "Mali" },
+  { value: "MT", label: "Malta" },
+  { value: "MH", label: "Marshall Islands" },
+  { value: "MQ", label: "Martinique" },
+  { value: "MR", label: "Mauritania" },
+  { value: "MU", label: "Mauritius" },
+  { value: "YT", label: "Mayotte" },
+  { value: "MX", label: "Mexico" },
+  { value: "FM", label: "Micronesia (Federated States of)" },
+  { value: "MD", label: "Moldova (Republic of)" },
+  { value: "MC", label: "Monaco" },
+  { value: "MN", label: "Mongolia" },
+  { value: "ME", label: "Montenegro" },
+  { value: "MS", label: "Montserrat" },
+  { value: "MA", label: "Morocco" },
+  { value: "MZ", label: "Mozambique" },
+  { value: "MM", label: "Myanmar" },
+  { value: "NA", label: "Namibia" },
+  { value: "NR", label: "Nauru" },
+  { value: "NP", label: "Nepal" },
+  { value: "NL", label: "Netherlands (The)" },
+  { value: "NC", label: "New Caledonia" },
+  { value: "NZ", label: "New Zealand" },
+  { value: "NI", label: "Nicaragua" },
+  { value: "NE", label: "Niger (The)" },
+  { value: "NG", label: "Nigeria" },
+  { value: "NU", label: "Niue" },
+  { value: "NF", label: "Norfolk Island" },
+  { value: "MK", label: "North Macedonia" },
+  { value: "MP", label: "Northern Mariana Islands" },
+  { value: "NO", label: "Norway" },
+  { value: "OM", label: "Oman" },
+  { value: "PK", label: "Pakistan" },
+  { value: "PW", label: "Palau" },
+  { value: "PS", label: "Palestine, State of" },
+  { value: "PA", label: "Panama" },
+  { value: "PG", label: "Papua New Guinea" },
+  { value: "PY", label: "Paraguay" },
+  { value: "PE", label: "Peru" },
+  { value: "PH", label: "Philippines (The)" },
+  { value: "PN", label: "Pitcairn" },
+  { value: "PL", label: "Poland" },
+  { value: "PT", label: "Portugal" },
+  { value: "PR", label: "Puerto Rico" },
+  { value: "QA", label: "Qatar" },
+  { value: "RE", label: "Réunion" },
+  { value: "RO", label: "Romania" },
+  { value: "RU", label: "Russian Federation (The)" },
+  { value: "RW", label: "Rwanda" },
+  { value: "BL", label: "Saint Barthélemy" },
+  { value: "SH", label: "Saint Helena, Ascension and Tristan da Cunha" },
+  { value: "KN", label: "Saint Kitts and Nevis" },
+  { value: "LC", label: "Saint Lucia" },
+  { value: "MF", label: "Saint Martin (French part)" },
+  { value: "PM", label: "Saint Pierre and Miquelon" },
+  { value: "VC", label: "Saint Vincent and the Grenadines" },
+  { value: "WS", label: "Samoa" },
+  { value: "SM", label: "San Marino" },
+  { value: "ST", label: "Sao Tome and Principe" },
+  { value: "SA", label: "Saudi Arabia" },
+  { value: "SN", label: "Senegal" },
+  { value: "RS", label: "Serbia" },
+  { value: "SC", label: "Seychelles" },
+  { value: "SL", label: "Sierra Leone" },
+  { value: "SG", label: "Singapore" },
+  { value: "SX", label: "Sint Maarten (Dutch part)" },
+  { value: "SK", label: "Slovakia" },
+  { value: "SI", label: "Slovenia" },
+  { value: "SB", label: "Solomon Islands" },
+  { value: "SO", label: "Somalia" },
+  { value: "ZA", label: "South Africa" },
+  { value: "GS", label: "South Georgia and the South Sandwich Islands" },
+  { value: "SS", label: "South Sudan" },
+  { value: "ES", label: "Spain" },
+  { value: "LK", label: "Sri Lanka" },
+  { value: "SD", label: "Sudan (The)" },
+  { value: "SR", label: "Suriname" },
+  { value: "SJ", label: "Svalbard and Jan Mayen" },
+  { value: "SE", label: "Sweden" },
+  { value: "CH", label: "Switzerland" },
+  { value: "SY", label: "Syrian Arab Republic" },
+  { value: "TW", label: "Taiwan (Province of China)" },
+  { value: "TJ", label: "Tajikistan" },
+  { value: "TZ", label: "Tanzania (United Republic of)" },
+  { value: "TH", label: "Thailand" },
+  { value: "TL", label: "Timor-Leste" },
+  { value: "TG", label: "Togo" },
+  { value: "TK", label: "Tokelau" },
+  { value: "TO", label: "Tonga" },
+  { value: "TT", label: "Trinidad and Tobago" },
+  { value: "TN", label: "Tunisia" },
+  { value: "TR", label: "Türkiye" },
+  { value: "TM", label: "Turkmenistan" },
+  { value: "TC", label: "Turks and Caicos Islands" },
+  { value: "TV", label: "Tuvalu" },
+  { value: "UG", label: "Uganda" },
+  { value: "UA", label: "Ukraine" },
+  { value: "AE", label: "United Arab Emirates" },
+  {
+    value: "GB",
+    label: "United Kingdom of Great Britain and Northern Ireland",
+  },
+  { value: "US", label: "United States of America" },
+  { value: "UM", label: "United States Minor Outlying Islands" },
+  { value: "UY", label: "Uruguay" },
+  { value: "UZ", label: "Uzbekistan" },
+  { value: "VU", label: "Vanuatu" },
+  { value: "VE", label: "Venezuela (Bolivarian Republic of)" },
+  { value: "VN", label: "Viet Nam" },
+  { value: "VG", label: "Virgin Islands (British)" },
+  { value: "VI", label: "Virgin Islands (U.S.)" },
+  { value: "WF", label: "Wallis and Futuna" },
+  {
+    value: "EH",
+    label:
+      "Western Sahara (Sahrawi Arab Democratic Republic claimed by Morocco)",
+  },
+  { value: "YE", label: "Yemen" },
+  { value: "ZM", label: "Zambia" },
+  { value: "ZW", label: "Zimbabwe" },
+];