@pradip1995/segment-login-popup 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pradip1995/segment-login-popup",
+  "version": "0.1.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts",
+    "./provider": "./src/login-popup-provider.tsx",
+    "./required": "./src/login-required-modal.tsx",
+    "./types": "./src/types.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-auth": "^4.0.0",
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/commerce-auth": "^4.0.0",
+    "@pradip1995/segment-login-template": "^0.5.2",
+    "@pradip1995/segment-primitives": "^0.4.0",
+    "@pradip1995/segment-tokens": "^0.3.7",
+    "@pradip1995/commerce-core": "^4.0.0"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"
+export { default as LoginPopup } from "./login-popup"
+export {
+  LoginPopupProvider,
+  useLoginPopup,
+} from "./login-popup-provider"
+export { default as LoginRequiredModal } from "./login-required-modal"
+export {
+  DEFAULT_LOGIN_POPUP_FEATURE_CARDS,
+  normalizeLoginPopupConfig,
+} from "./types"

package/src/login-popup-provider.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+import { usePathname } from "next/navigation"
+import {
+  normalizeLoginPopupConfig,
+  type LoginPopupConfig,
+} from "./types"
+
+type LoginPopupContextValue = {
+  isPopupOpen: boolean
+  dismissPopup: () => void
+  openPopup: () => void
+  popupConfig: ReturnType<typeof normalizeLoginPopupConfig>
+}
+
+const LoginPopupContext = createContext<LoginPopupContextValue | null>(null)
+
+function isBlockedPath(pathname: string | null): boolean {
+  if (!pathname) return false
+  return (
+    pathname.includes("/account") ||
+    pathname.includes("/checkout") ||
+    (pathname.includes("/order/") && pathname.includes("/confirmed"))
+  )
+}
+
+function hasSeenPopup(storageKey: string): boolean {
+  if (typeof window === "undefined") return true
+  try {
+    return localStorage.getItem(storageKey) === "1"
+  } catch {
+    return true
+  }
+}
+
+function isCookieBannerPending(): boolean {
+  return document.documentElement.getAttribute("data-cookie-banner") === "pending"
+}
+
+export function LoginPopupProvider({
+  children,
+  config,
+  isLoggedIn = false,
+}: {
+  children: ReactNode
+  config?: LoginPopupConfig | null
+  isLoggedIn?: boolean
+}) {
+  const pathname = usePathname()
+  const pathnameRef = useRef(pathname)
+  const popupConfig = useMemo(() => normalizeLoginPopupConfig(config), [config])
+  const [isPopupOpen, setIsPopupOpen] = useState(false)
+  const [hydrated, setHydrated] = useState(false)
+
+  pathnameRef.current = pathname
+
+  const dismissPopup = useCallback(() => {
+    try {
+      localStorage.setItem(popupConfig.storageKey, "1")
+    } catch {
+      // private mode
+    }
+    setIsPopupOpen(false)
+  }, [popupConfig.storageKey])
+
+  const openPopup = useCallback(() => {
+    setIsPopupOpen(true)
+  }, [])
+
+  useEffect(() => {
+    setHydrated(true)
+    document.body.classList.remove("login-popup-open")
+    document.documentElement.classList.remove("login-popup-open")
+  }, [])
+
+  useEffect(() => {
+    if (!hydrated || !popupConfig.enabled || isLoggedIn) return
+    if (hasSeenPopup(popupConfig.storageKey)) return
+
+    let cancelled = false
+    let retryTimer: number | undefined
+    let opened = false
+
+    const open = () => {
+      if (cancelled || opened) return
+      opened = true
+      setIsPopupOpen(true)
+    }
+
+    const tryOpen = () => {
+      if (cancelled || opened) return
+      if (isBlockedPath(pathnameRef.current)) {
+        retryTimer = window.setTimeout(tryOpen, 1000)
+        return
+      }
+      if (isCookieBannerPending()) {
+        retryTimer = window.setTimeout(tryOpen, 400)
+        return
+      }
+      open()
+    }
+
+    const delayMs = Math.max(popupConfig.showDelayMs || 8000, 3000)
+    const timer = window.setTimeout(tryOpen, delayMs)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+      if (retryTimer) window.clearTimeout(retryTimer)
+    }
+  }, [
+    hydrated,
+    isLoggedIn,
+    popupConfig.enabled,
+    popupConfig.showDelayMs,
+    popupConfig.storageKey,
+  ])
+
+  useEffect(() => {
+    if (isLoggedIn) setIsPopupOpen(false)
+  }, [isLoggedIn])
+
+  const value = useMemo(
+    () => ({ isPopupOpen, dismissPopup, openPopup, popupConfig }),
+    [isPopupOpen, dismissPopup, openPopup, popupConfig]
+  )
+
+  return (
+    <LoginPopupContext.Provider value={value}>{children}</LoginPopupContext.Provider>
+  )
+}
+
+export function useLoginPopup() {
+  const context = useContext(LoginPopupContext)
+  if (!context) {
+    throw new Error("useLoginPopup must be used within LoginPopupProvider")
+  }
+  return context
+}

