@woodsportal/hubspot-kit 1.0.41-dev.4 → 1.0.41-dev.6

package/templates/scaffold/auth/_nav-sidebar/src/components/layout/portal-sidebar.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { Button } from '@/components/ui/Button'
+import { Routes } from '@/config/routes'
+import { clearClientAuthSession } from '@/features/auth/clear-client-auth-session'
+import { useSignedInEmail } from '@/features/auth/use-signed-in-email'
+import { usePortalSession } from '@/features/auth/use-portal-session'
+import { api } from '@/integrations/woodsportal-sdk'
+
+import { PortalSidebarNav } from './portal-sidebar-nav'
+
+type PortalSidebarProps = {
+  children: ReactNode
+}
+
+export function PortalSidebar({ children }: PortalSidebarProps) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const isAuthenticated = usePortalSession()
+  const { email, isLoading } = useSignedInEmail()
+  const router = useRouter()
+
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+
+  useEffect(() => {
+    if (!mobileOpen) {
+      return
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMobile()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [mobileOpen, closeMobile])
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+    const { me } = api.auth.me({})
+    void me()
+  }, [isAuthenticated])
+
+  const handleLogout = async () => {
+    clearClientAuthSession()
+    try {
+      const { logout } = api.auth.logout({})
+      await logout()
+    } catch {
+      // local state already cleared
+    }
+    router.navigate({ to: Routes.login })
+  }
+
+  const signedInLabel = isLoading ? 'Loading…' : (email ?? 'Signed in')
+
+  const sidebarWidth = collapsed ? 'w-16' : 'w-60'
+  const motionClass = 'motion-reduce:transition-none transition-[width] duration-200 ease-in-out'
+
+  const sidebarPanel = (
+    <aside
+      className={`flex h-full shrink-0 flex-col border-r border-gray-200 bg-white ${sidebarWidth} ${motionClass}`}
+    >
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-4">
+        {!collapsed ? (
+          <span className="truncate text-sm font-semibold text-gray-900">WoodsPortal</span>
+        ) : (
+          <span className="w-full text-center text-sm font-semibold text-gray-900">W</span>
+        )}
+        <button
+          type="button"
+          className="hidden rounded-md p-1 text-gray-500 hover:bg-gray-100 md:inline-flex"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          onClick={() => setCollapsed((value) => !value)}
+        >
+          {collapsed ? '»' : '«'}
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <PortalSidebarNav collapsed={collapsed} onNavigate={closeMobile} />
+      </div>
+
+      {isAuthenticated ? (
+        <div className="border-t border-gray-200 p-3">
+          {!collapsed ? (
+            <p className="mb-2 truncate text-xs text-gray-500" title={signedInLabel}>
+              {signedInLabel}
+            </p>
+          ) : null}
+          <Button
+            type="button"
+            variant="outline"
+            className={`w-full text-xs ${collapsed ? 'px-2' : ''}`}
+            onClick={() => void handleLogout()}
+          >
+            {collapsed ? 'Out' : 'Sign out'}
+          </Button>
+        </div>
+      ) : null}
+    </aside>
+  )
+
+  return (
+    <div className="flex min-h-screen bg-white">
+      <div className="hidden md:flex">{sidebarPanel}</div>
+
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-40 flex md:hidden">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/40"
+            aria-label="Close navigation"
+            onClick={closeMobile}
+          />
+          <div className="relative z-50 flex h-full w-60 flex-col bg-white shadow-lg">{sidebarPanel}</div>
+        </div>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex items-center gap-3 border-b border-gray-200 px-4 py-3 md:hidden">
+          <button
+            type="button"
+            className="rounded-md border border-gray-200 px-2 py-1 text-sm text-gray-700"
+            aria-label="Open navigation"
+            onClick={() => setMobileOpen(true)}
+          >
+            Menu
+          </button>
+          <span className="text-sm font-semibold text-gray-900">WoodsPortal</span>
+        </header>
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

package/templates/scaffold/auth/_nav-top/src/components/Layouts/MainLayout.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+
+import { Link } from '@/components/ui/link'
+import { portalNavItems } from '@/config/portal-nav'
+import { usePortalSession } from '@/features/auth/use-portal-session'
+import { api } from '@/integrations/woodsportal-sdk'
+
+export default function MainLayout({ children }: { children?: ReactNode }) {
+  const isAuthenticated = usePortalSession()
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+    const { me } = api.auth.me({})
+    void me()
+  }, [isAuthenticated])
+
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <span className="text-sm font-semibold text-gray-900">WoodsPortal</span>
+          <nav className="flex flex-wrap items-center gap-4 text-sm">
+            {portalNavItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                activeProps={{ className: 'font-semibold text-gray-900 no-underline' }}
+                activeOptions={{ exact: true }}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">{children}</main>
+    </div>
+  )
+}

