reui-blocks/blocks/offer-modal4.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowRight, Mail, X } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Controller } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import { Field, FieldError } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { cn } from "@/lib/utils";

const formSchema = z.object({
  email: z.string().email("آدرس ایمیل نامعتبر است"),
});

type FormType = z.infer<typeof formSchema>;

type OfferModalData = {
  overline: string;
  title: string;
  description: string;
};

type Offermodal4Props = OfferModalData;

const OFFER_MODAL = {
  title: "عضو شوید و ۲۰٪ روی پلن سالانه سامانه مدیریت ارتباط با مشتری بگیرید",
  description:
    "خبر نسخه و راهنمای فروش را بگیرید؛ هر زمان خواستید لغو کنید.",
};

const OfferModal4 = ({
  title = OFFER_MODAL.title,
  description = OFFER_MODAL.description,
}: Offermodal4Props) => {
  const [isOpen, setIsOpen] = useState(true);
  const form = useForm<FormType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  });

  function onSubmit(values: FormType) {
    console.log(values);
  }

  return (
    <div
      dir="rtl"
      lang="fa"
      className="relative flex min-h-[32rem] w-full items-center justify-center p-4 md:min-h-[40rem]"
    >
      {isOpen ? (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="offer-modal4-title"
          className={cn(
            "group relative grid w-full max-w-full overflow-hidden rounded-none border bg-popover text-popover-foreground shadow-lg sm:max-w-190 lg:max-w-117.5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
          )}
        >
          <div className="absolute -end-px -top-px z-10">
            <Button
              type="button"
              size="icon-sm"
              aria-label="بستن"
              className="origin-top-end rounded-none transition-all duration-300 lg:scale-50 lg:opacity-0 lg:group-hover:scale-100 lg:group-hover:opacity-100 [@media(hover:none)]:scale-100 [@media(hover:none)]:opacity-100"
              onClick={() => setIsOpen(false)}
            >
              <X />
            </Button>
          </div>
          <div className="h-full max-h-72.5 overflow-hidden max-lg:hidden">
            <img
              src="/block-media/shadcnblocks/block/ecommerce/promotional/silhouette-with-headphones-1.png"
              alt="تصویر پیشنهاد ویژه"
              className="block size-full object-cover"
            />
          </div>
          <div className="space-y-5 overflow-y-auto px-9 py-5 lg:px-15 lg:py-7">
            <div className="space-y-2.5">
              <h2
                id="offer-modal4-title"
                className="text-center text-3xl font-medium"
              >
                {title}
              </h2>
            </div>
            <form className="space-y-2.5" onSubmit={form.handleSubmit(onSubmit)}>
              <div className="flex items-center gap-2.5">
                <Controller
                  control={form.control}
                  name="email"
                  render={({ field, fieldState }) => (
                    <Field className="flex-1" data-invalid={fieldState.invalid}>
                      <InputGroup dir="rtl">
                        <InputGroupInput
                          type="email"
                          placeholder="ایمیل کاری"
                          className="text-start"
                          {...field}
                          aria-invalid={fieldState.invalid}
                        />
                        <InputGroupAddon align="inline-end">
                          <Mail />
                        </InputGroupAddon>
                      </InputGroup>
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                <Button size="icon" type="submit" className="lg:hidden">
                  <ArrowRight className="rtl:rotate-180" />
                </Button>
              </div>
              <Button className="w-full max-lg:hidden" type="submit">
                فعال‌سازی تخفیف
              </Button>
            </form>
            <p className="text-center text-xs leading-relaxed text-muted-foreground">
              {description}
            </p>
          </div>
        </div>
      ) : null}
    </div>
  );
};

export { OfferModal4 };