@pradip1995/segment-powerhouse-shop 0.1.1

package/src/shop.tsx

@@ -0,0 +1,537 @@
+"use client"
+
+import { useEffect, useMemo, useState, type FormEvent } from "react"
+import { useRouter } from "next/navigation"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import ShopProductCard from "./product-card"
+import {
+  DEFAULT_EMPTY,
+  DEFAULT_TITLE,
+  PAGE_SIZE,
+  SORT_OPTIONS,
+  type PowerhouseShopProps,
+} from "./types"
+import "./shop.css"
+
+function paramValue(value?: string | string[]): string | undefined {
+  if (value === undefined) return undefined
+  return Array.isArray(value) ? value[0] : value
+}
+
+function toStoreHref(props: PowerhouseShopProps, extras: Record<string, string | undefined> = {}) {
+  const path = props.basePath || "/store"
+  const query = buildParams(props, extras).toString()
+  return query ? `${path}?${query}` : path
+}
+
+function toggleFilter(props: PowerhouseShopProps, key: string, value: string, current?: string) {
+  const extras: Record<string, string | undefined> = { page: undefined }
+  extras[key] = current === value ? "" : value
+  return toStoreHref(props, extras)
+}
+
+function clearFiltersHref(props: PowerhouseShopProps) {
+  return toStoreHref(props, {
+    q: "",
+    category: "",
+    collection: "",
+    type: "",
+    color: "",
+    minPrice: "",
+    maxPrice: "",
+    page: undefined,
+  })
+}
+
+function pageHref(props: PowerhouseShopProps, page: number) {
+  return toStoreHref(props, { page: page > 1 ? String(page) : undefined })
+}
+
+function pick(extra: string | undefined, fallback?: string) {
+  if (extra !== undefined) return extra || undefined
+  return fallback
+}
+
+function buildParams(props: PowerhouseShopProps, extras: Record<string, string | undefined> = {}) {
+  const params = new URLSearchParams()
+  const sortBy = extras.sortBy ?? props.sortBy ?? "created_at_desc"
+  if (sortBy) params.set("sortBy", sortBy)
+
+  const q = pick(extras.q, props.q)
+  if (q) params.set("q", q)
+
+  const category = pick(extras.category, paramValue(props.category))
+  if (category) params.set("category", category)
+
+  const collection = pick(extras.collection, paramValue(props.collection))
+  if (collection) params.set("collection", collection)
+
+  const type = pick(extras.type, paramValue(props.type))
+  if (type) params.set("type", type)
+
+  const color = pick(extras.color, paramValue(props.color))
+  if (color) params.set("color", color)
+
+  const minPrice = pick(extras.minPrice, props.minPrice)
+  if (minPrice) params.set("min_price", minPrice)
+
+  const maxPrice = pick(extras.maxPrice, props.maxPrice)
+  if (maxPrice) params.set("max_price", maxPrice)
+
+  const view = extras.view ?? props.view
+  if (view === "list") params.set("view", "list")
+
+  const page = extras.page
+  if (page && page !== "1") params.set("page", page)
+
+  return params
+}
+
+function GridIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 7V2H7V7H2ZM0 1C0 0.447715 0.447715 0 1 0H8C8.55229 0 9 0.447715 9 1V8C9 8.55229 8.55229 9 8 9H1C0.447715 9 0 8.55229 0 8V1ZM13 7V2H18V7H13ZM11 1C11 0.447715 11.4477 0 12 0H19C19.5523 0 20 0.447715 20 1V8C20 8.55229 19.5523 9 19 9H12C11.4477 9 11 8.55229 11 8V1ZM13 13V18H18V13H13ZM12 11C11.4477 11 11 11.4477 11 12V19C11 19.5523 11.4477 20 12 20H19C19.5523 20 20 19.5523 20 19V12C20 11.4477 19.5523 11 19 11H12ZM2 18V13H7V18H2ZM0 12C0 11.4477 0.447715 11 1 11H8C8.55229 11 9 11.4477 9 12V19C9 19.5523 8.55229 20 8 20H1C0.447715 20 0 19.5523 0 19V12Z"
+      />
+    </svg>
+  )
+}
+
+function ListIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 2C0.223858 2 0 2.22386 0 2.5V3.5C0 3.77614 0.223858 4 0.5 4H1.5C1.77614 4 2 3.77614 2 3.5V2.5C2 2.22386 1.77614 2 1.5 2H0.5ZM5 2C4.44772 2 4 2.44772 4 3C4 3.55228 4.44772 4 5 4H19C19.5523 4 20 3.55228 20 3C20 2.44772 19.5523 2 19 2H5ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11H19C19.5523 11 20 10.5523 20 10C20 9.44772 19.5523 9 19 9H5ZM4 17C4 16.4477 4.44772 16 5 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17ZM0 9.5C0 9.22386 0.223858 9 0.5 9H1.5C1.77614 9 2 9.22386 2 9.5V10.5C2 10.7761 1.77614 11 1.5 11H0.5C0.223858 11 0 10.7761 0 10.5V9.5ZM0.5 16C0.223858 16 0 16.2239 0 16.5V17.5C0 17.7761 0.223858 18 0.5 18H1.5C1.77614 18 2 17.7761 2 17.5V16.5C2 16.2239 1.77614 16 1.5 16H0.5Z"
+      />
+    </svg>
+  )
+}
+
+function RemoveIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden>
+      <path d="M6.08785659,5 L9.77469752,1.31315906 L8.68684094,0.225302476 L5,3.91214341 L1.31315906,0.225302476 L0.225302476,1.31315906 L3.91214341,5 L0.225302476,8.68684094 L1.31315906,9.77469752 L5,6.08785659 L8.68684094,9.77469752 L9.77469752,8.68684094 L6.08785659,5 Z" />
+    </svg>
+  )
+}
+
+type AppliedFilter = { key: string; label: string; href: string }
+
+function ActiveFilters({
+  filters,
+  clearHref,
+  countryCode,
+}: {
+  filters: AppliedFilter[]
+  clearHref: string
+  countryCode: string
+}) {
+  if (!filters.length) return null
+  return (
+    <ul className="powerhouse-shop__active">
+      {filters.map((filter) => (
+        <li key={filter.key}>
+          <LocalizedLink
+            href={filter.href}
+            countryCode={countryCode}
+            className="powerhouse-shop__active-item"
+            aria-label={`Remove ${filter.label} filter`}
+          >
+            <span>{filter.label}</span>
+            <span className="powerhouse-shop__active-x" aria-hidden>
+              <RemoveIcon />
+            </span>
+          </LocalizedLink>
+        </li>
+      ))}
+      <li className="powerhouse-shop__active-clear">
+        <LocalizedLink href={clearHref} countryCode={countryCode}>
+          Clear all
+        </LocalizedLink>
+      </li>
+    </ul>
+  )
+}
+
+const VIEW_STORAGE_KEY = "powerhouse-shop-view"
+
+function paginationItems(current: number, total: number) {
+  if (total <= 7) return Array.from({ length: total }, (_, index) => index + 1)
+  const items: (number | "ellipsis")[] = [1]
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+  if (start > 2) items.push("ellipsis")
+  for (let page = start; page <= end; page += 1) items.push(page)
+  if (end < total - 1) items.push("ellipsis")
+  items.push(total)
+  return items
+}
+
+export default function PowerhouseShop(props: PowerhouseShopProps) {
+  const router = useRouter()
+  const [filtersOpen, setFiltersOpen] = useState(false)
+  const [view, setView] = useState<"grid" | "list">(props.view === "list" ? "list" : "grid")
+  const countryCode = props.countryCode?.toLowerCase() || "in"
+  const title = props.title || DEFAULT_TITLE
+  const bannerImage = props.bannerImage?.trim()
+  const products = props.products ?? []
+  const totalCount = props.productCount ?? products.length
+  const currentPage = props.page ? Math.max(1, parseInt(props.page, 10) || 1) : 1
+  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
+  const sortBy = props.sortBy || "created_at_desc"
+  const activeCategory = paramValue(props.category)
+  const activeCollection = paramValue(props.collection)
+  const activeType = paramValue(props.type)
+  const activeColor = paramValue(props.color)
+  const propsWithView = { ...props, view }
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const fromUrl = params.get("view")
+    const fromStorage = window.localStorage.getItem(VIEW_STORAGE_KEY)
+    const next = fromUrl === "list" || (!fromUrl && fromStorage === "list") ? "list" : "grid"
+    setView(next)
+  }, [])
+
+  const categories = (props.categories ?? []).filter((item) => item.id && (item.name || item.handle))
+  const collections = (props.collections ?? []).filter((item) => item.id && (item.title || item.handle))
+  const types = props.typeOptions?.filter((item) => item.value && item.label) ?? []
+  const colors = props.colorOptions?.filter((item) => item.value && item.label) ?? []
+  const selectedCategory = categories.find((item) => item.id === activeCategory || item.handle === activeCategory)
+  const selectedCollection = collections.find(
+    (item) => item.id === activeCollection || item.handle === activeCollection
+  )
+  const selectedType = types.find((item) => item.value === activeType)
+  const selectedColor = colors.find((item) => item.value === activeColor)
+
+  const applied: AppliedFilter[] = []
+  if (props.q) {
+    applied.push({
+      key: "q",
+      label: `“${props.q}”`,
+      href: toStoreHref(propsWithView, { q: "", page: undefined }),
+    })
+  }
+  if (activeCategory) {
+    applied.push({
+      key: "category",
+      label: selectedCategory?.name || selectedCategory?.handle || activeCategory,
+      href: toStoreHref(propsWithView, { category: "", page: undefined }),
+    })
+  }
+  if (activeCollection) {
+    applied.push({
+      key: "collection",
+      label: selectedCollection?.title || selectedCollection?.handle || activeCollection,
+      href: toStoreHref(propsWithView, { collection: "", page: undefined }),
+    })
+  }
+  if (activeType) {
+    applied.push({
+      key: "type",
+      label: selectedType?.label || activeType,
+      href: toStoreHref(propsWithView, { type: "", page: undefined }),
+    })
+  }
+  if (activeColor) {
+    applied.push({
+      key: "color",
+      label: selectedColor?.label || activeColor,
+      href: toStoreHref(propsWithView, { color: "", page: undefined }),
+    })
+  }
+  if (props.minPrice || props.maxPrice) {
+    const min = props.minPrice
+    const max = props.maxPrice
+    applied.push({
+      key: "price",
+      label: min && max ? `${min} – ${max}` : min ? `From ${min}` : `To ${max}`,
+      href: toStoreHref(propsWithView, { minPrice: "", maxPrice: "", page: undefined }),
+    })
+  }
+  const clearHref = clearFiltersHref(propsWithView)
+
+  const sortHref = useMemo(
+    () => (value: string) => toStoreHref(propsWithView, { sortBy: value, page: undefined }),
+    [propsWithView]
+  )
+
+  const handlePrice = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const data = new FormData(event.currentTarget)
+    const minPrice = String(data.get("min_price") || "").trim()
+    const maxPrice = String(data.get("max_price") || "").trim()
+    router.push(toStoreHref(propsWithView, { minPrice, maxPrice, page: undefined }))
+  }
+
+  const handleSort = (value: string) => {
+    router.push(sortHref(value))
+  }
+
+  const handleView = (next: "grid" | "list") => {
+    setView(next)
+    window.localStorage.setItem(VIEW_STORAGE_KEY, next)
+    router.replace(toStoreHref({ ...props, view: next }, { page: props.page }))
+  }
+
+  return (
+    <section className="powerhouse-shop" data-testid="store-container">
+      <nav className="powerhouse-shop__crumbs" aria-label="Breadcrumbs">
+        <LocalizedLink href="/" countryCode={countryCode}>
+          Home
+        </LocalizedLink>
+        <span className="powerhouse-shop__crumb-sep" aria-hidden>
+          <svg width="8" height="5" viewBox="0 0 8 5">
+            <path fill="currentColor" fillRule="evenodd" d="M1.002.27L.29.982l3.712 3.712L7.714.982 7.002.27l-3 3z" />
+          </svg>
+        </span>
+        <span>{title}</span>
+      </nav>
+
+      {bannerImage ? (
+        <div className="powerhouse-shop__banner">
+          <img src={bannerImage} alt="" className="powerhouse-shop__banner-image" />
+          <div className="powerhouse-shop__banner-overlay" aria-hidden />
+          <div className="powerhouse-shop__banner-content">
+            <h1>{title}</h1>
+            {props.bannerText ? <p>{props.bannerText}</p> : null}
+          </div>
+        </div>
+      ) : null}
+
+      <div className={`powerhouse-shop__layout${filtersOpen ? " is-filters-open" : ""}`}>
+        <aside className="powerhouse-shop__sidebar" aria-label="Filters">
+          <div className="powerhouse-shop__sidebar-head">
+            <h2>Filters</h2>
+            <button type="button" className="powerhouse-shop__close" onClick={() => setFiltersOpen(false)}>
+              Close
+            </button>
+          </div>
+
+          <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
+
+          {categories.length ? (
+            <div className="powerhouse-shop__filter">
+              <h3>Product type</h3>
+              <ul>
+                {categories.map((item) => {
+                  const value = item.id
+                  const selected = activeCategory === value || activeCategory === item.handle
+                  return (
+                    <li key={value}>
+                      <LocalizedLink
+                        href={toggleFilter(propsWithView, "category", value, selected ? value : undefined)}
+                        countryCode={countryCode}
+                        className={selected ? "is-active" : undefined}
+                      >
+                        <span className="powerhouse-shop__check" aria-hidden />
+                        {item.name || item.handle}
+                      </LocalizedLink>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : null}
+
+          {collections.length ? (
+            <div className="powerhouse-shop__filter">
+              <h3>Collection</h3>
+              <ul>
+                {collections.map((item) => {
+                  const value = item.id
+                  const selected = activeCollection === value || activeCollection === item.handle
+                  return (
+                    <li key={value}>
+                      <LocalizedLink
+                        href={toggleFilter(propsWithView, "collection", value, selected ? value : undefined)}
+                        countryCode={countryCode}
+                        className={selected ? "is-active" : undefined}
+                      >
+                        <span className="powerhouse-shop__check" aria-hidden />
+                        {item.title || item.handle}
+                      </LocalizedLink>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : null}
+
+          {types.length ? (
+            <div className="powerhouse-shop__filter">
+              <h3>Type</h3>
+              <ul>
+                {types.map((item) => {
+                  const selected = activeType === item.value
+                  return (
+                    <li key={item.value}>
+                      <LocalizedLink
+                        href={toggleFilter(propsWithView, "type", item.value, selected ? item.value : undefined)}
+                        countryCode={countryCode}
+                        className={selected ? "is-active" : undefined}
+                      >
+                        <span className="powerhouse-shop__check" aria-hidden />
+                        {item.label}
+                      </LocalizedLink>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : null}
+
+          {colors.length ? (
+            <div className="powerhouse-shop__filter">
+              <h3>Colors</h3>
+              <ul>
+                {colors.map((item) => {
+                  const selected = activeColor === item.value
+                  return (
+                    <li key={item.value}>
+                      <LocalizedLink
+                        href={toggleFilter(propsWithView, "color", item.value, selected ? item.value : undefined)}
+                        countryCode={countryCode}
+                        className={selected ? "is-active" : undefined}
+                      >
+                        <span className="powerhouse-shop__check" aria-hidden />
+                        {item.label}
+                      </LocalizedLink>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : null}
+
+          <div className="powerhouse-shop__filter">
+            <h3>Price</h3>
+            <form className="powerhouse-shop__price-form" onSubmit={handlePrice}>
+              <label>
+                <span>From</span>
+                <input name="min_price" type="number" min={0} defaultValue={props.minPrice || ""} inputMode="decimal" />
+              </label>
+              <label>
+                <span>To</span>
+                <input name="max_price" type="number" min={0} defaultValue={props.maxPrice || ""} inputMode="decimal" />
+              </label>
+              <button type="submit">Apply</button>
+            </form>
+          </div>
+        </aside>
+
+        {filtersOpen ? (
+          <button
+            type="button"
+            className="powerhouse-shop__backdrop"
+            aria-label="Close filters"
+            onClick={() => setFiltersOpen(false)}
+          />
+        ) : null}
+
+        <div className="powerhouse-shop__main">
+          {bannerImage ? (
+            props.q ? (
+              <p className="powerhouse-shop__search">Results for “{props.q}”</p>
+            ) : null
+          ) : (
+            <div className="powerhouse-shop__masthead">
+              <h1>{title}</h1>
+              {props.q ? <p className="powerhouse-shop__search">Results for “{props.q}”</p> : null}
+            </div>
+          )}
+
+          <div className="powerhouse-shop__utils">
+            <button type="button" className="powerhouse-shop__filters-btn" onClick={() => setFiltersOpen(true)}>
+              {applied.length ? `Filters (${applied.length})` : "Filters"}
+            </button>
+            <div className="powerhouse-shop__utils-right">
+              <label className="powerhouse-shop__sort">
+                <span className="powerhouse-shop__utils-label">Sort</span>
+                <select value={sortBy} onChange={(event) => handleSort(event.target.value)} aria-label="Sort products">
+                  {SORT_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <div className="powerhouse-shop__view" role="group" aria-label="View as">
+                <span className="powerhouse-shop__utils-label">View as</span>
+                <button
+                  type="button"
+                  className={view === "grid" ? "is-active" : undefined}
+                  aria-label="Grid view"
+                  aria-pressed={view === "grid"}
+                  onClick={() => handleView("grid")}
+                >
+                  <GridIcon />
+                </button>
+                <button
+                  type="button"
+                  className={view === "list" ? "is-active" : undefined}
+                  aria-label="List view"
+                  aria-pressed={view === "list"}
+                  onClick={() => handleView("list")}
+                >
+                  <ListIcon />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
+
+          {products.length === 0 ? (
+            <p className="powerhouse-shop__empty">{props.emptyMessage || DEFAULT_EMPTY}</p>
+          ) : (
+            <div className={`powerhouse-shop__grid${view === "list" ? " is-list" : ""}`}>
+              {products.map((product, index) => (
+                <ShopProductCard
+                  key={product.id ?? product.handle ?? `product-${index}`}
+                  product={product}
+                  countryCode={countryCode}
+                />
+              ))}
+            </div>
+          )}
+
+          {totalPages > 1 ? (
+            <nav className="powerhouse-shop__pages" aria-label="Pagination">
+              <ul>
+                {paginationItems(currentPage, totalPages).map((item, index) =>
+                  item === "ellipsis" ? (
+                    <li key={`ellipsis-${index}`} className="is-ellipsis">
+                      …
+                    </li>
+                  ) : (
+                    <li key={item} className={item === currentPage ? "is-active" : undefined}>
+                      {item === currentPage ? (
+                        <span aria-current="page">{item}</span>
+                      ) : (
+                        <LocalizedLink href={pageHref(propsWithView, item)} countryCode={countryCode}>
+                          {item}
+                        </LocalizedLink>
+                      )}
+                    </li>
+                  )
+                )}
+                {currentPage < totalPages ? (
+                  <li className="is-next">
+                    <LocalizedLink href={pageHref(propsWithView, currentPage + 1)} countryCode={countryCode}>
+                      Next
+                    </LocalizedLink>
+                  </li>
+                ) : null}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/types.ts

@@ -0,0 +1,41 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export type FilterOption = { value: string; label: string }
+
+export type PowerhouseShopProps = {
+  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 }[]
+  type?: string | string[]
+  color?: string | string[]
+  typeOptions?: FilterOption[]
+  colorOptions?: FilterOption[]
+  minPrice?: string
+  maxPrice?: string
+  title?: string
+  emptyMessage?: string
+  view?: string
+  basePath?: string
+  bannerImage?: string
+  bannerText?: string
+}
+
+export const PAGE_SIZE = 12
+
+export const DEFAULT_TITLE = "Products"
+export const DEFAULT_EMPTY = "No products match your filters."
+
+export const SORT_OPTIONS = [
+  { value: "created_at_desc", label: "Featured" },
+  { value: "bestsellers", label: "Best selling" },
+  { value: "price_asc", label: "Price, low to high" },
+  { value: "price_desc", label: "Price, high to low" },
+  { value: "created_at_asc", label: "Date, old to new" },
+]