package/templates/scaffold/auth/_shared/src/app.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useRef, useState } from 'react'
+import { RouterProvider } from '@tanstack/react-router'
+import { installCrossTabSessionListener } from 'woodsportal-client-sdk'
+
+import { api } from '@/integrations/woodsportal-sdk'
+import * as TanStackQueryProvider from '@/integrations/tanstack-query/root-provider'
+import { env } from '@/env'
+import Loader from '@/components/ui/loader/loader'
+import { skipCurrentPublicPath } from '@/utils/ValidationSchema'
+import { isHubSpotCmsEditor } from '@/hubspot/is-cms-editor'
+import { navigateAfterFullAuth, navigateToLogin } from '@/features/auth/auth-navigation'
+import { isProtectedHashPath, readHashPathname, isPublicAuthRoute } from '@/features/auth/auth-route-paths'
+import { hardReplaceToHashPath } from '@/utils/safe-router-navigation'
+import {
+  isFullyAuthenticatedSession,
+  isMfaPendingSession,
+  recoverMfaGateOnBoot,
+} from '@/features/auth/auth-session'
+import { shouldBootstrapRefreshSession } from '@/features/auth/app-bootstrap-guards'
+import {
+  clearClientAuthSession,
+  registerClientSessionQueryClear,
+} from '@/features/auth/clear-client-auth-session'
+import { Routes } from '@/config/routes'
+import { AUTH_SCAFFOLD_TIER } from '@/config/auth-tier'
+import type { router } from '@/integrations/tanstack-router/router'
+
+const BOOTSTRAP_TIMEOUT_MS = 35_000
+
+type AppProps = {
+  router: typeof router
+}
+
+export function App({ router }: AppProps) {
+  const session = api.auth.session
+  const [isLoading, setIsLoading] = useState(true)
+  const inCmsEditor = isHubSpotCmsEditor()
+  const initialBootstrapDone = useRef(false)
+  const bootstrapStarted = useRef(false)
+
+  useEffect(() => {
+    const queryClient = TanStackQueryProvider.getContext().queryClient
+    registerClientSessionQueryClear(() => {
+      queryClient.cancelQueries()
+      queryClient.clear()
+    })
+    return installCrossTabSessionListener((kind) => {
+      if (kind === 'rev') {
+        clearClientAuthSession({ signalCrossTab: false })
+        queryClient.cancelQueries()
+        queryClient.clear()
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    if (bootstrapStarted.current) {
+      return
+    }
+    bootstrapStarted.current = true
+
+    if (!initialBootstrapDone.current) {
+      setIsLoading(true)
+    }
+
+    let mounted = true
+    const { logout } = api.auth.logout({})
+
+    const redirectProtectedPathToLogin = async (): Promise<void> => {
+      if (!skipCurrentPublicPath() || inCmsEditor) {
+        return
+      }
+      const hashPath = readHashPathname()
+      const routerPath = router?.state?.location?.pathname
+      const currentPath = routerPath && routerPath !== '/' ? routerPath : hashPath
+      const returnHref = router?.state?.location?.href ?? window.location.hash.replace(/^#/, '') ?? ''
+      const redirectPath =
+        currentPath !== Routes.login ? `?r=${encodeURIComponent(returnHref)}` : ''
+      const loginTarget = `${Routes.login}${redirectPath}`
+      await navigateToLogin(router, loginTarget)
+      if (isProtectedHashPath()) {
+        hardReplaceToHashPath(loginTarget)
+      }
+    }
+
+    const teardownAndRedirectToLogin = async (): Promise<void> => {
+      clearClientAuthSession()
+      try {
+        await logout()
+      } catch {
+        // stale session
+      }
+      await redirectProtectedPathToLogin()
+    }
+
+    const runBootstrap = async (): Promise<void> => {
+      // MFA gate recovery on cold load (full tier only)
+      // WPHS_AUTH_FULL
+      if (AUTH_SCAFFOLD_TIER === 'full') {
+        await recoverMfaGateOnBoot()
+      }
+      // /WPHS_AUTH_FULL
+
+      const sessionRefreshExhausted = session.isSessionRefreshExhausted?.() ?? false
+      const refreshToken = session.getRefreshToken()
+      const hasRefresh =
+        !sessionRefreshExhausted &&
+        Boolean(refreshToken) &&
+        !session.isCookieExpired(env.VITE_REFRESH_TOKEN)
+
+      if (
+        !shouldBootstrapRefreshSession({
+          isMfaPendingSession: isMfaPendingSession(),
+          hasRefresh,
+          isPublicAuthRoute: isPublicAuthRoute(readHashPathname()),
+        })
+      ) {
+        if (!hasRefresh && skipCurrentPublicPath() && !inCmsEditor) {
+          await teardownAndRedirectToLogin()
+        }
+        return
+      }
+
+      try {
+        await session.refreshSession({ force: true })
+      } catch {
+        if (!inCmsEditor) {
+          await teardownAndRedirectToLogin()
+        }
+        return
+      }
+
+      if (isFullyAuthenticatedSession()) {
+        const hashPath = readHashPathname()
+        if (hashPath === Routes.twoFa || hashPath === Routes.login) {
+          navigateAfterFullAuth(router)
+        }
+      }
+    }
+
+    const bootstrap = async () => {
+      try {
+        await Promise.race([
+          runBootstrap(),
+          new Promise<never>((_, reject) => {
+            window.setTimeout(() => reject(new Error('bootstrap_timeout')), BOOTSTRAP_TIMEOUT_MS)
+          }),
+        ])
+      } catch (error) {
+        if (!inCmsEditor && skipCurrentPublicPath()) {
+          await teardownAndRedirectToLogin()
+        } else if (error instanceof Error && error.message !== 'bootstrap_timeout') {
+          throw error
+        }
+      } finally {
+        if (mounted) {
+          initialBootstrapDone.current = true
+          setIsLoading(false)
+        }
+      }
+    }
+
+    void bootstrap()
+    return () => {
+      mounted = false
+    }
+  }, [inCmsEditor, router])
+
+  if (isLoading) {
+    return <Loader showText={false} />
+  }
+
+  return (
+    <TanStackQueryProvider.Provider>
+      <RouterProvider router={router} />
+    </TanStackQueryProvider.Provider>
+  )
+}

package/templates/scaffold/auth/_shared/src/components/Layouts/AppLayoutWrapper.tsx

@@ -0,0 +1,38 @@
+import { Outlet, useMatches } from '@tanstack/react-router'
+import { Toaster } from '@/components/ui/Toaster'
+import { layoutMap } from '@/components/Layouts'
+import PrivateRoute from '@/utils/private-route'
+import PublicRoute from '@/utils/public-route'
+
+export default function AppLayoutWrapper() {
+  const matches = useMatches()
+  const match = [...matches].reverse().find((m) => (m.context as { layout?: string })?.layout)
+  const context = (match?.context ?? {}) as {
+    layout?: keyof typeof layoutMap
+    requiresAuth?: boolean
+  }
+
+  const requiresAuth = context.requiresAuth ?? false
+  const RouteGuard = requiresAuth ? PrivateRoute : PublicRoute
+  const LayoutComponent = layoutMap[context.layout ?? 'DefaultLayout'] ?? layoutMap.DefaultLayout
+
+  if (context.layout === 'UnauthorizedLayout') {
+    return (
+      <>
+        <LayoutComponent>
+          <Outlet />
+        </LayoutComponent>
+        <Toaster />
+      </>
+    )
+  }
+
+  return (
+    <RouteGuard>
+      <LayoutComponent>
+        <Outlet />
+      </LayoutComponent>
+      <Toaster />
+    </RouteGuard>
+  )
+}

package/templates/scaffold/auth/_shared/src/components/Layouts/AuthLayout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+export default function AuthLayout({ children }: { children?: ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">{children}</div>
+  )
+}

package/templates/scaffold/auth/_shared/src/components/Layouts/DefaultLayout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export default function DefaultLayout({ children }: { children?: ReactNode }) {
+  return <div className="min-h-screen">{children}</div>
+}

package/templates/scaffold/auth/_shared/src/components/Layouts/UnauthorizedLayout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export default function UnauthorizedLayout({ children }: { children?: ReactNode }) {
+  return <div className="min-h-screen bg-gray-50">{children}</div>
+}

package/templates/scaffold/auth/_shared/src/components/Layouts/index.ts

@@ -0,0 +1,13 @@
+import MainLayout from '@/components/Layouts/MainLayout'
+import AuthLayout from '@/components/Layouts/AuthLayout'
+import DefaultLayout from '@/components/Layouts/DefaultLayout'
+import UnauthorizedLayout from '@/components/Layouts/UnauthorizedLayout'
+
+export const layoutMap = {
+  MainLayout,
+  AuthLayout,
+  DefaultLayout,
+  UnauthorizedLayout,
+} as const
+
+export type LayoutName = keyof typeof layoutMap

package/templates/scaffold/auth/_shared/src/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'default' | 'outline'
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'default', children, ...props }, ref) => {
+    const base =
+      'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition disabled:opacity-50'
+    const styles =
+      variant === 'outline'
+        ? 'border border-gray-300 bg-white text-gray-900 hover:bg-gray-50'
+        : 'bg-[var(--primary-color,#FF7A59)] text-[var(--button-text-color,#FFFFFF)] hover:opacity-90'
+    return (
+      <button ref={ref} className={`${base} ${styles} ${className}`} {...props}>
+        {children}
+      </button>
+    )
+  },
+)
+Button.displayName = 'Button'

package/templates/scaffold/auth/_shared/src/components/ui/Form.tsx

@@ -0,0 +1,22 @@
+import type { FormHTMLAttributes, ReactNode } from 'react'
+
+type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+  children: ReactNode
+}
+
+export function Form({ children, className = '', ...props }: FormProps) {
+  return (
+    <form className={`flex flex-col gap-4 ${className}`} {...props}>
+      {children}
+    </form>
+  )
+}
+
+export function FormField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className="flex flex-col gap-1 text-sm text-gray-700">
+      <span>{label}</span>
+      {children}
+    </label>
+  )
+}

