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
2025-11-10 12:41:41 +03:30
parent b8169fbcd9
commit 2b9eaa0495
21 changed files with 312 additions and 56 deletions
@@ -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;