@pradip1995/segment-powerhouse-cart 0.1.2 → 0.1.3

package/package.json

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

package/src/cart.css

@@ -412,79 +412,155 @@
   }
 }
 
+@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: 80;
+  z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+  padding: 1.25rem;
 }
 
 .powerhouse-cart-confirm__backdrop {
   position: absolute;
   inset: 0;
   border: 0;
-  background: rgba(10, 10, 10, 0.45);
+  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(26rem, 100%);
-  padding: 1.5rem;
+  width: min(25.5rem, 100%);
+  padding: 2.25rem 2rem 1.75rem;
   background: #ffffff;
-  border: 1px solid #e8e8e8;
+  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.35rem;
-  color: #1d1d1d;
+  font-size: 1.4rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: #111827;
 }
 
 .powerhouse-cart-confirm__text {
-  margin: 0 0 1.25rem;
+  margin: 0 0 1.5rem;
   font-size: 0.875rem;
-  color: #6b6b6b;
+  line-height: 1.5;
+  color: #4b5563;
 }
 
 .powerhouse-cart-confirm__actions {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.625rem;
 }
 
 .powerhouse-cart-confirm__btn {
-  min-height: 2.6rem;
-  padding: 0.65rem 1rem;
+  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.06em;
+  letter-spacing: 0.09em;
   text-transform: uppercase;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .powerhouse-cart-confirm__btn--primary {
-  border: 0;
-  background: #1d1d1d;
+  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 #c1272d;
+  border: 1px solid #dc2626;
   background: #ffffff;
-  color: #c1272d;
+  color: #dc2626;
+}
+
+.powerhouse-cart-confirm__btn--danger:hover:not(:disabled) {
+  background: #fef2f2;
+  border-color: #b91c1c;
+  color: #b91c1c;
 }
 
 .powerhouse-cart-confirm__btn--ghost {
-  border: 0;
+  border: 1px solid transparent;
   background: transparent;
-  color: #6b6b6b;
+  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.6;
+  opacity: 0.75;
   cursor: not-allowed;
 }

package/src/segment.tsx

@@ -2,7 +2,8 @@
 
 import Image from "next/image"
 import { useRouter } from "next/navigation"
-import { useState, 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"
@@ -135,10 +136,15 @@ function LineItemRow({
   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
@@ -241,48 +247,59 @@ function LineItemRow({
       </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">
+      {confirmOpen && mounted
+        ? createPortal(
+            <div className="powerhouse-cart-confirm">
               <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}
+                className="powerhouse-cart-confirm__backdrop"
+                aria-label="Close"
                 onClick={() => setConfirmOpen(false)}
-              >
-                Keep in cart
-              </button>
-            </div>
-          </div>
-        </div>
-      ) : null}
+              />
+              <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}