package/src/login-popup.tsx

@@ -0,0 +1,465 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import Image from "next/image"
+import { createPortal } from "react-dom"
+import { useRouter } from "next/navigation"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import GoogleAuthSection from "@pradip1995/segment-login-template/google-auth-section"
+import OtpInput from "@pradip1995/segment-login-template/otp-input"
+import {
+  sendAuthOtp,
+  verifyAuthOtpAndLogin,
+} from "@pradip1995/segment-login-template/auth-server"
+import { SplitPhoneInput } from "@pradip1995/commerce-core/components/split-phone-input"
+import {
+  formatPhoneDisplay,
+  isValidPhoneParts,
+  parsePhoneParts,
+  toE164Phone,
+} from "@pradip1995/commerce-core/util/phone"
+import { useLoginPopup } from "./login-popup-provider"
+import "./segment.css"
+
+type AuthMethod = "email_auth" | "phone_auth"
+type PopupStep = "identifier" | "verify"
+
+export default function LoginPopup({ countryCode = "in" }: { countryCode?: string }) {
+  const { isPopupOpen, dismissPopup, popupConfig: config } = useLoginPopup()
+  const router = useRouter()
+  const [mounted, setMounted] = useState(false)
+  const [authMethod, setAuthMethod] = useState<AuthMethod>("phone_auth")
+  const [identifier, setIdentifier] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [uiStep, setUiStep] = useState<PopupStep>("identifier")
+  const [isNewUser, setIsNewUser] = useState(false)
+  const [firstName, setFirstName] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const [sending, setSending] = useState(false)
+  const [verifying, setVerifying] = useState(false)
+  const [resendIn, setResendIn] = useState(0)
+  const handleCloseRef = useRef(() => {})
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (resendIn <= 0) return
+    const timer = window.setTimeout(() => setResendIn((s) => s - 1), 1000)
+    return () => window.clearTimeout(timer)
+  }, [resendIn])
+
+  const resetFlow = () => {
+    setAuthMethod("phone_auth")
+    setIdentifier("")
+    setOtpToken(null)
+    setOtp("")
+    setUiStep("identifier")
+    setIsNewUser(false)
+    setFirstName("")
+    setError(null)
+    setSending(false)
+    setVerifying(false)
+    setResendIn(0)
+  }
+
+  const handleClose = () => {
+    dismissPopup()
+    resetFlow()
+  }
+
+  handleCloseRef.current = handleClose
+
+  useEffect(() => {
+    if (!isPopupOpen || !mounted) return
+
+    document.documentElement.classList.add("login-popup-open")
+    document.body.classList.add("login-popup-open")
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault()
+        handleCloseRef.current()
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      document.documentElement.classList.remove("login-popup-open")
+      document.body.classList.remove("login-popup-open")
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [isPopupOpen, mounted])
+
+  const phoneParts = parsePhoneParts(identifier)
+  const phoneReady =
+    authMethod === "phone_auth" &&
+    isValidPhoneParts(phoneParts.dialCode, phoneParts.localNumber)
+  const identifierReady =
+    authMethod === "email_auth" ? Boolean(identifier.trim()) : phoneReady
+
+  async function handleSendOtp(options?: { resend?: boolean }) {
+    if (!identifierReady || sending) return
+    setSending(true)
+    setError(null)
+
+    if (!options?.resend) {
+      setOtp("")
+      setFirstName("")
+      setOtpToken(null)
+      setUiStep("verify")
+    }
+
+    try {
+      const res = await sendAuthOtp(
+        authMethod === "email_auth"
+          ? { email: identifier.trim(), type: "email_auth" }
+          : { phone: toE164Phone(identifier), type: "phone_auth" }
+      )
+      if (!res.success) throw new Error(res.error)
+      setOtpToken(res.token ?? null)
+      setIsNewUser(res.isNewUser ?? false)
+      setOtp("")
+      setResendIn(30)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+      if (!options?.resend) {
+        setUiStep("identifier")
+      }
+    } finally {
+      setSending(false)
+    }
+  }
+
+  async function handleVerify() {
+    if (!otp || otp.length < 6 || !otpToken || verifying || sending) return
+    setVerifying(true)
+    setError(null)
+    try {
+      if (isNewUser && !firstName.trim()) {
+        throw new Error("Please enter your first name to finish sign in")
+      }
+      const result = await verifyAuthOtpAndLogin({
+        token: otpToken,
+        code: otp,
+        countryCode,
+        first_name: isNewUser ? firstName.trim() : undefined,
+        last_name: isNewUser ? "." : undefined,
+        skipRedirect: true,
+      })
+      if (!result.success) {
+        throw new Error(result.error || "Verification failed")
+      }
+      try {
+        localStorage.setItem(config.storageKey, "1")
+      } catch {
+        // ignore
+      }
+      dismissPopup()
+      resetFlow()
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verification failed")
+      setVerifying(false)
+    }
+  }
+
+  if (!config.enabled || !isPopupOpen || !mounted) return null
+
+  const features = config.featureCards || []
+  const identifierDisplay =
+    authMethod === "phone_auth" ? formatPhoneDisplay(identifier) || identifier : identifier
+
+  return createPortal(
+    <div
+      className="login-popup"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="login-popup-title"
+    >
+      <button
+        type="button"
+        className="login-popup__backdrop"
+        onClick={handleClose}
+        aria-label="Close login popup"
+      />
+
+      <div className="login-popup__dialog">
+        <button
+          type="button"
+          className="login-popup__close"
+          onClick={handleClose}
+          aria-label="Close"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        <div className="login-popup__panel">
+          <aside className="login-popup__brand-col" aria-hidden={uiStep !== "identifier"}>
+            {config.imageSrc ? (
+              <div className="login-popup__panel-image-wrap">
+                <Image
+                  src={config.imageSrc}
+                  alt=""
+                  width={800}
+                  height={500}
+                  className="login-popup__panel-image"
+                  loading="lazy"
+                  unoptimized
+                />
+              </div>
+            ) : null}
+
+            <div className="login-popup__brand-content">
+              <h2 className="login-popup__brand-title">{config.brandTitle}</h2>
+              {features.length > 0 && (
+                <div className="login-popup__features">
+                  {features.map((card, index) => (
+                    <div key={`${card.title}-${index}`} className="login-popup__feature-card">
+                      {card.imageSrc ? (
+                        <Image
+                          src={card.imageSrc}
+                          alt=""
+                          width={32}
+                          height={32}
+                          className="login-popup__feature-image"
+                          loading="lazy"
+                          unoptimized
+                        />
+                      ) : (
+                        <span className="login-popup__feature-icon" aria-hidden>
+                          ★
+                        </span>
+                      )}
+                      <p className="login-popup__feature-title">{card.title}</p>
+                      <p className="login-popup__feature-text">{card.text}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </aside>
+
+          <div className="login-popup__form-col">
+            {uiStep === "identifier" ? (
+              <>
+                <div className="login-popup__form-body">
+                  {config.logoSrc ? (
+                    <div className="login-popup__logo-wrap">
+                      <Image
+                        src={config.logoSrc}
+                        alt={config.shopName || ""}
+                        width={200}
+                        height={64}
+                        className="login-popup__logo"
+                        loading="lazy"
+                        unoptimized
+                      />
+                    </div>
+                  ) : null}
+
+                  <h2 id="login-popup-title" className="login-popup__form-title">
+                    {config.headline}
+                  </h2>
+                  {config.subtext ? (
+                    <p className="login-popup__form-subtext">{config.subtext}</p>
+                  ) : null}
+
+                  <div className="login-popup__google">
+                    <GoogleAuthSection countryCode={countryCode} />
+                  </div>
+
+                  <div className="login-popup__divider">
+                    <span>Or continue with email / mobile</span>
+                  </div>
+
+                  <div className="login-popup__form">
+                    <div className="login-popup__method-tabs">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setAuthMethod("phone_auth")
+                          setIdentifier("")
+                          setError(null)
+                        }}
+                        className={`login-popup__method-tab${
+                          authMethod === "phone_auth" ? " is-active" : ""
+                        }`}
+                      >
+                        Mobile
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setAuthMethod("email_auth")
+                          setIdentifier("")
+                          setError(null)
+                        }}
+                        className={`login-popup__method-tab${
+                          authMethod === "email_auth" ? " is-active" : ""
+                        }`}
+                      >
+                        Email
+                      </button>
+                    </div>
+
+                    {authMethod === "phone_auth" ? (
+                      <div className="login-popup__phone">
+                        <SplitPhoneInput
+                          value={identifier}
+                          onChange={setIdentifier}
+                          label="Mobile number"
+                          numberInputId="login-popup-phone"
+                          data-testid="login-popup-phone"
+                        />
+                      </div>
+                    ) : (
+                      <input
+                        type="email"
+                        value={identifier}
+                        onChange={(e) => setIdentifier(e.target.value)}
+                        placeholder="Enter your email"
+                        className="login-popup__input"
+                        autoComplete="email"
+                      />
+                    )}
+
+                    {error && (
+                      <p className="login-popup__message login-popup__message--error">
+                        {error}
+                      </p>
+                    )}
+
+                    <button
+                      type="button"
+                      disabled={sending || !identifierReady}
+                      onClick={() => void handleSendOtp()}
+                      className="login-popup__btn login-popup__btn--primary"
+                    >
+                      {sending ? "Continue…" : "Continue"}
+                    </button>
+                  </div>
+                </div>
+
+                <footer className="login-popup__legal">
+                  By continuing, you agree to {config.shopName}&apos;s{" "}
+                  <LocalizedLink
+                    href={config.privacyHref || "/privacy-policy"}
+                    className="login-popup__link"
+                    onClick={handleClose}
+                  >
+                    Privacy Policy
+                  </LocalizedLink>{" "}
+                  and{" "}
+                  <LocalizedLink
+                    href={config.termsHref || "/terms-of-use"}
+                    className="login-popup__link"
+                    onClick={handleClose}
+                  >
+                    Terms of Use
+                  </LocalizedLink>
+                  .
+                </footer>
+              </>
+            ) : (
+              <div className="login-popup__form login-popup__form--verify">
+                <h2 id="login-popup-title" className="login-popup__form-title">
+                  Verify OTP
+                </h2>
+                <p className="login-popup__otp-hint" aria-live="polite">
+                  {sending ? (
+                    <>Sending code to {identifierDisplay}…</>
+                  ) : (
+                    <>
+                      Enter the 6-digit code sent to{" "}
+                      <span className="login-popup__otp-target">{identifierDisplay}</span>
+                    </>
+                  )}
+                </p>
+
+                {isNewUser && (
+                  <input
+                    type="text"
+                    value={firstName}
+                    onChange={(e) => setFirstName(e.target.value)}
+                    placeholder="First name"
+                    required
+                    className="login-popup__input"
+                  />
+                )}
+
+                <div className="login-popup__otp">
+                  <OtpInput
+                    value={otp}
+                    onChange={setOtp}
+                    autoFocus={!isNewUser && !sending && Boolean(otpToken)}
+                  />
+                </div>
+
+                {error && (
+                  <p className="login-popup__message login-popup__message--error">
+                    {error}
+                  </p>
+                )}
+
+                <button
+                  type="button"
+                  disabled={
+                    sending ||
+                    verifying ||
+                    !otpToken ||
+                    otp.length < 6 ||
+                    (isNewUser && !firstName.trim())
+                  }
+                  onClick={() => void handleVerify()}
+                  className="login-popup__btn login-popup__btn--primary"
+                >
+                  {sending
+                    ? "Waiting for code…"
+                    : verifying
+                      ? "Verifying…"
+                      : "Verify & Login"}
+                </button>
+
+                <div className="login-popup__verify-actions">
+                  <button
+                    type="button"
+                    className="login-popup__method-toggle"
+                    disabled={verifying}
+                    onClick={() => {
+                      setUiStep("identifier")
+                      setOtp("")
+                      setOtpToken(null)
+                      setError(null)
+                      setResendIn(0)
+                    }}
+                  >
+                    Change {authMethod === "email_auth" ? "email" : "number"}
+                  </button>
+                  <button
+                    type="button"
+                    className="login-popup__method-toggle"
+                    onClick={() => void handleSendOtp({ resend: true })}
+                    disabled={sending || verifying || resendIn > 0}
+                  >
+                    {sending
+                      ? "Resending…"
+                      : resendIn > 0
+                        ? `Resend in ${resendIn}s`
+                        : "Resend OTP"}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/login-required-modal.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import GoogleAuthSection from "@pradip1995/segment-login-template/google-auth-section"
+import {
+  clearMedusaAuthCookies,
+  GOOGLE_LOGIN_COUNTRY_CODE_KEY,
+} from "@pradip1995/commerce-auth/util/google-auth-client"
+
+type LoginRequiredModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  countryCode?: string
+  message?: string
+}
+
+/**
+ * Lightweight gated-action modal (wishlist / reviews).
+ * Redirects to /account after optional Google, preserving return URL.
+ */
+export default function LoginRequiredModal({
+  isOpen,
+  onClose,
+  countryCode = "in",
+  message = "Please login to continue.",
+}: LoginRequiredModalProps) {
+  if (!isOpen) return null
+
+  function goToAccount() {
+    try {
+      const returnUrl = `${window.location.pathname}${window.location.search}`
+      localStorage.setItem(
+        "loginRedirectUrl",
+        returnUrl.includes("?")
+          ? `${returnUrl}&login_context=keep`
+          : `${returnUrl}?login_context=keep`
+      )
+      localStorage.setItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY, countryCode)
+      clearMedusaAuthCookies()
+    } catch {
+      // ignore
+    }
+    window.location.href = `/${countryCode}/account`
+  }
+
+  return (
+    <div className="fixed inset-0 z-[99999] flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+        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">
+          <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>
+
+        <div className="mb-4">
+          <GoogleAuthSection countryCode={countryCode} />
+        </div>
+
+        <div className="flex gap-2">
+          <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"
+          >
+            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"
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "login-popup",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "loginPopup",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,403 @@
+/* Sahsha-style first-visit login popup — theme-token driven */
+
+.login-popup {
+  --lp-logo-h: 3rem;
+  position: fixed;
+  inset: 0;
+  z-index: 10100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  pointer-events: none;
+}
+
+html.login-popup-open,
+html.login-popup-open body,
+body.login-popup-open {
+  overflow: hidden !important;
+  overscroll-behavior: none;
+}
+
+.login-popup__backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.login-popup__dialog {
+  position: relative;
+  width: min(56rem, 100%);
+  pointer-events: auto;
+}
+
+.login-popup__close {
+  position: absolute;
+  top: -2.75rem;
+  right: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: 999px;
+  background: var(--color-surface, #fff);
+  color: var(--color-muted, #666);
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.login-popup__panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: min(36rem, calc(100vh - 4rem));
+  background: var(--color-surface, #fff);
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
+}
+
+.login-popup__brand-col {
+  display: none;
+  flex-direction: column;
+  background: var(--color-page-bg, #faf9f7);
+  border-right: 1px solid var(--color-cart-border, #ece7e1);
+  overflow: hidden;
+}
+
+.login-popup__panel-image-wrap {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+}
+
+.login-popup__panel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.login-popup__brand-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  flex: 1;
+  padding: 1.25rem 1.75rem 2rem;
+}
+
+.login-popup__brand-title {
+  font-family: var(--font-heading, inherit);
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--color-heading, #1a1a1a);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.login-popup__features {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.login-popup__feature-card {
+  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-cart-border, #ece7e1);
+  border-radius: 0.75rem;
+  padding: 0.85rem 0.75rem;
+  text-align: center;
+}
+
+.login-popup__feature-icon {
+  display: inline-block;
+  color: var(--color-brand-accent, #8b5a6b);
+  margin-bottom: 0.35rem;
+}
+
+.login-popup__feature-image {
+  margin: 0 auto 0.35rem;
+}
+
+.login-popup__feature-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-heading, #1a1a1a);
+}
+
+.login-popup__feature-text {
+  margin-top: 0.25rem;
+  font-size: 0.65rem;
+  color: var(--color-muted, #737373);
+  line-height: 1.35;
+}
+
+.login-popup__form-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1.5rem 1.25rem 1.25rem;
+}
+
+.login-popup__form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.login-popup__logo-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.login-popup__logo {
+  height: var(--lp-logo-h);
+  width: auto;
+  object-fit: contain;
+}
+
+.login-popup__form-title {
+  font-family: var(--font-heading, inherit);
+  font-size: 1.35rem;
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-heading, #1a1a1a);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.login-popup__form-subtext {
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--color-muted, #737373);
+}
+
+.login-popup__google {
+  width: 100%;
+}
+
+.login-popup__divider {
+  position: relative;
+  text-align: center;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-muted, #999);
+}
+
+.login-popup__divider::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--color-cart-border, #ece7e1);
+}
+
+.login-popup__divider span {
+  position: relative;
+  background: var(--color-surface, #fff);
+  padding: 0 0.75rem;
+}
+
+.login-popup__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.login-popup__form--verify {
+  gap: 1rem;
+  padding-top: 0.5rem;
+}
+
+.login-popup__method-tabs {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.25rem;
+  background: var(--color-surface-muted, #f3f1ee);
+  border-radius: 0.5rem;
+}
+
+.login-popup__method-tab {
+  flex: 1;
+  padding: 0.55rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-muted, #737373);
+  border-radius: 0.35rem;
+}
+
+.login-popup__method-tab.is-active {
+  background: var(--color-surface, #fff);
+  color: var(--color-heading, #1a1a1a);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.login-popup__input {
+  width: 100%;
+  border: 1px solid var(--color-cart-border, #e5e0d8);
+  background: var(--color-surface, #fff);
+  color: var(--color-heading, #1a1a1a);
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.9rem;
+  font-size: 0.9rem;
+}
+
+.login-popup__input:focus {
+  outline: none;
+  border-color: var(--color-brand-primary, #5a2a43);
+}
+
+/* Country code + phone — reuse SplitPhoneInput, restyle to popup tokens */
+.login-popup__phone {
+  width: 100%;
+}
+
+.login-popup__phone .split-phone-input__code-btn,
+.login-popup__phone .split-phone-input__number {
+  height: 2.85rem;
+  border: 1px solid var(--color-cart-border, #e5e0d8);
+  border-radius: 0.5rem;
+  background: var(--color-surface, #fff);
+}
+
+.login-popup__phone .split-phone-input__code-btn:hover,
+.login-popup__phone .split-phone-input__number:hover {
+  background: var(--color-surface-muted, #faf8f5);
+}
+
+.login-popup__phone .split-phone-input__number:focus,
+.login-popup__phone .split-phone-input__code-btn:focus-visible {
+  outline: none;
+  border-color: var(--color-brand-primary, #5a2a43);
+  box-shadow: none;
+}
+
+.login-popup__phone .split-phone-input__dial {
+  color: var(--color-heading, #1a1a1a);
+}
+
+.login-popup__phone .split-phone-input__number-label {
+  color: var(--color-muted, #737373);
+}
+
+.login-popup__phone .split-phone-input__number:focus ~ .split-phone-input__number-label,
+.login-popup__phone
+  .split-phone-input__number:not(:placeholder-shown)
+  ~ .split-phone-input__number-label {
+  color: var(--color-brand-primary, #5a2a43);
+}
+
+.login-popup__phone .split-phone-input__menu {
+  border-color: var(--color-cart-border, #e5e0d8);
+  border-radius: 0.5rem;
+  z-index: 60;
+}
+
+.login-popup__phone .split-phone-input__option-btn:hover,
+.login-popup__phone .split-phone-input__option-btn--selected {
+  background: color-mix(in srgb, var(--color-brand-primary, #5a2a43) 8%, white);
+}
+
+.login-popup__btn {
+  width: 100%;
+  padding: 0.85rem 1rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-radius: 999px;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+}
+
+.login-popup__btn--primary {
+  background: var(--color-brand-primary, #5a2a43);
+  color: var(--color-inverse, #fff);
+}
+
+.login-popup__btn--primary:hover:not(:disabled) {
+  background: var(--color-brand-accent, #8b5a6b);
+}
+
+.login-popup__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.login-popup__message--error {
+  color: var(--color-brand-sale, #b42318);
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.login-popup__otp-hint {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--color-muted, #737373);
+}
+
+.login-popup__otp-target {
+  color: var(--color-heading, #1a1a1a);
+  font-weight: 600;
+}
+
+.login-popup__otp {
+  margin: 0.25rem 0;
+}
+
+.login-popup__verify-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.login-popup__method-toggle {
+  font-size: 0.75rem;
+  color: var(--color-muted, #737373);
+}
+
+.login-popup__method-toggle:hover {
+  color: var(--color-brand-accent, #8b5a6b);
+}
+
+.login-popup__legal {
+  margin-top: 1.25rem;
+  font-size: 0.7rem;
+  line-height: 1.5;
+  text-align: center;
+  color: var(--color-muted, #999);
+}
+
+.login-popup__link {
+  color: var(--color-heading, #1a1a1a);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .login-popup__panel {
+    flex-direction: row;
+    min-height: 28rem;
+  }
+
+  .login-popup__brand-col {
+    display: flex;
+    width: 52%;
+  }
+
+  .login-popup__form-col {
+    width: 48%;
+    padding: 1.75rem 1.75rem 1.5rem;
+  }
+}

package/src/segment.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { LoginPopupProvider } from "./login-popup-provider"
+import LoginPopup from "./login-popup"
+import type { LoginPopupConfig } from "./types"
+
+/**
+ * Site-wide mount used by layout shells.
+ * Renders nothing visible until the auto-show delay (or openPopup()).
+ */
+export default function LoginPopupSegment({
+  config,
+  isLoggedIn = false,
+  countryCode = "in",
+  ...rest
+}: LoginPopupConfig & {
+  config?: LoginPopupConfig | null
+  isLoggedIn?: boolean
+  countryCode?: string
+  enabled?: boolean
+}) {
+  // Support both chrome inline data spread (...fields) and nested `config`
+  const resolved: LoginPopupConfig = {
+    enabled: rest.enabled ?? config?.enabled,
+    showDelayMs: rest.showDelayMs ?? config?.showDelayMs,
+    storageKey: rest.storageKey ?? config?.storageKey,
+    imageSrc: rest.imageSrc ?? config?.imageSrc,
+    logoSrc: rest.logoSrc ?? config?.logoSrc,
+    brandTitle: rest.brandTitle ?? config?.brandTitle,
+    headline: rest.headline ?? config?.headline,
+    subtext: rest.subtext ?? config?.subtext,
+    featureCards: rest.featureCards ?? config?.featureCards,
+    privacyHref: rest.privacyHref ?? config?.privacyHref,
+    termsHref: rest.termsHref ?? config?.termsHref,
+    shopName: rest.shopName ?? config?.shopName,
+  }
+
+  if (resolved.enabled === false) return null
+
+  return (
+    <LoginPopupProvider config={resolved} isLoggedIn={isLoggedIn}>
+      <LoginPopup countryCode={countryCode} />
+    </LoginPopupProvider>
+  )
+}

package/src/types.ts

@@ -0,0 +1,61 @@
+export type LoginPopupFeatureCard = {
+  imageSrc?: string
+  title: string
+  text: string
+}
+
+export type LoginPopupConfig = {
+  enabled?: boolean
+  showDelayMs?: number
+  storageKey?: string
+  imageSrc?: string
+  logoSrc?: string
+  brandTitle?: string
+  headline?: string
+  subtext?: string
+  featureCards?: LoginPopupFeatureCard[]
+  privacyHref?: string
+  termsHref?: string
+  shopName?: string
+}
+
+export const DEFAULT_LOGIN_POPUP_FEATURE_CARDS: LoginPopupFeatureCard[] = [
+  { title: "Customer-first", text: "Putting you at the center" },
+  { title: "Transparent", text: "Honest from the inside out" },
+  { title: "Exclusive", text: "Unlock member-only offers" },
+]
+
+export function normalizeLoginPopupConfig(
+  input?: LoginPopupConfig | null
+): Required<
+  Pick<
+    LoginPopupConfig,
+    | "enabled"
+    | "showDelayMs"
+    | "storageKey"
+    | "brandTitle"
+    | "headline"
+    | "subtext"
+    | "privacyHref"
+    | "termsHref"
+    | "shopName"
+  >
+> &
+  LoginPopupConfig {
+  return {
+    enabled: input?.enabled ?? true,
+    showDelayMs: input?.showDelayMs ?? 8000,
+    storageKey: input?.storageKey ?? "storefront_login_popup_seen",
+    imageSrc: input?.imageSrc || "",
+    logoSrc: input?.logoSrc || "",
+    brandTitle: input?.brandTitle || "Login now",
+    headline: input?.headline || "Unlock exclusive deals",
+    subtext: input?.subtext || "",
+    featureCards: input?.featureCards?.length
+      ? input.featureCards
+      : DEFAULT_LOGIN_POPUP_FEATURE_CARDS,
+    privacyHref: input?.privacyHref || "/privacy-policy",
+    termsHref: input?.termsHref || "/terms-of-use",
+    shopName: input?.shopName || "our store",
+  }
+}