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.
This commit is contained in:
AmirReza Jamali
@@ -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`)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user