package/templates/scaffold/auth/_shared/src/components/ui/Input.tsx

@@ -0,0 +1,12 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  ({ className = '', ...props }, ref) => (
+    <input
+      ref={ref}
+      className={`w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-orange-500 ${className}`}
+      {...props}
+    />
+  ),
+)
+Input.displayName = 'Input'

package/templates/scaffold/auth/_shared/src/components/ui/Toaster.tsx

@@ -0,0 +1,5 @@
+import { Toaster as SonnerToaster } from 'sonner'
+
+export function Toaster() {
+  return <SonnerToaster position="top-center" richColors closeButton />
+}

package/templates/scaffold/auth/_shared/src/components/ui/link.tsx

@@ -0,0 +1,10 @@
+import { Link as RouterLink, type LinkProps } from '@tanstack/react-router'
+
+export function Link({ className = '', ...props }: LinkProps) {
+  return (
+    <RouterLink
+      className={`text-orange-600 underline-offset-4 hover:underline ${className}`}
+      {...props}
+    />
+  )
+}

package/templates/scaffold/auth/_shared/src/components/ui/loader/loader.tsx

@@ -0,0 +1,18 @@
+interface LoaderProps {
+  className?: string
+  text?: string
+  showText?: boolean
+}
+
+export default function Loader({ className = '', text = 'Loading…', showText = true }: LoaderProps) {
+  return (
+    <div className={`flex min-h-[40vh] flex-col items-center justify-center gap-3 ${className}`}>
+      <div
+        className="h-10 w-10 animate-spin rounded-full border-4 border-orange-200 border-t-orange-600"
+        role="status"
+        aria-label="Loading"
+      />
+      {showText ? <p className="text-sm text-gray-600">{text}</p> : null}
+    </div>
+  )
+}

