@pradip1995/segment-powerhouse-deals 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-deals",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/deal-card.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import { useRouter } from "next/navigation"
-import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
+import { addToCart, buyNow } 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"
@@ -19,6 +19,7 @@ type Props = {
 export default function DealCard({ product, region, countryCode, wishlistProductIds }: Props) {
   const router = useRouter()
   const [adding, setAdding] = useState(false)
+  const [buying, setBuying] = useState(false)
   const variant = product.variants?.[0]
   const price = variant?.calculated_price?.calculated_amount
   const originalPrice = variant?.calculated_price?.original_amount
@@ -32,17 +33,19 @@ export default function DealCard({ product, region, countryCode, wishlistProduct
     (inventory ?? 0) > 0
   const href = `/products/${product.handle}`
   const hasOptions = (product.variants?.length ?? 0) > 1
+  const busy = adding || buying
+  const code = countryCode.toLowerCase()
 
   const handleAdd = async (event: React.MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
-    if (!variant?.id || adding || !inStock || hasOptions) return
+    if (!variant?.id || busy || !inStock || hasOptions) return
     setAdding(true)
     try {
       await addToCart({
         variantId: variant.id,
         quantity: 1,
-        countryCode: countryCode.toLowerCase(),
+        countryCode: code,
       })
       window.dispatchEvent(new CustomEvent("cart:item-added", { detail: { message: "Added to cart" } }))
       router.refresh()
@@ -55,6 +58,26 @@ export default function DealCard({ product, region, countryCode, wishlistProduct
     }
   }
 
+  const handleBuyNow = async (event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!variant?.id || busy || !inStock) return
+    setBuying(true)
+    try {
+      await buyNow({
+        variantId: variant.id,
+        quantity: 1,
+        countryCode: code,
+      })
+      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)
+    }
+  }
+
   return (
     <article className={`powerhouse-deals__card${onSale ? " is-sale" : ""}`}>
       <div className="powerhouse-deals__media-wrap">
@@ -101,9 +124,16 @@ export default function DealCard({ product, region, countryCode, wishlistProduct
         )}
 
         <div className="powerhouse-deals__actions">
-          <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-deals__quickshop">
-            Quick shop
-          </LocalizedLink>
+          {inStock ? (
+            <button
+              type="button"
+              className="powerhouse-deals__quickshop"
+              onClick={handleBuyNow}
+              disabled={busy || !variant?.id}
+            >
+              {buying ? "Processing…" : "Buy now"}
+            </button>
+          ) : null}
           {hasOptions ? (
             <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-deals__atc">
               Choose options
@@ -113,7 +143,7 @@ export default function DealCard({ product, region, countryCode, wishlistProduct
               type="button"
               className="powerhouse-deals__atc"
               onClick={handleAdd}
-              disabled={adding || !variant?.id || !inStock}
+              disabled={busy || !variant?.id || !inStock}
             >
               {adding ? "Adding…" : !inStock ? "Sold out" : "Add to cart"}
             </button>

package/src/deals.css

@@ -324,9 +324,15 @@
   background: #f1eeae;
   border: 1px solid #f2f682;
   color: #1d1d1d;
+  cursor: pointer;
+}
+
+.powerhouse-deals__quickshop:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
-.powerhouse-deals__quickshop:hover {
+.powerhouse-deals__quickshop:hover:not(:disabled) {
   background: #f4f1be;
 }