@pradip1995/segment-powerhouse-cart 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-cart",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@pradip1995/segment-analytics": "^0.2.4",
-    "@pradip1995/segment-primitives": "^0.4.0"
+    "@pradip1995/segment-login-popup": "^0.1.3",
+    "@pradip1995/segment-primitives": "^0.4.11"
   },
   "devDependencies": {
     "@medusajs/types": "^2.0.0",

package/src/cart.css

@@ -411,3 +411,156 @@
     text-align: center;
   }
 }
+
+@keyframes powerhouseModalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes powerhouseBackdropFade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.powerhouse-cart-confirm {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+}
+
+.powerhouse-cart-confirm__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(15, 10, 25, 0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  animation: powerhouseBackdropFade 0.2s ease-out forwards;
+}
+
+.powerhouse-cart-confirm__panel {
+  position: relative;
+  width: min(25.5rem, 100%);
+  padding: 2.25rem 2rem 1.75rem;
+  background: #ffffff;
+  border-radius: 1.25rem;
+  border: 1px solid rgba(59, 31, 78, 0.1);
+  box-shadow:
+    0 20px 40px -10px rgba(30, 15, 45, 0.25),
+    0 2px 10px rgba(0, 0, 0, 0.05);
+  text-align: center;
+  animation: powerhouseModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.powerhouse-cart-confirm__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 9999px;
+  background: rgba(59, 31, 78, 0.05);
+  color: #6b7280;
+  font-size: 0.875rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.powerhouse-cart-confirm__close:hover {
+  background: rgba(59, 31, 78, 0.12);
+  color: #111827;
+}
+
+.powerhouse-cart-confirm__title {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.4rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: #111827;
+}
+
+.powerhouse-cart-confirm__text {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #4b5563;
+}
+
+.powerhouse-cart-confirm__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.powerhouse-cart-confirm__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.25rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.powerhouse-cart-confirm__btn--primary {
+  border: 1px solid #362447;
+  background: #362447;
+  color: #ffffff;
+  box-shadow: 0 4px 14px rgba(54, 36, 71, 0.25);
+}
+
+.powerhouse-cart-confirm__btn--primary:hover:not(:disabled) {
+  background: #4a3260;
+  border-color: #4a3260;
+  box-shadow: 0 6px 18px rgba(54, 36, 71, 0.35);
+}
+
+.powerhouse-cart-confirm__btn--danger {
+  border: 1px solid #dc2626;
+  background: #ffffff;
+  color: #dc2626;
+}
+
+.powerhouse-cart-confirm__btn--danger:hover:not(:disabled) {
+  background: #fef2f2;
+  border-color: #b91c1c;
+  color: #b91c1c;
+}
+
+.powerhouse-cart-confirm__btn--ghost {
+  border: 1px solid transparent;
+  background: transparent;
+  color: #6b7280;
+}
+
+.powerhouse-cart-confirm__btn--ghost:hover:not(:disabled) {
+  background: rgba(59, 31, 78, 0.05);
+  color: #111827;
+}
+
+.powerhouse-cart-confirm__btn:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+}

package/src/segment.tsx

@@ -2,9 +2,11 @@
 
 import Image from "next/image"
 import { useRouter } from "next/navigation"
-import { useTransition } from "react"
+import { useEffect, useState, useTransition } from "react"
+import { createPortal } from "react-dom"
 import type { HttpTypes } from "@medusajs/types"
 import { deleteLineItem, updateLineItem } from "@pradip1995/commerce-core/client/actions/cart"
