Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,312 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { LoaderIcon, Search } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Field,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.min(1, "ایمیل الزامی است")
|
||||
.email("لطفاً یک ایمیل معتبر وارد کنید"),
|
||||
subject: z.string().min(1, "موضوع الزامی است"),
|
||||
message: z.string().min(1, "پیام الزامی است"),
|
||||
});
|
||||
|
||||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||||
|
||||
interface FAQ {
|
||||
question: string;
|
||||
answer: string;
|
||||
category?: string;
|
||||
}
|
||||
|
||||
interface Help3Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
faqs?: FAQ[];
|
||||
formTitle?: string;
|
||||
formDescription?: string;
|
||||
className?: string;
|
||||
onSubmit?: (data: ContactFormData) => Promise<void>;
|
||||
}
|
||||
|
||||
const Help3 = ({
|
||||
title = "راهنمای کاربران",
|
||||
description = "در پایگاه دانش جستجو کنید یا درخواست خود را در پایین ثبت کنید.",
|
||||
faqs = [
|
||||
{
|
||||
question: "چطور رمز عبورم را بازنشانی کنم؟",
|
||||
answer:
|
||||
"روی لینک «فراموشی رمز عبور» در صفحه ورود کلیک کنید. ایمیل خود را وارد کنید تا لینک بازنشانی برایتان ارسال شود. این لینک پس از ۲۴ ساعت منقضی می‌شود.",
|
||||
category: "حساب کاربری",
|
||||
},
|
||||
{
|
||||
question: "چطور پلن خود را ارتقا بدهم؟",
|
||||
answer:
|
||||
"به تنظیمات > صورتحساب > تغییر پلن بروید. پلن جدید را انتخاب و تأیید کنید. مابه‌التفاوت به‌صورت تناسبی بلافاصله از کارت شما کسر می‌شود.",
|
||||
category: "صورتحساب",
|
||||
},
|
||||
{
|
||||
question: "آیا می‌توانم داده‌هایم را خروجی بگیرم؟",
|
||||
answer:
|
||||
"بله، به تنظیمات > داده‌ها > خروجی بروید. می‌توانید همه داده‌ها را در قالب CSV یا JSON دریافت کنید. خروجی‌های حجیم ممکن است چند دقیقه زمان ببرند.",
|
||||
category: "حساب کاربری",
|
||||
},
|
||||
{
|
||||
question: "چه روش‌های پرداختی را قبول می‌کنید؟",
|
||||
answer:
|
||||
"کارت‌های اعتباری اصلی (Visa، Mastercard، American Express)، PayPal و برای پلن‌های سالانه بالای ۱٬۰۰۰ دلار، انتقال بانکی را می‌پذیریم.",
|
||||
category: "صورتحساب",
|
||||
},
|
||||
{
|
||||
question: "چطور اشتراکم را لغو کنم؟",
|
||||
answer:
|
||||
"به تنظیمات > صورتحساب > لغو اشتراک بروید. دسترسی شما تا پایان دوره فعلی صورتحساب ادامه دارد و هر زمان می‌توانید دوباره فعال کنید.",
|
||||
category: "صورتحساب",
|
||||
},
|
||||
{
|
||||
question: "آیا داده‌های من امن است؟",
|
||||
answer:
|
||||
"بله، از رمزنگاری استاندارد صنعتی (AES-256) برای داده‌های ذخیره‌شده و TLS 1.3 برای داده‌های در حال انتقال استفاده می‌کنیم. گواهی SOC 2 Type II داریم.",
|
||||
category: "امنیت",
|
||||
},
|
||||
],
|
||||
formTitle = "پاسخ خود را پیدا نکردید؟",
|
||||
formDescription = "درخواست خود را ثبت کنید؛ تیم ما ظرف ۲۴ ساعت پاسخ می‌دهد.",
|
||||
className,
|
||||
onSubmit,
|
||||
}: Help3Props) => {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
|
||||
const filteredFaqs = useMemo(() => {
|
||||
if (!searchQuery.trim()) return faqs;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return faqs.filter(
|
||||
(faq) =>
|
||||
faq.question.toLowerCase().includes(query) ||
|
||||
faq.answer.toLowerCase().includes(query),
|
||||
);
|
||||
}, [faqs, searchQuery]);
|
||||
|
||||
const form = useForm<ContactFormData>({
|
||||
resolver: zodResolver(contactFormSchema),
|
||||
mode: "onSubmit",
|
||||
reValidateMode: "onSubmit",
|
||||
defaultValues: {
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
},
|
||||
});
|
||||
|
||||
const handleFormSubmit = async (data: ContactFormData) => {
|
||||
try {
|
||||
if (onSubmit) {
|
||||
await onSubmit(data);
|
||||
} else {
|
||||
console.log("Form submitted:", data);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
}
|
||||
setIsSubmitted(true);
|
||||
setShowSuccess(true);
|
||||
form.reset();
|
||||
setTimeout(() => setShowSuccess(false), 4500);
|
||||
setTimeout(() => setIsSubmitted(false), 5000);
|
||||
} catch {
|
||||
form.setError("root", {
|
||||
message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<div className="mb-10 text-center">
|
||||
<h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-8">
|
||||
<Search className="absolute top-1/2 start-3 size-5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="جستجو در پاسخ‌ها..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="ps-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Accordion type="single" collapsible className="mb-16">
|
||||
{filteredFaqs.length > 0 ? (
|
||||
filteredFaqs.map((faq, index) => (
|
||||
<AccordionItem key={index} value={`item-${index}`}>
|
||||
<AccordionTrigger className="text-start">
|
||||
<div className="flex items-center gap-3">
|
||||
{faq.category && (
|
||||
<span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
|
||||
{faq.category}
|
||||
</span>
|
||||
)}
|
||||
<span>{faq.question}</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground">
|
||||
{faq.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))
|
||||
) : (
|
||||
<p className="py-8 text-center text-muted-foreground">
|
||||
نتیجه‌ای برای «{searchQuery}» یافت نشد.
|
||||
</p>
|
||||
)}
|
||||
</Accordion>
|
||||
|
||||
<div className="rounded-xl bg-muted/50 p-8">
|
||||
<div className="mb-6 text-center">
|
||||
<h2 className="mb-2 text-xl font-semibold">{formTitle}</h2>
|
||||
<p className="text-sm text-muted-foreground">{formDescription}</p>
|
||||
</div>
|
||||
|
||||
{isSubmitted && (
|
||||
<div
|
||||
className={cn(
|
||||
"mb-6 rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
|
||||
showSuccess ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
>
|
||||
<p className="text-sm font-medium text-green-600 dark:text-green-400">
|
||||
درخواست شما ثبت شد. به‌زودی با شما تماس می‌گیریم!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.handleSubmit(handleFormSubmit)}>
|
||||
<FieldGroup>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
ایمیل <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id={field.name}
|
||||
type="email"
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder="you@example.com"
|
||||
className="bg-background"
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="subject"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
موضوع <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id={field.name}
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder="خلاصه موضوع"
|
||||
className="bg-background"
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="message"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field data-invalid={fieldState.invalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
پیام <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Textarea
|
||||
{...field}
|
||||
id={field.name}
|
||||
aria-invalid={fieldState.invalid}
|
||||
placeholder="مشکل یا پرسش خود را با جزئیات بنویسید..."
|
||||
rows={5}
|
||||
className="bg-background"
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
{form.formState.errors.root && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.root.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting ? (
|
||||
<>
|
||||
<LoaderIcon className="me-2 size-4 animate-spin" />
|
||||
در حال ارسال...
|
||||
</>
|
||||
) : (
|
||||
"ثبت درخواست"
|
||||
)}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Help3 };
|
||||
Reference in New Issue
Block a user