@pradip1995/segment-powerhouse-cart 0.1.1 → 0.1.2

package/package.json

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

package/src/cart.css

@@ -411,3 +411,80 @@
     text-align: center;
   }
 }
+
+.powerhouse-cart-confirm {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.powerhouse-cart-confirm__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(10, 10, 10, 0.45);
+}
+
+.powerhouse-cart-confirm__panel {
+  position: relative;
+  width: min(26rem, 100%);
+  padding: 1.5rem;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+}
+
+.powerhouse-cart-confirm__title {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-heading, Georgia, serif);
+  font-size: 1.35rem;
+  color: #1d1d1d;
+}
+
+.powerhouse-cart-confirm__text {
+  margin: 0 0 1.25rem;
+  font-size: 0.875rem;
+  color: #6b6b6b;
+}
+
+.powerhouse-cart-confirm__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.powerhouse-cart-confirm__btn {
+  min-height: 2.6rem;
+  padding: 0.65rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.powerhouse-cart-confirm__btn--primary {
+  border: 0;
+  background: #1d1d1d;
+  color: #ffffff;
+}
+
+.powerhouse-cart-confirm__btn--danger {
+  border: 1px solid #c1272d;
+  background: #ffffff;
+  color: #c1272d;
+}
+
+.powerhouse-cart-confirm__btn--ghost {
+  border: 0;
+  background: transparent;
+  color: #6b6b6b;
+}
+
+.powerhouse-cart-confirm__btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/src/segment.tsx

@@ -2,9 +2,10 @@
 
 import Image from "next/image"
 import { useRouter } from "next/navigation"
-import { useTransition } from "react"
+import { useState, useTransition } from "react"
 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 +13,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,6 +133,8 @@ function LineItemRow({
 }) {
   const router = useRouter()
   const [pending, startTransition] = useTransition()
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [loginRequired, setLoginRequired] = useState(false)
   const thumbnail = lineItemImage(item)
   const variantLabel = item.variant?.title
   const showVariant = Boolean(variantLabel && !isPlaceholderVariant(variantLabel))
@@ -145,11 +149,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 +230,66 @@ 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 ? (
+        <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">
+            <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>
+      ) : null}
+
+      <LoginRequiredModal
+        isOpen={loginRequired}
+        onClose={() => setLoginRequired(false)}
+        countryCode={countryCode}
+        message="Please log in to move this item to your wishlist."
+      />
     </article>
   )
 }