From c82574af014860b5265f94716331a61391475b81 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sat, 2 May 2026 12:49:58 +0330
Subject: [PATCH] refactor(contacts-footer-hero-section): remove placeholder
 text from input fields for cleaner UI

- Removed placeholder text from various input fields in ContactsStep, FooterStep, HeroStep, and SectionStep components to streamline the user interface.
- Updated MarketingForm to enhance form field handling and validation logic.
- Improved default values in useMarketingForm for better initial state management.
---
 .../marketing/_components/ContactsStep.tsx    |   5 -
 src/app/marketing/_components/FooterStep.tsx  |   4 -
 src/app/marketing/_components/HeroStep.tsx    |   1 -
 .../marketing/_components/MarketingForm.tsx   | 208 ++++++++++--------
 src/app/marketing/_components/SectionStep.tsx |   2 -
 .../marketing/_components/useMarketingForm.ts |   9 +-
 .../FormElements/InputGroup/index.tsx         |   5 +-
 7 files changed, 122 insertions(+), 112 deletions(-)

diff --git a/src/app/marketing/_components/ContactsStep.tsx b/src/app/marketing/_components/ContactsStep.tsx
index b5da004..eedf84c 100644
--- a/src/app/marketing/_components/ContactsStep.tsx
+++ b/src/app/marketing/_components/ContactsStep.tsx
@@ -45,14 +45,12 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
               label="Description"
               {...register("description")}
               name="description"
-              placeholder="Enter Description"
             />
             <InputGroup
               {...register("submit_button_text")}
               label="Submit Button Text"
               name="submit_button_text"
               type="text"
-              placeholder="Enter Submit Button Text"
             />
           </div>
         </ShowcaseSection>
@@ -67,7 +65,6 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
                 label="Field Name"
                 name={`fields.${index}.name`}
                 type="text"
-                placeholder="Field Name"
                 disabled
               />
               <InputGroup
@@ -75,14 +72,12 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
                 label="Label"
                 name={`fields.${index}.label`}
                 type="text"
-                placeholder="Enter Label"
               />
               <InputGroup
                 {...register(`fields.${index}.placeholder`)}
                 label="Placeholder"
                 name={`fields.${index}.placeholder`}
                 type="text"
-                placeholder="Enter Placeholder"
               />
               <Checkbox
                 {...register(`fields.${index}.required`)}
diff --git a/src/app/marketing/_components/FooterStep.tsx b/src/app/marketing/_components/FooterStep.tsx
index dbb8450..a6885b1 100644
--- a/src/app/marketing/_components/FooterStep.tsx
+++ b/src/app/marketing/_components/FooterStep.tsx
@@ -48,27 +48,23 @@ const FooterStep = forwardRef<unknown, FooterStepProps>(
               label="Phone Number"
               name="phone"
               type="text"
-              placeholder="Enter Phone Number"
             />
             <InputGroup
               {...register("location")}
               label="Location"
               name="location"
               type="text"
-              placeholder="Enter Location"
             />
             <TextAreaGroup
               label="Tagline"
               {...register("tagline")}
               name="tagline"
-              placeholder="Enter Tagline"
             />
             <InputGroup
               {...register("copyright")}
               label="Copyright"
               name="copyright"
               type="text"
-              placeholder="Enter Copyright Text"
             />
           </div>
         </ShowcaseSection>
diff --git a/src/app/marketing/_components/HeroStep.tsx b/src/app/marketing/_components/HeroStep.tsx
index 243b7dd..7df278b 100644
--- a/src/app/marketing/_components/HeroStep.tsx
+++ b/src/app/marketing/_components/HeroStep.tsx
@@ -61,7 +61,6 @@ const HeroStep = forwardRef<unknown, HeroStepProps>(({ initialData }, ref) => {
               },
             })}
             name="description"
