@pradip1995/segment-beauty-shop-grid 0.1.1

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pradip1995/segment-beauty-shop-grid",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/beauty-shop-grid.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/medusa-connector": "^0.2.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-product-card": "0.3.3",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/beauty-shop-grid.css

@@ -0,0 +1,192 @@
+.beauty-shop-grid {
+  padding: 0.5rem 0 3rem;
+}
+
+.beauty-shop-grid__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid #ebebeb;
+}
+
+.beauty-shop-grid__eyebrow {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-brand-accent, #8b3a62);
+}
+
+.beauty-shop-grid__title {
+  margin: 0.35rem 0 0;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: clamp(1.75rem, 3vw, 2.375rem);
+  font-weight: 500;
+  line-height: 1.12;
+  letter-spacing: 0.01em;
+  color: var(--color-text-heading, #0a0a0a);
+}
+
+.beauty-shop-grid__search,
+.beauty-shop-grid__count {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #737373);
+}
+
+.beauty-shop-grid__sort {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.beauty-shop-grid__sort-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid #d8d8d8;
+  background: #ffffff;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--color-text-body, #4d4d4d);
+  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.beauty-shop-grid__sort-pill:hover {
+  border-color: #000000;
+  color: var(--color-text-heading, #0a0a0a);
+}
+
+.beauty-shop-grid__sort-pill--active {
+  background: #000000;
+  border-color: #000000;
+  color: #ffffff;
+}
+
+.beauty-shop-grid__progress {
+  height: 2px;
+  margin-bottom: 1.5rem;
+  background: #f0f0f0;
+  overflow: hidden;
+}
+
+.beauty-shop-grid__progress-fill {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, #8b3a62 0%, #c94b7a 100%);
+  transition: width 0.35s ease;
+}
+
+.beauty-shop-grid__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem 0.875rem;
+}
+
+@media (min-width: 768px) {
+  .beauty-shop-grid__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.5rem 1.25rem;
+  }
+}
+
+.beauty-shop-grid__empty {
+  padding: 4rem 1.5rem;
+  text-align: center;
+  border: 1px solid #ebebeb;
+  background: linear-gradient(180deg, #faf7f5 0%, #ffffff 100%);
+}
+
+.beauty-shop-grid__empty p {
+  margin: 0 0 1.25rem;
+  font-size: 0.9375rem;
+  color: var(--color-text-body, #4d4d4d);
+}
+
+.beauty-shop-grid__empty-cta {
+  display: inline-flex;
+  min-height: 2.75rem;
+  padding: 0 1.5rem;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.beauty-shop-grid__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  min-height: 3rem;
+}
+
+.beauty-shop-grid__loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-text-muted, #737373);
+}
+
+.beauty-shop-grid__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #e0e0e0;
+  border-top-color: var(--color-brand-accent, #8b3a62);
+  border-radius: 50%;
+  animation: beauty-shop-spin 0.7s linear infinite;
+}
+
+@keyframes beauty-shop-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.beauty-shop-grid__error {
+  text-align: center;
+}
+
+.beauty-shop-grid__error p {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-brand-sale, #c1272d);
+}
+
+.beauty-shop-grid__retry {
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  color: var(--color-text-heading, #0a0a0a);
+  cursor: pointer;
+}
+
+.beauty-shop-grid__end {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-text-muted, #737373);
+}
+
+.beauty-shop-grid__sentinel {
+  width: 100%;
+  height: 1px;
+}

package/src/beauty-shop-grid.tsx

@@ -0,0 +1,255 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react"
+import { useSearchParams } from "next/navigation"
+import ProductCard from "@pradip1995/segment-product-card"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import type { HttpTypes } from "@medusajs/types"
+import { loadMoreStoreProducts, type StoreLoadMoreFilters } from "./load-more-products"
+import "./beauty-shop-grid.css"
+
+const PAGE_SIZE = 12
+
+const SORT_OPTIONS = [
+  { value: "created_at_desc", label: "Newest" },
+  { value: "price_asc", label: "Price · Low to high" },
+  { value: "price_desc", label: "Price · High to low" },
+  { value: "bestsellers", label: "Bestsellers" },
+]
+
+function paramValue(value?: string | string[]): string | undefined {
+  if (value === undefined) return undefined
+  return Array.isArray(value) ? value.join(",") : value
+}
+
+function productKey(product: HttpTypes.StoreProduct, index: number): string {
+  return product.id ?? product.handle ?? `product-${index}`
+}
+
+export default function BeautyShopGrid(props: {
+  countryCode?: string
+  products?: HttpTypes.StoreProduct[]
+  productCount?: number
+  page?: string
+  sortBy?: string
+  q?: string
+  category?: string | string[]
+  collection?: string | string[]
+  gender?: string | string[]
+  type?: string | string[]
+  material?: string | string[]
+  color?: string | string[]
+  minPrice?: string
+  maxPrice?: string
+  title?: string
+  emptyMessage?: string
+}) {
+  const searchParams = useSearchParams()
+  const countryCode =
+    props.countryCode?.toLowerCase() ??
+    process.env.NEXT_PUBLIC_DEFAULT_REGION?.toLowerCase() ??
+    "in"
+
+  const initialPage = props.page ? parseInt(props.page, 10) : 1
+  const sortBy = props.sortBy || "created_at_desc"
+  const title = props.title || "All beauty"
+  const emptyMessage =
+    props.emptyMessage ||
+    "No products match your filters. Try adjusting your selection or browse the full collection."
+
+  const filters: StoreLoadMoreFilters = useMemo(
+    () => ({
+      sortBy,
+      q: props.q,
+      category: paramValue(props.category),
+      collection: paramValue(props.collection),
+      gender: paramValue(props.gender),
+      type: paramValue(props.type),
+      material: paramValue(props.material),
+      color: paramValue(props.color),
+      minPrice: props.minPrice,
+      maxPrice: props.maxPrice,
+    }),
+    [
+      sortBy,
+      props.q,
+      props.category,
+      props.collection,
+      props.gender,
+      props.type,
+      props.material,
+      props.color,
+      props.minPrice,
+      props.maxPrice,
+    ]
+  )
+
+  const filterSignature = useMemo(() => JSON.stringify(filters), [filters])
+  const initialProducts = props.products ?? []
+  const totalCount = props.productCount ?? initialProducts.length
+
+  const [items, setItems] = useState(initialProducts)
+  const [currentPage, setCurrentPage] = useState(initialPage)
+  const [hasMore, setHasMore] = useState(
+    sortBy !== "bestsellers" && totalCount > initialPage * PAGE_SIZE
+  )
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+  const loadingRef = useRef(false)
+
+  useEffect(() => {
+    setItems(initialProducts)
+    setCurrentPage(initialPage)
+    setHasMore(sortBy !== "bestsellers" && totalCount > initialPage * PAGE_SIZE)
+    setLoadError(null)
+    loadingRef.current = false
+  }, [filterSignature, initialProducts, initialPage, sortBy, totalCount])
+
+  const buildSortHref = (value: string) => {
+    const params = new URLSearchParams(searchParams?.toString() ?? "")
+    params.set("sortBy", value)
+    params.delete("page")
+    const query = params.toString()
+    return query ? `/store?${query}` : "/store"
+  }
+
+  const loadNextPage = useCallback(() => {
+    if (loadingRef.current || pending || !hasMore || sortBy === "bestsellers") return
+
+    loadingRef.current = true
+    const nextPage = currentPage + 1
+
+    startTransition(async () => {
+      try {
+        const result = await loadMoreStoreProducts(countryCode, nextPage, filters)
+        setItems((prev) => {
+          const seen = new Set(prev.map((p) => p.id).filter(Boolean))
+          const merged = [...prev]
+          for (const product of result.products) {
+            if (product.id && seen.has(product.id)) continue
+            merged.push(product)
+          }
+          return merged
+        })
+        setCurrentPage(nextPage)
+        setHasMore(result.hasMore)
+        setLoadError(null)
+      } catch {
+        setLoadError("Could not load more products. Scroll to try again.")
+      } finally {
+        loadingRef.current = false
+      }
+    })
+  }, [countryCode, currentPage, filters, hasMore, pending, sortBy])
+
+  useEffect(() => {
+    const node = sentinelRef.current
+    if (!node || !hasMore) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) loadNextPage()
+      },
+      { rootMargin: "240px 0px" }
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [hasMore, loadNextPage])
+
+  const showingCount = items.length
+  const progressPct = totalCount > 0 ? Math.min(100, (showingCount / totalCount) * 100) : 100
+
+  return (
+    <section className="beauty-shop-grid flex-1 min-w-0" aria-label="Product results">
+      <header className="beauty-shop-grid__header">
+        <div className="beauty-shop-grid__intro">
+          <p className="beauty-shop-grid__eyebrow">Shop Lumière</p>
+          <h1 className="beauty-shop-grid__title">{title}</h1>
+          {props.q ? (
+            <p className="beauty-shop-grid__search">
+              Results for &ldquo;{props.q}&rdquo;
+            </p>
+          ) : null}
+          {totalCount > 0 ? (
+            <p className="beauty-shop-grid__count">
+              {showingCount} of {totalCount} {totalCount === 1 ? "product" : "products"}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="beauty-shop-grid__sort" role="group" aria-label="Sort products">
+          {SORT_OPTIONS.map((opt) => {
+            const active = sortBy === opt.value
+            return (
+              <LocalizedLink
+                key={opt.value}
+                href={buildSortHref(opt.value)}
+                className={`beauty-shop-grid__sort-pill${active ? " beauty-shop-grid__sort-pill--active" : ""}`}
+                countryCode={countryCode}
+              >
+                {opt.label}
+              </LocalizedLink>
+            )
+          })}
+        </div>
+      </header>
+
+      {totalCount > 0 && sortBy !== "bestsellers" ? (
+        <div className="beauty-shop-grid__progress" aria-hidden>
+          <span className="beauty-shop-grid__progress-fill" style={{ width: `${progressPct}%` }} />
+        </div>
+      ) : null}
+
+      {items.length === 0 ? (
+        <div className="beauty-shop-grid__empty">
+          <p>{emptyMessage}</p>
+          <LocalizedLink href="/store" className="beauty-shop-grid__empty-cta btn-primary" countryCode={countryCode}>
+            View all beauty
+          </LocalizedLink>
+        </div>
+      ) : (
+        <>
+          <div className="beauty-shop-grid__grid">
+            {items.map((product, index) => (
+              <ProductCard
+                key={productKey(product, index)}
+                product={product}
+                countryCode={countryCode}
+                variant="beauty"
+              />
+            ))}
+          </div>
+
+          <div className="beauty-shop-grid__footer">
+            {pending ? (
+              <div className="beauty-shop-grid__loading" role="status" aria-live="polite">
+                <span className="beauty-shop-grid__spinner" aria-hidden />
+                Loading more…
+              </div>
+            ) : null}
+
+            {loadError ? (
+              <div className="beauty-shop-grid__error">
+                <p>{loadError}</p>
+                <button type="button" className="beauty-shop-grid__retry" onClick={loadNextPage}>
+                  Try again
+                </button>
+              </div>
+            ) : null}
+
+            {!hasMore && items.length > 0 ? (
+              <p className="beauty-shop-grid__end">
+                You&apos;ve seen all {totalCount} {totalCount === 1 ? "product" : "products"}
+              </p>
+            ) : null}
+
+            {hasMore ? <div ref={sentinelRef} className="beauty-shop-grid__sentinel" aria-hidden /> : null}
+          </div>
+        </>
+      )}
+    </section>
+  )
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/load-more-products.ts

@@ -0,0 +1,82 @@
+"use server"
+
+import { getProductsByTag } from "@pradip1995/commerce-core/data/products"
+import { listStoreProductsWithSort } from "@pradip1995/medusa-connector"
+import type { HttpTypes } from "@medusajs/types"
+
+const PAGE_SIZE = 12
+
+export type StoreLoadMoreFilters = {
+  sortBy?: string
+  category?: string
+  collection?: string
+  q?: string
+  gender?: string
+  type?: string
+  material?: string
+  color?: string
+  minPrice?: string
+  maxPrice?: string
+}
+
+function buildQueryParams(filters: StoreLoadMoreFilters): HttpTypes.FindParams &
+  HttpTypes.StoreProductListParams &
+  Record<string, unknown> {
+  const queryParams: HttpTypes.FindParams &
+    HttpTypes.StoreProductListParams &
+    Record<string, unknown> = {
+    limit: PAGE_SIZE,
+  }
+
+  if (filters.q) queryParams.q = filters.q
+  if (filters.collection) queryParams.collection_id = filters.collection
+  if (filters.category) queryParams.category_id = filters.category
+
+  const sortBy = filters.sortBy || "created_at_desc"
+  if (sortBy && sortBy !== "bestsellers") {
+    queryParams.order = sortBy === "created_at" ? "created_at_desc" : sortBy
+  }
+
+  if (filters.gender) queryParams.gender = filters.gender
+  if (filters.type) queryParams.type = filters.type
+  if (filters.material) queryParams.material = filters.material
+  if (filters.color) queryParams.color = filters.color
+  if (filters.minPrice) queryParams.min_price = filters.minPrice
+  if (filters.maxPrice) queryParams.max_price = filters.maxPrice
+
+  return queryParams
+}
+
+export async function loadMoreStoreProducts(
+  countryCode: string,
+  page: number,
+  filters: StoreLoadMoreFilters
+): Promise<{ products: HttpTypes.StoreProduct[]; count: number; hasMore: boolean }> {
+  const sortBy = filters.sortBy || "created_at_desc"
+
+  if (sortBy === "bestsellers") {
+    const products = await getProductsByTag({
+      tagValue: "bestseller",
+      limit: PAGE_SIZE,
+      countryCode,
+    }).catch(() => [])
+
+    return { products, count: products.length, hasMore: false }
+  }
+
+  const { response } = await listStoreProductsWithSort({
+    page,
+    sortBy,
+    countryCode,
+    queryParams: buildQueryParams(filters),
+  }).catch(() => ({ response: { products: [], count: 0 } }))
+
+  const count = response.count ?? 0
+  const hasMore = count > page * PAGE_SIZE
+
+  return {
+    products: response.products ?? [],
+    count,
+    hasMore,
+  }
+}

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "beauty-shop-grid",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "store",
+}
+
+export default manifest

package/src/segment.tsx

@@ -0,0 +1 @@
+export { default } from "./beauty-shop-grid"