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
This commit is contained in:
AmirReza Jamali
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import SectionStep from "./SectionStep";
|
||||
import useBenefitsStepPresenter, {
|
||||
IBenefitsStepFields,
|
||||
} from "./useBenefitsStepPresenter";
|
||||
|
||||
const BenefitsStep = forwardRef((props, ref) => {
|
||||
const {
|
||||
errors,
|
||||
handleSubmit,
|
||||
onSubmit,
|
||||
register,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
getValues,
|
||||
} = useBenefitsStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<SectionStep<IBenefitsStepFields>
|
||||
title="Benefits"
|
||||
fields={fields}
|
||||
handleSubmit={handleSubmit}
|
||||
onSubmit={onSubmit}
|
||||
register={register}
|
||||
errors={errors}
|
||||
append={append}
|
||||
remove={remove}
|
||||
control={control}
|
||||
fieldName="cards"
|
||||
defaultValues={{ icon: "", title: "", description: "" }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
BenefitsStep.displayName = "BenefitsStep";
|
||||
|
||||
export default BenefitsStep;
|
||||
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import SectionStep from "./SectionStep";
|
||||
import useChallengesStepPresenter, {
|
||||
IChallengesStepFields,
|
||||
} from "./useChallengesStepPresenter";
|
||||
|
||||
const ChallengesStep = forwardRef((props, ref) => {
|
||||
const {
|
||||
errors,
|
||||
handleSubmit,
|
||||
onSubmit,
|
||||
register,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
getValues,
|
||||
} = useChallengesStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<SectionStep<IChallengesStepFields>
|
||||
title="Challenges"
|
||||
fields={fields}
|
||||
handleSubmit={handleSubmit}
|
||||
onSubmit={onSubmit}
|
||||
register={register}
|
||||
errors={errors}
|
||||
append={append}
|
||||
remove={remove}
|
||||
control={control}
|
||||
fieldName="cards"
|
||||
defaultValues={{ icon: "", title: "", description: "" }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
ChallengesStep.displayName = "ChallengesStep";
|
||||
|
||||
export default ChallengesStep;
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import type { ApexOptions } from "apexcharts";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
type PropsType = {
|
||||
series: { x: string; y: number }[];
|
||||
title: string;
|
||||
};
|
||||
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export function ChartPreview({ series, title }: PropsType) {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const options: ApexOptions = {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: ["#5750F1"],
|
||||
chart: {
|
||||
height: 310,
|
||||
type: "area",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
fontFamily: "inherit",
|
||||
},
|
||||
fill: {
|
||||
gradient: {
|
||||
opacityFrom: 0.55,
|
||||
opacityTo: 0,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
options: {
|
||||
chart: {
|
||||
height: 300,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1366,
|
||||
options: {
|
||||
chart: {
|
||||
height: 320,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: isMobile ? 2 : 3,
|
||||
},
|
||||
grid: {
|
||||
strokeDashArray: 5,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
tooltip: {
|
||||
marker: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="-ml-4 -mr-5 h-[310px]">
|
||||
<Chart
|
||||
options={options}
|
||||
series={[
|
||||
{
|
||||
name: title,
|
||||
data: series,
|
||||
},
|
||||
]}
|
||||
type="area"
|
||||
height={310}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
|
||||
import { TrashIcon } from "@/assets/icons";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import { ChartPreview } from "./ChartPreview";
|
||||
import useChartStepPresenter from "./useChartStepPresenter";
|
||||
|
||||
const ChartStep = forwardRef((props, ref) => {
|
||||
const {
|
||||
errors,
|
||||
handleSubmit,
|
||||
onSubmit,
|
||||
register,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
watch,
|
||||
getValues,
|
||||
} = useChartStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
const chartTitle = watch("title");
|
||||
const chartData = watch("data");
|
||||
|
||||
return (
|
||||
<form
|
||||
className="items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="flex flex-col gap-9">
|
||||
<ShowcaseSection
|
||||
title="Chart Information"
|
||||
className="flex flex-col gap-5"
|
||||
>
|
||||
<InputGroup
|
||||
{...register("title", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
})}
|
||||
label="Chart Title"
|
||||
name="title"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Chart Title"
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.title.message}
|
||||
</p>
|
||||
)}
|
||||
<InputGroup
|
||||
{...register("missedAmount", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
})}
|
||||
label="Missed Amount"
|
||||
name="missedAmount"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Missed Amount"
|
||||
/>
|
||||
{errors.missedAmount && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.missedAmount.message}
|
||||
</p>
|
||||
)}
|
||||
</ShowcaseSection>
|
||||
<ShowcaseSection title="Chart Preview">
|
||||
<ChartPreview
|
||||
series={
|
||||
chartData
|
||||
?.filter((p) => p.key && p.value)
|
||||
.map((p) => ({ x: p.key, y: p.value })) || []
|
||||
}
|
||||
title={chartTitle}
|
||||
/>
|
||||
</ShowcaseSection>
|
||||
<ShowcaseSection title="Chart Points" className="flex flex-col gap-5">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex items-center gap-4">
|
||||
<InputGroup
|
||||
{...register(`data.${index}.key`, {
|
||||
required: {
|
||||
message: FormErrorMessages.required,
|
||||
value: true,
|
||||
},
|
||||
})}
|
||||
label="Key"
|
||||
name={`data.${index}.key`}
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter key"
|
||||
/>
|
||||
<InputGroup
|
||||
{...register(`data.${index}.value`, {
|
||||
required: {
|
||||
message: FormErrorMessages.required,
|
||||
value: true,
|
||||
},
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
label="Value"
|
||||
name={`data.${index}.value`}
|
||||
required
|
||||
type="number"
|
||||
placeholder="Enter value"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(index)}
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
onClick={() => append({ key: "", value: 0 })}
|
||||
>
|
||||
Add point
|
||||
</button>
|
||||
</ShowcaseSection>
|
||||
</div>
|
||||
<div className="flex flex-col gap-9"></div>
|
||||
</form>
|
||||
);
|
||||
});
|
||||
|
||||
ChartStep.displayName = "ChartStep";
|
||||
|
||||
export default ChartStep;
|
||||
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
import { Checkbox } from "@/components/FormElements/checkbox";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import useContactsStepPresenter from "./useContactsStepPresenter";
|
||||
|
||||
const ContactsStep = forwardRef((props, ref) => {
|
||||
const { errors, handleSubmit, onSubmit, register, fields, getValues } =
|
||||
useContactsStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<form
|
||||
className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ShowcaseSection title="Contacts Section" className="flex flex-col gap-5">
|
||||
<div className="flex flex-col gap-9">
|
||||
<InputGroup
|
||||
{...register("title", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
})}
|
||||
label="Title"
|
||||
name="title"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.title.message as string}
|
||||
</p>
|
||||
)}
|
||||
<TextAreaGroup
|
||||
label="Description"
|
||||
{...register("description")}
|
||||
name="description"
|
||||
placeholder="Enter Description"
|
||||
/>
|
||||
<InputGroup
|
||||
{...register("submitButtonText")}
|
||||
label="Submit Button Text"
|
||||
name="submitButtonText"
|
||||
type="text"
|
||||
placeholder="Enter Submit Button Text"
|
||||
/>
|
||||
</div>
|
||||
</ShowcaseSection>
|
||||
<ShowcaseSection title="Form Fields" className="flex flex-col gap-5">
|
||||
{fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="grid grid-cols-1 items-center gap-4 sm:grid-cols-2"
|
||||
>
|
||||
<InputGroup
|
||||
{...register(`fields.${index}.name`)}
|
||||
label="Field Name"
|
||||
name={`fields.${index}.name`}
|
||||
type="text"
|
||||
placeholder="Field Name"
|
||||
disabled
|
||||
/>
|
||||
<InputGroup
|
||||
{...register(`fields.${index}.label`)}
|
||||
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`)}
|
||||
label="Required"
|
||||
minimal
|
||||
withIcon="check"
|
||||
withBg
|
||||
name={`fields.${index}.required`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ShowcaseSection>
|
||||
</form>
|
||||
);
|
||||
});
|
||||
|
||||
ContactsStep.displayName = "ContactsStep";
|
||||
|
||||
export default ContactsStep;
|
||||
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import SectionStep from "./SectionStep";
|
||||
import useFeaturesStepPresenter, {
|
||||
IFeaturesStepFields,
|
||||
} from "./useFeaturesStepPresenter";
|
||||
|
||||
const FeaturesStep = forwardRef((props, ref) => {
|
||||
const {
|
||||
errors,
|
||||
handleSubmit,
|
||||
onSubmit,
|
||||
register,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
getValues,
|
||||
} = useFeaturesStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<SectionStep<IFeaturesStepFields>
|
||||
title="Features"
|
||||
fields={fields}
|
||||
handleSubmit={handleSubmit}
|
||||
onSubmit={onSubmit}
|
||||
register={register}
|
||||
errors={errors}
|
||||
append={append}
|
||||
remove={remove}
|
||||
control={control}
|
||||
fieldName="cards"
|
||||
defaultValues={{ icon: "", title: "", description: "" }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
FeaturesStep.displayName = "FeaturesStep";
|
||||
|
||||
export default FeaturesStep;
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import useFooterStepPresenter from "./useFooterStepPresenter";
|
||||
|
||||
const FooterStep = forwardRef((props, ref) => {
|
||||
const { errors, handleSubmit, onSubmit, register, getValues } =
|
||||
useFooterStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<form
|
||||
className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<ShowcaseSection title="Footer Section" className="flex flex-col gap-5">
|
||||
<div className="flex flex-col gap-9">
|
||||
<InputGroup
|
||||
{...register("email", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
pattern: {
|
||||
value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
||||
message: "Invalid email format",
|
||||
},
|
||||
})}
|
||||
label="Email"
|
||||
name="email"
|
||||
required
|
||||
type="email"
|
||||
placeholder="Enter Email"
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.email.message as string}
|
||||
</p>
|
||||
)}
|
||||
<InputGroup
|
||||
{...register("phone")}
|
||||
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>
|
||||
</form>
|
||||
);
|
||||
});
|
||||
|
||||
FooterStep.displayName = "FooterStep";
|
||||
|
||||
export default FooterStep;
|
||||
@@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import { REGEX } from "@/constants/regex";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import { forwardRef, useImperativeHandle } from "react";
|
||||
import useHeroStepPresenter from "./useHeroStepPresenter";
|
||||
|
||||
const HeroStep = forwardRef((props, ref) => {
|
||||
const { errors, handleSubmit, onSubmit, register, getValues } = useHeroStepPresenter();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getData: () => getValues(),
|
||||
}));
|
||||
|
||||
return (
|
||||
<form
|
||||
className=" items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7 sm:grid-cols-2"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="flex flex-col gap-9">
|
||||
<ShowcaseSection
|
||||
title="Hero Information"
|
||||
className="flex flex-col gap-5"
|
||||
>
|
||||
<InputGroup
|
||||
{...register("title", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
minLength: {
|
||||
value: 2,
|
||||
message: FormErrorMessages.minLength(2),
|
||||
},
|
||||
maxLength: {
|
||||
value: 200,
|
||||
message: FormErrorMessages.maxLength(200),
|
||||
},
|
||||
})}
|
||||
label="Title"
|
||||
name="title"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.title.message}</p>
|
||||
)}
|
||||
<TextAreaGroup
|
||||
label="Description"
|
||||
{...register("description", {
|
||||
minLength: {
|
||||
value: 10,
|
||||
message: FormErrorMessages.minLength(10),
|
||||
},
|
||||
maxLength: {
|
||||
value: 1000,
|
||||
message: FormErrorMessages.maxLength(1000),
|
||||
},
|
||||
})}
|
||||
name="description"
|
||||
placeholder="Enter Description"
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
<InputGroup
|
||||
{...register("buttonText", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
minLength: {
|
||||
value: 2,
|
||||
message: FormErrorMessages.minLength(2),
|
||||
},
|
||||
maxLength: {
|
||||
value: 50,
|
||||
message: FormErrorMessages.maxLength(50),
|
||||
},
|
||||
})}
|
||||
label="Button Text"
|
||||
name="buttonText"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Button Text"
|
||||
/>
|
||||
{errors.buttonText && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.buttonText.message}
|
||||
</p>
|
||||
)}
|
||||
<InputGroup
|
||||
{...register("buttonLink", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
minLength: {
|
||||
value: 2,
|
||||
message: FormErrorMessages.minLength(2),
|
||||
},
|
||||
maxLength: {
|
||||
value: 200,
|
||||
message: FormErrorMessages.maxLength(200),
|
||||
},
|
||||
})}
|
||||
label="Button Link"
|
||||
name="buttonLink"
|
||||
required
|
||||
type="url"
|
||||
placeholder="Enter Button Link"
|
||||
/>
|
||||
{errors.buttonLink && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.buttonLink.message}
|
||||
</p>
|
||||
)}
|
||||
<InputGroup
|
||||
{...register("gifFile", {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
pattern: {message: FormErrorMessages.invalidPattern, value: REGEX.URL}
|
||||
})}
|
||||
label="GIF File URL"
|
||||
name="gifFile"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter GIF File URL"
|
||||
/>
|
||||
{errors.gifFile && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.gifFile.message}
|
||||
</p>
|
||||
)}
|
||||
</ShowcaseSection>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
});
|
||||
|
||||
HeroStep.displayName = "HeroStep";
|
||||
|
||||
export default HeroStep;
|
||||
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
import { TrashIcon } from "@/assets/icons";
|
||||
import InputGroup from "@/components/FormElements/InputGroup";
|
||||
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import { REGEX } from "@/constants/regex";
|
||||
import { FormErrorMessages } from "@/constants/Texts";
|
||||
import {
|
||||
Control,
|
||||
FieldErrors,
|
||||
FieldValues,
|
||||
Path,
|
||||
UseFieldArrayAppend,
|
||||
UseFieldArrayRemove,
|
||||
UseFormHandleSubmit,
|
||||
UseFormRegister,
|
||||
} from "react-hook-form";
|
||||
|
||||
interface IProps<T extends FieldValues> {
|
||||
title: string;
|
||||
fields: any[];
|
||||
handleSubmit: UseFormHandleSubmit<T>;
|
||||
onSubmit: (data: T) => void;
|
||||
register: UseFormRegister<T>;
|
||||
errors: FieldErrors<T>;
|
||||
append: UseFieldArrayAppend<T, any>;
|
||||
remove: UseFieldArrayRemove;
|
||||
control: Control<T, any>;
|
||||
fieldName: string;
|
||||
defaultValues: any;
|
||||
}
|
||||
|
||||
const SectionStep = <T extends FieldValues>({
|
||||
title,
|
||||
fields,
|
||||
handleSubmit,
|
||||
onSubmit,
|
||||
register,
|
||||
errors,
|
||||
append,
|
||||
remove,
|
||||
fieldName,
|
||||
defaultValues,
|
||||
}: IProps<T>) => {
|
||||
return (
|
||||
<form
|
||||
className="grid grid-cols-1 items-start gap-9 rounded-xl bg-gray-1 p-10 dark:bg-gray-7"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="flex flex-col gap-9">
|
||||
<ShowcaseSection
|
||||
title={`${title} Section`}
|
||||
className="flex flex-col gap-5"
|
||||
>
|
||||
<InputGroup
|
||||
{...register("title" as Path<T>, {
|
||||
required: { message: FormErrorMessages.required, value: true },
|
||||
})}
|
||||
label="Section Title"
|
||||
name="title"
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Section Title"
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
{errors.title.message as string}
|
||||
</p>
|
||||
)}
|
||||
<TextAreaGroup
|
||||
label="Section Description"
|
||||
{...register("description" as Path<T>)}
|
||||
name="description"
|
||||
placeholder="Enter Section Description"
|
||||
/>
|
||||
</ShowcaseSection>
|
||||
<ShowcaseSection
|
||||
title={`${title} cards`}
|
||||
className="flex flex-col gap-5"
|
||||
>
|
||||
{fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="grid grid-cols-1 gap-4 sm:grid-cols-2"
|
||||
>
|
||||
<InputGroup
|
||||
{...register(`cards.${index}.icon` as Path<T>, {
|
||||
required: {
|
||||
message: FormErrorMessages.required,
|
||||
value: true,
|
||||
},
|
||||
pattern: {
|
||||
message: FormErrorMessages.invalidPattern,
|
||||
value: REGEX.URL,
|
||||
},
|
||||
})}
|
||||
label="Icon"
|
||||
name={`cards.${index}.icon`}
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Icon URL"
|
||||
/>
|
||||
<InputGroup
|
||||
{...register(`cards.${index}.title` as Path<T>, {
|
||||
required: {
|
||||
message: FormErrorMessages.required,
|
||||
value: true,
|
||||
},
|
||||
})}
|
||||
label="Title"
|
||||
name={`cards.${index}.title`}
|
||||
required
|
||||
type="text"
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
<TextAreaGroup
|
||||
{...register(`cards.${index}.description` as Path<T>)}
|
||||
label="Description"
|
||||
name={`cards.${index}.description`}
|
||||
placeholder="Enter Description"
|
||||
className="sm:col-span-2"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(index)}
|
||||
className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
|
||||
onClick={() => append(defaultValues)}
|
||||
>
|
||||
Add point
|
||||
</button>
|
||||
</ShowcaseSection>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionStep;
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
export interface IBenefitsStepFields {
|
||||
title: string;
|
||||
description: string;
|
||||
cards: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const useBenefitsStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<IBenefitsStepFields>({
|
||||
defaultValues: {
|
||||
cards: [{ icon: "", title: "", description: "" }],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "cards",
|
||||
});
|
||||
|
||||
const onSubmit = (data: IBenefitsStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const collectData = async () => {
|
||||
return getValues();
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
watch,
|
||||
getValues,
|
||||
collectData,
|
||||
};
|
||||
};
|
||||
|
||||
export default useBenefitsStepPresenter;
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
export interface IChallengesStepFields {
|
||||
title: string;
|
||||
description: string;
|
||||
cards: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const useChallengesStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<IChallengesStepFields>({
|
||||
defaultValues: {
|
||||
cards: [{ icon: "", title: "", description: "" }],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "cards",
|
||||
});
|
||||
|
||||
const onSubmit = (data: IChallengesStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const collectData = async () => {
|
||||
return getValues();
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
watch,
|
||||
getValues,
|
||||
collectData,
|
||||
};
|
||||
};
|
||||
|
||||
export default useChallengesStepPresenter;
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
export interface IChartStepFields {
|
||||
title: string;
|
||||
missedAmount: string;
|
||||
data: { key: string; value: number }[];
|
||||
}
|
||||
|
||||
const useChartStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<IChartStepFields>({
|
||||
defaultValues: {
|
||||
data: [{ key: "", value: 0 }],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "data",
|
||||
});
|
||||
|
||||
const onSubmit = (data: IChartStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const collectData = async () => {
|
||||
return getValues();
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
watch,
|
||||
getValues,
|
||||
collectData,
|
||||
};
|
||||
};
|
||||
|
||||
export default useChartStepPresenter;
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
export interface IContactsStepFields {
|
||||
title: string;
|
||||
description: string;
|
||||
submitButtonText: string;
|
||||
fields: {
|
||||
name: string;
|
||||
label: string;
|
||||
placeholder: string;
|
||||
required: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
const useContactsStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = useForm<IContactsStepFields>({
|
||||
defaultValues: {
|
||||
fields: [
|
||||
{
|
||||
name: "first_name",
|
||||
label: "",
|
||||
placeholder: "",
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
name: "last_name",
|
||||
label: "",
|
||||
placeholder: "",
|
||||
required: false,
|
||||
},
|
||||
{ name: "email", label: "", placeholder: "", required: false },
|
||||
{ name: "phone", label: "", placeholder: "", required: false },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields } = useFieldArray({
|
||||
control,
|
||||
name: "fields",
|
||||
});
|
||||
|
||||
const onSubmit = (data: IContactsStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const collectData = async () => {
|
||||
return getValues();
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
fields,
|
||||
control,
|
||||
collectData,
|
||||
getValues,
|
||||
};
|
||||
};
|
||||
|
||||
export default useContactsStepPresenter;
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
|
||||
export interface IFeaturesStepFields {
|
||||
title: string;
|
||||
description: string;
|
||||
cards: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const useFeaturesStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<IFeaturesStepFields>({
|
||||
defaultValues: {
|
||||
cards: [{ icon: "", title: "", description: "" }],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "cards",
|
||||
});
|
||||
|
||||
const onSubmit = (data: IFeaturesStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const collectData = async () => {
|
||||
return getValues();
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
fields,
|
||||
append,
|
||||
remove,
|
||||
control,
|
||||
watch,
|
||||
getValues,
|
||||
collectData,
|
||||
};
|
||||
};
|
||||
|
||||
export default useFeaturesStepPresenter;
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
interface FooterFormValues {
|
||||
email: string;
|
||||
phone: string;
|
||||
location: string;
|
||||
tagline: string;
|
||||
copyright: string;
|
||||
}
|
||||
|
||||
const useFooterStepPresenter = () => {
|
||||
const {
|
||||
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;
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
export interface IHeroStepFields {
|
||||
title: string;
|
||||
description: string;
|
||||
buttonText: string;
|
||||
buttonLink: string;
|
||||
gifFile: string;
|
||||
}
|
||||
|
||||
const useHeroStepPresenter = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<IHeroStepFields>();
|
||||
|
||||
const onSubmit = (data: IHeroStepFields) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
errors,
|
||||
onSubmit,
|
||||
getValues,
|
||||
};
|
||||
};
|
||||
|
||||
export default useHeroStepPresenter;
|
||||
Reference in New Issue
Block a user