@pradip1995/segment-powerhouse-shop 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-shop",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/segment-login-popup": "^0.1.2",
     "@pradip1995/segment-primitives": "^0.4.0"
   },
   "devDependencies": {

package/src/product-card.tsx

@@ -2,11 +2,13 @@
 
 import { useState, type MouseEvent } from "react"
 import { useRouter } from "next/navigation"
+import { buyNow } from "@pradip1995/commerce-core/client/actions/cart"
 import { addToCart } from "./add-to-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"
+import WishlistButton from "./wishlist-button"
 
 function stripHtml(value?: string | null) {
   if (!value) return ""
@@ -23,13 +25,16 @@ export default function ShopProductCard({
   product,
   countryCode,
   layout = "grid",
+  wishlistProductIds,
 }: {
   product: HttpTypes.StoreProduct
   countryCode: string
   layout?: "grid" | "list"
+  wishlistProductIds?: string[]
 }) {
   const router = useRouter()
   const [adding, setAdding] = useState(false)
+  const [buying, setBuying] = useState(false)
   const variants = product.variants ?? []
   const variant = variants[0]
   const price = variant?.calculated_price?.calculated_amount
@@ -47,11 +52,12 @@ export default function ShopProductCard({
   const hasOptions = variants.length > 1
   const copy = snippet(product.description, layout === "list" ? 220 : 140)
   const isList = layout === "list"
+  const busy = adding || buying
 
   const handleAdd = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!variant?.id || adding || !inStock || hasOptions) return
+    if (!variant?.id || busy || !inStock || hasOptions) return
     setAdding(true)
     try {
       await addToCart({
@@ -70,6 +76,26 @@ export default function ShopProductCard({
     }
   }
 
+  const handleBuyNow = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!variant?.id || busy || !inStock) return
+    setBuying(true)
+    try {
+      await buyNow({
+        variantId: variant.id,
+        quantity: 1,
+        countryCode,
+      })
+      router.refresh()
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      const message = err instanceof Error ? err.message : "Buy now failed"
+      window.dispatchEvent(new CustomEvent("cart:item-added", { detail: { message, variant: "error" } }))
+      setBuying(false)
+    }
+  }
+
   const priceBlock =
     price != null ? (
       <div className="powerhouse-shop__price">
@@ -80,13 +106,20 @@ export default function ShopProductCard({
       </div>
     ) : null
 
+  const buyNowControl = (
+    <button
+      type="button"
+      className="powerhouse-shop__quickshop"
+      onClick={handleBuyNow}
+      disabled={busy || !variant?.id}
+    >
+      {buying ? "Processing…" : "Buy now"}
+    </button>
+  )
+
   const actionBlock = (
     <div className="powerhouse-shop__actions">
-      {inStock ? (
-        <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
-          Quick shop
-        </LocalizedLink>
-      ) : null}
+      {inStock ? buyNowControl : null}
       {!inStock ? (
         <button type="button" className="powerhouse-shop__atc" disabled>
           Sold out
@@ -100,7 +133,7 @@ export default function ShopProductCard({
           type="button"
           className="powerhouse-shop__atc"
           onClick={handleAdd}
-          disabled={adding || !variant?.id}
+          disabled={busy || !variant?.id}
         >
           {adding ? "Adding…" : "Add to cart"}
         </button>
@@ -110,17 +143,24 @@ export default function ShopProductCard({
 
   return (
     <article className={`powerhouse-shop__card${onSale ? " is-sale" : ""}${isList ? " is-list-card" : ""}`}>
-      <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__media" tabIndex={-1}>
-        {product.thumbnail?.trim() ? (
-          <img src={product.thumbnail.trim()} alt={product.title || ""} />
-        ) : (
-          <div className="powerhouse-shop__placeholder" />
-        )}
-        {onSale && saved != null ? (
-          <span className="powerhouse-shop__badge">Save {formatPrice(saved, currency)}</span>
-        ) : null}
-        {!inStock && !isList ? <span className="powerhouse-shop__sold">Sold out</span> : null}
-      </LocalizedLink>
+      <div className="powerhouse-shop__media-wrap">
+        <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__media" tabIndex={-1}>
+          {product.thumbnail?.trim() ? (
+            <img src={product.thumbnail.trim()} alt={product.title || ""} />
+          ) : (
+            <div className="powerhouse-shop__placeholder" />
+          )}
+          {onSale && saved != null ? (
+            <span className="powerhouse-shop__badge">Save {formatPrice(saved, currency)}</span>
+          ) : null}
+          {!inStock && !isList ? <span className="powerhouse-shop__sold">Sold out</span> : null}
+        </LocalizedLink>
+        <WishlistButton
+          productId={product.id}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
+      </div>
 
       {isList ? (
         <>

package/src/shop.css

@@ -458,7 +458,7 @@ html.powerhouse-filters-open body {
   border: 1px solid #dddddd;
 }
 
-.powerhouse-shop__grid.is-list .powerhouse-shop__media {
+.powerhouse-shop__grid.is-list .powerhouse-shop__media-wrap {
   grid-row: 1 / 3;
 }
 
@@ -557,6 +557,10 @@ html.powerhouse-filters-open body {
   background: #fff;
 }
 
+.powerhouse-shop__media-wrap {
+  position: relative;
+}
+
 .powerhouse-shop__media {
   position: relative;
   display: block;
@@ -566,6 +570,51 @@ html.powerhouse-filters-open body {
   aspect-ratio: 1;
 }
 
+.powerhouse-shop__wishlist {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: 1px solid rgba(29, 29, 29, 0.12);
+  background: rgba(255, 255, 255, 0.94);
+  color: #1d1d1d;
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.powerhouse-shop__wishlist:hover {
+  border-color: #1d1d1d;
+}
+
+.powerhouse-shop__wishlist.is-active {
+  color: #c1272d;
+  border-color: #c1272d;
+}
+
+.powerhouse-shop__wishlist.is-loading {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.powerhouse-shop__wishlist-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linejoin: round;
+}
+
+.powerhouse-shop__wishlist.is-active .powerhouse-shop__wishlist-icon {
+  fill: currentColor;
+}
+
 .powerhouse-shop__media img,
 .powerhouse-shop__placeholder {
   position: absolute;
@@ -592,8 +641,10 @@ html.powerhouse-filters-open body {
 }
 
 .powerhouse-shop__sold {
-  left: auto;
-  right: 0.5rem;
+  left: 0.5rem;
+  right: auto;
+  top: auto;
+  bottom: 0.5rem;
   background: #1d1d1d;
   color: #fff;
 }
@@ -699,6 +750,12 @@ html.powerhouse-filters-open body {
   border: 1px solid #f2f682;
   background: #f1eeae;
   color: #1d1d1d;
+  cursor: pointer;
+}
+
+.powerhouse-shop__quickshop:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
 .powerhouse-shop__atc {
@@ -857,7 +914,7 @@ html.powerhouse-filters-open body {
     padding: 1.25rem;
   }
 
-  .powerhouse-shop__grid.is-list .powerhouse-shop__media {
+  .powerhouse-shop__grid.is-list .powerhouse-shop__media-wrap {
     grid-row: auto;
   }
 

package/src/shop.tsx

@@ -620,6 +620,7 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
                   product={product}
                   countryCode={countryCode}
                   layout={view}
+                  wishlistProductIds={props.wishlistProductIds}
                 />
               ))}
             </div>

package/src/types.ts

@@ -25,6 +25,7 @@ export type PowerhouseShopProps = {
   basePath?: string
   bannerImage?: string
   bannerText?: string
+  wishlistProductIds?: string[]
 }
 
 export const PAGE_SIZE = 12

package/src/wishlist-button.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useEffect, useState, type MouseEvent } from "react"
+import { useRouter } from "next/navigation"
+import {
+  addToWishlist,
+  getWishlistProductIds,
+  removeFromWishlist,
+} from "@pradip1995/commerce-core/client/actions/wishlist"
+import LoginRequiredModal from "@pradip1995/segment-login-popup/required"
+
+type WishlistButtonProps = {
+  productId?: string | null
+  countryCode: string
+  wishlistProductIds?: string[]
+  className?: string
+}
+
+export default function WishlistButton({
+  productId,
+  countryCode,
+  wishlistProductIds,
+  className = "powerhouse-shop__wishlist",
+}: WishlistButtonProps) {
+  const router = useRouter()
+  const [wishlisted, setWishlisted] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [loginRequired, setLoginRequired] = useState(false)
+
+  useEffect(() => {
+    if (!productId || wishlistProductIds === undefined) return
+    setWishlisted(wishlistProductIds.includes(productId))
+  }, [productId, wishlistProductIds])
+
+  async function handleToggle(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!productId || loading) return
+
+    setLoading(true)
+    try {
+      let currentlyWishlisted = wishlisted
+      if (wishlistProductIds === undefined) {
+        try {
+          const ids = await getWishlistProductIds()
+          currentlyWishlisted = ids.includes(productId)
+          setWishlisted(currentlyWishlisted)
+        } catch {
+          currentlyWishlisted = false
+        }
+      }
+
+      const result = currentlyWishlisted
+        ? await removeFromWishlist(productId)
+        : await addToWishlist(productId)
+
+      if (result.success) {
+        setWishlisted(!currentlyWishlisted)
+        router.refresh()
+        return
+      }
+
+      if (result.error?.toLowerCase().includes("login")) {
+        setLoginRequired(true)
+        return
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`${className}${wishlisted ? " is-active" : ""}${loading ? " is-loading" : ""}`}
+        onClick={handleToggle}
+        disabled={loading || !productId}
+        aria-label={wishlisted ? "Remove from wishlist" : "Add to wishlist"}
+        aria-pressed={wishlisted}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden className={`${className}-icon`}>
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        </svg>
+      </button>
+      <LoginRequiredModal
+        isOpen={loginRequired}
+        onClose={() => setLoginRequired(false)}
+        countryCode={countryCode}
+        message="Please log in to save items to your wishlist."
+      />
+    </>
+  )
+}