+import { addToWishlist } from "@pradip1995/commerce-core/client/actions/wishlist"
 import {
   trackCartLineItemQuantityChange,
   trackCartLineItemRemoved,
@@ -12,6 +14,7 @@ import {
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-url"
+import LoginRequiredModal from "@pradip1995/segment-login-popup/required"
 import {
   DEFAULT_CHECKOUT_LABEL,
   DEFAULT_CONTINUE_HREF,
@@ -131,10 +134,17 @@ function LineItemRow({
 }) {
   const router = useRouter()
   const [pending, startTransition] = useTransition()
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [loginRequired, setLoginRequired] = useState(false)
+  const [mounted, setMounted] = useState(false)
   const thumbnail = lineItemImage(item)
   const variantLabel = item.variant?.title
   const showVariant = Boolean(variantLabel && !isPlaceholderVariant(variantLabel))
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   function changeQty(next: number) {
     if (next < 1 || !item.id) return
     const previousQuantity = item.quantity ?? 1
@@ -145,11 +155,36 @@ function LineItemRow({
     })
   }
 
-  function remove() {
+  function removeFromCart() {
     if (!item.id) return
     startTransition(async () => {
       trackCartLineItemRemoved(item, currency)
       await deleteLineItem(item.id)
+      setConfirmOpen(false)
+      router.refresh()
+    })
+  }
+
+  function moveToWishlist() {
+    const productId = item.product_id
+    if (!productId) {
+      removeFromCart()
+      return
+    }
+    startTransition(async () => {
+      const result = await addToWishlist(productId)
+      if (!result.success && result.error?.toLowerCase().includes("login")) {
+        setConfirmOpen(false)
+        setLoginRequired(true)
+        return
+      }
+      if (!result.success) {
+        setConfirmOpen(false)
+        return
+      }
+      trackCartLineItemRemoved(item, currency)
+      if (item.id) await deleteLineItem(item.id)
+      setConfirmOpen(false)
       router.refresh()
     })
   }
@@ -201,11 +236,77 @@ function LineItemRow({
             +
           </button>
         </div>
-        <button type="button" className="powerhouse-cart__remove" onClick={remove} disabled={pending}>
+        <button
+          type="button"
+          className="powerhouse-cart__remove"
+          onClick={() => setConfirmOpen(true)}
+          disabled={pending}
+        >
           Remove
         </button>
       </div>
       <p className="powerhouse-cart__total">{formatPrice(lineTotal(item), currency)}</p>
+
+      {confirmOpen && mounted
+        ? createPortal(
+            <div className="powerhouse-cart-confirm">
+              <button
+                type="button"
+                className="powerhouse-cart-confirm__backdrop"
+                aria-label="Close"
+                onClick={() => setConfirmOpen(false)}
+              />
+              <div className="powerhouse-cart-confirm__panel" role="dialog" aria-modal="true">
+                <button
+                  type="button"
+                  className="powerhouse-cart-confirm__close"
+                  aria-label="Close dialog"
+                  onClick={() => setConfirmOpen(false)}
+                >
+                  ✕
+                </button>
+                <h3 className="powerhouse-cart-confirm__title">Remove this item?</h3>
+                <p className="powerhouse-cart-confirm__text">
+                  Move it to your wishlist to save it for later, or remove it from your cart.
+                </p>
+                <div className="powerhouse-cart-confirm__actions">
+                  <button
+                    type="button"
+                    className="powerhouse-cart-confirm__btn powerhouse-cart-confirm__btn--primary"
+                    disabled={pending}
+                    onClick={moveToWishlist}
+                  >
+                    {pending ? "Saving…" : "Move to Wishlist"}
+                  </button>
+                  <button
+                    type="button"
+                    className="powerhouse-cart-confirm__btn powerhouse-cart-confirm__btn--danger"
+                    disabled={pending}
+                    onClick={removeFromCart}
+                  >
+                    Remove the Product
+                  </button>
+                  <button
+                    type="button"
+                    className="powerhouse-cart-confirm__btn powerhouse-cart-confirm__btn--ghost"
+                    disabled={pending}
+                    onClick={() => setConfirmOpen(false)}
+                  >
+                    Keep in cart
+                  </button>
+                </div>
+              </div>
+            </div>,
+            document.body
+          )
+        : null}
+
+      <LoginRequiredModal
+        isOpen={loginRequired}
+        onClose={() => setLoginRequired(false)}
+        countryCode={countryCode}
+        message="Please log in to move this item to your wishlist."
+      />
     </article>
   )
 }