package/templates/scaffold/auth/_shared/src/config/auth-tier.ts

@@ -0,0 +1,4 @@
+/** Patched by `wp init-auth-scaffold` to `'starter' | 'sso' | 'full'`. */
+export const AUTH_SCAFFOLD_TIER = 'starter' as const
+
+export type AuthScaffoldTier = typeof AUTH_SCAFFOLD_TIER

package/templates/scaffold/auth/_shared/src/config/nav-scaffold.ts

@@ -0,0 +1,4 @@
+/** Set by wp init --nav (top | sidebar). */
+export const NAV_SCAFFOLD_MODE = 'top' as const
+
+export type NavScaffoldMode = typeof NAV_SCAFFOLD_MODE

package/templates/scaffold/auth/_shared/src/config/portal-nav.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@/config/routes'
+
+/** Portal navigation links — edit once; top nav and sidebar both read this file. */
+export const portalNavItems = [
+  { to: Routes.portal, label: 'Portal', requiresAuth: false },
+  { to: Routes.guide, label: 'Guide', requiresAuth: false },
+] as const
+
+export type PortalNavItem = (typeof portalNavItems)[number]

package/templates/scaffold/auth/_shared/src/config/router.ts

@@ -0,0 +1 @@
+export const ROUTER_HISTORY = 'hash' as const

