@pradip1995/segment-login-popup 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-popup",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -11,6 +11,7 @@ export {
   isAuthRequiredError,
   promptLoginForWishlist,
   requestLoginPopup,
+  requireLoginForWishlist,
 } from "./request-login"
 export {
   DEFAULT_LOGIN_POPUP_FEATURE_CARDS,

package/src/login-popup-provider.tsx

@@ -5,6 +5,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -78,7 +79,7 @@ export function LoginPopupProvider({
     setIsPopupOpen(true)
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isLoggedIn) return
 
     const onOpen = (event: Event) => {

package/src/login-required-modal.tsx

@@ -5,11 +5,13 @@ import {
   clearMedusaAuthCookies,
   GOOGLE_LOGIN_COUNTRY_CODE_KEY,
 } from "@pradip1995/commerce-auth/util/google-auth-client"
+import "./segment.css"
 
 export {
   isAuthRequiredError,
   promptLoginForWishlist,
   requestLoginPopup,
+  requireLoginForWishlist,
 } from "./request-login"
 
 type LoginRequiredModalProps = {
@@ -49,41 +51,39 @@ export default function LoginRequiredModal({
   }
 
   return (
-    <div className="fixed inset-0 z-[99999] flex items-center justify-center p-4">
+    <div className="login-required-modal">
       <button
         type="button"
-        className="absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+        className="login-required-modal__backdrop"
         aria-label="Close login required dialog"
         onClick={onClose}
       />
-      <div className="relative w-full max-w-sm bg-surface border border-cart-border shadow-xl p-6 text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-accent/10 text-brand-accent">
+      <div className="login-required-modal__dialog">
+        <div className="login-required-modal__icon" aria-hidden>
           <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
             <rect x="3" y="11" width="18" height="11" rx="2" />
             <path d="M7 11V7a5 5 0 0 1 10 0v4" />
           </svg>
         </div>
-        <h2 className="font-heading text-lg font-bold text-heading uppercase tracking-[0.08em] mb-2">
-          Login required
-        </h2>
-        <p className="text-sm text-muted mb-5">{message}</p>
+        <h2 className="login-required-modal__title">Login required</h2>
+        <p className="login-required-modal__message">{message}</p>
 
-        <div className="mb-4">
+        <div className="login-required-modal__google">
           <GoogleAuthSection countryCode={countryCode} />
         </div>
 
-        <div className="flex gap-2">
+        <div className="login-required-modal__actions">
           <button
             type="button"
             onClick={onClose}
-            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-widest border border-cart-border text-muted hover:text-heading"
+            className="login-required-modal__btn login-required-modal__btn--ghost"
           >
             Cancel
           </button>
           <button
             type="button"
             onClick={goToAccount}
-            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-widest bg-brand-primary text-inverse hover:bg-brand-accent"
+            className="login-required-modal__btn login-required-modal__btn--primary"
           >
             Login
           </button>

package/src/request-login.test.ts

@@ -1,8 +1,13 @@
 import assert from "node:assert/strict"
 import { describe, it } from "node:test"
-import { isAuthRequiredError } from "./request-login.ts"
+import {
+  isAuthRequiredError,
+  LOGIN_POPUP_OPEN_EVENT,
+  requestLoginPopup,
+  requireLoginForWishlist,
+} from "./request-login.ts"
 
-const CASES: Array<{
+const AUTH_CASES: Array<{
   name: string
   error: string | null | undefined
   want: boolean
@@ -19,9 +24,49 @@ const CASES: Array<{
 ]
 
 describe("isAuthRequiredError", () => {
-  for (const row of CASES) {
+  for (const row of AUTH_CASES) {
     it(row.name, () => {
       assert.equal(isAuthRequiredError(row.error), row.want)
     })
   }
 })
+
+const POPUP_CASES: Array<{
+  name: string
+  dispatcher: "none" | "silent" | "guest"
+  want: boolean
+}> = [
+  { name: "no dispatcher cannot open popup", dispatcher: "none", want: false },
+  { name: "logged-in shopper has no listener", dispatcher: "silent", want: false },
+  { name: "guest listener preventDefault opens popup", dispatcher: "guest", want: true },
+]
+
+function makeDispatcher(kind: "silent" | "guest"): EventTarget {
+  const target = new EventTarget()
+  if (kind === "guest") {
+    target.addEventListener(LOGIN_POPUP_OPEN_EVENT, (event) => {
+      event.preventDefault()
+    })
+  }
+  return target
+}
+
+describe("requestLoginPopup", () => {
+  for (const row of POPUP_CASES) {
+    it(row.name, () => {
+      const dispatcher =
+        row.dispatcher === "none" ? null : makeDispatcher(row.dispatcher)
+      assert.equal(requestLoginPopup(dispatcher), row.want)
+    })
+  }
+})
+
+describe("requireLoginForWishlist", () => {
+  for (const row of POPUP_CASES) {
+    it(`aborts wishlist when ${row.name}`, () => {
+      const dispatcher =
+        row.dispatcher === "none" ? null : makeDispatcher(row.dispatcher)
+      assert.equal(requireLoginForWishlist(dispatcher), row.want)
+    })
+  }
+})

package/src/request-login.ts

@@ -10,13 +10,30 @@ export function isAuthRequiredError(error?: string | null): boolean {
   )
 }
 
-export function requestLoginPopup(): boolean {
-  if (typeof window === "undefined") return false
+type LoginPopupDispatcher = Pick<EventTarget, "dispatchEvent">
+
+export function requestLoginPopup(
+  dispatcher?: LoginPopupDispatcher | null
+): boolean {
+  const target =
+    dispatcher ?? (typeof window === "undefined" ? null : window)
+  if (!target) return false
   const event = new CustomEvent(LOGIN_POPUP_OPEN_EVENT, { cancelable: true })
-  window.dispatchEvent(event)
+  target.dispatchEvent(event)
   return event.defaultPrevented
 }
 
+/**
+ * Opens the chrome login popup for guests (provider calls preventDefault).
+ * Returns true when the wishlist mutation should abort.
+ * Logged-in shoppers have no listener, so this returns false and the API proceeds.
+ */
+export function requireLoginForWishlist(
+  dispatcher?: LoginPopupDispatcher | null
+): boolean {
+  return requestLoginPopup(dispatcher)
+}
+
 export function promptLoginForWishlist(fallback: () => void) {
   if (!requestLoginPopup()) fallback()
 }

package/src/segment.css

@@ -385,6 +385,92 @@ body.login-popup-open {
   text-underline-offset: 2px;
 }
 
+.login-required-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.login-required-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+
+.login-required-modal__dialog {
+  position: relative;
+  width: min(24rem, 100%);
+  padding: 1.5rem;
+  text-align: center;
+  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-cart-border, #e5e5e5);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
+}
+
+.login-required-modal__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 1rem;
+  border-radius: 999px;
+  color: var(--color-brand-accent, #111);
+  background: color-mix(in srgb, var(--color-brand-accent, #111) 10%, transparent);
+}
+
+.login-required-modal__title {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-heading, #111);
+}
+
+.login-required-modal__message {
+  margin: 0 0 1.25rem;
+  font-size: 0.875rem;
+  color: var(--color-muted, #666);
+}
+
+.login-required-modal__google {
+  margin-bottom: 1rem;
+}
+
+.login-required-modal__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.login-required-modal__btn {
+  flex: 1;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.login-required-modal__btn--ghost {
+  border: 1px solid var(--color-cart-border, #e5e5e5);
+  background: transparent;
+  color: var(--color-muted, #666);
+}
+
+.login-required-modal__btn--primary {
+  border: none;
+  background: var(--color-brand-primary, #111);
+  color: var(--color-inverse, #fff);
+}
+
 @media (min-width: 768px) {
   .login-popup__panel {
     flex-direction: row;