275 lines
9.3 KiB
TypeScript
275 lines
9.3 KiB
TypeScript
// "use client"
|
|
|
|
// import type React from "react"
|
|
// import { useState } from "react"
|
|
// import { Upload } from "lucide-react"
|
|
// import { Button } from "@/components/ui/button"
|
|
// import { Input } from "@/components/ui/input"
|
|
// import { Label } from "@/components/ui/label"
|
|
// import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
// import { useOpenStore } from "@/lib/hooks"
|
|
// import { useToast } from "@/hooks/use-toast"
|
|
|
|
// interface OpenStorePageProps {
|
|
// locale?: string
|
|
// translations?: {
|
|
// title: string
|
|
// firstName: string
|
|
// lastName: string
|
|
// email: string
|
|
// phone: string
|
|
// uploadPatent: string
|
|
// submit: string
|
|
// selectedFile: string
|
|
// firstNameRequired: string
|
|
// lastNameRequired: string
|
|
// emailInvalid: string
|
|
// phoneInvalid: string
|
|
// fileRequired: string
|
|
// fileSizeError: string
|
|
// fileTypeError: string
|
|
// }
|
|
// }
|
|
|
|
// interface FormData {
|
|
// firstName: string
|
|
// lastName: string
|
|
// email: string
|
|
// phone: string
|
|
// file: File | null
|
|
// }
|
|
|
|
// interface FormErrors {
|
|
// firstName?: string
|
|
// lastName?: string
|
|
// email?: string
|
|
// phone?: string
|
|
// file?: string
|
|
// }
|
|
|
|
// export default function OpenStorePage({ locale = "ru", translations }: OpenStorePageProps) {
|
|
// const [formData, setFormData] = useState<FormData>({
|
|
// firstName: "",
|
|
// lastName: "",
|
|
// email: "",
|
|
// phone: "+993",
|
|
// file: null,
|
|
// })
|
|
// const [errors, setErrors] = useState<FormErrors>({})
|
|
// const [fileName, setFileName] = useState("")
|
|
|
|
// const { mutate: submitOpenStore, isPending: loading } = useOpenStore()
|
|
// const { toast } = useToast()
|
|
|
|
// const t = translations || {
|
|
// title: "Форма подачи заявления на открытие магазина",
|
|
// firstName: "Имя",
|
|
// lastName: "Фамилия",
|
|
// email: "Email",
|
|
// phone: "Телефон",
|
|
// uploadPatent: "Загрузите патент на розничную торговлю (PDF, JPG)",
|
|
// submit: "Отправить",
|
|
// selectedFile: "Выбранный файл",
|
|
// firstNameRequired: "Имя обязательно",
|
|
// lastNameRequired: "Фамилия обязательна",
|
|
// emailInvalid: "Некорректный email",
|
|
// phoneInvalid: "Некорректный номер телефона",
|
|
// fileRequired: "Патент обязателен",
|
|
// fileSizeError: "Файл слишком большой (макс. 25MB)",
|
|
// fileTypeError: "Только PDF и JPG документы",
|
|
// }
|
|
|
|
// const validateForm = (): boolean => {
|
|
// const newErrors: FormErrors = {}
|
|
|
|
// if (!formData.firstName.trim()) {
|
|
// newErrors.firstName = t.firstNameRequired
|
|
// }
|
|
|
|
// if (!formData.lastName.trim()) {
|
|
// newErrors.lastName = t.lastNameRequired
|
|
// }
|
|
|
|
// const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
|
// if (!emailRegex.test(formData.email)) {
|
|
// newErrors.email = t.emailInvalid
|
|
// }
|
|
|
|
// const phoneRegex = /^\+?[0-9]{6,15}$/
|
|
// if (!phoneRegex.test(formData.phone)) {
|
|
// newErrors.phone = t.phoneInvalid
|
|
// }
|
|
|
|
// if (!formData.file) {
|
|
// newErrors.file = t.fileRequired
|
|
// } else {
|
|
// const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"]
|
|
// if (!allowedTypes.includes(formData.file.type)) {
|
|
// newErrors.file = t.fileTypeError
|
|
// }
|
|
// if (formData.file.size > 25 * 1024 * 1024) {
|
|
// newErrors.file = t.fileSizeError
|
|
// }
|
|
// }
|
|
|
|
// setErrors(newErrors)
|
|
// return Object.keys(newErrors).length === 0
|
|
// }
|
|
|
|
// const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
// const { name, value } = e.target
|
|
// setFormData((prev) => ({ ...prev, [name]: value }))
|
|
// if (errors[name as keyof FormErrors]) {
|
|
// setErrors((prev) => ({ ...prev, [name]: undefined }))
|
|
// }
|
|
// }
|
|
|
|
// const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
// const file = e.target.files?.[0]
|
|
// if (file) {
|
|
// setFormData((prev) => ({ ...prev, file }))
|
|
// setFileName(file.name)
|
|
// if (errors.file) {
|
|
// setErrors((prev) => ({ ...prev, file: undefined }))
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// const handleSubmit = (e: React.FormEvent) => {
|
|
// e.preventDefault()
|
|
|
|
// if (!validateForm()) return
|
|
|
|
// if (formData.file) {
|
|
// submitOpenStore(
|
|
// {
|
|
// firstName: formData.firstName,
|
|
// lastName: formData.lastName,
|
|
// email: formData.email,
|
|
// phone: formData.phone,
|
|
// patentFile: formData.file,
|
|
// },
|
|
// {
|
|
// onSuccess: () => {
|
|
// toast({
|
|
// title: "Success",
|
|
// description: "Your store request has been submitted successfully",
|
|
// })
|
|
// setFormData({
|
|
// firstName: "",
|
|
// lastName: "",
|
|
// email: "",
|
|
// phone: "+993",
|
|
// file: null,
|
|
// })
|
|
// setFileName("")
|
|
// },
|
|
// onError: (error: any) => {
|
|
// toast({
|
|
// title: "Error",
|
|
// description: error?.message || "Failed to submit store request",
|
|
// variant: "destructive",
|
|
// })
|
|
// },
|
|
// },
|
|
// )
|
|
// }
|
|
// }
|
|
|
|
// return (
|
|
// <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
|
// <Card className="w-full max-w-md shadow-lg">
|
|
// <CardHeader>
|
|
// <CardTitle className="text-2xl text-center">{t.title}</CardTitle>
|
|
// <CardDescription className="text-center">Заполните форму для подачи заявления</CardDescription>
|
|
// </CardHeader>
|
|
// <CardContent>
|
|
// <form onSubmit={handleSubmit} className="space-y-4">
|
|
// {/* First Name */}
|
|
// <div className="space-y-2">
|
|
// <Label htmlFor="firstName">{t.firstName}</Label>
|
|
// <Input
|
|
// id="firstName"
|
|
// name="firstName"
|
|
// value={formData.firstName}
|
|
// onChange={handleInputChange}
|
|
// className={errors.firstName ? "border-red-500" : ""}
|
|
// />
|
|
// {errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
|
|
// </div>
|
|
|
|
// {/* Last Name */}
|
|
// <div className="space-y-2">
|
|
// <Label htmlFor="lastName">{t.lastName}</Label>
|
|
// <Input
|
|
// id="lastName"
|
|
// name="lastName"
|
|
// value={formData.lastName}
|
|
// onChange={handleInputChange}
|
|
// className={errors.lastName ? "border-red-500" : ""}
|
|
// />
|
|
// {errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
|
|
// </div>
|
|
|
|
// {/* Email */}
|
|
// <div className="space-y-2">
|
|
// <Label htmlFor="email">{t.email}</Label>
|
|
// <Input
|
|
// id="email"
|
|
// name="email"
|
|
// type="email"
|
|
// value={formData.email}
|
|
// onChange={handleInputChange}
|
|
// className={errors.email ? "border-red-500" : ""}
|
|
// />
|
|
// {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
|
|
// </div>
|
|
|
|
// {/* Phone */}
|
|
// <div className="space-y-2">
|
|
// <Label htmlFor="phone">{t.phone}</Label>
|
|
// <Input
|
|
// id="phone"
|
|
// name="phone"
|
|
// value={formData.phone}
|
|
// onChange={handleInputChange}
|
|
// placeholder="+99361111111"
|
|
// className={errors.phone ? "border-red-500" : ""}
|
|
// />
|
|
// {errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
|
|
// </div>
|
|
|
|
// {/* File Upload */}
|
|
// <div className="space-y-2">
|
|
// <Label htmlFor="file">{t.uploadPatent}</Label>
|
|
// <div className="flex flex-col gap-2">
|
|
// <Input id="file" type="file" accept=".pdf,.jpg,.jpeg" onChange={handleFileChange} className="hidden" />
|
|
// <Button
|
|
// type="button"
|
|
// variant="outline"
|
|
// className="w-full bg-transparent"
|
|
// onClick={() => document.getElementById("file")?.click()}
|
|
// >
|
|
// <Upload className="mr-2 h-4 w-4" />
|
|
// {t.uploadPatent}
|
|
// </Button>
|
|
// {fileName && (
|
|
// <p className="text-sm text-gray-600">
|
|
// {t.selectedFile}: {fileName}
|
|
// </p>
|
|
// )}
|
|
// {errors.file && <p className="text-sm text-red-500">{errors.file}</p>}
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* Submit Button */}
|
|
// <Button type="submit" className="w-full" disabled={loading}>
|
|
// {loading ? "Загрузка..." : t.submit}
|
|
// </Button>
|
|
// </form>
|
|
// </CardContent>
|
|
// </Card>
|
|
// </div>
|
|
// )
|
|
// }
|