+
+
+
+
+
+
+ {messages === null ? (
+
+
+
+
+ ) : messages.length === 0 ? (
+ + {t("shops.noChatMessagesYet")} +
+ ) : ( +
+ {messages.map((m) => {
+ const mine = m.senderRole === myRole;
+ return (
+
+ )}
+
+ {m.content}
+
+ );
+ })}
+
+
+ setText(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") void handleSend();
+ }}
+ placeholder={t("chats.placeholder.message")}
+ className="flex-1 rounded-full border border-neutral-300 bg-transparent px-4 py-2 text-sm outline-none dark:border-neutral-600"
+ />
+
+
+
+ router.push("/shops/new/name")}
+ className="mx-auto mt-6 flex h-11 w-full max-w-xs items-center justify-center gap-2"
+ >
+
+
+
+ setSearch(e.target.value)}
+ placeholder={t("shops.searchShopPlaceholder")}
+ className="w-full rounded-full border border-neutral-200 bg-white py-2.5 pl-4 pr-10 text-sm outline-none dark:border-neutral-700 dark:bg-neutral-900"
+ />
+
+
+
+ {myShops === null ? (
+
+
+ + {t("common.loading")} +
+ ) : filteredShops.length === 0 ? ( ++ {t("shops.noShopsYet")} +
+ ) : ( + filteredShops.map((shop) =>
-
+
{t("settings.nav.shop")}
-
+ {filter === FILTER_SELLER ? (
+
- {showSwitcher && (
-
+
+
+
+ ) : (
+
+ )}
- {myShops === null ? (
-
- )}
-
- {t("common.loading")} -
- ) : myShops.length === 0 ? ( -- {t("shops.noShopsYet")} -
- ) : ( - myShops.map((shop) => ( -
- {shop.logo && (
- // eslint-disable-next-line @next/next/no-img-element
- 
- )}
- {shop.name}
-
- {t(`shops.status.${shop.status}`)}
-
-
- ))
- )}
-
+
setFilter(FILTER_SELLER)}
@@ -186,6 +175,7 @@ export default function ShopSettingsPage() {
-
+
+
);
}
diff --git a/src/app/shops/[shopId]/page.tsx b/src/app/shops/[shopId]/page.tsx
index 690abe1..a01c5be 100644
--- a/src/app/shops/[shopId]/page.tsx
+++ b/src/app/shops/[shopId]/page.tsx
@@ -1,31 +1,41 @@
"use client";
import Container from "@/components/elements/Container";
+import RoundedButton from "@/components/elements/RoundedButton";
import LocalePageShell from "@/components/i18n/LocalePageShell";
-import PageTitle from "@/components/settings/PageTitle";
-import ShopProductGrid from "@/components/shops/ShopProductGrid";
+import Header from "@/components/main/Header";
+import { IMAGE_BASE_URL, staticIconUrl } from "@/components/main/BaseUrl";
+import ShareShopModal from "@/components/shops/ShareShopModal";
+import ShopProductListRow from "@/components/shops/ShopProductListRow";
+import BoldIcon from "@/components/ui/BoldIcon";
+import TabNavigation from "@/components/TabNavigation";
import useAxios from "@/hooks/useAxios";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { saveShopWizardId } from "@/hooks/useShopWizardId";
+import { cn } from "@/lib/utils";
import { IShopProductListing } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
type ShopHeader = {
_id: string;
name: string;
logo?: string | null;
- status: string;
};
export default function ShopProductsPage() {
const { t } = useTranslation("common");
+ const router = useRouter();
const params = useParams<{ shopId: string }>();
const shopId = params.shopId;
const { request } = useAxios();
const [shop, setShop] = useState
+ setSearchText(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") setSearch(searchText);
+ }}
+ placeholder={t("shops.searchOrderPlaceholder")}
+ />
+
+
- {shop?.name || t("settings.nav.shop")}
-
-
+ const filteredListings = useMemo(() => {
+ let result = listings;
+ const query = search.trim();
+ if (query) {
+ result = result.filter((listing) => listing.title.includes(query));
+ }
+ if (onlyInStock) {
+ result = result.filter((listing) =>
+ listing.variants?.some((v) => v.stock > 0)
+ );
+ }
+ return result;
+ }, [listings, search, onlyInStock]);
-
+
+
+
+
+ {shopId && (
+
+ {shop?.logo ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+ {shop?.name}
+ + {t("shops.myProductsTitle")} +
+ +
+
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder={t("shops.searchProductPlaceholder")}
+ className="w-full rounded-full border border-neutral-200 bg-white py-2.5 pl-4 pr-10 text-sm outline-none dark:border-neutral-700 dark:bg-neutral-900"
+ />
+
+
+
+ {isLoading ? (
+
+
+ + {t("common.loading")} +
+ ) : filteredListings.length === 0 ? ( ++ {t("shops.noProductsYet")} +
+ ) : ( + filteredListings.map((listing) => ( +
+ router.push(`/shops/${shopId}/products/new/name`)}
+ className="flex h-11 flex-1 items-center justify-center gap-2"
+ >
+
+ {
+ saveShopWizardId(shopId);
+ router.push("/shops/new/name?edit=1");
+ }}
+ className="flex h-11 flex-1 items-center justify-center gap-2"
+ >
+ {t("shops.editShopButton")}
+
+
+
+ {label}
+
+ );
+}
+
+export default function ProductManagePage() {
+ const { t } = useTranslation("common");
+ const router = useRouter();
+ const params = useParams<{ shopId: string; listingId: string }>();
+ const { shopId, listingId } = params;
+ const { request } = useAxios();
+ const queryClient = useQueryClient();
+
+ const [listing, setListing] = useState
+ {children}
+
+
+ {shopInfo?.name}
+
+ {shopInfo?.logo ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+
+
+ {categoryLine}
+
+ )}
+
+ {colors.length > 0 && (
+
+ {colors.map((color) => (
+
+ ))}
+
+ )}
+
+ {sizes.length > 0 && (
+
+ {sizes.map((size) => (
+
+ ))}
+
+ )}
+
+ {weights.length > 0 && (
+
+ {weights.map((weight) => (
+
+ ))}
+
+ )}
+
+ {listing.description && (
+
+
+ {descriptionExpanded || listing.description.length <= 50
+ ? listing.description
+ : `${listing.description.slice(0, 50)}...`}
+ {listing.description.length > 50 && (
+
+ )}
+
+
+ )}
+
+
+ {matchedVariant.discount_price ? (
+
+
+ {matchedVariant.price.toLocaleString()} {t("settings.toman")}
+
+
+ {matchedVariant.discount_price.toLocaleString()} {t("settings.toman")}
+
+
+ ) : (
+
+ {matchedVariant.price.toLocaleString()} {t("settings.toman")}
+
+ )}
+
+ )}
+
+
+
+ {discountPercent != null && (
+
+ {t("shops.discountPercentLabel", { percent: discountPercent })}
+
+ )}
+
+
+ {images.length > 0 && (
+ {listing.title}
+
+
+ )}
+
+
+ {images.map((img) => (
+
+ {images.length > 1 && (
+
+ {activeImageIndex + 1}/{images.length}
+
+ )}
+
+
+ ))}
+ {t("shops.specsTitle")}
+ + {categoryLine && ( +
+
+ {t("shops.manageStockButton")}
+
+
+
+ {matchedVariant?.stock ?? 0}
+
+
+
+
+ {matchedVariant && (
+
+
+
+
+
{images.map((img, index) => (
([]);
const debounceRef = useRef | null>(null);
+ useEffect(() => {
+ if (!editListingId) return;
+ request<{ listing: { title: string; description?: string | null } }>(
+ "GET",
+ `/shop-products/${editListingId}`
+ ).then((res) => {
+ if (res?.listing) {
+ setName(res.listing.title);
+ setDescription(res.listing.description || "");
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [editListingId]);
+
useEffect(() => {
if (debounceRef.current) clearTimeout(debounceRef.current);
if (!name.trim()) {
@@ -71,6 +90,15 @@ function ProductNamePage() {
return;
}
try {
+ if (editListingId) {
+ await request("PATCH", `/shop-products/${editListingId}`, {
+ title: name.trim(),
+ description: description.trim() || undefined,
+ });
+ router.push(`/shops/${shopId}/products/new/category`);
+ return;
+ }
+
const response = await request<{ listing: { _id: string } }>(
"POST",
"/shop-products",
@@ -84,7 +112,7 @@ function ProductNamePage() {
if (response?.listing?._id) {
saveProductWizardId(shopId, response.listing._id);
}
- router.push(`/shops/${shopId}/products/new/images`);
+ router.push(`/shops/${shopId}/products/new/category`);
} catch (err: unknown) {
const message =
(err as { response?: { data?: { message?: string } } })?.response
@@ -100,7 +128,7 @@ function ProductNamePage() {
{t("shops.productNameTitle")}
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -114,27 +139,24 @@ function ProductImagesPage() {
))}
();
+ const searchParams = useSearchParams();
const shopId = params.shopId;
const { request, loading } = useAxios();
+ const isEditMode = searchParams.get("edit") === "1";
+ const [editListingId] = useState(() =>
+ isEditMode ? getProductWizardId(shopId) : null
+ );
const [name, setName] = useState("");
const [description, setDescription] = useState("");
@@ -33,6 +38,20 @@ function ProductNamePage() {
const [suggestions, setSuggestions] = useState
- 0 ? colors : [null];
const sizeOptions = sizes.length > 0 ? sizes : [null];
const weightOptions = weights.length > 0 ? weights : [null];
- const rows: VariantRow[] = [];
+ const rows: { color: string | null; size: string | null; weight: string | null }[] = [];
for (const color of colorOptions) {
for (const size of sizeOptions) {
for (const weight of weightOptions) {
- rows.push({ color, size, weight, price: "", stock: "" });
+ rows.push({ color, size, weight });
}
}
}
return rows;
}
+function discountPercent(price: string, discountPrice: string): number | null {
+ const original = Number(price);
+ const discount = Number(discountPrice);
+ if (!original || !discount || discount >= original) return null;
+ return Math.round(((original - discount) / original) * 100);
+}
+
function ProductVariantsPage() {
const { t } = useTranslation("common");
const router = useRouter();
@@ -63,26 +75,73 @@ function ProductVariantsPage() {
const [colorsInput, setColorsInput] = useState("");
const [sizesInput, setSizesInput] = useState("");
const [weightsInput, setWeightsInput] = useState("");
- const [rows, setRows] = useState(null);
+ const [rows, setRows] = useState([]);
- const parsedColors = useMemo(() => parseOptions(colorsInput), [colorsInput]);
- const parsedSizes = useMemo(() => parseOptions(sizesInput), [sizesInput]);
- const parsedWeights = useMemo(() => parseOptions(weightsInput), [weightsInput]);
+ useEffect(() => {
+ if (!listingId) return;
+ request<{
+ listing: {
+ variants: {
+ color: string | null;
+ size: string | null;
+ weight: string | null;
+ price: number;
+ discount_price: number | null;
+ stock: number;
+ }[];
+ };
+ }>("GET", `/shop-products/${listingId}`).then((res) => {
+ const existing = res?.listing?.variants || [];
+ if (existing.length === 0) return;
+ setRows(
+ existing.map((v) => ({
+ color: v.color,
+ size: v.size,
+ weight: v.weight,
+ price: String(v.price),
+ discountPrice: v.discount_price ? String(v.discount_price) : "",
+ stock: String(v.stock),
+ }))
+ );
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [listingId]);
const handleGenerate = () => {
- setRows(buildCombinations(parsedColors, parsedSizes, parsedWeights));
+ const colors = parseOptions(colorsInput);
+ const sizes = parseOptions(sizesInput);
+ const weights = parseOptions(weightsInput);
+ const combinations = buildCombinations(colors, sizes, weights);
+
+ setRows((prev) => {
+ const existingKeys = new Set(prev.map((r) => rowKey(r.color, r.size, r.weight)));
+ const newRows = combinations
+ .filter((c) => !existingKeys.has(rowKey(c.color, c.size, c.weight)))
+ .map((c) => ({ ...c, price: "", discountPrice: "", stock: "" }));
+ return [...prev, ...newRows];
+ });
+
+ setColorsInput("");
+ setSizesInput("");
+ setWeightsInput("");
};
- const updateRow = (index: number, field: "price" | "stock", value: string) => {
+ const updateRow = (
+ index: number,
+ field: "price" | "discountPrice" | "stock",
+ value: string
+ ) => {
setRows((prev) =>
- prev
- ? prev.map((row, i) => (i === index ? { ...row, [field]: value } : row))
- : prev
+ prev.map((row, i) => (i === index ? { ...row, [field]: value } : row))
);
};
+ const removeRow = (index: number) => {
+ setRows((prev) => prev.filter((_, i) => i !== index));
+ };
+
const handleSubmit = async () => {
- if (!listingId || !rows) return;
+ if (!listingId) return;
const variants = rows
.filter((row) => row.price && Number(row.price) > 0)
@@ -91,6 +150,10 @@ function ProductVariantsPage() {
size: row.size,
weight: row.weight,
price: Number(row.price),
+ discount_price:
+ row.discountPrice && Number(row.discountPrice) < Number(row.price)
+ ? Number(row.discountPrice)
+ : null,
stock: Number(row.stock) || 0,
}));
@@ -143,35 +206,82 @@ function ProductVariantsPage() {
{t("shops.generateVariants")}
- {rows && rows.length > 0 && (
-
{t("shops.saveProduct")}
diff --git a/src/app/shops/listing/[listingId]/page.tsx b/src/app/shops/listing/[listingId]/page.tsx
index b1f7e1e..c594112 100644
--- a/src/app/shops/listing/[listingId]/page.tsx
+++ b/src/app/shops/listing/[listingId]/page.tsx
@@ -2,11 +2,15 @@
import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
-import PageTitle from "@/components/settings/PageTitle";
-import AuthNextButton from "@/components/auth/AuthNextButton";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import Header from "@/components/main/Header";
+import { IMAGE_BASE_URL, staticIconUrl } from "@/components/main/BaseUrl";
+import ProductImageLightbox from "@/components/shops/ProductImageLightbox";
+import BoldIcon from "@/components/ui/BoldIcon";
+import TabNavigation from "@/components/TabNavigation";
import useAxios from "@/hooks/useAxios";
-import { IShopProductListing } from "@/types/types";
+import { addToCart, isFavorite, toggleFavorite } from "@/lib/shops/localCart";
+import { cn } from "@/lib/utils";
+import { IShopProductListing, IShopProductVariant } from "@/types/types";
import Image from "next/image";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
@@ -14,7 +18,28 @@ import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
type ShippingMethod = { method: string; cost: number; enabled: boolean };
-type ShopInfo = { _id: string; name: string; shipping_methods: ShippingMethod[] };
+type ShopHeader = {
+ _id: string;
+ name: string;
+ logo?: string | null;
+ shipping_methods?: ShippingMethod[];
+};
+
+function uniqueValues(values: (string | null | undefined)[]): string[] {
+ return Array.from(new Set(values.filter((v): v is string => Boolean(v))));
+}
+
+function SpecRow({ label, children }: { label: string; children: React.ReactNode }) {
+ return (
+ (null);
- const [shop, setShop] = useState(null);
- const [variantId, setVariantId] = useState("");
- const [quantity, setQuantity] = useState(1);
+ const [selectedColor, setSelectedColor] = useState(null);
+ const [selectedSize, setSelectedSize] = useState(null);
+ const [selectedWeight, setSelectedWeight] = useState(null);
const [shippingMethod, setShippingMethod] = useState("");
+ const [quantity, setQuantity] = useState(1);
+ const [activeImageIndex, setActiveImageIndex] = useState(0);
+ const [descriptionExpanded, setDescriptionExpanded] = useState(false);
const [showAddressModal, setShowAddressModal] = useState(false);
+ const [showLightbox, setShowLightbox] = useState(false);
+ const [favorite, setFavorite] = useState(false);
useEffect(() => {
- request<{ listing: IShopProductListing }>(
- "GET",
- `/shop-products/${params.listingId}`
- ).then((res) => {
- const data = res?.listing || null;
- setListing(data);
- if (data && typeof data.shop === "object") {
- setShop(data.shop as unknown as ShopInfo);
+ request<{ listing: IShopProductListing }>("GET", `/shop-products/${params.listingId}`).then(
+ (res) => {
+ const data = res?.listing || null;
+ setListing(data);
+ const firstVariant = data?.variants?.[0];
+ if (firstVariant) {
+ setSelectedColor(firstVariant.color || null);
+ setSelectedSize(firstVariant.size || null);
+ setSelectedWeight(firstVariant.weight || null);
+ }
+ if (data) setFavorite(isFavorite(data._id));
}
- if (data?.variants?.length) setVariantId(data.variants[0]._id);
- });
+ );
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [params.listingId]);
- const selectedVariant = useMemo(
- () => listing?.variants.find((v) => v._id === variantId) || null,
- [listing, variantId]
+ const shopInfo: ShopHeader | null =
+ listing && typeof listing.shop === "object" ? (listing.shop as ShopHeader) : null;
+
+ const colors = useMemo(
+ () => uniqueValues(listing?.variants.map((v) => v.color) || []),
+ [listing]
);
+ const sizes = useMemo(() => {
+ if (!listing) return [];
+ const relevant = listing.variants.filter(
+ (v) => colors.length === 0 || v.color === selectedColor
+ );
+ return uniqueValues(relevant.map((v) => v.size));
+ }, [listing, colors, selectedColor]);
+ const weights = useMemo(() => {
+ if (!listing) return [];
+ const relevant = listing.variants.filter(
+ (v) =>
+ (colors.length === 0 || v.color === selectedColor) &&
+ (sizes.length === 0 || v.size === selectedSize)
+ );
+ return uniqueValues(relevant.map((v) => v.weight));
+ }, [listing, colors, sizes, selectedColor, selectedSize]);
+
+ useEffect(() => {
+ if (sizes.length > 0 && (!selectedSize || !sizes.includes(selectedSize))) {
+ setSelectedSize(sizes[0]);
+ }
+ }, [sizes, selectedSize]);
+
+ useEffect(() => {
+ if (weights.length > 0 && (!selectedWeight || !weights.includes(selectedWeight))) {
+ setSelectedWeight(weights[0]);
+ }
+ }, [weights, selectedWeight]);
+
+ const matchedVariant: IShopProductVariant | null = useMemo(() => {
+ if (!listing) return null;
+ return (
+ listing.variants.find(
+ (v) =>
+ (colors.length === 0 || v.color === selectedColor) &&
+ (sizes.length === 0 || v.size === selectedSize) &&
+ (weights.length === 0 || v.weight === selectedWeight)
+ ) ||
+ listing.variants[0] ||
+ null
+ );
+ }, [listing, colors, sizes, weights, selectedColor, selectedSize, selectedWeight]);
+
+ useEffect(() => {
+ setQuantity(1);
+ }, [matchedVariant?._id]);
+
+ const enabledShippingMethods = shopInfo?.shipping_methods?.filter((m) => m.enabled) || [];
+
+ const categoryLine = listing
+ ? [listing.category, listing.sub_category, listing.sub_sub_category]
+ .filter(Boolean)
+ .join(" / ")
+ : "";
+
+ const discountPercent =
+ matchedVariant?.discount_price && matchedVariant.discount_price < matchedVariant.price
+ ? Math.round(
+ ((matchedVariant.price - matchedVariant.discount_price) / matchedVariant.price) * 100
+ )
+ : null;
+
+ const handleImageScroll = (event: React.UIEvent) => {
+ const el = event.currentTarget;
+ const index = Math.round(el.scrollLeft / el.clientWidth);
+ setActiveImageIndex(index);
+ };
const handleBuy = async () => {
- if (!selectedVariant) return;
+ if (!listing || !matchedVariant) return;
try {
- const response = await request<{ order: { _id: string } }>(
- "POST",
- "/orders/draft",
- {
- listingId: listing?._id,
- variantId: selectedVariant._id,
- quantity,
- shippingMethod: shippingMethod || undefined,
- }
- );
+ const response = await request<{ order: { _id: string } }>("POST", "/orders/draft", {
+ listingId: listing._id,
+ variantId: matchedVariant._id,
+ quantity,
+ shippingMethod: shippingMethod || undefined,
+ });
if (response?.order?._id) {
router.push(`/shops/checkout/${response.order._id}`);
}
@@ -76,145 +174,302 @@ export default function ListingDetailPage() {
}
};
+ const handleAddToCart = () => {
+ if (!listing || !matchedVariant) return;
+ addToCart(listing._id, matchedVariant._id, quantity);
+ toast.success(t("shops.addToCartSuccess"));
+ };
+
+ const handleToggleFavorite = () => {
+ if (!listing) return;
+ const next = toggleFavorite(listing._id);
+ setFavorite(next);
+ toast.success(next ? t("shops.addedToFavorites") : t("shops.removedFromFavorites"));
+ };
+
if (!listing) return null;
- const primaryImage =
- listing.images?.[listing.primaryImageIndex] || listing.images?.[0];
+ const images = listing.images || [];
return (
-
-
- {listing.title}
+ <>
+
+
+
- {rows.map((row, index) => (
-
@@ -180,7 +290,7 @@ function ProductVariantsPage() {
-
- {[row.color, row.size, row.weight].filter(Boolean).join(" / ") ||
- t("shops.defaultVariant")}
-
- updateRow(index, "price", e.target.value)}
- />
- updateRow(index, "stock", e.target.value)}
- />
-
- ))}
+ {rows.length > 0 && (
+
+
)}
+ {t("shops.colorColumn")}
+ {t("shops.sizeColumn")}
+ {t("shops.weightColumn")}
+ {t("shops.priceColumn")}
+
+
+ {rows.map((row, index) => {
+ const percent = discountPercent(row.price, row.discountPrice);
+ return (
+
+
+ );
+ })}
+
+
+
+ {row.color || t("shops.defaultVariant")}
+
+
+ {row.size || t("shops.defaultVariant")}
+
+
+ {row.weight || "-"}
+
+
+
+
+
+ updateRow(index, "price", e.target.value)}
+ />
+
+ updateRow(index, "discountPrice", e.target.value)
+ }
+ />
+ updateRow(index, "stock", e.target.value)}
+ />
+
+ {percent != null && (
+
+ {t("shops.discountPercentLabel", { percent })}
+
+ )}
+
+ {t("shops.totalVariantsLabel", { count: rows.length })}
+
+ {label}
+
+ );
+}
export default function ListingDetailPage() {
const { t } = useTranslation("common");
@@ -23,45 +48,118 @@ export default function ListingDetailPage() {
const { request, loading } = useAxios();
const [listing, setListing] = useState
+ {children}
+
+
+ {shopInfo?.name}
+
+ {shopInfo?.logo ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
-
- {primaryImage && (
-
-
+
+ {descriptionExpanded || listing.description.length <= 50
+ ? listing.description
+ : `${listing.description.slice(0, 50)}...`}
+ {listing.description.length > 50 && (
+
+ )}
+
+
+ )}
- {showAddressModal && (
-
+
+ {sizes.map((size) => (
+
+ ))}
+
+ )}
-
+ {weights.map((weight) => (
+
+ ))}
+
+ )}
- {shop && shop.shipping_methods.filter((m) => m.enabled).length > 0 && (
-
+ {enabledShippingMethods.map((m) => (
+
+ ))}
+
+ )}
-
- {t("shops.buyNow")}
-
-
+ {listing.description && (
+
+
- )}
- {listing.description && (
- {listing.title}
+ {discountPercent != null && ( + + + + + {t("shops.discountPercentBadge", { percent: discountPercent })} + + + )}- {listing.description} -
- )} + {images.length > 0 && ( +
+
+ )}
- {listing.variants.length > 1 && (
-
+ {images.map((img) => (
+
+ ))}
+
+ {images.length > 1 && (
+
+ {activeImageIndex + 1}/{images.length}
+
+ )}
+
-
- )}
+
+ )}
- {selectedVariant && (
- {t("shops.variantsTitle")}
-
- {listing.variants.map((v) => (
+
+ {categoryLine}
+
+ )}
+
+ {colors.length > 0 && (
+
+ {colors.map((color) => (
))}
-
- {t("shops.specsTitle")}
+ + {categoryLine && ( +- {t("shops.priceLabel", { - amount: ( - selectedVariant.discount_price || selectedVariant.price - ).toLocaleString(), - })} -
- )} + {sizes.length > 0 && ( +
- {t("shops.quantityLabel")}
-
- {quantity}
-
-
+ {weights.length > 0 && (
+
-
- )}
+ {enabledShippingMethods.length > 0 && (
+ {t("shops.shippingTitle")}
-
- {shop.shipping_methods
- .filter((m) => m.enabled)
- .map((m) => (
-
- ))}
-
-
- setShowLightbox(false)}
+ />
+
);
}
diff --git a/src/app/shops/new/category/page.tsx b/src/app/shops/new/category/page.tsx
deleted file mode 100644
index 25bca7a..0000000
--- a/src/app/shops/new/category/page.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import AuthPageLayout, {
- AuthFormFooter,
- AuthPageContent,
-} from "@/components/auth/AuthPageLayout";
-import AuthNextButton from "@/components/auth/AuthNextButton";
-import LocalePageShell from "@/components/i18n/LocalePageShell";
-import ShopCategoryPicker from "@/components/shops/ShopCategoryPicker";
-import useAxios from "@/hooks/useAxios";
-import { useShopWizardId } from "@/hooks/useShopWizardId";
-import { IShopCategory } from "@/types/types";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-
-function ShopCategoryPage() {
- const { t } = useTranslation("common");
- const router = useRouter();
- const { request, loading } = useAxios();
- const shopId = useShopWizardId();
-
- const [categoryList, setCategoryList] = useState(null);
- const [category, setCategory] = useState("");
- const [subCategory, setSubCategory] = useState([]);
- const [displaySubCategory, setDisplaySubCategory] = useState(
- null
- );
-
- useEffect(() => {
- request<{ categories: IShopCategory[] }>("GET", "/shop-categories")
- .then((res) => setCategoryList(res?.categories || []))
- .catch(() => setCategoryList([]));
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- const handleCategorySelect = (value: string) => {
- setCategory(value);
- setSubCategory([]);
- setDisplaySubCategory(null);
- };
-
- const handleSubToggle = (value: string) => {
- setSubCategory((prev) =>
- prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
- );
- if (displaySubCategory === value) setDisplaySubCategory(null);
- };
-
- const handleSubmit = async () => {
- if (!shopId) return;
- if (!category || subCategory.length === 0 || !displaySubCategory) {
- toast.error(t("shops.categoryRequired"));
- return;
- }
- try {
- await request("PATCH", `/shops/${shopId}/category`, {
- category,
- sub_category: subCategory.join(","),
- display_sub_category: displaySubCategory,
- });
- router.push("/shops/new/shipping");
- } catch (err: unknown) {
- const message =
- (err as { response?: { data?: { message?: string } } })?.response
- ?.data?.message || t("shops.unknownError");
- toast.error(message);
- }
- };
-
- if (!shopId) return null;
-
- return (
-
-
-
- {t("shops.categoryTitle")}
-
-
-
- {t("shops.saveAndContinue")}
-
-
-
-
- );
-}
-
-export default ShopCategoryPage;
diff --git a/src/app/shops/new/contact/page.tsx b/src/app/shops/new/contact/page.tsx
index 1881346..2bc35c1 100644
--- a/src/app/shops/new/contact/page.tsx
+++ b/src/app/shops/new/contact/page.tsx
@@ -7,10 +7,13 @@ import AuthPageLayout, {
import AuthNextButton from "@/components/auth/AuthNextButton";
import RoundedInput from "@/components/elements/RoundedInput";
import LocalePageShell from "@/components/i18n/LocalePageShell";
+import ToggleSwitch from "@/components/shops/ToggleSwitch";
+import TimeSelect from "@/components/shops/TimeSelect";
import useAxios from "@/hooks/useAxios";
import { useShopWizardId } from "@/hooks/useShopWizardId";
+import Image from "next/image";
import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
@@ -24,12 +27,11 @@ function ShopContactPage() {
const shopId = useShopWizardId();
const [contact, setContact] = useState({
- phone: "",
+ landline: "",
mobile: "",
telegram: "",
whatsapp: "",
instagram: "",
- landline: "",
});
const [enabledDays, setEnabledDays] = useState>({
@@ -57,6 +59,42 @@ function ShopContactPage() {
setEnabledDays((prev) => ({ ...prev, [day]: !prev[day] }));
};
+ useEffect(() => {
+ if (!shopId) return;
+ request<{
+ shop: {
+ contact?: Record;
+ response_schedule?: { day: Day; start_time: string | null; end_time: string | null }[];
+ };
+ }>("GET", `/shops/${shopId}`).then((res) => {
+ const shop = res?.shop;
+ if (!shop) return;
+ if (shop.contact) {
+ setContact((prev) => ({
+ landline: shop.contact?.landline || prev.landline,
+ mobile: shop.contact?.mobile || prev.mobile,
+ telegram: shop.contact?.telegram || prev.telegram,
+ whatsapp: shop.contact?.whatsapp || prev.whatsapp,
+ instagram: shop.contact?.instagram || prev.instagram,
+ }));
+ }
+ if (shop.response_schedule?.length) {
+ const nextEnabled = { ...enabledDays };
+ const nextTimes = { ...times };
+ shop.response_schedule.forEach((item) => {
+ nextEnabled[item.day] = true;
+ nextTimes[item.day] = {
+ start: item.start_time || "",
+ end: item.end_time || "",
+ };
+ });
+ setEnabledDays(nextEnabled);
+ setTimes(nextTimes);
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [shopId]);
+
const handleSubmit = async () => {
if (!shopId) return;
@@ -90,6 +128,42 @@ function ShopContactPage() {
if (!shopId) return null;
+ const contactFields: {
+ key: keyof typeof contact;
+ icon: string;
+ placeholder: string;
+ maxLength?: number;
+ }[] = [
+ {
+ key: "landline",
+ icon: "/images/icons/vuesax/bold/call.svg",
+ placeholder: t("shops.landlinePlaceholder"),
+ maxLength: 11,
+ },
+ {
+ key: "mobile",
+ icon: "/images/icons/vuesax/bold/mobile.svg",
+ placeholder: t("billboards.form.mobile"),
+ maxLength: 11,
+ },
+ {
+ key: "telegram",
+ icon: "/images/icons/telegram.svg",
+ placeholder: t("billboards.form.telegram"),
+ },
+ {
+ key: "whatsapp",
+ icon: "/images/icons/vuesax/bold/whatsapp.svg",
+ placeholder: t("billboards.form.whatsapp"),
+ maxLength: 11,
+ },
+ {
+ key: "instagram",
+ icon: "/images/icons/vuesax/bold/instagram.svg",
+ placeholder: t("billboards.form.instagram"),
+ },
+ ];
+
return (
@@ -97,102 +171,80 @@ function ShopContactPage() {
{t("shops.contactTitle")}
diff --git a/src/app/shops/new/logo/page.tsx b/src/app/shops/new/logo/page.tsx
index cc49cf7..6c7a2ce 100644
--- a/src/app/shops/new/logo/page.tsx
+++ b/src/app/shops/new/logo/page.tsx
@@ -6,11 +6,12 @@ import AuthPageLayout, {
} from "@/components/auth/AuthPageLayout";
import AuthNextButton from "@/components/auth/AuthNextButton";
import LocalePageShell from "@/components/i18n/LocalePageShell";
+import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import useAxios from "@/hooks/useAxios";
import { useShopWizardId } from "@/hooks/useShopWizardId";
import Image from "next/image";
import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
@@ -22,6 +23,16 @@ function ShopLogoPage() {
const [logoPreview, setLogoPreview] = useState(null);
const [logoFile, setLogoFile] = useState(null);
+ useEffect(() => {
+ if (!shopId) return;
+ request<{ shop: { logo?: string | null } }>("GET", `/shops/${shopId}`).then((res) => {
+ if (res?.shop?.logo) {
+ setLogoPreview(IMAGE_BASE_URL + res.shop.logo);
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [shopId]);
+
const selectImage = (event: React.ChangeEvent) => {
const file = event.target.files?.[0];
if (!file) return;
@@ -31,7 +42,7 @@ function ShopLogoPage() {
reader.readAsDataURL(file);
};
- const goNext = () => router.push("/shops/new/category");
+ const goNext = () => router.push("/shops/new/shipping");
const handleUpload = async () => {
if (!logoFile || !shopId) {
@@ -41,9 +52,7 @@ function ShopLogoPage() {
const formData = new FormData();
formData.append("logo", logoFile);
try {
- await request("PATCH", `/shops/${shopId}/logo`, formData, {
- headers: { "Content-Type": "multipart/form-data" },
- });
+ await request("PATCH", `/shops/${shopId}/logo`, formData);
goNext();
} catch (err: unknown) {
const message =
diff --git a/src/app/shops/new/name/page.tsx b/src/app/shops/new/name/page.tsx
index 33b87e7..88e4833 100644
--- a/src/app/shops/new/name/page.tsx
+++ b/src/app/shops/new/name/page.tsx
@@ -4,35 +4,49 @@ import AuthPageLayout, {
AuthFormFooter,
AuthPageContent,
} from "@/components/auth/AuthPageLayout";
-import AuthInput from "@/components/auth/AuthInput";
import AuthNextButton from "@/components/auth/AuthNextButton";
+import RoundedInput from "@/components/elements/RoundedInput";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import useAxios from "@/hooks/useAxios";
+import { getShopWizardId, saveShopWizardId } from "@/hooks/useShopWizardId";
import { useFormik } from "formik";
import * as yup from "yup";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
function ShopNamePage() {
const { t } = useTranslation("common");
const router = useRouter();
+ const searchParams = useSearchParams();
const { request, loading } = useAxios();
+ const isEditMode = searchParams.get("edit") === "1";
+ const [editShopId] = useState(() => (isEditMode ? getShopWizardId() : null));
const formik = useFormik({
- initialValues: { name: "" },
+ initialValues: { name: "", description: "" },
validationSchema: yup.object({
name: yup.string().trim().required(t("shops.nameRequired")),
}),
onSubmit: async (values) => {
try {
+ if (editShopId) {
+ await request("PATCH", `/shops/${editShopId}/basic`, {
+ name: values.name.trim(),
+ description: values.description.trim() || undefined,
+ });
+ router.push("/shops/new/logo");
+ return;
+ }
+
const response = await request<{ shopId: string }>(
"POST",
"/shops/draft",
- { name: values.name.trim() }
+ { name: values.name.trim(), description: values.description.trim() || undefined }
);
- if (typeof window !== "undefined" && response?.shopId) {
- localStorage.setItem("shop_wizard_shop_id", String(response.shopId));
+ if (response?.shopId) {
+ saveShopWizardId(String(response.shopId));
}
router.push("/shops/new/logo");
} catch (err: unknown) {
@@ -44,6 +58,21 @@ function ShopNamePage() {
},
});
+ useEffect(() => {
+ if (!editShopId) return;
+ request<{ shop: { name: string; description?: string | null } }>(
+ "GET",
+ `/shops/${editShopId}`
+ ).then((res) => {
+ if (!res?.shop) return;
+ formik.setValues({
+ name: res.shop.name || "",
+ description: res.shop.description || "",
+ });
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [editShopId]);
+
return (
@@ -53,20 +82,32 @@ function ShopNamePage() {
>
{t("shops.nameTitle")}
-
= {
+ post: "send",
+ tipax: "truck-fast",
+ chapar: "truck-tick",
+ intercity_freight: "truck",
+ courier: "car",
+ own_vehicle: "smart-car",
+};
+
+const CONTACT_CHANNELS: {
+ key: "mobile" | "landline" | "telegram" | "whatsapp" | "instagram";
+ icon: string;
+ color: string;
+}[] = [
+ { key: "mobile", icon: "/images/icons/vuesax/bold/mobile.svg", color: "bg-green-500" },
+ { key: "landline", icon: "/images/icons/vuesax/bold/call.svg", color: "bg-orange-500" },
+ { key: "telegram", icon: "/images/icons/telegram.svg", color: "bg-sky-500" },
+ { key: "whatsapp", icon: "/images/icons/vuesax/bold/whatsapp.svg", color: "bg-emerald-600" },
+ {
+ key: "instagram",
+ icon: "/images/icons/vuesax/bold/instagram.svg",
+ color: "bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600",
+ },
+];
+
type ShopPreview = {
name: string;
logo?: string | null;
- category?: string | null;
- sub_category?: string | null;
shipping_methods?: { method: string; cost: number }[];
- address?: string | null;
+ cod_available?: boolean;
+ same_day_available?: boolean;
+ free_shipping_threshold?: number | null;
+ estimated_delivery_text?: string | null;
has_physical_location?: boolean;
- contact?: { mobile?: string | null; telegram?: string | null } | null;
+ province?: { name?: string } | null;
+ city?: { name?: string } | null;
+ neighbourhood?: string | null;
+ address?: string | null;
+ lat?: string | null;
+ lng?: string | null;
+ contact?: {
+ mobile?: string | null;
+ landline?: string | null;
+ telegram?: string | null;
+ whatsapp?: string | null;
+ instagram?: string | null;
+ } | null;
+ response_schedule?: { day: string; start_time: string | null; end_time: string | null }[];
};
function ShopPreviewPage() {
@@ -43,12 +83,12 @@ function ShopPreviewPage() {
const handleSubmit = async () => {
if (!shopId) return;
try {
- await request("POST", `/shops/${shopId}/submit`);
+ await request("POST", `/shops/${shopId}/submit`, {});
if (typeof window !== "undefined") {
localStorage.removeItem("shop_wizard_shop_id");
}
toast.success(t("shops.submitSuccess"));
- router.push("/settings/shop");
+ router.push("/settings/shop/list");
} catch (err: unknown) {
const message =
(err as { response?: { data?: { message?: string } } })?.response
@@ -59,55 +99,179 @@ function ShopPreviewPage() {
if (!shopId || !shop) return null;
+ const orderInfoRows = [
+ shop.free_shipping_threshold
+ ? {
+ key: "minOrder",
+ label: t("shops.previewMinOrder"),
+ value: `${shop.free_shipping_threshold.toLocaleString()} ${t("settings.toman")}`,
+ }
+ : null,
+ shop.estimated_delivery_text
+ ? { key: "delivery", label: t("shops.previewDeliveryTime"), value: shop.estimated_delivery_text }
+ : null,
+ shop.cod_available
+ ? { key: "cod", label: t("shops.codAvailable"), value: t("shops.previewYes") }
+ : null,
+ shop.same_day_available
+ ? { key: "sameDay", label: t("shops.sameDayAvailable"), value: t("shops.previewYes") }
+ : null,
+ ].filter(Boolean) as { key: string; label: string; value: string }[];
+
+ const hasLocationInfo =
+ shop.has_physical_location &&
+ (shop.address || shop.neighbourhood || shop.city?.name || shop.province?.name);
+ const hasMap = shop.has_physical_location && shop.lat && shop.lng;
+
return (
-
-
- {t("shops.previewTitle")}
+
+
- router.push("/settings/edit/location")}
- >
- {t("shops.goToLocationSettings")}
-
+
+ {matchedVariant.discount_price ? (
+
+
+ {matchedVariant.price.toLocaleString()} {t("settings.toman")}
+
+
+ {matchedVariant.discount_price.toLocaleString()} {t("settings.toman")}
+
+
+ ) : (
+
+ {matchedVariant.price.toLocaleString()} {t("settings.toman")}
+
+ )}
+
+ )}
- )}
-
-
+
+ {t("shops.addressRequiredHint")}
-
+
+ {quantity}
+
+
+ {matchedVariant && (
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {t("shops.addressRequiredHint")}
+ + +
-
- setContact((prev) => ({ ...prev, landline: e.target.value }))
- }
- />
-
- setContact((prev) => ({ ...prev, phone: e.target.value }))
- }
- />
-
- setContact((prev) => ({ ...prev, mobile: e.target.value }))
- }
- />
-
- setContact((prev) => ({ ...prev, telegram: e.target.value }))
- }
- />
-
- setContact((prev) => ({ ...prev, whatsapp: e.target.value }))
- }
- />
-
- setContact((prev) => ({ ...prev, instagram: e.target.value }))
- }
- />
-
-
diff --git a/src/app/shops/new/location/page.tsx b/src/app/shops/new/location/page.tsx
index fab0a1f..e674606 100644
--- a/src/app/shops/new/location/page.tsx
+++ b/src/app/shops/new/location/page.tsx
@@ -43,6 +43,38 @@ function ShopLocationPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ useEffect(() => {
+ if (!shopId) return;
+ request<{
+ shop: {
+ has_physical_location?: boolean;
+ province?: IProvince | null;
+ city?: ICity | null;
+ neighbourhood?: string | null;
+ address?: string | null;
+ lat?: string | null;
+ lng?: string | null;
+ };
+ }>("GET", `/shops/${shopId}`).then((res) => {
+ const shop = res?.shop;
+ if (!shop) return;
+ setHasPhysicalLocation(shop.has_physical_location ?? true);
+ if (shop.province) {
+ setProvinceId(String(shop.province.id));
+ request<{ cities: ICity[] }>("GET", `/cities/${shop.province.id}`)
+ .then((r) => setCities(r?.cities || []))
+ .catch(() => setCities([]));
+ }
+ if (shop.city) setCityId(String(shop.city.id));
+ if (shop.neighbourhood) setNeighbourhood(shop.neighbourhood);
+ if (shop.address) setAddress(shop.address);
+ if (shop.lat && shop.lng) {
+ setMarker({ lat: Number(shop.lat), lng: Number(shop.lng) });
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [shopId]);
+
const handleProvinceChange = (e: React.ChangeEvent) => {
const id = e.target.value;
setProvinceId(id);
@@ -62,6 +94,15 @@ function ShopLocationPage() {
const province = provinces?.find((p) => String(p.id) === provinceId) || null;
const city = cities?.find((c) => String(c.id) === cityId) || null;
+ if (!province) {
+ toast.error(t("shops.provinceRequired"));
+ return;
+ }
+ if (!city) {
+ toast.error(t("shops.cityRequired"));
+ return;
+ }
+
try {
await request("PATCH", `/shops/${shopId}/location`, {
has_physical_location: hasPhysicalLocation,
@@ -100,9 +141,7 @@ function ShopLocationPage() {
{t("shops.noPhysicalShop")}
- {hasPhysicalLocation && (
- <>
-
+
@@ -167,8 +206,6 @@ function ShopLocationPage() {
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
-
- )}
- {t("shops.responseScheduleTitle")} -
- {DAYS.map((day) => ( -
- toggleDay(day)}
- />
-
- {t(`shops.days.${day}`)}
+ {contactFields.map((field) => (
+
+
+
+ setContact((prev) => ({ ...prev, [field.key]: e.target.value }))
+ }
+ />
))}
+
+ + {t("shops.responseScheduleTitle")} +
+
+ {DAYS.map((day) => (
+
+ toggleDay(day)}
+ ariaLabel={t(`shops.days.${day}`)}
+ />
+
+ ))}
+
+
+
+ {enabledDays[day] && (
+
+
+ setTimes((prev) => ({
+ ...prev,
+ [day]: { ...prev[day], end: value },
+ }))
+ }
+ />
+ -
+
+ setTimes((prev) => ({
+ ...prev,
+ [day]: { ...prev[day], start: value },
+ }))
+ }
+ />
+
+ )}
+
+
+
- >({
+ const [enabledMethods, setEnabledMethods] = useState>({
post: false,
tipax: false,
chapar: false,
@@ -41,7 +50,7 @@ function ShopShippingPage() {
courier: false,
own_vehicle: false,
});
- const [costs, setCosts] = useState>({
+ const [costs, setCosts] = useState>({
post: "",
tipax: "",
chapar: "",
@@ -54,14 +63,49 @@ function ShopShippingPage() {
const [freeShippingThreshold, setFreeShippingThreshold] = useState("");
const [estimatedDeliveryText, setEstimatedDeliveryText] = useState("");
- const toggleMethod = (method: ShippingMethod) => {
+ useEffect(() => {
+ if (!shopId) return;
+ request<{
+ shop: {
+ shipping_methods?: { method: DeliveryMethod; cost: number }[];
+ cod_available?: boolean;
+ same_day_available?: boolean;
+ free_shipping_threshold?: number | null;
+ estimated_delivery_text?: string | null;
+ };
+ }>("GET", `/shops/${shopId}`).then((res) => {
+ const shop = res?.shop;
+ if (!shop) return;
+ if (shop.shipping_methods?.length) {
+ const nextEnabled = { ...enabledMethods };
+ const nextCosts = { ...costs };
+ shop.shipping_methods.forEach((m) => {
+ nextEnabled[m.method] = true;
+ nextCosts[m.method] = String(m.cost || "");
+ });
+ setEnabledMethods(nextEnabled);
+ setCosts(nextCosts);
+ }
+ setCodAvailable(Boolean(shop.cod_available));
+ setSameDayAvailable(Boolean(shop.same_day_available));
+ if (shop.free_shipping_threshold) {
+ setFreeShippingThreshold(String(shop.free_shipping_threshold));
+ }
+ if (shop.estimated_delivery_text) {
+ setEstimatedDeliveryText(shop.estimated_delivery_text);
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [shopId]);
+
+ const toggleMethod = (method: DeliveryMethod) => {
setEnabledMethods((prev) => ({ ...prev, [method]: !prev[method] }));
};
const handleSubmit = async () => {
if (!shopId) return;
- const shipping_methods = SHIPPING_METHODS.filter(
+ const shipping_methods = DELIVERY_METHODS.filter(
(method) => enabledMethods[method]
).map((method) => ({
method,
@@ -102,66 +146,92 @@ function ShopShippingPage() {
{t("shops.shippingTitle")}
{t("shops.previewTitle")}
-
- {shop.logo && (
- // eslint-disable-next-line @next/next/no-img-element
-
- )}
-
- 0 && (
+
- {t("shops.submitShop")}
-
-
-
+ {loading ? t("common.loading") : t("shops.submitShop")}
+
+
+
);
}
diff --git a/src/app/shops/new/shipping/page.tsx b/src/app/shops/new/shipping/page.tsx
index b1f9b73..dd02865 100644
--- a/src/app/shops/new/shipping/page.tsx
+++ b/src/app/shops/new/shipping/page.tsx
@@ -7,14 +7,16 @@ import AuthPageLayout, {
import AuthNextButton from "@/components/auth/AuthNextButton";
import RoundedInput from "@/components/elements/RoundedInput";
import LocalePageShell from "@/components/i18n/LocalePageShell";
+import ToggleSwitch from "@/components/shops/ToggleSwitch";
+import BoldIcon from "@/components/ui/BoldIcon";
import useAxios from "@/hooks/useAxios";
import { useShopWizardId } from "@/hooks/useShopWizardId";
import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
-const SHIPPING_METHODS = [
+const DELIVERY_METHODS = [
"post",
"tipax",
"chapar",
@@ -23,7 +25,16 @@ const SHIPPING_METHODS = [
"own_vehicle",
] as const;
-type ShippingMethod = (typeof SHIPPING_METHODS)[number];
+const METHOD_ICON: Record<(typeof DELIVERY_METHODS)[number], string> = {
+ post: "send",
+ tipax: "truck-fast",
+ chapar: "truck-tick",
+ intercity_freight: "truck",
+ courier: "car",
+ own_vehicle: "smart-car",
+};
+
+type DeliveryMethod = (typeof DELIVERY_METHODS)[number];
function ShopShippingPage() {
const { t } = useTranslation("common");
@@ -31,9 +42,7 @@ function ShopShippingPage() {
const { request, loading } = useAxios();
const shopId = useShopWizardId();
- const [enabledMethods, setEnabledMethods] = useState<
- Record{shop.name}
- {shop.category && ( -- {shop.category} - {shop.sub_category ? ` / ${shop.sub_category}` : ""} -
- )} - {shop.shipping_methods && shop.shipping_methods.length > 0 && ( -
-
+ )}
+
+
-
- {t("shops.shippingTitle")}
+ {shop.logo && ( + // eslint-disable-next-line @next/next/no-img-element +{shop.name}
+ + {shop.shipping_methods && shop.shipping_methods.length > 0 && ( +
+
+ )}
+
+ {orderInfoRows.length > 0 && (
+ {t("shops.shippingTitle")}
+
{shop.shipping_methods.map((m) => (
-
+ - {t(`shops.shippingMethods.${m.method}`)} —{" "} - {m.cost.toLocaleString()} {t("settings.toman")} -
+
+
))}
+
+
+
+ {m.cost.toLocaleString()} {t("settings.toman")}
+
+
+ {orderInfoRows.map((row) => (
+
+ )}
+
+ {shop.contact &&
+ CONTACT_CHANNELS.some((ch) => shop.contact?.[ch.key]) && (
+
+ {row.label}
+ {row.value}
+
+ ))}
+
+
)}
- {shop.has_physical_location && shop.address && (
- {t("shops.contactTitle")}
+
+ {CONTACT_CHANNELS.filter((ch) => shop.contact?.[ch.key]).map((ch) => (
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+ {shop.contact?.[ch.key]}
+
+
+ ))}
+ {shop.address}
- )} -
+
+ )}
+
+ {hasLocationInfo && (
+ {t("shops.responseScheduleTitle")}
+
+ {shop.response_schedule.map((item) => (
+
+
+
+ {item.start_time || "--:--"} - {item.end_time || "--:--"}
+
+ {t(`shops.days.${item.day}`)}
+
+ ))}
+
+ {(shop.city?.name || shop.neighbourhood) && (
+
+ )}
+
+
+ {shop.city?.name && (
+
+ {shop.city.name}
+
+ )}
+ {shop.neighbourhood && (
+
+ {shop.neighbourhood}
+
+ )}
+
+ )}
+ {shop.address && (
+
+ {shop.address}
+
+ )}
+ {hasMap && (
+
+
+
+ )}
+
- {SHIPPING_METHODS.map((method) => (
-
diff --git a/src/app/shops/orders/[orderId]/page.tsx b/src/app/shops/orders/[orderId]/page.tsx
index 173c88d..5836851 100644
--- a/src/app/shops/orders/[orderId]/page.tsx
+++ b/src/app/shops/orders/[orderId]/page.tsx
@@ -2,10 +2,14 @@
import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
+import Header from "@/components/main/Header";
+import TabNavigation from "@/components/TabNavigation";
import PageTitle from "@/components/settings/PageTitle";
import AuthNextButton from "@/components/auth/AuthNextButton";
import RoundedInput from "@/components/elements/RoundedInput";
-import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
+import BuyerInfoModal from "@/components/shops/orders/BuyerInfoModal";
+import ShopInfoModal from "@/components/shops/orders/ShopInfoModal";
+import { IMAGE_BASE_URL, staticIconUrl } from "@/components/main/BaseUrl";
import useAxios from "@/hooks/useAxios";
import { useUser } from "@/hooks/useUser";
import { useParams } from "next/navigation";
@@ -16,9 +20,23 @@ import { useTranslation } from "react-i18next";
const TRACKING_REQUIRED_METHODS = ["post", "tipax", "chapar", "intercity_freight"];
const SELLER_STATUSES = ["on_hold", "processing", "shipped", "ready_for_pickup"];
+/** These carriers have a public tracking page we can deep-link to. */
+const BOLD_TRACKING_METHODS = ["post", "tipax", "chapar"];
+
+function trackingUrl(method: string, code: string): string | null {
+ if (method === "post") return `https://tracking.post.ir/?id=${code}`;
+ if (method === "tipax") return `https://tipaxco.com/tracking?code=${code}`;
+ if (method === "chapar") return `https://www.chapar.co/tracking?code=${code}`;
+ return null;
+}
+
+type OrderReport = { _id: string; description: string; status: string; createdAt: string };
+type ReturnRequest = { _id: string; reason: string; status: string; createdAt: string };
+type ShopRating = { _id: string; rating: number; comment?: string | null };
type OrderDetail = {
_id: string;
+ order_number: string;
quantity: number;
unit_price: number;
total_amount: number;
@@ -33,12 +51,26 @@ type OrderDetail = {
buyerAddressSnapshot?: {
first_name?: string | null;
last_name?: string | null;
+ mobile?: string | null;
address?: string | null;
province?: { name?: string } | null;
city?: { name?: string } | null;
+ lat?: string | null;
+ lng?: string | null;
} | null;
listing: { title: string; images: string[]; primaryImageIndex: number };
- shop: { _id: string; name: string; owner: string };
+ shop: {
+ _id: string;
+ name: string;
+ owner: string;
+ estimated_delivery_text?: string | null;
+ has_physical_location?: boolean;
+ province?: { name?: string } | null;
+ city?: { name?: string } | null;
+ address?: string | null;
+ lat?: string | null;
+ lng?: string | null;
+ };
};
export default function OrderDetailPage() {
@@ -48,23 +80,34 @@ export default function OrderDetailPage() {
const user = useUser();
const [order, setOrder] = useState(null);
+ const [report, setReport] = useState(null);
+ const [returnRequest, setReturnRequest] = useState(null);
+ const [shopRating, setShopRating] = useState(null);
const [trackingCode, setTrackingCode] = useState("");
- const [printMode, setPrintMode] = useState<"label-a5" | "label-a6" | "invoice" | null>(
- null
- );
+ const [printMode, setPrintMode] = useState<"invoice" | null>(null);
const [showRating, setShowRating] = useState(false);
- const [ratingScore, setRatingScore] = useState(5);
+ const [ratingScore, setRatingScore] = useState(0);
const [ratingComment, setRatingComment] = useState("");
const [showReport, setShowReport] = useState(false);
const [reportText, setReportText] = useState("");
const [showReturn, setShowReturn] = useState(false);
const [returnReason, setReturnReason] = useState("");
+ const [showBuyerInfo, setShowBuyerInfo] = useState(false);
+ const [showShopInfo, setShowShopInfo] = useState(false);
const loadOrder = () => {
- request<{ order: OrderDetail }>("GET", `/orders/${params.orderId}`)
+ request<{
+ order: OrderDetail;
+ report?: OrderReport | null;
+ returnRequest?: ReturnRequest | null;
+ shopRating?: ShopRating | null;
+ }>("GET", `/orders/${params.orderId}`)
.then((res) => {
setOrder(res?.order || null);
setTrackingCode(res?.order?.tracking_code || "");
+ setReport(res?.report || null);
+ setReturnRequest(res?.returnRequest || null);
+ setShopRating(res?.shopRating || null);
})
.catch(() => setOrder(null));
};
@@ -107,7 +150,7 @@ export default function OrderDetailPage() {
};
const handleSubmitRating = async () => {
- if (!order) return;
+ if (!order || ratingScore < 1) return;
try {
await request("POST", `/orders/${order._id}/rate`, {
rating: ratingScore,
@@ -116,6 +159,7 @@ export default function OrderDetailPage() {
toast.success(t("shops.ratingSubmitted"));
setShowRating(false);
setRatingComment("");
+ loadOrder();
} catch (err: unknown) {
const message =
(err as { response?: { data?: { message?: string } } })?.response
@@ -133,6 +177,7 @@ export default function OrderDetailPage() {
toast.success(t("shops.reportSubmitted"));
setShowReport(false);
setReportText("");
+ loadOrder();
} catch (err: unknown) {
const message =
(err as { response?: { data?: { message?: string } } })?.response
@@ -150,6 +195,7 @@ export default function OrderDetailPage() {
toast.success(t("shops.returnRequestSubmitted"));
setShowReturn(false);
setReturnReason("");
+ loadOrder();
} catch (err: unknown) {
const message =
(err as { response?: { data?: { message?: string } } })?.response
@@ -209,235 +255,329 @@ export default function OrderDetailPage() {
.filter(Boolean)
.join(" ");
+ const boldTracking =
+ order.shipping_method && BOLD_TRACKING_METHODS.includes(order.shipping_method);
+ const trackingHref =
+ order.tracking_code && order.shipping_method && boldTracking
+ ? trackingUrl(order.shipping_method, order.tracking_code)
+ : null;
+
return (
-
-
-
- toggleMethod(method)}
- />
-
- {t(`shops.shippingMethods.${method}`)}
-
- {enabledMethods[method] && (
-
- setCosts((prev) => ({ ...prev, [method]: e.target.value }))
- }
- />
- )}
+
+
-
-
+
+
+ {DELIVERY_METHODS.map((method) => (
+
- ))}
+
+
+ ))}
+ toggleMethod(method)}
+ ariaLabel={t(`shops.shippingMethods.${method}`)}
+ />
+
+ {enabledMethods[method] && (
+
+
+
+
+
+ setCosts((prev) => ({ ...prev, [method]: e.target.value }))
+ }
+ />
+
+ {t("settings.toman")}
+
+
+ )}
+
+
+ {t("shops.supplementarySettings")} +
+
+ setFreeShippingThreshold(e.target.value)}
- />
- setEstimatedDeliveryText(e.target.value)}
- />
+ setFreeShippingThreshold(e.target.value)}
+ />
+ setEstimatedDeliveryText(e.target.value)}
+ />
+
+
+ {t("shops.codAvailable")}
+
+
+ {t("shops.sameDayAvailable")}
+
-
- {t("shops.orderDetailTitle")}
+ <>
+
+
+
+ {t("shops.orderDetailTitle")}
+
+ {t("shops.orderNumberLabel")}: {order.order_number} +
-
- setPrintMode("invoice")}>
- {t("shops.printInvoice")}
-
-
- {isSeller && (
- <>
-
- {primaryImage && (
-
-
-
-
- )}
-
-
- {order.listing.title}
-- {order.total_amount.toLocaleString()} {t("settings.toman")} -
-
-
-
- {t("shops.buyerInfoTitle")}
-{buyerName}
-- {order.buyerAddressSnapshot?.province?.name}{" "} - {order.buyerAddressSnapshot?.city?.name} -
-{order.buyerAddressSnapshot?.address}
-{order.createdAt}
- {order.shipping_method && ( -- {t(`shops.shippingMethods.${order.shipping_method}`)} -
- )} - {order.tracking_code && - (order.shipping_method === "post" ? ( - - {t("shops.trackingCodeLabel")}: {order.tracking_code} - - ) : ( -- {t("shops.trackingCodeLabel")}: {order.tracking_code} -
- ))} -
- setPrintMode("label-a5")}>
- {t("shops.printLabelA5")}
-
- setPrintMode("label-a6")}>
- {t("shops.printLabelA6")}
-
-
-
-
{t("shops.trackingCodeLabel")}
-
- setTrackingCode(e.target.value)}
+ setShowRating((v) => !v)}>
- {t("shops.rateShop")}
+ {isSeller && (
+
+ )}
+
+ {isBuyer && (
+
+ )}
+
+ setPrintMode("invoice")}>
+ {t("shops.printInvoice")}
- {showRating && (
-
+
- {t("shops.confirmReceipt")}
-
)}
+
-
+ {primaryImage && (
+
-
-
+
- {t("common.save")}
-
-
-
-
- )}
-
- {isBuyer && (
- <>
- {canConfirmReceipt && (
- {t("shops.changeStatusLabel")}
-
- {SELLER_STATUSES.map((status) => (
-
- ))}
-
-
+
+ + {order.listing.title}{" "} + × {order.quantity} +
++ {order.total_amount.toLocaleString()} {t("settings.toman")} +
+
+
+
+ {isSeller && (
+
+ {t("shops.shippingTimeLabel")}
+
+ {[order.createdAt, order.shop.estimated_delivery_text]
+ .filter(Boolean)
+ .join(" ")}
+
+
+ {order.shipping_method && (
+
+ {t("shops.shippingTypeLabel")}
+ {t(`shops.shippingMethods.${order.shipping_method}`)}
+
+ )}
+ {order.tracking_code && (
+
+ {t("shops.trackingCodeLabel")}
+ {trackingHref ? (
+
+ {order.tracking_code}
+
+ ) : (
+ {order.tracking_code}
+ )}
+
+ )}
+
+ {t("shops.shippingCostLabel")}
+
+ {order.shipping_cost.toLocaleString()} {t("settings.toman")}
+
+
+
+ {t("shops.grandTotalLabel")}
+
+ {order.total_amount.toLocaleString()} {t("settings.toman")}
+
+
+
-
- {[1, 2, 3, 4, 5].map((n) => (
+ )}
+
+ {isSeller && (
+ <>
+
+
+
+ {t("shops.trackingCodeLabel")}
+
+ setTrackingCode(e.target.value)}
+ />
+
+ {t("common.save")}
+
+
+
+
{t("shops.changeStatusLabel")}
+
+ {SELLER_STATUSES.map((status) => (
))}
-