Contect with order api
This commit is contained in:
Jelaletdin12
@@ -18,11 +18,12 @@ import type { DeliveryType, PaymentType } from "@/lib/types/api";
|
||||
export default function CartPage() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [paymentType, setPaymentType] = useState<PaymentType | null>(null);
|
||||
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY");
|
||||
const [deliveryType, setDeliveryType] =
|
||||
useState<DeliveryType>("SELECTED_DELIVERY");
|
||||
const [selectedRegion, setSelectedRegion] = useState<string>("");
|
||||
const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
|
||||
const [note, setNote] = useState<string>("");
|
||||
|
||||
const [phone, setPhone] = useState<string>("");
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
|
||||
@@ -48,7 +49,10 @@ export default function CartPage() {
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
}, [provinces]);
|
||||
|
||||
const availableRegions = useMemo(() => Object.keys(regionGroups), [regionGroups]);
|
||||
const availableRegions = useMemo(
|
||||
() => Object.keys(regionGroups),
|
||||
[regionGroups]
|
||||
);
|
||||
|
||||
// Memoize items grouped by seller
|
||||
const itemsBySeller = useMemo(() => {
|
||||
@@ -86,7 +90,9 @@ export default function CartPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
|
||||
const selectedProvinceData = provinces.find(
|
||||
(p) => p.id === selectedProvince
|
||||
);
|
||||
if (!selectedProvinceData) return;
|
||||
|
||||
const orderData = userStore.getOrderData();
|
||||
@@ -99,7 +105,7 @@ export default function CartPage() {
|
||||
createOrder(
|
||||
{
|
||||
customer_name: orderData.customer_name,
|
||||
customer_phone: orderData.customer_phone,
|
||||
customer_phone: phone,
|
||||
customer_address: selectedProvinceData.name,
|
||||
shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart",
|
||||
payment_type_id: paymentType.id,
|
||||
@@ -141,48 +147,52 @@ export default function CartPage() {
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 rounded-xl">
|
||||
{Object.entries(itemsBySeller).map(([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
const quantity = item.product_quantity;
|
||||
const total = price * quantity;
|
||||
{Object.entries(itemsBySeller).map(
|
||||
([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(
|
||||
item.product.price_amount || "0"
|
||||
);
|
||||
const quantity = item.product_quantity;
|
||||
const total = price * quantity;
|
||||
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image:
|
||||
item.product.media?.[0]?.images_800x800 ||
|
||||
item.product.media?.[0]?.thumbnail,
|
||||
images:
|
||||
item.product.media?.map(
|
||||
(m) => m.images_800x800 || m.thumbnail
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image:
|
||||
item.product.media?.[0]?.images_800x800 ||
|
||||
item.product.media?.[0]?.thumbnail,
|
||||
images:
|
||||
item.product.media?.map(
|
||||
(m) => m.images_800x800 || m.thumbnail
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -217,8 +227,10 @@ export default function CartPage() {
|
||||
onNoteChange={setNote}
|
||||
onCompleteOrder={handleCompleteOrder}
|
||||
isLoading={isCreatingOrder}
|
||||
phone={phone}
|
||||
onPhoneChange={setPhone}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,76 +1,17 @@
|
||||
"use client";
|
||||
import {
|
||||
useFavorites,
|
||||
useAddToCart,
|
||||
useRemoveFromFavorites,
|
||||
} from "@/lib/hooks";
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Heart, ShoppingCart } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
import { useFavorites } from "@/lib/hooks";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslations } from "next-intl";
|
||||
import ProductCard from "@/features/home/components/ProductCard";
|
||||
import type { Favorite } from "@/lib/types/api";
|
||||
|
||||
export default function FavoritesPage() {
|
||||
const [isHovered, setIsHovered] = useState<number | null>(null);
|
||||
const { toast } = useToast();
|
||||
const t = useTranslations();
|
||||
|
||||
const { data: favorites, isLoading, isError } = useFavorites();
|
||||
const { mutate: removeFromFavorites, isPending: isRemoving } =
|
||||
useRemoveFromFavorites();
|
||||
const { mutate: addToCart, isPending: isAddingToCart } = useAddToCart();
|
||||
|
||||
const handleRemoveFromFavorites = useCallback(
|
||||
(productId: number) => {
|
||||
removeFromFavorites(productId, {
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: t("removed_from_favorites"),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: t("error"),
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
[removeFromFavorites, toast, t]
|
||||
);
|
||||
|
||||
const handleAddToCart = useCallback(
|
||||
(productId: number) => {
|
||||
addToCart(
|
||||
{ productId },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: t("added_to_cart"),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: t("error"),
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
[addToCart, toast, t]
|
||||
);
|
||||
|
||||
const loadingSkeleton = useMemo(
|
||||
() => (
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
@@ -79,17 +20,12 @@ export default function FavoritesPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
[t]
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return loadingSkeleton;
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !favorites || favorites.length === 0) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<div className="container mx-auto px-6 py-8 bg-white">
|
||||
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-2xl text-gray-400">{t("empty_favorites")}</p>
|
||||
@@ -99,145 +35,48 @@ export default function FavoritesPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{favorites.map((favorite: Favorite) => (
|
||||
<ProductCard
|
||||
key={favorite.product.id}
|
||||
productId={favorite.product.id}
|
||||
product={favorite.product}
|
||||
onRemove={() => handleRemoveFromFavorites(favorite.product.id)}
|
||||
onAddToCart={() => handleAddToCart(favorite.product.id)}
|
||||
onHover={setIsHovered}
|
||||
isHovered={isHovered === favorite.product.id}
|
||||
isRemoving={isRemoving}
|
||||
isAddingToCart={isAddingToCart}
|
||||
/>
|
||||
))}
|
||||
<div className="container mx-auto px-6
|
||||
md:px-4 lg:px-6 pb-12 space-y-8 max-w-[1504px]
|
||||
">
|
||||
<h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">{t("favorite_products")}</h1>
|
||||
<div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
|
||||
{favorites.map((favorite: Favorite) => {
|
||||
const product = favorite.product;
|
||||
|
||||
const allImages = product.media
|
||||
?.map(
|
||||
(media) =>
|
||||
media.images_800x800 ||
|
||||
media.images_720x720 ||
|
||||
media.images_400x400 ||
|
||||
media.thumbnail
|
||||
)
|
||||
.filter(Boolean) || ["/placeholder-product.jpg"];
|
||||
|
||||
const formattedPrice = product.price_amount
|
||||
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
|
||||
: "Price not available";
|
||||
|
||||
return (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
price={
|
||||
product.price_amount ? parseFloat(product.price_amount) : null
|
||||
}
|
||||
struct_price_text={formattedPrice}
|
||||
images={allImages}
|
||||
labels={[]}
|
||||
price_color="#0059ff"
|
||||
height={360}
|
||||
width={250}
|
||||
button={true}
|
||||
stock={product.stock}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
price_amount: string;
|
||||
old_price_amount?: string | null;
|
||||
media: Array<{
|
||||
thumbnail: string;
|
||||
images_400x400: string;
|
||||
images_720x720: string;
|
||||
images_800x800: string;
|
||||
images_1200x1200: string;
|
||||
}>;
|
||||
stock: number;
|
||||
}
|
||||
|
||||
interface ProductCardProps {
|
||||
productId: number;
|
||||
product: Product;
|
||||
onRemove: () => void;
|
||||
onAddToCart: () => void;
|
||||
onHover: (id: number | null) => void;
|
||||
isHovered: boolean;
|
||||
isRemoving: boolean;
|
||||
isAddingToCart: boolean;
|
||||
}
|
||||
|
||||
function ProductCard({
|
||||
productId,
|
||||
product,
|
||||
onRemove,
|
||||
onAddToCart,
|
||||
onHover,
|
||||
isHovered,
|
||||
isRemoving,
|
||||
isAddingToCart,
|
||||
}: ProductCardProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
if (!product) return null;
|
||||
|
||||
const imageUrl =
|
||||
product.media?.[0]?.images_800x800 ||
|
||||
product.media?.[0]?.thumbnail ||
|
||||
"/placeholder.svg";
|
||||
|
||||
const price = `${parseFloat(product.price_amount).toFixed(2)} TMT`;
|
||||
const oldPrice = product.old_price_amount
|
||||
? `${parseFloat(product.old_price_amount).toFixed(2)} TMT`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="group overflow-hidden rounded-xl transition-shadow hover:shadow-lg relative border-none"
|
||||
onMouseEnter={() => onHover(productId)}
|
||||
onMouseLeave={() => onHover(null)}
|
||||
>
|
||||
<Link href={`/product/${productId || product.slug}`} className="block">
|
||||
<div className="relative aspect-square bg-gray-50">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
disabled={isRemoving}
|
||||
className="absolute top-2 right-2 z-10 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Heart className="h-5 w-5 fill-red-500 text-red-500" />
|
||||
</button>
|
||||
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={product.name}
|
||||
fill
|
||||
sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
|
||||
className="object-contain p-4 group-hover:scale-105 transition-transform"
|
||||
priority={false}
|
||||
/>
|
||||
|
||||
{product.stock === 0 && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||
<Badge variant="secondary" className="text-sm">
|
||||
{t("out_of_stock")}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<h3 className="font-medium text-sm line-clamp-2 mb-2 min-h-[40px]">
|
||||
{product.name}
|
||||
</h3>
|
||||
<div className="space-y-1">
|
||||
{oldPrice && (
|
||||
<p className="text-sm text-gray-400 line-through">{oldPrice}</p>
|
||||
)}
|
||||
<p className="text-lg font-bold text-blue-600">{price}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{isHovered && product.stock > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-white via-white to-transparent">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onAddToCart();
|
||||
}}
|
||||
disabled={isAddingToCart}
|
||||
className="w-full rounded-xl gap-2"
|
||||
size="sm"
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4" />
|
||||
{t("add_to_cart")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,65 +1,74 @@
|
||||
"use client"
|
||||
"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"
|
||||
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
|
||||
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
|
||||
}
|
||||
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
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
file: File | null;
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
email?: string
|
||||
phone?: string
|
||||
file?: string
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
file?: string;
|
||||
}
|
||||
|
||||
export default function OpenStorePage({ locale = "ru", translations }: OpenStorePageProps) {
|
||||
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 [errors, setErrors] = useState<FormErrors>({});
|
||||
const [fileName, setFileName] = useState("");
|
||||
|
||||
const { mutate: submitOpenStore, isPending: loading } = useOpenStore()
|
||||
const { toast } = useToast()
|
||||
const { mutate: submitOpenStore, isPending: loading } = useOpenStore();
|
||||
const { toast } = useToast();
|
||||
|
||||
const t = translations || {
|
||||
title: "Форма подачи заявления на открытие магазина",
|
||||
@@ -77,68 +86,68 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
fileRequired: "Патент обязателен",
|
||||
fileSizeError: "Файл слишком большой (макс. 25MB)",
|
||||
fileTypeError: "Только PDF и JPG документы",
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {}
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = t.firstNameRequired
|
||||
newErrors.firstName = t.firstNameRequired;
|
||||
}
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = t.lastNameRequired
|
||||
newErrors.lastName = t.lastNameRequired;
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
newErrors.email = t.emailInvalid
|
||||
newErrors.email = t.emailInvalid;
|
||||
}
|
||||
|
||||
const phoneRegex = /^\+?[0-9]{6,15}$/
|
||||
const phoneRegex = /^\+?[0-9]{6,15}$/;
|
||||
if (!phoneRegex.test(formData.phone)) {
|
||||
newErrors.phone = t.phoneInvalid
|
||||
newErrors.phone = t.phoneInvalid;
|
||||
}
|
||||
|
||||
if (!formData.file) {
|
||||
newErrors.file = t.fileRequired
|
||||
newErrors.file = t.fileRequired;
|
||||
} else {
|
||||
const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"]
|
||||
const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"];
|
||||
if (!allowedTypes.includes(formData.file.type)) {
|
||||
newErrors.file = t.fileTypeError
|
||||
newErrors.file = t.fileTypeError;
|
||||
}
|
||||
if (formData.file.size > 25 * 1024 * 1024) {
|
||||
newErrors.file = t.fileSizeError
|
||||
newErrors.file = t.fileSizeError;
|
||||
}
|
||||
}
|
||||
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
if (errors[name as keyof FormErrors]) {
|
||||
setErrors((prev) => ({ ...prev, [name]: undefined }))
|
||||
setErrors((prev) => ({ ...prev, [name]: undefined }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setFormData((prev) => ({ ...prev, file }))
|
||||
setFileName(file.name)
|
||||
setFormData((prev) => ({ ...prev, file }));
|
||||
setFileName(file.name);
|
||||
if (errors.file) {
|
||||
setErrors((prev) => ({ ...prev, file: undefined }))
|
||||
setErrors((prev) => ({ ...prev, file: undefined }));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) return
|
||||
if (!validateForm()) return;
|
||||
|
||||
if (formData.file) {
|
||||
submitOpenStore(
|
||||
@@ -154,34 +163,36 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Your store request has been submitted successfully",
|
||||
})
|
||||
});
|
||||
setFormData({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "+993",
|
||||
file: null,
|
||||
})
|
||||
setFileName("")
|
||||
});
|
||||
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">
|
||||
<div className=" 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>
|
||||
<CardDescription className="text-center">
|
||||
Заполните форму для подачи заявления
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@@ -195,7 +206,9 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
onChange={handleInputChange}
|
||||
className={errors.firstName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
|
||||
{errors.firstName && (
|
||||
<p className="text-sm text-red-500">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
@@ -208,7 +221,9 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
onChange={handleInputChange}
|
||||
className={errors.lastName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
|
||||
{errors.lastName && (
|
||||
<p className="text-sm text-red-500">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
@@ -222,7 +237,9 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
onChange={handleInputChange}
|
||||
className={errors.email ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
|
||||
{errors.email && (
|
||||
<p className="text-sm text-red-500">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
@@ -236,14 +253,22 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
placeholder="+99361111111"
|
||||
className={errors.phone ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
|
||||
{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" />
|
||||
<Input
|
||||
id="file"
|
||||
type="file"
|
||||
accept=".pdf,.jpg,.jpeg"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -258,17 +283,23 @@ export default function OpenStorePage({ locale = "ru", translations }: OpenStore
|
||||
{t.selectedFile}: {fileName}
|
||||
</p>
|
||||
)}
|
||||
{errors.file && <p className="text-sm text-red-500">{errors.file}</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}>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full cursor-pointer bg-[#005bff] hover:bg-[#0041c4]"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Загрузка..." : t.submit}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user