@pradip1995/segment-powerhouse-carousel 0.1.1

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pradip1995/segment-powerhouse-carousel",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./src/carousel.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "dependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/medusa-connector": "^0.2.0",
+    "@pradip1995/segment-primitives": "^0.4.0"
+  },
+  "devDependencies": {
+    "@medusajs/types": ">=2",
+    "@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/carousel.css

@@ -0,0 +1,296 @@
+.powerhouse-carousel {
+  --layout-container-max-width: 1400px;
+  position: relative;
+  z-index: 1;
+  max-width: var(--layout-container-max-width);
+  margin: 1.25rem auto 0;
+  padding: 0 10px;
+  text-align: center;
+}
+
+.powerhouse-carousel:hover {
+  z-index: 2;
+}
+
+.powerhouse-carousel__heading {
+  margin: 0 0 1.25rem;
+  color: #1d1d1d;
+  font-family: var(--font-sans, inherit);
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.powerhouse-carousel__empty {
+  margin: 0;
+  padding: 2rem 0;
+  color: #6b6b6b;
+  font-size: 0.9375rem;
+}
+
+.powerhouse-carousel__viewport {
+  position: relative;
+}
+
+.powerhouse-carousel__track {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.powerhouse-carousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+.powerhouse-carousel__slide {
+  flex: 0 0 204px;
+  min-width: 0;
+  scroll-snap-align: start;
+  text-align: left;
+}
+
+.powerhouse-carousel__arrow {
+  position: absolute;
+  top: 28%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 5px;
+  border: 0;
+  background: transparent;
+  color: #1d1d1d;
+  opacity: 0.6;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.powerhouse-carousel__arrow:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.powerhouse-carousel__arrow:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.powerhouse-carousel__arrow--prev {
+  left: 0.35rem;
+}
+
+.powerhouse-carousel__arrow--next {
+  right: 0.35rem;
+}
+
+.powerhouse-carousel__card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0.6875rem;
+  background: #fff;
+  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.powerhouse-carousel__card:hover {
+  box-shadow: 0 2px 8px #80808033;
+}
+
+.powerhouse-carousel__card-media {
+  position: relative;
+  display: block;
+  aspect-ratio: 1;
+  overflow: hidden;
+  background: #f3f3f3;
+}
+
+.powerhouse-carousel__card-image,
+.powerhouse-carousel__card-placeholder {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.powerhouse-carousel__badge {
+  position: absolute;
+  top: 0.6rem;
+  left: 0.6rem;
+  padding: 0.2rem 0.45rem;
+  background: #688600;
+  color: #fff;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.powerhouse-carousel__card-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.powerhouse-carousel__price {
+  margin-top: 0.25rem;
+}
+
+.powerhouse-carousel__price-compare {
+  display: block;
+  color: #949494;
+  font-size: 0.875rem;
+  text-decoration: line-through;
+}
+
+.powerhouse-carousel__price-current {
+  display: block;
+  margin-top: 0.125rem;
+  color: #1d1d1d;
+  font-size: 1.375rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.powerhouse-carousel__card.is-sale .powerhouse-carousel__price-current {
+  color: #688600;
+}
+
+.powerhouse-carousel__card-title {
+  margin: 0.625rem 0 0;
+  font-family: var(--font-sans, inherit);
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.3125;
+}
+
+.powerhouse-carousel__card-title a {
+  color: #1d1d1d;
+  text-decoration: none;
+}
+
+.powerhouse-carousel__stock {
+  margin: 0.5rem 0 0;
+  color: #688600;
+  font-size: 0.875rem;
+}
+
+.powerhouse-carousel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 0.75rem;
+}
+
+.powerhouse-carousel__quickshop,
+.powerhouse-carousel__atc {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0.55rem 0.9rem;
+  border-radius: 2px;
+  font-family: var(--font-sans, inherit);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.powerhouse-carousel__quickshop {
+  background: #f1eeae;
+  border: 1px solid #f2f682;
+  color: #1d1d1d;
+}
+
+.powerhouse-carousel__quickshop:hover {
+  background: #f4f1be;
+}
+
+.powerhouse-carousel__atc {
+  background: #2c2b2b;
+  border: 1px solid #2c2b2b;
+  color: #fff;
+}
+
+.powerhouse-carousel__atc:hover {
+  background: #414040;
+}
+
+.powerhouse-carousel__atc:disabled {
+  opacity: 0.65;
+  cursor: wait;
+}
+
+@media screen and (min-width: 720px) {
+  .powerhouse-carousel {
+    padding: 0 20px;
+  }
+}
+
+@media screen and (min-width: 860px) {
+  .powerhouse-carousel {
+    margin-top: 1.75rem;
+  }
+
+  .powerhouse-carousel__heading {
+    margin-bottom: 1.75rem;
+  }
+
+  .powerhouse-carousel__card {
+    padding: 1rem;
+  }
+
+  .powerhouse-carousel__arrow--prev {
+    left: 2.1875rem;
+  }
+
+  .powerhouse-carousel__arrow--next {
+    right: 2.1875rem;
+  }
+}
+
+@media screen and (min-width: 1080px) {
+  .powerhouse-carousel__track {
+    gap: 20px;
+  }
+
+  .powerhouse-carousel__slide {
+    flex-basis: calc(25% - 15px);
+  }
+
+  .powerhouse-carousel__actions {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .powerhouse-carousel__card:hover .powerhouse-carousel__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .powerhouse-carousel__slide {
+    flex-basis: calc(20% - 16px);
+  }
+}
+
+@media screen and (max-width: 859px) {
+  .powerhouse-carousel__price-current {
+    font-size: 1.2890625rem;
+  }
+
+  .powerhouse-carousel__card-title {
+    font-size: 0.9375rem;
+  }
+}

package/src/carousel.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import ProductCard from "./product-card"
+
+function ArrowIcon({ direction }: { direction: "prev" | "next" }) {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" aria-hidden="true">
+      {direction === "prev" ? (
+        <path d="M18.5 6.5L10.5 15L18.5 23.5" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      ) : (
+        <path d="M11.5 6.5L19.5 15L11.5 23.5" stroke="currentColor" strokeWidth="2" strokeLinecap="square" />
+      )}
+    </svg>
+  )
+}
+
+export default function ProductCarousel({
+  products,
+  region,
+  countryCode,
+}: {
+  products: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion
+  countryCode: string
+}) {
+  const trackRef = useRef<HTMLDivElement>(null)
+  const [canPrev, setCanPrev] = useState(false)
+  const [canNext, setCanNext] = useState(false)
+
+  const updateButtons = useCallback(() => {
+    const track = trackRef.current
+    if (!track) return
+    const max = track.scrollWidth - track.clientWidth
+    setCanPrev(track.scrollLeft > 4)
+    setCanNext(track.scrollLeft < max - 4)
+  }, [])
+
+  useEffect(() => {
+    const track = trackRef.current
+    if (!track) return
+    updateButtons()
+    track.addEventListener("scroll", updateButtons, { passive: true })
+    window.addEventListener("resize", updateButtons)
+    return () => {
+      track.removeEventListener("scroll", updateButtons)
+      window.removeEventListener("resize", updateButtons)
+    }
+  }, [products.length, updateButtons])
+
+  const scrollByCard = (direction: -1 | 1) => {
+    const track = trackRef.current
+    const card = track?.querySelector<HTMLElement>(".powerhouse-carousel__slide")
+    if (!track || !card) return
+    const gap = Number.parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap) || 10
+    track.scrollBy({ left: direction * (card.offsetWidth + gap), behavior: "smooth" })
+  }
+
+  const showArrows = products.length > 1 && (canPrev || canNext)
+
+  return (
+    <div className="powerhouse-carousel__viewport">
+      {showArrows ? (
+        <>
+          <button
+            type="button"
+            className="powerhouse-carousel__arrow powerhouse-carousel__arrow--prev"
+            aria-label="Previous products"
+            disabled={!canPrev}
+            onClick={() => scrollByCard(-1)}
+          >
+            <ArrowIcon direction="prev" />
+          </button>
+          <button
+            type="button"
+            className="powerhouse-carousel__arrow powerhouse-carousel__arrow--next"
+            aria-label="Next products"
+            disabled={!canNext}
+            onClick={() => scrollByCard(1)}
+          >
+            <ArrowIcon direction="next" />
+          </button>
+        </>
+      ) : null}
+
+      <div ref={trackRef} className="powerhouse-carousel__track">
+        {products.map((product) => (
+          <div key={product.id} className="powerhouse-carousel__slide">
+            <ProductCard product={product} region={region} countryCode={countryCode} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/defaults.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_TITLE = ""
+export const DEFAULT_EMPTY = "No products right now. Check back soon!"

package/src/index.ts

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

package/src/manifest.ts

@@ -0,0 +1,10 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "powerhouse-carousel",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "powerhouseCarousel",
+}
+export default manifest

package/src/product-card.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import type { HttpTypes } from "@medusajs/types"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  countryCode: string
+}
+
+export default function ProductCard({ product, region, countryCode }: Props) {
+  const router = useRouter()
+  const [adding, setAdding] = useState(false)
+  const variant = product.variants?.[0]
+  const price = variant?.calculated_price?.calculated_amount
+  const originalPrice = variant?.calculated_price?.original_amount
+  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
+  const onSale = originalPrice != null && price != null && originalPrice > price
+  const saved = onSale && originalPrice != null && price != null ? originalPrice - price : null
+  const inventory = variant?.inventory_quantity
+  const href = `/products/${product.handle}`
+
+  const handleAdd = async (event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!variant?.id || adding) return
+    setAdding(true)
+    try {
+      await addToCart({
+        variantId: variant.id,
+        quantity: 1,
+        countryCode: countryCode.toLowerCase(),
+      })
+      window.dispatchEvent(new CustomEvent("cart:item-added", { detail: { message: "Added to cart" } }))
+      router.refresh()
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      const message = err instanceof Error ? err.message : "Could not add to cart"
+      window.dispatchEvent(new CustomEvent("cart:item-added", { detail: { message, variant: "error" } }))
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  return (
+    <article className={`powerhouse-carousel__card${onSale ? " is-sale" : ""}`}>
+      <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-carousel__card-media">
+        {product.thumbnail?.trim() ? (
+          <img src={product.thumbnail.trim()} alt={product.title || ""} className="powerhouse-carousel__card-image" />
+        ) : (
+          <div className="powerhouse-carousel__card-placeholder" />
+        )}
+        {onSale && saved != null ? (
+          <span className="powerhouse-carousel__badge">Save {formatPrice(saved, currency)}</span>
+        ) : null}
+      </LocalizedLink>
+
+      <div className="powerhouse-carousel__card-info">
+        {price != null ? (
+          <div className="powerhouse-carousel__price">
+            {onSale && originalPrice != null ? (
+              <span className="powerhouse-carousel__price-compare">{formatPrice(originalPrice, currency)}</span>
+            ) : null}
+            <span className="powerhouse-carousel__price-current">{formatPrice(price, currency)}</span>
+          </div>
+        ) : null}
+
+        <h3 className="powerhouse-carousel__card-title">
+          <LocalizedLink href={href} countryCode={countryCode}>
+            {product.title}
+          </LocalizedLink>
+        </h3>
+
+        {inventory != null && inventory > 0 && inventory <= 5 ? (
+          <p className="powerhouse-carousel__stock">Only {inventory} left!</p>
+        ) : null}
+
+        <div className="powerhouse-carousel__actions">
+          <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-carousel__quickshop">
+            Quick shop
+          </LocalizedLink>
+          <button
+            type="button"
+            className="powerhouse-carousel__atc"
+            onClick={handleAdd}
+            disabled={adding || !variant?.id}
+            aria-label="Add to cart"
+          >
+            {adding ? "Adding…" : "Add to cart"}
+          </button>
+        </div>
+      </div>
+    </article>
+  )
+}

package/src/segment.tsx

@@ -0,0 +1,54 @@
+import { listStoreProductsWithSort } from "@pradip1995/medusa-connector"
+import ProductCarousel from "./carousel"
+import { DEFAULT_EMPTY, DEFAULT_TITLE } from "./defaults"
+import type { PowerhouseCarouselProps } from "./types"
+import "./carousel.css"
+
+export default async function PowerhouseCarousel({
+  products: fallbackProducts,
+  region,
+  countryCode: countryCodeProp,
+  title = DEFAULT_TITLE,
+  emptyMessage = DEFAULT_EMPTY,
+}: PowerhouseCarouselProps) {
+  const countryCode =
+    countryCodeProp?.toLowerCase() ||
+    region?.countries?.[0]?.iso_2?.toLowerCase() ||
+    "in"
+
+  let products = fallbackProducts ?? []
+  let displayRegion = region ?? null
+
+  if (products.length === 0) {
+    try {
+      const result = await listStoreProductsWithSort({
+        page: 1,
+        queryParams: { limit: 12 },
+        sortBy: "created_at_desc",
+        countryCode,
+        region,
+      })
+      if (result.response.products?.length) {
+        products = result.response.products
+      }
+      if (result.region) {
+        displayRegion = result.region
+      }
+    } catch {
+      products = fallbackProducts ?? []
+    }
+  }
+
+  const list = products.slice(0, 9)
+
+  return (
+    <section className="powerhouse-carousel" aria-label={title || "Featured products"}>
+      {title.trim() ? <h2 className="powerhouse-carousel__heading">{title}</h2> : null}
+      {list.length === 0 ? (
+        <p className="powerhouse-carousel__empty">{emptyMessage}</p>
+      ) : (
+        <ProductCarousel products={list} region={displayRegion ?? undefined} countryCode={countryCode} />
+      )}
+    </section>
+  )
+}

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export type PowerhouseCarouselProps = {
+  products?: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion | null
+  countryCode?: string
+  title?: string
+  emptyMessage?: string
+  wishlistProductIds?: string[]
+}