Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-19 23:51:41 +03:30
parent cd2f9dfc9d
commit 66e604c426
39 changed files with 1900 additions and 188 deletions
@@ -0,0 +1,113 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Container } from "@/components/Container";
+import { AddToCart } from "@/components/product/AddToCart";
+import { ProductGallery } from "@/components/product/ProductGallery";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { fetchComments } from "@/lib/comments";
+import { formatPrice } from "@/lib/format";
+import {
+  brandName,
+  fetchCatalogProductByTitle,
+  fetchStoreItemByProduct,
+  fetchStoreVariant,
+  galleryUrls,
+  variantTitle,
+} from "@/lib/store";
+
+export const revalidate = 60;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const variant = await fetchStoreVariant(id);
+  return {
+    title: variant ? `${variantTitle(variant)} | داروخانه دکتر ارجمند` : "محصول",
+  };
+}
+
+export default async function ProductDetailsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const variant = await fetchStoreVariant(id);
+  if (!variant) notFound();
+
+  const [catalog, storeItem, comments] = await Promise.all([
+    fetchCatalogProductByTitle(variant.productNameFa || variant.productTitle, variant.productId),
+    variant.productId ? fetchStoreItemByProduct(variant.productId) : Promise.resolve({ storeItem: undefined }),
+    variant.productId
+      ? fetchComments("product", variant.productId)
+      : Promise.resolve([]),
+  ]);
+
+  const images = galleryUrls(catalog, variant.productImage);
+  const price = variant.discountedPrice ?? variant.price;
+  const oldPrice = variant.discountedPrice != null ? variant.price : null;
+  const title = catalog?.nameFa || variantTitle(variant);
+  const brand = brandName(catalog);
+  const variants = storeItem.storeItem?.variants ?? [];
+  const inStock = variant.stockQuantity == null || variant.stockQuantity > 0;
+
+  return (
+    <section className="pt-8">
+      <Container>
+        <p className="text-[13px] text-muted">
+          <Link href="/" className="hover:text-primary">خانه</Link>
+          <span className="mx-2">/</span>
+          <Link href="/products" className="hover:text-primary">محصولات</Link>
+          <span className="mx-2">/</span>
+          {title}
+        </p>
+
+        <div className="mt-5 grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
+          <ProductGallery images={images} alt={title} />
+          <div>
+            {brand ? <p className="text-[13px] font-medium text-primary">{brand}</p> : null}
+            <h1 className="mt-2 text-[22px] font-bold leading-9 text-navy">{title}</h1>
+            {variant.label && variant.label !== title ? (
+              <p className="mt-2 text-[13px] text-muted">{variant.label}</p>
+            ) : null}
+
+            <div className="mt-5 flex items-end gap-3">
+              {oldPrice ? <p className="text-[13px] text-muted line-through">{formatPrice(oldPrice)} تومان</p> : null}
+              <p className="text-[22px] font-bold text-navy">
+                {price != null ? (
+                  <>
+                    {formatPrice(price)}
+                    <span className="mr-1 text-[13px] font-medium text-muted">تومان</span>
+                  </>
+                ) : (
+                  <span className="text-[16px] font-medium text-muted">برای قیمت تماس بگیرید</span>
+                )}
+              </p>
+            </div>
+            <p className={`mt-2 text-[13px] ${inStock ? "text-ok" : "text-sale"}`}>
+              {inStock ? "موجود در داروخانه" : "ناموجود"}
+            </p>
+
+            {variants.length > 1 ? (
+              <div className="mt-5 flex flex-wrap gap-2">
+                {variants.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={`/products/${encodeURIComponent(item.id)}`}
+                    className={`rounded-lg border px-3 py-1.5 text-[12px] ${item.id === variant.id ? "border-primary bg-sky text-navy" : "border-line bg-white text-muted"}`}
+                  >
+                    {item.label || variantTitle(item)}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+
+            {inStock ? <AddToCart variantId={variant.id} maxQuantity={variant.stockQuantity} /> : null}
+          </div>
+        </div>
+
+        <ProductTabs descriptionHtml={catalog?.descriptionHtml || catalog?.summary} comments={comments} />
+      </Container>
+    </section>
+  );
+}
@@ -0,0 +1,87 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { fetchStoreItems, variantToProduct } from "@/lib/store";
+import { getNavCategories } from "@/lib/categories";
+import { faDigits } from "@/lib/format";
+
+export const revalidate = 60;
+
+export const metadata: Metadata = {
+  title: "محصولات | داروخانه دکتر ارجمند",
+};
+
+export default async function ProductsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string; categoryId?: string; q?: string }>;
+}) {
+  const params = await searchParams;
+  const page = Math.max(1, Number(params.page) || 1);
+  const categoryId = params.categoryId;
+  const q = params.q?.trim();
+  const [result, nav] = await Promise.all([
+    fetchStoreItems({ page, pageSize: 20, categoryId, name: q && q.length > 2 ? q : undefined }),
+    getNavCategories(),
+  ]);
+  const products = result.items.map(variantToProduct);
+  const pageCount = Math.max(1, Math.ceil((result.total || products.length) / (result.pageSize || 20)));
+  const categoryTitle = nav
+    .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] }))])
+    .find((item) => item.id === categoryId)?.title;
+
+  return (
+    <section className="pt-8">
+      <Container>
+        <div className="mb-6">
+          <p className="text-[13px] text-muted">
+            <Link href="/" className="hover:text-primary">خانه</Link>
+            <span className="mx-2">/</span>
+            محصولات
+          </p>
+          <h1 className="mt-2 text-[22px] font-bold text-navy">
+            {categoryTitle || (q ? `جستجو: ${q}` : "همه محصولات")}
+          </h1>
+          {result.total ? (
+            <p className="mt-1 text-[13px] text-muted">{faDigits(result.total)} کالا</p>
+          ) : null}
+        </div>
+
+        {products.length === 0 ? (
+          <div className="rounded-2xl bg-white px-6 py-16 text-center">
+            <p className="text-[15px] font-bold text-navy">محصولی برای نمایش وجود ندارد</p>
+            <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+
+        {pageCount > 1 ? (
+          <div className="mt-8 flex justify-center gap-2">
+            {Array.from({ length: pageCount }, (_, index) => {
+              const number = index + 1;
+              const query = new URLSearchParams();
+              if (categoryId) query.set("categoryId", categoryId);
+              if (q) query.set("q", q);
+              query.set("page", String(number));
+              return (
+                <Link
+                  key={number}
+                  href={`/products?${query.toString()}`}
+                  className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-primary text-white" : "bg-white text-navy"}`}
+                >
+                  {faDigits(number)}
+                </Link>
+              );
+            })}
+          </div>
+        ) : null}
+      </Container>
+    </section>
+  );
+}