added debounce to - + buttons
This commit is contained in:
Jelaletdin12
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import CartItemCard from "../../../features/cart/components/CartItemCard";
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
import { userStore } from "@/features/profile/userStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { DeliveryType, PaymentType } from "../../../features/cart/types";
|
||||
import type { DeliveryType, PaymentType } from "@/lib/types/api";
|
||||
|
||||
export default function CartPage() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
@@ -22,8 +22,8 @@ export default function CartPage() {
|
||||
const [selectedRegion, setSelectedRegion] = useState<string>("");
|
||||
const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
|
||||
const [note, setNote] = useState<string>("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const { data: cartResponse, isLoading, isError } = useCart();
|
||||
@@ -37,15 +37,43 @@ export default function CartPage() {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
const regionGroups = provinces.reduce((acc, province) => {
|
||||
if (!acc[province.region]) {
|
||||
acc[province.region] = [];
|
||||
}
|
||||
acc[province.region].push(province);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
// Memoize region groups to prevent unnecessary recalculations
|
||||
const regionGroups = useMemo(() => {
|
||||
return provinces.reduce((acc, province) => {
|
||||
if (!acc[province.region]) {
|
||||
acc[province.region] = [];
|
||||
}
|
||||
acc[province.region].push(province);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
}, [provinces]);
|
||||
|
||||
const availableRegions = Object.keys(regionGroups);
|
||||
const availableRegions = useMemo(() => Object.keys(regionGroups), [regionGroups]);
|
||||
|
||||
// Memoize items grouped by seller
|
||||
const itemsBySeller = useMemo(() => {
|
||||
return cartItems.reduce((acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0;
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: [],
|
||||
};
|
||||
}
|
||||
acc[sellerId].items.push(item);
|
||||
return acc;
|
||||
}, {} as Record<number, { seller: { id: number; name: string }; items: typeof cartItems }>);
|
||||
}, [cartItems]);
|
||||
|
||||
// Memoize total amount
|
||||
const totalAmount = useMemo(() => {
|
||||
return cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
return sum + price * item.product_quantity;
|
||||
}, 0);
|
||||
}, [cartItems]);
|
||||
|
||||
const handleDeliveryTypeChange = (type: DeliveryType) => {
|
||||
setDeliveryType(type);
|
||||
@@ -61,7 +89,6 @@ export default function CartPage() {
|
||||
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
|
||||
if (!selectedProvinceData) return;
|
||||
|
||||
// Kullanıcı bilgilerini store'dan al
|
||||
const orderData = userStore.getOrderData();
|
||||
if (!orderData) {
|
||||
console.error("User data not found");
|
||||
@@ -92,7 +119,7 @@ export default function CartPage() {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<p>{t("loading")}</p>
|
||||
<p>{t("common.loading")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -101,137 +128,80 @@ export default function CartPage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl text-gray-400 font-semibold">
|
||||
{t("emptyCart")}
|
||||
{t("cart_empty")}
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const translations = {
|
||||
cart: t("cart"),
|
||||
ordersIn: t("order_available_in_shops"),
|
||||
pricePerUnit: t("unit_price"),
|
||||
additionalPrice: t("extra_price"),
|
||||
discount: t("discount"),
|
||||
totalPrice: t("total_price"),
|
||||
paymentType: t("payment_type"),
|
||||
cash: t("cash"),
|
||||
card: t("card"),
|
||||
deliveryType: t("delivery_type"),
|
||||
delivery: t("delivery"),
|
||||
pickup: t("pickup"),
|
||||
selectRegion: t("choose_region"),
|
||||
selectAddress: t("choose_address"),
|
||||
note: t("note"),
|
||||
placeOrder: t("order"),
|
||||
emptyCart: t("cart_empty"),
|
||||
map: t("address"),
|
||||
};
|
||||
|
||||
const itemsBySeller = cartItems.reduce((acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0;
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: [],
|
||||
};
|
||||
}
|
||||
acc[sellerId].items.push(item);
|
||||
return acc;
|
||||
}, {} as Record<number, { seller: any; items: typeof cartItems }>);
|
||||
|
||||
const totalAmount = cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
return sum + price * item.product_quantity;
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{translations.cart}</h1>
|
||||
<h1 className="text-3xl font-bold mb-6">{t("cart")}</h1>
|
||||
|
||||
<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
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
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>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<OrderSummary
|
||||
order={{
|
||||
id: 1,
|
||||
seller: { id: 1, name: "Store" },
|
||||
items: cartItems.map((item) => ({
|
||||
...item,
|
||||
quantity: item.product_quantity,
|
||||
price: parseFloat(item.product.price_amount || "0"),
|
||||
total:
|
||||
parseFloat(item.product.price_amount || "0") *
|
||||
item.product_quantity,
|
||||
seller: {
|
||||
id: item.product.channel?.[0]?.id || 0,
|
||||
name: item.product.channel?.[0]?.name || "Unknown",
|
||||
},
|
||||
})),
|
||||
billing: {
|
||||
body: [
|
||||
{
|
||||
title: t("goods"),
|
||||
title: t("products"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
],
|
||||
footer: {
|
||||
title: t("total"),
|
||||
title: t("total_price"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
paymentType={paymentType}
|
||||
deliveryType={deliveryType}
|
||||
selectedRegion={selectedRegion}
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
useAddToCart,
|
||||
useRemoveFromFavorites,
|
||||
} from "@/lib/hooks";
|
||||
import { useState } from "react";
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Heart, ShoppingCart } from "lucide-react";
|
||||
@@ -13,82 +13,77 @@ import { Card } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useTranslations } from "next-intl";
|
||||
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 t = {
|
||||
favorites: "Избранные",
|
||||
addToCart: "В корзину",
|
||||
emptyFavorites: "У вас пока нет избранных товаров",
|
||||
removedFromFavorites: "Товар удален из избранного",
|
||||
addedToCart: "Товар добавлен в корзину",
|
||||
error: "Произошла ошибка",
|
||||
};
|
||||
|
||||
const handleRemoveFromFavorites = (productId: number) => {
|
||||
const handleRemoveFromFavorites = useCallback((productId: number) => {
|
||||
removeFromFavorites(productId, {
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: t.removedFromFavorites,
|
||||
title: t("removed_from_favorites"),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: t.error,
|
||||
title: t("error"),
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
}, [removeFromFavorites, toast, t]);
|
||||
|
||||
const handleAddToCart = (productId: number) => {
|
||||
const handleAddToCart = useCallback((productId: number) => {
|
||||
addToCart(
|
||||
{ productId },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: t.addedToCart,
|
||||
title: t("added_to_cart"),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: t.error,
|
||||
title: t("error"),
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
}, [addToCart, toast, t]);
|
||||
|
||||
const loadingSkeleton = useMemo(() => (
|
||||
<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">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Skeleton key={i} className="w-full h-64 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
), [t]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.favorites}</h1>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Skeleton key={i} className="w-full h-64 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return loadingSkeleton;
|
||||
}
|
||||
|
||||
if (isError || !favorites || favorites.length === 0) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.favorites}</h1>
|
||||
<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.emptyFavorites}</p>
|
||||
<p className="text-2xl text-gray-400">{t("empty_favorites")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -96,7 +91,7 @@ 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.favorites}</h1>
|
||||
<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
|
||||
@@ -109,7 +104,6 @@ export default function FavoritesPage() {
|
||||
isHovered={isHovered === favorite.product.id}
|
||||
isRemoving={isRemoving}
|
||||
isAddingToCart={isAddingToCart}
|
||||
translations={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -142,7 +136,6 @@ interface ProductCardProps {
|
||||
isHovered: boolean;
|
||||
isRemoving: boolean;
|
||||
isAddingToCart: boolean;
|
||||
translations: { addToCart: string };
|
||||
}
|
||||
|
||||
function ProductCard({
|
||||
@@ -154,21 +147,17 @@ function ProductCard({
|
||||
isHovered,
|
||||
isRemoving,
|
||||
isAddingToCart,
|
||||
translations,
|
||||
}: ProductCardProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
if (!product) return null;
|
||||
|
||||
// Получаем первое изображение из media
|
||||
const imageUrl =
|
||||
product.media?.[0]?.images_800x800 ||
|
||||
product.media?.[0]?.thumbnail ||
|
||||
"/placeholder.svg";
|
||||
|
||||
// Форматируем цену
|
||||
const price = product.old_price_amount
|
||||
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
|
||||
: `${parseFloat(product.price_amount).toFixed(2)} TMT`;
|
||||
|
||||
const price = `${parseFloat(product.price_amount).toFixed(2)} TMT`;
|
||||
const oldPrice = product.old_price_amount
|
||||
? `${parseFloat(product.old_price_amount).toFixed(2)} TMT`
|
||||
: null;
|
||||
@@ -179,7 +168,7 @@ function ProductCard({
|
||||
onMouseEnter={() => onHover(productId)}
|
||||
onMouseLeave={() => onHover(null)}
|
||||
>
|
||||
<Link href={`/product/${productId|| product.slug}`} className="block">
|
||||
<Link href={`/product/${productId || product.slug}`} className="block">
|
||||
<div className="relative aspect-square bg-gray-50">
|
||||
{/* Favorite Button */}
|
||||
<button
|
||||
@@ -208,7 +197,7 @@ function ProductCard({
|
||||
{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>
|
||||
)}
|
||||
@@ -241,10 +230,10 @@ function ProductCard({
|
||||
size="sm"
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4" />
|
||||
{translations.addToCart}
|
||||
{t("add_to_cart")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,274 +1,274 @@
|
||||
"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
|
||||
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 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 FormData {
|
||||
// firstName: string
|
||||
// lastName: string
|
||||
// email: string
|
||||
// phone: string
|
||||
// file: File | null
|
||||
// }
|
||||
|
||||
interface FormErrors {
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
email?: string
|
||||
phone?: string
|
||||
file?: string
|
||||
}
|
||||
// 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("")
|
||||
// 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 { 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 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 = {}
|
||||
// const validateForm = (): boolean => {
|
||||
// const newErrors: FormErrors = {}
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = t.firstNameRequired
|
||||
}
|
||||
// if (!formData.firstName.trim()) {
|
||||
// newErrors.firstName = t.firstNameRequired
|
||||
// }
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = t.lastNameRequired
|
||||
}
|
||||
// if (!formData.lastName.trim()) {
|
||||
// newErrors.lastName = t.lastNameRequired
|
||||
// }
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
newErrors.email = t.emailInvalid
|
||||
}
|
||||
// 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
|
||||
}
|
||||
// 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
|
||||
}
|
||||
}
|
||||
// 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
|
||||
}
|
||||
// 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 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 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()
|
||||
// const handleSubmit = (e: React.FormEvent) => {
|
||||
// e.preventDefault()
|
||||
|
||||
if (!validateForm()) return
|
||||
// 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",
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
// 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>
|
||||
// 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>
|
||||
// {/* 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>
|
||||
// {/* 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>
|
||||
// {/* 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>
|
||||
// {/* 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>
|
||||
)
|
||||
}
|
||||
// {/* Submit Button */}
|
||||
// <Button type="submit" className="w-full" disabled={loading}>
|
||||
// {loading ? "Загрузка..." : t.submit}
|
||||
// </Button>
|
||||
// </form>
|
||||
// </CardContent>
|
||||
// </Card>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import type { Metadata } from "next"
|
||||
import { notFound } from "next/navigation"
|
||||
import ProductPageContent from "../../../../features/products/components/ProductPageContent"
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import ProductPageContent from "../../../../features/products/components/ProductPageContent";
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ locale: string; slug: string }>
|
||||
}
|
||||
params: Promise<{ locale: string; slug: string }>;
|
||||
};
|
||||
|
||||
export const revalidate = 3600 // ISR: Revalidate every hour
|
||||
export const revalidate = 3600; // ISR: Revalidate every hour
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { locale, slug } = await params
|
||||
const { locale, slug } = await params;
|
||||
|
||||
return {
|
||||
title: `Product ${slug} | E-Commerce`,
|
||||
@@ -20,20 +20,20 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
title: `Product ${slug} | E-Commerce`,
|
||||
description: `View details for product ${slug}`,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
// Generate static params for popular products
|
||||
return [{ slug: "nike-air-max" }, { slug: "adidas-ultraboost" }]
|
||||
return [{ slug: "nike-air-max" }, { slug: "adidas-ultraboost" }];
|
||||
}
|
||||
|
||||
export default async function ProductPage(props: Props) {
|
||||
const params = await props.params
|
||||
const params = await props.params;
|
||||
|
||||
if (!params.slug) {
|
||||
notFound()
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <ProductPageContent slug={params.slug} />
|
||||
}
|
||||
return <ProductPageContent slug={params.slug} />;
|
||||
}
|
||||
Reference in New Issue
Block a user