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>

app/api/cart/items/route.ts

@@ -0,0 +1,33 @@
+import { customerPortalUrl, meshkeeApiBase } from "@/lib/config";
+import { getBusinessId } from "@/lib/meshkee";
+
+export async function POST(request: Request) {
+  const token = request.headers.get("authorization");
+  if (!token) {
+    return Response.json({ error: "login_required", redirect: customerPortalUrl }, { status: 401 });
+  }
+
+  const businessId = await getBusinessId();
+  if (!businessId) {
+    return Response.json({ error: "tenant_missing" }, { status: 500 });
+  }
+
+  const body = await request.json();
+  try {
+    const response = await fetch(`${meshkeeApiBase}/businesses/${encodeURIComponent(businessId)}/cart/items`, {
+      method: "POST",
+      headers: {
+        Authorization: token,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+    const text = await response.text();
+    return new Response(text, {
+      status: response.status,
+      headers: { "Content-Type": response.headers.get("content-type") ?? "application/json" },
+    });
+  } catch {
+    return Response.json({ error: "cart_failed" }, { status: 502 });
+  }
+}

app/api/search/route.ts

@@ -0,0 +1,19 @@
+import { meshkeeApiBase, websiteDomain } from "@/lib/config";
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const query = url.searchParams.get("q")?.trim() ?? "";
+  if (query.length <= 2) {
+    return Response.json({ items: [] });
+  }
+
+  try {
+    const response = await fetch(
+      `${meshkeeApiBase}/tenants/${encodeURIComponent(websiteDomain)}/store-items?name=${encodeURIComponent(query)}&pageSize=8`,
+      { cache: "no-store" },
+    );
+    return Response.json(await response.json());
+  } catch {
+    return Response.json({ items: [] });
+  }
+}

app/blog/[slug]/page.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { blogImage, fetchBlog } from "@/lib/blog";
+import { fetchComments } from "@/lib/comments";
+import { formatFaDate } from "@/lib/format";
+
+export const revalidate = 60;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await fetchBlog(slug);
+  return { title: post ? `${post.title} | مجله سلامت` : "مقاله" };
+}
+
+export default async function BlogDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await fetchBlog(slug);
+  if (!post) notFound();
+  const comments = await fetchComments("blog", post.id);
+
+  return (
+    <article className="pt-8">
+      <Container className="max-w-3xl">
+        <p className="text-[13px] text-muted">
+          <Link href="/" className="hover:text-primary">خانه</Link>
+          <span className="mx-2">/</span>
+          <Link href="/blog" className="hover:text-primary">مجله سلامت</Link>
+        </p>
+        <h1 className="mt-3 text-[24px] font-bold leading-10 text-navy">{post.title}</h1>
+        <p className="mt-2 text-[13px] text-muted">{formatFaDate(post.publishedAt || post.createdAt)}</p>
+        <div className="mt-5 overflow-hidden rounded-2xl bg-sky">
+          <Placeholder src={blogImage(post)} alt={post.title} className="aspect-[16/8] w-full object-cover" />
+        </div>
+        {post.abstract ? <p className="mt-6 text-[15px] leading-8 text-ink">{post.abstract}</p> : null}
+        {post.mainTextHtml ? (
+          <div className="rich-text mt-6 text-[14px] leading-8 text-ink" dangerouslySetInnerHTML={{ __html: post.mainTextHtml }} />
+        ) : null}
+        <ProductTabs showDescription={false} comments={comments} />
+      </Container>
+    </article>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { Placeholder } from "@/components/Placeholder";
+import { blogHref, blogImage, fetchBlogs } from "@/lib/blog";
+import { faDigits, formatFaDate } from "@/lib/format";
+
+export const revalidate = 60;
+
+export const metadata: Metadata = {
+  title: "مجله سلامت | داروخانه دکتر ارجمند",
+};
+
+export default async function BlogPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const result = await fetchBlogs({ page, pageSize: 12 });
+  const pageCount = Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)));
+
+  return (
+    <section className="pt-8">
+      <Container>
+        <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">مجله سلامت</h1>
+
+        {result.items.length === 0 ? (
+          <div className="mt-8 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="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {result.items.map((post) => (
+              <article key={post.id} className="overflow-hidden rounded-2xl bg-white">
+                <Link href={blogHref(post)} className="block overflow-hidden bg-sky">
+                  <Placeholder src={blogImage(post)} className="aspect-[16/10] w-full object-cover" />
+                </Link>
+                <div className="p-4">
+                  <p className="text-[12px] text-muted">{formatFaDate(post.publishedAt || post.createdAt)}</p>
+                  <h2 className="mt-2 text-[15px] font-bold leading-7 text-navy">
+                    <Link href={blogHref(post)}>{post.title}</Link>
+                  </h2>
+                  {post.abstract ? <p className="mt-2 line-clamp-3 text-[13px] leading-6 text-muted">{post.abstract}</p> : null}
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+
+        {pageCount > 1 && result.items.length > 0 ? (
+          <div className="mt-8 flex justify-center gap-2">
+            {Array.from({ length: pageCount }, (_, index) => {
+              const number = index + 1;
+              return (
+                <Link
+                  key={number}
+                  href={`/blog?page=${number}`}
+                  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>
+  );
+}

app/globals.css

@@ -53,8 +53,20 @@ body {
   scrollbar-width: none;
 }
 
-input,
-button,
-textarea {
-  font-family: inherit;
+.rich-text {
+  overflow-wrap: anywhere;
+}
+
+.rich-text :where(p, ul, ol, h2, h3, h4) {
+  margin-top: 0.85em;
+}
+
+.rich-text :where(ul, ol) {
+  padding-inline-start: 1.25rem;
+}
+
+.rich-text img {
+  height: auto;
+  max-width: 100%;
+  border-radius: 12px;
 }

app/layout.tsx

@@ -1,6 +1,11 @@
 import type { Metadata } from "next";
 import { Vazirmatn } from "next/font/google";
 import "./globals.css";
+import { TopBar } from "@/components/layout/TopBar";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
+import { getNavCategories } from "@/lib/categories";
+import { getLogoSrc } from "@/lib/media";
 
 const vazir = Vazirmatn({
   subsets: ["arabic", "latin"],
@@ -15,7 +20,9 @@ export const metadata: Metadata = {
     "خرید آنلاین دارو، مکمل، محصولات بهداشتی و آرایشی از داروخانه دکتر ارجمند در قم، سالاریه.",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const [logoSrc, categories] = await Promise.all([Promise.resolve(getLogoSrc()), getNavCategories()]);
+
   return (
     <html lang="fa" dir="rtl" className={vazir.variable}>
       <head>
@@ -26,8 +33,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           rel="stylesheet"
         />
       </head>
-      <body className={`${vazir.className} min-h-screen antialiased`}>{children}</body>
+      <body className={`${vazir.className} min-h-screen antialiased`}>
+        <TopBar />
+        <Header logoSrc={logoSrc} categories={categories} />
+        <main className="pb-12">{children}</main>
+        <Footer logoSrc={logoSrc} />
+      </body>
     </html>
   );
 }
-

app/meshkee/static-image-slots/route.ts

@@ -0,0 +1,16 @@
+import { STATIC_IMAGE_SLOTS } from "@/lib/static-images";
+
+const headers = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "GET, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type",
+  "Cache-Control": "public, max-age=60",
+};
+
+export async function OPTIONS() {
+  return new Response(null, { status: 204, headers });
+}
+
+export async function GET() {
+  return Response.json({ slots: STATIC_IMAGE_SLOTS }, { headers });
+}

app/page.tsx

@@ -1,6 +1,3 @@
-import { TopBar } from "@/components/layout/TopBar";
-import { Header } from "@/components/layout/Header";
-import { Footer } from "@/components/layout/Footer";
 import { Hero } from "@/components/home/Hero";
 import { FeaturedCategories } from "@/components/home/FeaturedCategories";
 import { SiteFeatures } from "@/components/home/SiteFeatures";
@@ -9,47 +6,103 @@ import { BannerRow } from "@/components/home/BannerRow";
 import { AboutDoctor } from "@/components/home/AboutDoctor";
 import { BlogCarousel } from "@/components/home/BlogCarousel";
 import { FaqPreview } from "@/components/home/FaqPreview";
-import { specialSale, topSelling, twoBanners, tripleBanners, yeganehProducts } from "@/lib/data";
-import { getLogoSrc, getSlides } from "@/lib/media";
+import { categories, heroBanners, specialSale, twoBanners, tripleBanners, yeganehProducts } from "@/lib/data";
+import { getSlides } from "@/lib/media";
+import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";
+import { fetchBlogs } from "@/lib/blog";
+import { fetchSpecialProducts } from "@/lib/store";
 
-export default function HomePage() {
-  const slides = getSlides();
-  const logoSrc = getLogoSrc();
+export const revalidate = 60;
+
+const placeholderSlides = [
+  { id: "slide-1", image: "/placeholders/slider-1.svg", href: "#" },
+  { id: "slide-2", image: "/placeholders/slider-2.svg", href: "#" },
+  { id: "slide-3", image: "/placeholders/slider-3.svg", href: "#" },
+];
+
+export default async function HomePage() {
+  const [slots, sale, vitamins, bodybuilding, blogs] = await Promise.all([
+    fetchStaticImageSlots("home"),
+    fetchSpecialProducts("special-sale"),
+    fetchSpecialProducts("multi-vitamin"),
+    fetchSpecialProducts("body-building-supplement"),
+    fetchBlogs({ pageSize: 8 }),
+  ]);
+  const localSlides = getSlides();
+
+  const slider = overlaySlotImages(
+    pickSlot(slots, "slider"),
+    localSlides.length ? localSlides : placeholderSlides,
+    "slider",
+  );
+  const belowSlider = overlaySlotImages(
+    pickSlot(slots, "two-banner-below-slider"),
+    heroBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "two-banner-below-slider",
+  );
+  const categoryItems = overlaySlotImages(
+    pickSlot(slots, "categories"),
+    categories.map((category) => ({
+      id: category.id,
+      image: category.image,
+      href: category.href,
+      title: category.title,
+    })),
+    "categories",
+  );
+  const twoBannerRow = overlaySlotImages(
+    pickSlot(slots, "two-banner-row"),
+    twoBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "two-banner-row",
+  );
+  const threeBannerRow = overlaySlotImages(
+    pickSlot(slots, "three-banner-row"),
+    tripleBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "three-banner-row",
+  );
+  const aboutImage = overlaySlotImages(
+    pickSlot(slots, "about-us-image"),
+    [{ id: "about", image: "/placeholders/doctor.svg" }],
+    "about-us-image",
+  );
 
   return (
     <>
-      <TopBar />
-      <Header logoSrc={logoSrc} />
-      <main className="pb-12">
-        <Hero slides={slides} />
-        <FeaturedCategories />
-        <SiteFeatures />
-        <ProductCarousel
-          id="special-sale"
-          title="فروش ویژه"
-          subtitle="تخفیف‌های منتخب امروز داروخانه"
-          products={specialSale}
-          accent="sale"
-        />
-        <BannerRow banners={twoBanners} columns={2} />
-        <ProductCarousel
-          id="top-selling"
-          title="پرفروش‌ترین محصولات"
-          subtitle="پیشنهاد ویژه مشتریان"
-          products={topSelling}
-        />
-        <BannerRow banners={tripleBanners} columns={3} />
-        <ProductCarousel
-          id="yeganeh"
-          title="محصولات برند یگانه"
-          subtitle="مکمل‌های منتخب Yeganeh"
-          products={yeganehProducts}
-        />
-        <AboutDoctor />
-        <BlogCarousel />
-        <FaqPreview />
-      </main>
-      <Footer logoSrc={logoSrc} />
+      <Hero
+        slides={slider.items}
+        banners={belowSlider.items}
+        sliderAspectRatio={slider.aspectRatio}
+        bannerAspectRatio={belowSlider.aspectRatio}
+      />
+      <FeaturedCategories items={categoryItems.items} aspectRatio={categoryItems.aspectRatio} />
+      <SiteFeatures />
+      <ProductCarousel
+        id="special-sale"
+        title={sale.special?.title || "فروش ویژه"}
+        subtitle="تخفیف‌های منتخب امروز داروخانه"
+        products={sale.products.length ? sale.products : specialSale}
+        href="/products"
+        accent="sale"
+      />
+      <BannerRow banners={twoBannerRow.items} columns={2} aspectRatio={twoBannerRow.aspectRatio} />
+      <ProductCarousel
+        id="multi-vitamin"
+        title={vitamins.special?.title || "مولتی ویتامین‌ها"}
+        subtitle="مکمل‌های ویتامینه منتخب"
+        products={vitamins.products.length ? vitamins.products : yeganehProducts}
+        href="/products"
+      />
+      <BannerRow banners={threeBannerRow.items} columns={3} aspectRatio={threeBannerRow.aspectRatio} />
+      <ProductCarousel
+        id="body-building-supplement"
+        title={bodybuilding.special?.title || "مکمل‌های بدنسازی"}
+        subtitle="پروتئین، کراتین و مکمل ورزشی"
+        products={bodybuilding.products.length ? bodybuilding.products : specialSale}
+        href="/products"
+      />
+      <AboutDoctor image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
+      <BlogCarousel posts={blogs.items} />
+      <FaqPreview />
     </>
   );
 }

app/products/[id]/page.tsx

@@ -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>
+  );
+}

app/products/page.tsx

@@ -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>
+  );
+}