@easypayment/medusa-paypal 0.1.0

package/src/admin/routes/settings/paypal/connection/page.tsx

@@ -0,0 +1,750 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import PayPalTabs from "../_components/Tabs"
+
+export const config = defineRouteConfig({
+  label: "PayPal Connection",
+  hide: true,
+})
+
+/* ------------------------------------------------------------------ */
+/* HIGH PRIORITY EXECUTION - RUNS BEFORE COMPONENT MOUNTS             */
+/* ------------------------------------------------------------------ */
+
+// 1. Inject Preload Link IMMEDIATELY
+if (typeof window !== "undefined") {
+  const preloadHref =
+    "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"
+
+  const existingPreload = document.head.querySelector(
+    `link[rel="preload"][href="${preloadHref}"]`
+  )
+  if (!existingPreload) {
+    const preloadLink = document.createElement("link")
+    preloadLink.rel = "preload"
+    preloadLink.href = preloadHref
+    preloadLink.as = "script"
+    document.head.appendChild(preloadLink)
+  }
+
+  // 2. Inject PayPal Script IMMEDIATELY (before React renders)
+  const existingScript = document.getElementById(
+    "paypal-partner-js"
+  ) as HTMLScriptElement | null
+  if (!existingScript) {
+    const ppScript = document.createElement("script")
+    ppScript.id = "paypal-partner-js"
+    ppScript.src = preloadHref
+    ppScript.async = true
+    document.head.appendChild(ppScript)
+  }
+}
+
+declare global {
+  interface Window {
+    PAYPAL?: {
+      apps?: {
+        Signup?: {
+          miniBrowser?: { init: () => void }
+          // some partner.js builds expose MiniBrowser (capital M)
+          MiniBrowser?: { closeFlow?: () => void }
+        }
+      }
+    }
+    onboardingCallback?: (authCode: string, sharedId: string) => void
+  }
+}
+
+// Partner.js is now loaded lazily only when needed (removed global injection)
+
+const SERVICE_URL = "/admin/paypal/onboarding-link"
+const CACHE_KEY = "pp_onboard_cache"
+const RELOAD_KEY = "pp_onboard_reloaded_once"
+const CACHE_EXPIRY = 10 * 60 * 1000 // 10 minutes
+
+// ✅ backend endpoint to exchange authCode/sharedId (medusa)
+const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete"
+const STATUS_ENDPOINT = "/admin/paypal/status"
+const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials"
+const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect"
+
+// 3. Immediate Cache Check (runs before React component)
+let cachedUrl: string | null = null
+if (typeof window !== "undefined") {
+  try {
+    const cached = localStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const data = JSON.parse(cached)
+      if (new Date().getTime() - data.ts < CACHE_EXPIRY) {
+        cachedUrl = data.url
+      }
+    }
+  } catch (e) {
+    console.error("Cache read error:", e)
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* REACT COMPONENT                                                    */
+/* ------------------------------------------------------------------ */
+
+export default function PayPalConnectionPage() {
+  const [env, setEnv] = useState<"sandbox" | "live">("sandbox")
+
+  // Sync initial environment from backend
+  useEffect(() => {
+    fetch("/admin/paypal/environment", { method: "GET" })
+      .then((r) => r.json())
+      .then((d) => {
+        const v = d?.environment === "live" ? "live" : "sandbox"
+        setEnv(v)
+      })
+      .catch(() => {})
+  }, [])
+  const [connState, setConnState] = useState<
+    "loading" | "ready" | "connected" | "error"
+  >("loading")
+  const [error, setError] = useState<string | null>(null)
+  const [finalUrl, setFinalUrl] = useState<string>("")
+  const [showManual, setShowManual] = useState(false)
+  const [clientId, setClientId] = useState("")
+  const [secret, setSecret] = useState("")
+  const [merchantId, setMerchantId] = useState("")
+  const [statusInfo, setStatusInfo] = useState<{
+    seller_client_id_masked?: string | null
+    seller_client_secret_masked?: string | null
+    seller_email?: string | null
+  } | null>(null)
+
+  // ✅ onboarding in progress (for disabling UI)
+  const [onboardingInProgress, setOnboardingInProgress] = useState(false)
+
+  const initLoaderRef = useRef<HTMLDivElement>(null)
+  const paypalButtonRef = useRef<HTMLAnchorElement>(null)
+  const errorLogRef = useRef<HTMLDivElement>(null)
+  const runIdRef = useRef(0)
+  const currentRunId = useRef(0)
+
+  // Measure PayPal button width for OR centering (Woo-style)
+  const ppBtnMeasureRef = useRef<HTMLAnchorElement | null>(null)
+  const [ppBtnWidth, setPpBtnWidth] = useState<number | null>(null)
+
+  const canSaveManual = useMemo(() => {
+    return clientId.trim().length > 0 && secret.trim().length > 0
+  }, [clientId, secret])
+
+  const maskValue = useCallback((value: string, visibleChars = 4) => {
+    if (!value) return ""
+    if (value.length <= visibleChars) {
+      return "•".repeat(value.length)
+    }
+    return `${"•".repeat(Math.max(0, value.length - visibleChars))}${value.slice(
+      -visibleChars
+    )}`
+  }, [])
+
+  // Exact copy of fetchFreshLink from original JS (+ reload-once logic ONLY)
+  const fetchFreshLink = useCallback(
+    (runId: number) => {
+      if (initLoaderRef.current) {
+        const loaderText = initLoaderRef.current.querySelector("#loader-text")
+        if (loaderText)
+          loaderText.textContent = "Generating onboarding session..."
+      }
+
+      fetch(SERVICE_URL, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          products: ["PPCP"],
+        }),
+      })
+        .then((r) => r.json())
+        .then((data) => {
+          if (runId !== currentRunId.current) return
+
+          const href = data?.onboarding_url
+          if (!href) {
+            showError("Onboarding URL not returned.")
+            return
+          }
+
+          const finalUrl =
+            href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser"
+
+          localStorage.setItem(
+            CACHE_KEY,
+            JSON.stringify({
+              url: finalUrl,
+              ts: Date.now(),
+            })
+          )
+
+          if (!localStorage.getItem(RELOAD_KEY)) {
+            localStorage.setItem(RELOAD_KEY, "1")
+            window.location.reload()
+            return
+          }
+
+          activatePayPal(finalUrl, runId)
+        })
+        .catch(() => {
+          if (runId !== currentRunId.current) return
+          showError("Unable to connect to service.")
+        })
+    },
+    [env]
+  )
+
+  // Exact copy of showUI from original JS (safe: only init when button exists)
+  const showUI = useCallback(() => {
+    const btn = document.querySelector('[data-paypal-button="true"]')
+    if (btn && window.PAYPAL?.apps?.Signup?.miniBrowser?.init) {
+      window.PAYPAL.apps.Signup.miniBrowser.init()
+    }
+    setConnState("ready")
+  }, [])
+
+  // Exact copy of showError from original JS
+  const showError = useCallback((msg: string) => {
+    setConnState("error")
+    setError(msg)
+  }, [])
+
+  // activatePayPal (keeps PayPal partner.js global injection; waits for PAYPAL then inits)
+  const activatePayPal = useCallback(
+    (url: string, runId: number) => {
+      if (paypalButtonRef.current) {
+        paypalButtonRef.current.href = url
+      }
+      setFinalUrl(url)
+
+      const tryInit = () => {
+        if (runId !== currentRunId.current) return
+        if (window.PAYPAL?.apps?.Signup) {
+          showUI()
+          return
+        }
+        // wait briefly for partner.js to finish loading
+        setTimeout(tryInit, 50)
+      }
+
+      tryInit()
+    },
+    [showUI]
+  )
+
+  // Initialize - runs on mount and env change
+  useEffect(() => {
+    currentRunId.current = ++runIdRef.current
+    const runId = currentRunId.current
+
+    let cancelled = false
+
+    const run = async () => {
+      setConnState("loading")
+      setError(null)
+      setFinalUrl("")
+
+      // 1) If already connected in DB, don't ask to onboard again
+      try {
+        const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
+          method: "GET",
+        })
+        const st = await r.json().catch(() => ({}))
+
+        if (cancelled || runId !== currentRunId.current) return
+
+        setStatusInfo(st)
+
+        const isConnected =
+          st?.status === "connected" && st?.seller_client_id_present === true
+
+        if (isConnected) {
+          setConnState("connected")
+          setShowManual(false)
+          return
+        }
+      } catch (e) {
+        // ignore status errors; proceed with onboarding
+        console.error(e)
+      }
+
+      // 2) Not connected -> continue onboarding flow
+      if (cachedUrl) {
+        console.log("Using prioritized cache...")
+        activatePayPal(cachedUrl, runId)
+      } else {
+        fetchFreshLink(runId)
+      }
+    }
+
+    run()
+
+    return () => {
+      cancelled = true
+      currentRunId.current = 0
+    }
+  }, [env, fetchFreshLink, activatePayPal])
+
+  // ✅ setupOnboarding() behavior (Woo-style) inside callback
+  useLayoutEffect(() => {
+    window.onboardingCallback = async function (authCode: string, sharedId: string) {
+      // Woo sets this; keep safe
+      try {
+        ;(window as any).onbeforeunload = ""
+      } catch {}
+
+      // show blocking state (no new UI components, just disable + loader text)
+      setOnboardingInProgress(true)
+      setConnState("loading")
+      setError(null)
+
+      // post to backend (authCode/sharedId/env)
+      const payload = {
+        authCode,
+        sharedId,
+        env: env === "sandbox" ? "sandbox" : "live",
+      }
+
+      try {
+        const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload),
+        })
+
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "")
+          throw new Error(txt || `Onboarding exchange failed (${res.status})`)
+        }
+
+        // ✅ ONLY NOW close the mini-browser flow
+        try {
+          const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow
+          if (typeof close1 === "function") close1()
+        } catch {}
+        try {
+          const close2 =
+            window.PAYPAL?.apps?.Signup?.miniBrowser &&
+            (window.PAYPAL.apps.Signup.miniBrowser as any).closeFlow
+          if (typeof close2 === "function") close2()
+        } catch {}
+
+        // clear cache so next run fetches new url
+        try {
+          localStorage.removeItem(CACHE_KEY)
+          localStorage.removeItem(RELOAD_KEY)
+        } catch {}
+
+        // Woo does: window.location.href = window.location.href;
+        window.location.href = window.location.href
+      } catch (e: any) {
+        console.error(e)
+        setConnState("error")
+        setError(e?.message || "Exchange failed while saving credentials.")
+        setOnboardingInProgress(false)
+      }
+    }
+
+    return () => {
+      window.onboardingCallback = undefined
+    }
+  }, [env])
+
+  // Measure PayPal button width (for OR centering under button)
+  useLayoutEffect(() => {
+    const el = ppBtnMeasureRef.current
+    if (!el) return
+
+    const update = () => {
+      const w = Math.round(el.getBoundingClientRect().width || 0)
+      if (w > 0) setPpBtnWidth(w)
+    }
+
+    update()
+
+    let ro: ResizeObserver | null = null
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => update())
+      ro.observe(el)
+    } else {
+      window.addEventListener("resize", update)
+    }
+
+    return () => {
+      if (ro) ro.disconnect()
+      else window.removeEventListener("resize", update)
+    }
+  }, [connState, env, finalUrl])
+
+  const handleConnectClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (connState !== "ready" || !finalUrl || onboardingInProgress) {
+      e.preventDefault()
+    }
+  }
+
+  const handleSaveManual = async () => {
+    if (!canSaveManual || onboardingInProgress) return
+    setOnboardingInProgress(true)
+    setConnState("loading")
+    setError(null)
+
+    try {
+      const res = await fetch(SAVE_CREDENTIALS_ENDPOINT, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          clientId: clientId.trim(),
+          clientSecret: secret.trim(),
+        }),
+      })
+
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "")
+        throw new Error(txt || `Save credentials failed (${res.status})`)
+      }
+
+      setConnState("connected")
+      setStatusInfo({
+        seller_client_id_masked: maskValue(clientId.trim()),
+        seller_client_secret_masked: "••••••••",
+      })
+      setShowManual(false)
+
+      try {
+        localStorage.removeItem(CACHE_KEY)
+        localStorage.removeItem(RELOAD_KEY)
+      } catch {}
+    } catch (e: any) {
+      console.error(e)
+      setConnState("error")
+      setError(e?.message || "Failed to save credentials.")
+    } finally {
+      setOnboardingInProgress(false)
+    }
+  }
+
+  const handleDisconnect = async () => {
+    if (onboardingInProgress) return
+    if (!window.confirm("Disconnect PayPal for this environment?")) return
+
+    setOnboardingInProgress(true)
+    setConnState("loading")
+    setError(null)
+    setFinalUrl("")
+    setShowManual(false)
+
+    try {
+      const res = await fetch(DISCONNECT_ENDPOINT, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ environment: env }),
+      })
+
+      if (!res.ok) {
+        const t = await res.text().catch(() => "")
+        throw new Error(t || `Disconnect failed (${res.status})`)
+      }
+
+      try {
+        localStorage.removeItem(CACHE_KEY)
+        localStorage.removeItem(RELOAD_KEY)
+      } catch {}
+
+      // Restart onboarding link generation for current env
+      currentRunId.current = ++runIdRef.current
+      const runId = currentRunId.current
+      fetchFreshLink(runId)
+    } catch (e: any) {
+      console.error(e)
+      setConnState("error")
+      setError(e?.message || "Failed to disconnect.")
+    } finally {
+      setOnboardingInProgress(false)
+    }
+  }
+
+  const handleEnvChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const next = e.target.value as "sandbox" | "live"
+    setEnv(next)
+    cachedUrl = null
+
+    try {
+      await fetch("/admin/paypal/environment", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ environment: next }),
+      })
+    } catch {}
+
+    try {
+      localStorage.removeItem(CACHE_KEY)
+      localStorage.removeItem(RELOAD_KEY)
+    } catch {}
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6">
+        <h1 className="text-xl font-semibold">PayPal Gateway By Easy Payment</h1>
+
+        {/* Tabs header */}
+        <PayPalTabs />
+
+        {/* Main container */}
+        <div className="rounded-md border border-ui-border-base p-4 shadow-sm">
+          <div className="grid grid-cols-1 gap-y-6 md:grid-cols-[260px_1fr] md:items-start">
+            {/* Environment */}
+            <div className="text-sm font-medium pt-2">Environment</div>
+            <div className="max-w-xl">
+              <select
+                value={env}
+                onChange={handleEnvChange}
+                disabled={onboardingInProgress}
+                className="w-full rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm"
+              >
+                <option value="sandbox">Sandbox (Test Mode)</option>
+                <option value="live">Live (Production)</option>
+              </select>
+            </div>
+
+            {/* Connect */}
+            <div className="text-sm font-medium pt-2">
+              {env === "sandbox" ? "Connect to PayPal Sandbox" : "Connect to PayPal Live"}
+            </div>
+
+            <div className="max-w-xl">
+              {connState === "connected" ? (
+                <div>
+                  <div className="text-sm text-green-600 bg-green-50 p-3 rounded border border-green-200">
+                    ✅ Successfully connected to PayPal!
+                    {/* Hidden PayPal button anchor to satisfy partner.js DOM expectations */}
+                    <a
+                      data-paypal-button="true"
+                      data-paypal-onboard-complete="onboardingCallback"
+                      href="#"
+                      style={{ display: "none" }}
+                    >
+                      PayPal
+                    </a>
+                  </div>
+                  <div className="mt-3 rounded-md border border-ui-border-base bg-ui-bg-subtle p-3 text-xs text-ui-fg-subtle">
+                    <div className="font-medium text-ui-fg-base">
+                      Connected PayPal account
+                    </div>
+                    <div className="mt-1">
+                      Email:{" "}
+                      <span className="font-mono text-ui-fg-base">
+                        {statusInfo?.seller_email || "Unavailable"}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="mt-3 flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={handleDisconnect}
+                      disabled={onboardingInProgress}
+                      className="rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      Disconnect
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* Status Loader */}
+                  <div
+                    ref={initLoaderRef}
+                    id="init-loader"
+                    className={`status-msg mb-4 ${
+                      connState !== "loading" ? "hidden" : "block"
+                    }`}
+                  >
+                    <div className="loader inline-block align-middle mr-2"></div>
+                    <span id="loader-text" className="text-sm">
+                      {onboardingInProgress
+                        ? "Configuring connection to PayPal…"
+                        : "Checking connection..."}
+                    </span>
+                  </div>
+
+                  {/* PayPal Button */}
+                  <div className={`${connState === "ready" ? "block" : "hidden"}`}>
+                    {/* Row 1: button (left aligned) */}
+                    <a
+                      ref={(node) => {
+                        paypalButtonRef.current = node
+                        ppBtnMeasureRef.current = node
+                      }}
+                      id="paypal-button"
+                      data-paypal-button="true"
+                      href={finalUrl || "#"}
+                      data-paypal-onboard-complete="onboardingCallback"
+                      onClick={handleConnectClick}
+                      className="btn-paypal"
+                      style={{
+                        borderRadius: "50px",
+                        textDecoration: "none",
+                        display: "inline-block",
+                        fontWeight: "bold",
+                        border: "none",
+                        cursor: onboardingInProgress ? "not-allowed" : "pointer",
+                        opacity: onboardingInProgress ? 0.6 : 1,
+                        pointerEvents: onboardingInProgress ? "none" : "auto",
+                      }}
+                    >
+                      Connect to PayPal
+                    </a>
+
+                    {/* Row 2: OR centered under button width */}
+                    <div
+                      className="mt-2"
+                      style={{
+                        width: ppBtnWidth ? `${ppBtnWidth}px` : "auto",
+                        marginTop: "20px",
+                        marginBottom: "10px",
+                      }}
+                    >
+                      <div className="flex justify-center">
+                        <span className="text-[11px] text-ui-fg-muted leading-none">
+                          OR
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Row 3: manual link aligned to button LEFT */}
+                    <div className="mt-1">
+                      <button
+                        type="button"
+                        onClick={() => setShowManual(!showManual)}
+                        disabled={onboardingInProgress}
+                        className="text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Click here to insert credentials manually
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* If not ready yet, show manual link still */}
+                  <div className={`${connState === "ready" ? "hidden" : "block"} mt-3`}>
+                    <button
+                      type="button"
+                      onClick={() => setShowManual(!showManual)}
+                      disabled={onboardingInProgress}
+                      className="text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      Click here to insert credentials manually
+                    </button>
+                  </div>
+
+                  {/* Error Log */}
+                  <div
+                    ref={errorLogRef}
+                    id="error-log"
+                    className={`mt-4 text-left text-xs bg-red-50 text-red-600 p-3 border border-red-200 rounded ${
+                      connState === "error" && error ? "block" : "hidden"
+                    }`}
+                  >
+                    {error}
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Manual credentials section */}
+            {showManual && (
+              <div className="md:col-span-2">
+                <div className="ml-[260px] max-w-xl mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+                  <div className="flex flex-col gap-1">
+                    <label className="text-sm font-medium">Client ID</label>
+                    <input
+                      type="text"
+                      value={clientId}
+                      onChange={(e) => setClientId(e.target.value)}
+                      disabled={onboardingInProgress}
+                      className="rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50"
+                      placeholder={
+                        env === "sandbox" ? "Sandbox Client ID" : "Live Client ID"
+                      }
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-1">
+                    <label className="text-sm font-medium">Client Secret</label>
+                    <input
+                      type="password"
+                      value={secret}
+                      onChange={(e) => setSecret(e.target.value)}
+                      disabled={onboardingInProgress}
+                      className="rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50"
+                      placeholder={env === "sandbox" ? "Sandbox Secret" : "Live Secret"}
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-1 md:col-span-2">
+                    <label className="text-sm font-medium">Merchant ID (optional)</label>
+                    <input
+                      type="text"
+                      value={merchantId}
+                      onChange={(e) => setMerchantId(e.target.value)}
+                      disabled={onboardingInProgress}
+                      className="rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50"
+                      placeholder="Merchant ID"
+                    />
+                  </div>
+
+                  <div className="md:col-span-2 flex items-center gap-2 mt-2">
+                    <button
+                      type="button"
+                      className="rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed"
+                      onClick={() => setShowManual(false)}
+                      disabled={onboardingInProgress}
+                    >
+                      Cancel
+                    </button>
+
+                    <button
+                      type="button"
+                      className="rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium bg-ui-bg-base hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed"
+                      disabled={!canSaveManual || onboardingInProgress}
+                      onClick={handleSaveManual}
+                    >
+                      Save credentials
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Loader styles */}
+      <style>{`
+        .loader {
+          border: 3px solid #f3f3f3;
+          border-top: 3px solid #0070ba;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+          animation: spin 1s linear infinite;
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  )
+}