package/templates/scaffold/auth/_shared/src/config/routes.ts

@@ -0,0 +1,10 @@
+/** Route paths — keep in sync with `src/routes/` file routes. */
+export const Routes = {
+  login: '/login',
+  twoFa: '/two-fa',
+  unauthorized: '/unauthorized',
+  ssoLogin: '/login/sso',
+  portal: '/portal',
+  guide: '/guide',
+  app: '/portal',
+} as const

package/templates/scaffold/auth/_shared/src/data/hubSpotContext.ts

@@ -0,0 +1,57 @@
+import { env, isLocal } from '@/env'
+
+declare global {
+  interface Window {
+    hubSpotData?: {
+      hubId?: number | string
+      isInEditor?: boolean
+      isInPreviewer?: boolean
+      [key: string]: unknown
+    }
+  }
+}
+
+const DEFAULT_LOCAL_HUB_ID = 12345678
+
+export function isHubSpotEmbed(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return window.hubSpotData != null
+}
+
+export function shouldUseLocalFixtures(): boolean {
+  return isLocal && !isHubSpotEmbed()
+}
+
+function cmsHubId(): number | string | undefined {
+  const raw = typeof window !== 'undefined' ? window.hubSpotData?.hubId : undefined
+  if (raw == null || String(raw).trim() === '') {
+    return undefined
+  }
+  return raw
+}
+
+export function resolveLocalHubId(): number {
+  const raw = env.VITE_LOCAL_HUB_ID ?? env.VITE_DEV_HUB_ID
+  if (raw != null && raw !== '') {
+    const parsed = Number(raw)
+    if (Number.isFinite(parsed)) {
+      return parsed
+    }
+  }
+  return DEFAULT_LOCAL_HUB_ID
+}
+
+export function resolveHubId(): number | string | undefined {
+  const fromCms = cmsHubId()
+  if (fromCms != null) {
+    return fromCms
+  }
+  if (shouldUseLocalFixtures()) {
+    return resolveLocalHubId()
+  }
+  return undefined
+}
+
+export const hubId = resolveHubId()

package/templates/scaffold/auth/_shared/src/data/sync-sdk-hub-context.ts

@@ -0,0 +1,44 @@
+import {
+  clearStaleIframeRefreshForOtherHubs,
+  migrateLegacyStorageKeys,
+  WP_STORAGE_KEYS,
+} from 'woodsportal-client-sdk'
+import { store } from '@/integrations/woodsportal-sdk'
+import { env } from '@/env'
+import { resolveWoodsPortalApiBaseUrl } from '@/utils/resolve-api-base-url'
+import { isHubSpotEmbed, resolveHubId } from './hubSpotContext'
+
+const { storage } = store
+
+export function syncSdkHubContextFromRuntime(): void {
+  migrateLegacyStorageKeys()
+
+  const resolvedHubId = resolveHubId()
+  const hubKey = WP_STORAGE_KEYS.c.hub
+  const prevData =
+    storage.get<Record<string, unknown>>(hubKey) ||
+    storage.get<Record<string, unknown>>('hubSpotData') ||
+    {}
+  const payload: Record<string, unknown> = {
+    ...prevData,
+    devApiUrl: resolveWoodsPortalApiBaseUrl(),
+  }
+
+  if (resolvedHubId != null && String(resolvedHubId).trim() !== '') {
+    payload.hubId = resolvedHubId
+    clearStaleIframeRefreshForOtherHubs(resolvedHubId)
+  } else {
+    delete payload.hubId
+    if (isHubSpotEmbed() && import.meta.env.PROD) {
+      console.warn('[WoodsPortal] Missing hubSpotData.hubId on HubSpot embed — login will fail')
+    }
+  }
+
+  if (import.meta.env.DEV && env.VITE_DEV_PORTAL_ID != null && env.VITE_DEV_PORTAL_ID !== '') {
+    payload.devPortalId = String(env.VITE_DEV_PORTAL_ID)
+  } else {
+    delete payload.devPortalId
+  }
+
+  storage.set(hubKey, payload)
+}