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,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;