@pradip1995/segment-animation-shop-grid 0.1.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pradip1995/segment-animation-shop-grid",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/animation-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.4.0",
+    "@pradip1995/segment-product-card": "^0.3.10",
+    "@pradip1995/segment-tokens": "^0.3.7",
+    "framer-motion": "^12.0.0"
+  },
+  "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/animation-shop-grid.css

@@ -0,0 +1,315 @@
+.animation-shop-grid {
+  width: 100%;
+  padding: 2.5rem 1.5rem 4rem 1.5rem;
+  background-color: var(--page-bg, #ffffff);
+  color: var(--text-color, #111111);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1024px) {
+  .animation-shop-grid {
+    padding: 3.5rem 3rem 6rem 3rem;
+  }
+}
+
+.animation-shop-grid__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+  .animation-shop-grid__header {
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+}
+
+.animation-shop-grid__intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.animation-shop-grid__eyebrow {
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #666666;
+}
+
+.animation-shop-grid__title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  color: #000000;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  .animation-shop-grid__title {
+    font-size: 2.5rem;
+  }
+}
+
+.animation-shop-grid__search {
+  font-size: 0.95rem;
+  color: #555555;
+  margin: 0.25rem 0 0 0;
+  font-style: italic;
+}
+
+.animation-shop-grid__count {
+  font-size: 0.85rem;
+  color: #777777;
+  margin-top: 0.25rem;
+  letter-spacing: 0.02em;
+}
+
+.animation-shop-grid__sort {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.animation-shop-grid__sort-pill {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  color: #333333;
+  text-decoration: none;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.animation-shop-grid__sort-pill:hover {
+  border-color: #000000;
+  color: #000000;
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.animation-shop-grid__sort-pill--active {
+  background-color: #000000;
+  color: #ffffff !important;
+  border-color: #000000;
+}
+
+.animation-shop-grid__applied {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  padding: 0.75rem 1rem;
+  background-color: rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+}
+
+.animation-shop-grid__applied-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #888888;
+}
+
+.animation-shop-grid__applied-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.animation-shop-grid__applied-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 0.3rem 0.65rem;
+  border-radius: 4px;
+  color: #111111;
+  text-decoration: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.animation-shop-grid__applied-chip:hover {
+  border-color: #000000;
+  background-color: #f8f8f8;
+}
+
+.animation-shop-grid__applied-x {
+  font-size: 1.1rem;
+  line-height: 0.8;
+  color: #777777;
+}
+
+.animation-shop-grid__applied-clear {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #e23b00;
+  text-decoration: underline;
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.animation-shop-grid__applied-clear:hover {
+  color: #b02e00;
+}
+
+.animation-shop-grid__progress {
+  width: 100%;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 2.5rem;
+}
+
+.animation-shop-grid__progress-fill {
+  display: block;
+  height: 100%;
+  background-color: #000000;
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.animation-shop-grid__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem 1rem;
+}
+
+@media (min-width: 640px) {
+  .animation-shop-grid__grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .animation-shop-grid__grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2.5rem 1.75rem;
+  }
+}
+
+.animation-shop-grid__empty {
+  text-align: center;
+  padding: 4rem 1rem;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.animation-shop-grid__empty p {
+  font-size: 1.05rem;
+  color: #555555;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+.animation-shop-grid__empty-cta {
+  display: inline-block;
+  padding: 0.85rem 2rem;
+  background-color: #000000;
+  color: #ffffff;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+}
+
+.animation-shop-grid__empty-cta:hover {
+  opacity: 0.85;
+}
+
+.animation-shop-grid__footer {
+  margin-top: 3.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.animation-shop-grid__loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #666666;
+}
+
+.animation-shop-grid__spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-top-color: #000000;
+  border-radius: 50%;
+  animation: animation-shop-spin 0.75s linear infinite;
+}
+
+@keyframes animation-shop-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animation-shop-grid__error {
+  text-align: center;
+  color: #d93025;
+}
+
+.animation-shop-grid__retry {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.4rem 1rem;
+  border: 1px solid #d93025;
+  background: transparent;
+  color: #d93025;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.animation-shop-grid__end {
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #888888;
+  font-weight: 500;
+}
+
+.animation-shop-grid__sentinel {
+  height: 1px;
+  width: 100%;
+}

package/src/animation-shop-grid.tsx

@@ -0,0 +1,475 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import ProductCard, { type ProductCardVariant } 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 "./animation-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}`
+}
+
+type StoreGridFilterProps = {
+  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
+}
+
+function buildStoreSearchParams(props: StoreGridFilterProps): URLSearchParams {
+  const params = new URLSearchParams()
+  params.set("sortBy", props.sortBy ?? "created_at_desc")
+
+  const category = paramValue(props.category)
+  if (category) params.set("category", category)
+
+  const collection = paramValue(props.collection)
+  if (collection) params.set("collection", collection)
+
+  if (props.q) params.set("q", props.q)
+
+  const gender = paramValue(props.gender)
+  if (gender) params.set("gender", gender)
+
+  const type = paramValue(props.type)
+  if (type) params.set("type", type)
+
+  const material = paramValue(props.material)
+  if (material) params.set("material", material)
+
+  const color = paramValue(props.color)
+  if (color) params.set("color", color)
+
+  if (props.minPrice) params.set("min_price", props.minPrice)
+  if (props.maxPrice) params.set("max_price", props.maxPrice)
+
+  return params
+}
+
+function buildSortHref(searchParams: URLSearchParams, sortValue: string): string {
+  const params = new URLSearchParams(searchParams.toString())
+  params.set("sortBy", sortValue)
+  params.delete("page")
+  const query = params.toString()
+  return query ? `/store?${query}` : "/store"
+}
+
+function toStoreHref(params: URLSearchParams): string {
+  const query = params.toString()
+  return query ? `/store?${query}` : "/store"
+}
+
+function buildClearParamHref(searchParams: URLSearchParams, key: string): string {
+  const params = new URLSearchParams(searchParams.toString())
+  params.delete(key)
+  params.delete("page")
+  return toStoreHref(params)
+}
+
+function buildClearAllFiltersHref(searchParams: URLSearchParams): string {
+  const params = new URLSearchParams(searchParams.toString())
+  for (const key of [
+    "category",
+    "collection",
+    "q",
+    "gender",
+    "type",
+    "material",
+    "color",
+    "min_price",
+    "max_price",
+  ]) {
+    params.delete(key)
+  }
+  params.delete("page")
+  return toStoreHref(params)
+}
+
+function matchLabel(
+  current: string | undefined,
+  items: { id: string; handle?: string | null; name?: string; title?: string }[]
+): string | undefined {
+  if (!current) return undefined
+  const hit = items.find(
+    (item) => item.id === current || (!!item.handle && item.handle === current)
+  )
+  return hit?.name || hit?.title || undefined
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.05,
+    },
+  },
+}
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
+  },
+}
+
+export default function AnimationShopGrid(props: {
+  countryCode?: string
+  products?: HttpTypes.StoreProduct[]
+  productCount?: number
+  page?: string
+  sortBy?: string
+  q?: string
+  category?: string | string[]
+  collection?: string | string[]
+  categories?: { id: string; name?: string; handle?: string | null }[]
+  collections?: { id: string; title?: string; handle?: string | null }[]
+  gender?: string | string[]
+  type?: string | string[]
+  material?: string | string[]
+  color?: string | string[]
+  minPrice?: string
+  maxPrice?: string
+  title?: string
+  eyebrow?: string
+  emptyMessage?: string
+  productCardVariant?: ProductCardVariant
+}) {
+  const countryCode = props.countryCode?.toLowerCase() || "in"
+
+  const initialPage = props.page ? parseInt(props.page, 10) : 1
+  const sortBy = props.sortBy || "created_at_desc"
+  const title = props.title || "All Products"
+  const eyebrow = props.eyebrow || "STORE COLLECTION"
+  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 storeSearchParams = useMemo(
+    () =>
+      buildStoreSearchParams({
+        sortBy,
+        q: props.q,
+        category: props.category,
+        collection: props.collection,
+        gender: props.gender,
+        type: props.type,
+        material: props.material,
+        color: 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 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(props.products ?? [])
+    setCurrentPage(initialPage)
+    setHasMore(sortBy !== "bestsellers" && totalCount > initialPage * PAGE_SIZE)
+    setLoadError(null)
+    loadingRef.current = false
+  }, [filterSignature, initialPage, sortBy, totalCount])
+
+  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
+
+  const activeCategory = paramValue(props.category)
+  const activeCollection = paramValue(props.collection)
+  const categoryLabel =
+    matchLabel(activeCategory, props.categories || []) ||
+    (activeCategory ? "Category" : undefined)
+  const collectionLabel =
+    matchLabel(activeCollection, props.collections || []) ||
+    (activeCollection ? "Collection" : undefined)
+
+  const appliedFilters: { key: string; label: string; href: string }[] = []
+  if (props.q) {
+    appliedFilters.push({
+      key: "q",
+      label: `Search: ${props.q}`,
+      href: buildClearParamHref(storeSearchParams, "q"),
+    })
+  }
+  if (activeCategory && categoryLabel) {
+    appliedFilters.push({
+      key: "category",
+      label: categoryLabel,
+      href: buildClearParamHref(storeSearchParams, "category"),
+    })
+  }
+  if (activeCollection && collectionLabel) {
+    appliedFilters.push({
+      key: "collection",
+      label: collectionLabel,
+      href: buildClearParamHref(storeSearchParams, "collection"),
+    })
+  }
+
+  return (
+    <section className="animation-shop-grid flex-1 min-w-0" aria-label="Product results">
+      <motion.header
+        className="animation-shop-grid__header"
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      >
+        <div className="animation-shop-grid__intro">
+          <p className="animation-shop-grid__eyebrow">{eyebrow}</p>
+          <h2 className="animation-shop-grid__title">{title}</h2>
+          {props.q ? (
+            <p className="animation-shop-grid__search">
+              Results for &ldquo;{props.q}&rdquo;
+            </p>
+          ) : null}
+          {totalCount > 0 ? (
+            <p className="animation-shop-grid__count">
+              Showing {showingCount} of {totalCount} {totalCount === 1 ? "product" : "products"}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="animation-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(storeSearchParams, opt.value)}
+                className={`animation-shop-grid__sort-pill${active ? " animation-shop-grid__sort-pill--active" : ""}`}
+                countryCode={countryCode}
+              >
+                {opt.label}
+              </LocalizedLink>
+            )
+          })}
+        </div>
+      </motion.header>
+
+      <AnimatePresence>
+        {appliedFilters.length > 0 ? (
+          <motion.div
+            className="animation-shop-grid__applied"
+            role="group"
+            aria-label="Applied filters"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+          >
+            <span className="animation-shop-grid__applied-label">Filters</span>
+            <ul className="animation-shop-grid__applied-list">
+              {appliedFilters.map((filter) => (
+                <li key={filter.key}>
+                  <LocalizedLink
+                    href={filter.href}
+                    className="animation-shop-grid__applied-chip"
+                    countryCode={countryCode}
+                    aria-label={`Remove ${filter.label} filter`}
+                  >
+                    <span>{filter.label}</span>
+                    <span className="animation-shop-grid__applied-x" aria-hidden>
+                      ×
+                    </span>
+                  </LocalizedLink>
+                </li>
+              ))}
+            </ul>
+            <LocalizedLink
+              href={buildClearAllFiltersHref(storeSearchParams)}
+              className="animation-shop-grid__applied-clear"
+              countryCode={countryCode}
+            >
+              Clear all
+            </LocalizedLink>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+
+      {totalCount > 0 && sortBy !== "bestsellers" ? (
+        <div className="animation-shop-grid__progress" aria-hidden>
+          <span className="animation-shop-grid__progress-fill" style={{ width: `${progressPct}%` }} />
+        </div>
+      ) : null}
+
+      {items.length === 0 ? (
+        <motion.div
+          className="animation-shop-grid__empty"
+          initial={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.4 }}
+        >
+          <p>{emptyMessage}</p>
+          <LocalizedLink href="/store" className="animation-shop-grid__empty-cta" countryCode={countryCode}>
+            Explore All Products
+          </LocalizedLink>
+        </motion.div>
+      ) : (
+        <>
+          <motion.div
+            className="animation-shop-grid__grid"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+          >
+            {items.map((product, index) => (
+              <motion.div key={productKey(product, index)} variants={cardVariants}>
+                <ProductCard
+                  product={product}
+                  countryCode={countryCode}
+                  variant={props.productCardVariant ?? "motion"}
+                />
+              </motion.div>
+            ))}
+          </motion.div>
+
+          <div className="animation-shop-grid__footer">
+            {pending ? (
+              <div className="animation-shop-grid__loading" role="status" aria-live="polite">
+                <span className="animation-shop-grid__spinner" aria-hidden />
+                Loading more products…
+              </div>
+            ) : null}
+
+            {loadError ? (
+              <div className="animation-shop-grid__error">
+                <p>{loadError}</p>
+                <button type="button" className="animation-shop-grid__retry" onClick={loadNextPage}>
+                  Try again
+                </button>
+              </div>
+            ) : null}
+
+            {!hasMore && items.length > 0 ? (
+              <p className="animation-shop-grid__end">
+                You&apos;ve viewed all {totalCount} {totalCount === 1 ? "product" : "products"}
+              </p>
+            ) : null}
+
+            {hasMore ? <div ref={sentinelRef} className="animation-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,83 @@
+"use server"
+
+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 { response } = await listStoreProductsWithSort({
+      page,
+      sortBy: "created_at_desc",
+      countryCode,
+      queryParams: { limit: PAGE_SIZE, tags: ["bestseller"] },
+    }).catch(() => ({ response: { products: [], count: 0 } }))
+
+    const products = response.products ?? []
+    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,4 @@
+export default {
+  name: "@pradip1995/segment-animation-shop-grid",
+  type: "segment",
+}

package/src/segment.tsx

@@ -0,0 +1,3 @@
+import AnimationShopGrid from "./animation-shop-grid"
+
+export default AnimationShopGrid