-            placeholder="Enter Description"
           />
           {errors.description && (
             <p className="mt-1 text-sm text-red-500">
diff --git a/src/app/marketing/_components/MarketingForm.tsx b/src/app/marketing/_components/MarketingForm.tsx
index 83dce9d..b3a9ae8 100644
--- a/src/app/marketing/_components/MarketingForm.tsx
+++ b/src/app/marketing/_components/MarketingForm.tsx
@@ -40,6 +40,7 @@ const MarketingForm = ({
     handleStepChange,
     handleSubmitAll,
     registerPageType,
+    watchPageType,
     pageTypeErrors,
     isCompany,
     setValue,
@@ -55,106 +56,123 @@ const MarketingForm = ({
     <>
       <Breadcrumb items={breadcrumbItems} />
       <ShowcaseSection title={title}>
-        <div className="mb-6 rounded-xl bg-gray-1 p-6 dark:bg-gray-7">
+        <div className="mb-6 rounded-xl bg-gray-1 p-10 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>
-            )}
+            <div>
+              <Select
+                {...registerPageType("type", {
+                  required: {
+                    message: FormErrorMessages.required,
+                    value: true,
+                  },
+                })}
+                errors={pageTypeErrors}
+                name="type"
+                label="Page Type"
+                required
+                value={watchPageType("type")}
+                items={[
+                  { value: "company", label: "Company" },
+                  { value: "organization", label: "Organization" },
+                ]}
+              />
+            </div>
 
-            <Select
-              {...registerPageType("language")}
-              label="Language"
-              name="language"
-              items={Languages}
-              defaultValue="en"
-              clearable
-              prefixIcon={<GlobeIcon />}
-              disabled={!isCompany}
-              required={isCompany}
-              placeholder="Please select language"
-              onClear={() => setValue("language", undefined)}
-            />
-            {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>
+              <Select
+                {...registerPageType("language", {
+                  validate: (v) =>
+                    !isCompany ||
+                    (typeof v === "string" && v.length > 0) ||
+                    FormErrorMessages.required,
+                })}
+                errors={pageTypeErrors}
+                label="Language"
+                name="language"
+                items={Languages}
+                defaultValue="en"
+                value={watchPageType("language")}
+                clearable
+                prefixIcon={<GlobeIcon />}
+                disabled={!isCompany}
+                required={isCompany}
+                placeholder={
+                  isCompany ? "Please select language" : undefined
+                }
+                onClear={() => setValue("language", "")}
+              />
+            </div>
+            <div>
+              <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={isCompany ? "Enter Company Name" : undefined}
+                disabled={!isCompany}
+                required={isCompany}
+              />
+              {pageTypeErrors.company_name && (
+                <p className="mt-1 text-sm text-red-500">
+                  {pageTypeErrors.company_name.message}
+                </p>
+              )}
+            </div>
+            <div>
+              <Select
+                {...registerPageType("country", {
+                  validate: (v) =>
+                    !isCompany ||
+                    (typeof v === "string" && v.length > 0) ||
+                    FormErrorMessages.required,
+                })}
+                errors={pageTypeErrors}
+                name="country"
+                label="Country"
+                items={Countries}
+                defaultValue="USA"
+                value={watchPageType("country")}
+                clearable
+                prefixIcon={<GlobeIcon />}
+                disabled={!isCompany}
+                required={isCompany}
+                placeholder={isCompany ? "Please select country" : undefined}
+                onClear={() => setValue("country", "")}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <InputGroup
+                {...registerPageType("key", {
+                  required: {
+                    value: true,
+                    message: FormErrorMessages.required,
+                  },
+                })}
+                label="Page key"
+                name="key"
+                required
+                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>
 
diff --git a/src/app/marketing/_components/SectionStep.tsx b/src/app/marketing/_components/SectionStep.tsx
index 087794a..f5d59b1 100644
--- a/src/app/marketing/_components/SectionStep.tsx
+++ b/src/app/marketing/_components/SectionStep.tsx
@@ -71,7 +71,6 @@ const SectionStep = <T extends FieldValues>({
             label="Section Description"
             {...register("description" as Path<T>)}
             name="description"
-            placeholder="Enter Section Description"
           />
         </ShowcaseSection>
         <ShowcaseSection
@@ -117,7 +116,6 @@ const SectionStep = <T extends FieldValues>({
                 {...register(`cards.${index}.description` as Path<T>)}
                 label="Description"
                 name={`cards.${index}.description`}
-                placeholder="Enter Description"
                 className="sm:col-span-2"
               />
               <button
diff --git a/src/app/marketing/_components/useMarketingForm.ts b/src/app/marketing/_components/useMarketingForm.ts
index b481e70..99df223 100644
--- a/src/app/marketing/_components/useMarketingForm.ts
+++ b/src/app/marketing/_components/useMarketingForm.ts
@@ -39,6 +39,10 @@ const useMarketingForm = (
     } = useForm<IPageTypeFields>({
         defaultValues: {
             type: "company",
+            language: "en",
+            country: "USA",
+            company_name: "",
+            key: "",
         },
     });
 
@@ -46,9 +50,9 @@ const useMarketingForm = (
         if (initialData) {
             const formValues = {
                 type: initialData.type || "company",
-                language: initialData.language || "",
+                language: initialData.language ?? "en",
                 company_name: initialData.company_name || "",
-                country: initialData.country || "",
+                country: initialData.country ?? "USA",
                 key: initialData.key || "",
             };
             reset(formValues);
@@ -238,6 +242,7 @@ const useMarketingForm = (
         handleStepChange,
         handleSubmitAll,
         registerPageType,
+        watchPageType,
         pageTypeErrors,
         isCompany,
         setValue,
diff --git a/src/components/FormElements/InputGroup/index.tsx b/src/components/FormElements/InputGroup/index.tsx
index 14178bb..85e9f5c 100644
--- a/src/components/FormElements/InputGroup/index.tsx
+++ b/src/components/FormElements/InputGroup/index.tsx
@@ -100,9 +100,8 @@ const InputGroup = <T extends FieldValues>({
             })}
           className={cn(
             "w-full rounded-xl border border-stroke/70 bg-white/90 shadow-[0_1px_2px_rgba(16,24,40,0.04),0_8px_20px_rgba(16,24,40,0.04)] outline-none backdrop-blur-[1px] transition-all duration-200 focus:border-primary/70 focus:bg-white focus:shadow-[0_0_0_2px_rgba(59,130,246,0.14),0_10px_24px_rgba(59,130,246,0.08)] disabled:cursor-default disabled:bg-gray-2/70 data-[active=true]:border-primary/70 dark:border-dark-3/80 dark:bg-dark-2/85 dark:focus:border-primary/80 dark:focus:shadow-[0_0_0_2px_rgba(59,130,246,0.2),0_10px_24px_rgba(15,23,42,0.45)] dark:disabled:bg-dark dark:data-[active=true]:border-primary/80",
-            // Add error styles conditionally
             error &&
-              "border-red/80 focus:border-red focus:shadow-[0_0_0_2px_rgba(239,68,68,0.16),0_10px_24px_rgba(239,68,68,0.1)] dark:border-red/80 dark:focus:shadow-[0_0_0_2px_rgba(239,68,68,0.24),0_10px_24px_rgba(127,29,29,0.45)]",
+              "focus:border-red border-none focus:shadow-[0_0_0_2px_rgba(239,68,68,0.16),0_10px_24px_rgba(239,68,68,0.1)] dark:border-none",
             type === "file"
               ? getFileStyles(props.fileStyleVariant!)
               : "px-5.5 py-3 text-dark placeholder:text-dark-6 dark:text-white",
@@ -117,7 +116,7 @@ const InputGroup = <T extends FieldValues>({
       </div>
 
       {error && (
-        <p className="text-red mt-1.5 text-sm font-medium">
+        <p className="mt-1.5 text-sm font-medium text-error">
           {error.message as string}
         </p>
       )}