Create Glassmond storefront with Meshkee integration

Build the RTL Next.js experience with live catalog, journal, customer interactions, and SEO-ready canonical routes. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 00:08:00 +03:30
commit 98fde02322
66 changed files with 8280 additions and 0 deletions
@@ -0,0 +1,178 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { MessageCircle, Phone, ShieldCheck } from "lucide-react";
+import { notFound, redirect } from "next/navigation";
+import { ApiProductCard } from "@/components/api-product-card";
+import { ProductTabs } from "@/components/entity-comments";
+import { ProductGallery } from "@/components/product-gallery";
+import {
+  getComments,
+  getProductById,
+  getProducts,
+  plainText,
+  productImage,
+  productUrl,
+  sanitizeCmsContent,
+  slugifyFa,
+} from "@/lib/meshkee";
+
+type ProductPageProps = {
+  params: Promise<{ id: string; slug: string }>;
+};
+
+export async function generateStaticParams() {
+  const data = await getProducts({ pageSize: 50 }).catch(() => ({ items: [] }));
+  return data.items.map((product) => ({
+    id: product.id,
+    slug: slugifyFa(product.nameFa || product.title),
+  }));
+}
+
+export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const data = await getProductById(id).catch(() => null);
+  if (!data) return { title: "محصول یافت نشد", robots: { index: false } };
+
+  const product = data.product;
+  const title = product.nameFa || product.title;
+  const description =
+    plainText(product.summary || product.descriptionHtml).slice(0, 155) ||
+    `مشخصات و تصاویر ${title} از محصولات گلسموند.`;
+  const image = productImage(product);
+  const canonical = productUrl(product);
+
+  return {
+    title,
+    description,
+    alternates: { canonical },
+    openGraph: {
+      title,
+      description,
+      url: canonical,
+      images: image ? [image] : [],
+    },
+  };
+}
+
+export default async function ProductDetailPage({ params }: ProductPageProps) {
+  const { id, slug } = await params;
+  const data = await getProductById(id).catch(() => null);
+  if (!data) notFound();
+
+  const { product, relatedProducts = [] } = data;
+  const canonical = productUrl(product);
+  const expectedSlug = canonical.split("/").at(-1) || "";
+  let currentSlug = slug;
+  try {
+    currentSlug = decodeURIComponent(slug);
+  } catch {
+    currentSlug = slug;
+  }
+  if (currentSlug !== expectedSlug) redirect(encodeURI(canonical));
+
+  const title = product.nameFa || product.title;
+  const mainImage = productImage(product);
+  const images = Array.from(
+    new Set([mainImage, ...(product.images || []).map((item) => item.url)].filter(Boolean)),
+  ) as string[];
+  const comments = await getComments("product", product.id);
+  const categoryTitle = product.categoryNameFa || product.categoryName || "آینه";
+  const categoryHref = product.categoryId
+    ? `/products/category/${product.categoryId}/${slugifyFa(categoryTitle)}`
+    : null;
+  const descriptionHtml = sanitizeCmsContent(
+    product.descriptionHtml || product.summary || "اطلاعات تکمیلی این محصول به‌زودی درج می‌شود.",
+    title,
+  );
+
+  return (
+    <>
+      <section className="product-detail-top">
+        <div className="container">
+          <nav className="detail-breadcrumbs" aria-label="مسیر صفحه">
+            <Link href="/">صفحه اصلی</Link>
+            <span>/</span>
+            <Link href="/products">محصولات</Link>
+            <span>/</span>
+            <b>{title}</b>
+          </nav>
+
+          <div className="product-detail-grid">
+            <ProductGallery images={images.length ? images : ["/images/hero.jpg"]} alt={title} />
+
+            <div className="product-detail-copy">
+              <span className="english-title">PRODUCT DETAILS</span>
+              <p className="product-category">{product.categoryNameFa || "آینه هوشمند"}</p>
+              <h1>{title}</h1>
+              {product.summary && <p className="product-summary">{product.summary}</p>}
+
+              <dl className="product-facts">
+                <div>
+                  <dt>دسته‌بندی</dt>
+                  <dd>
+                    {categoryHref ? <Link href={categoryHref}>{categoryTitle}</Link> : categoryTitle}
+                  </dd>
+                </div>
+                <div>
+                  <dt>وضعیت سفارش</dt>
+                  <dd>{product.store?.inStock ? "موجود" : "تماس بگیرید"}</dd>
+                </div>
+                <div>
+                  <dt>خدمات</dt>
+                  <dd>یک سال گارانتی و ده سال پشتیبانی</dd>
+                </div>
+              </dl>
+
+              <div className="product-assurance">
+                <ShieldCheck />
+                <p>تولید مطابق استاندارد IP64 با برق ایمن ۱۲ ولت</p>
+              </div>
+
+              <div className="product-detail-actions">
+                <a className="primary-button" href="tel:+989301293902">
+                  <Phone />
+                  تماس برای سفارش
+                </a>
+                <a
+                  className="outline-dark-button"
+                  href="https://wa.me/989301293902"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <MessageCircle />
+                  واتساپ
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="product-information">
+        <div className="container">
+          <ProductTabs
+            descriptionHtml={descriptionHtml}
+            entityId={product.id}
+            comments={comments.items}
+          />
+        </div>
+      </section>
+
+      {relatedProducts.length > 0 && (
+        <section className="related-section">
+          <div className="container">
+            <div className="section-heading">
+              <span className="english-title">RELATED PRODUCTS</span>
+              <h2>محصولات مرتبط</h2>
+            </div>
+            <div className="catalog-grid">
+              {relatedProducts.slice(0, 3).map((item) => (
+                <ApiProductCard key={item.id} product={item} headingLevel={3} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}