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

package/examples/greenfield/module-hybrid-cdn-auth-full/src/integrations/tanstack-query/root-provider.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+})
+
+export function getContext() {
+  return { queryClient }
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/integrations/tanstack-router/router.tsx

@@ -0,0 +1,39 @@
+import {
+  createBrowserHistory,
+  createHashHistory,
+  createRouter,
+  type AnyRouter,
+} from '@tanstack/react-router'
+
+import { ROUTER_HISTORY } from '@/config/router'
+import * as TanStackQueryProvider from '@/integrations/tanstack-query/root-provider'
+import { routeTree } from '@/routeTree.gen'
+
+let routerInstance: AnyRouter | null = null
+
+export function getRouter(): AnyRouter {
+  if (!routerInstance) {
+    const history = ROUTER_HISTORY === 'hash' ? createHashHistory() : createBrowserHistory()
+    routerInstance = createRouter({
+      routeTree,
+      context: {
+        ...TanStackQueryProvider.getContext(),
+      },
+      history,
+      defaultPreload: 'intent',
+      scrollRestoration: true,
+      defaultStructuralSharing: true,
+      defaultPreloadStaleTime: 0,
+    })
+  }
+  return routerInstance
+}
+
+/** Eager router export for dev tooling. */
+export const router = getRouter()
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/integrations/woodsportal-sdk.ts

@@ -0,0 +1,37 @@
+/**
+ * SDK facade — single import surface for app code.
+ * Dependency: woodsportal-client-sdk ^4.0.7-dev.11 (added by template-auth-deps.ts)
+ */
+export {
+  getHttpErrorMessage,
+  isServiceUnavailableError,
+  initializeHttpClient,
+  setSessionLifecycleListener,
+  recoverMfaGateOnBoot,
+  resolveAuthRouteAction,
+  AuthErrorCode,
+  resolveAuthErrorAction,
+  storeMfaPendingAccessToken,
+  readMfaPendingAccessToken,
+  clearMfaPendingAccessToken,
+  hydrateMfaPendingAccessToken,
+} from 'woodsportal-client-sdk/auth'
+export type {
+  HttpClientConfig,
+  LoginBootstrapResponse,
+  MfaMethod,
+  MfaMethodOption,
+  AuthRouteAction,
+  MfaBootRecoveryResult,
+} from 'woodsportal-client-sdk/auth'
+
+import { api as authApi } from 'woodsportal-client-sdk/auth'
+import { api as crmApi, store } from 'woodsportal-client-sdk/crm'
+
+export const api = {
+  auth: authApi.auth,
+  crm: crmApi.crm,
+  navigation: crmApi.navigation,
+}
+
+export { store }

package/examples/greenfield/module-hybrid-cdn-auth-full/src/main.tsx

@@ -0,0 +1,5 @@
+import '@/assets/css/main.dev.css'
+
+import { mountDevPreview } from '@/portal/mount-dev-preview'
+
+void mountDevPreview()

package/examples/greenfield/module-hybrid-cdn-auth-full/src/portal/api-endpoint.ts

@@ -0,0 +1,11 @@
+/**
+ * WoodsPortal REST base URL — baked from .env.stg / .env.prod at CDN build time.
+ * Referenced from app-entry so verify-cdn-api-endpoint.mjs can refuse wrong-tier publishes.
+ */
+export function resolvePortalApiEndpoint(): string {
+  const raw = import.meta.env.VITE_PUBLIC_REST_API_ENDPOINT
+  if (typeof raw !== 'string' || !raw.trim()) {
+    return ''
+  }
+  return raw.replace(/\/$/, '')
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/portal/ensure-portal-cdn-stylesheet.ts

@@ -0,0 +1,115 @@
+declare global {
+  interface Window {
+    hubSpotData?: {
+      assetBaseUrl?: string
+      buildId?: string
+      isInEditor?: boolean
+    }
+    hsInEditor?: boolean
+  }
+}
+
+/** Resolve app.{buildId}.css on the CDN mirror (jsDelivr / custom base). */
+export function portalCdnStylesheetUrl(): string | null {
+  const base = window.hubSpotData?.assetBaseUrl?.replace(/\/$/, '')
+  const buildId = window.hubSpotData?.buildId?.trim()
+  if (!base || !buildId) {
+    return null
+  }
+  return `${base}/app.${buildId}.css`
+}
+
+function isHubSpotCmsEditor(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return (
+    window.hubSpotData?.isInEditor === true ||
+    window.hsInEditor === true
+  )
+}
+
+/** True when HubSpot already loaded merged module.css with dw-prefixed portal utilities. */
+export function hasPrefixedPortalStylesLoaded(): boolean {
+  if (typeof document === 'undefined') {
+    return false
+  }
+
+  for (const link of document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')) {
+    if (/module\.css/i.test(link.href)) {
+      return true
+    }
+  }
+
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        const rules = sheet.cssRules
+        for (let i = 0; i < Math.min(rules.length, 100); i++) {
+          const text = rules[i]?.cssText ?? ''
+          if (text.includes('dw\\:') || text.includes('.dw:')) {
+            return true
+          }
+        }
+      } catch {
+        // Cross-origin stylesheets are not readable.
+      }
+    }
+  } catch {
+    // ignore
+  }
+
+  return false
+}
+
+/** Editor-only fallback when module.css did not load (external CDN CSS blocked in iframe). */
+export function needsPortalCdnStylesheetFallback(): boolean {
+  if (!isHubSpotCmsEditor()) {
+    return false
+  }
+  return !hasPrefixedPortalStylesLoaded()
+}
+
+function waitForStylesheet(link: HTMLLinkElement): Promise<void> {
+  if (link.sheet) {
+    return Promise.resolve()
+  }
+
+  return new Promise((resolve) => {
+    link.addEventListener('load', () => resolve(), { once: true })
+    link.addEventListener('error', () => resolve(), { once: true })
+  })
+}
+
+/** Inject CDN app.{buildId}.css when HubSpot editor preview skipped module.css. */
+export async function ensurePortalCdnStylesheet(): Promise<void> {
+  const href = portalCdnStylesheetUrl()
+  if (!href) {
+    return
+  }
+
+  const marker = 'data-portal-cdn-css'
+  const existing = document.querySelector<HTMLLinkElement>(`link[${marker}]`)
+  if (existing) {
+    if (existing.href === href) {
+      await waitForStylesheet(existing)
+      return
+    }
+    existing.remove()
+  }
+
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.crossOrigin = 'anonymous'
+  link.setAttribute(marker, 'true')
+  document.head.appendChild(link)
+  await waitForStylesheet(link)
+}
+
+export async function ensurePortalCdnStylesheetIfNeeded(): Promise<void> {
+  if (!needsPortalCdnStylesheetFallback()) {
+    return
+  }
+  await ensurePortalCdnStylesheet()
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/portal/mount-dev-preview.tsx

@@ -0,0 +1,12 @@
+import { mountGreenfieldDev } from '../../.wphs/.kit-bootstrap-greenfield.tsx'
+
+import { App } from '@/app'
+import { getPortalRouter, mountPortal } from '@/portal/mount-portal'
+
+/** Local dev: module-config overlay + auth-aware App shell. */
+export async function mountDevPreview() {
+  await mountGreenfieldDev({
+    beforePreview: () => mountPortal({ skipAppRender: true }),
+    preview: <App router={getPortalRouter()} />,
+  })
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/portal/mount-portal.tsx

@@ -0,0 +1,57 @@
+import { createRoot } from 'react-dom/client'
+import type { AnyRouter } from '@tanstack/react-router'
+
+import { configureWoodsPortalSdk } from '@/integrations/configure-woodsportal-sdk'
+import { syncSdkHubContextFromRuntime } from '@/data/sync-sdk-hub-context'
+import { App } from '@/app'
+import { getRouter } from '@/integrations/tanstack-router/router'
+
+export type MountPortalOptions = {
+  includeGlobalStyles?: boolean
+  skipRuntimeCss?: boolean
+  skipAppRender?: boolean
+}
+
+let portalRouter: AnyRouter | null = null
+
+/** Lazy router — created after optional SSO URL normalization. */
+export function getPortalRouter(): AnyRouter {
+  if (!portalRouter) {
+    portalRouter = getRouter()
+  }
+  return portalRouter
+}
+
+/** @deprecated Prefer getPortalRouter() after mount/bootstrap. */
+export const router = new Proxy({} as AnyRouter, {
+  get(_target, prop) {
+    return Reflect.get(getPortalRouter(), prop)
+  },
+})
+
+/** Mount the portal into `#app` with SDK bootstrap and router. */
+export async function mountPortal(options: MountPortalOptions = {}) {
+  const { skipAppRender = false } = options
+
+  syncSdkHubContextFromRuntime()
+  configureWoodsPortalSdk()
+
+    const { clearLegacySsoCallbackInFlight, ensureSsoCallbackRoute } = await import(
+    '@/features/auth/sso-callback'
+  )
+  clearLegacySsoCallbackInFlight()
+  ensureSsoCallbackRoute()
+  
+  const activeRouter = getPortalRouter()
+
+  if (skipAppRender) {
+    return
+  }
+
+  const rootElement = document.getElementById('app')
+  if (!rootElement) {
+    return
+  }
+
+  createRoot(rootElement).render(<App router={activeRouter} />)
+}

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routeTree.gen.ts

@@ -0,0 +1,182 @@
+/* eslint-disable */
+// @ts-nocheck
+// TanStack Router generated route tree (starter + SSO + MFA tier).
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as UnauthorizedRouteImport } from './routes/unauthorized'
+import { Route as GuideRouteImport } from './routes/guide'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AuthLoginRouteImport } from './routes/_auth/login'
+import { Route as AuthLoginSsoRouteImport } from './routes/_auth/login/sso'
+import { Route as AuthTwoFaRouteImport } from './routes/_auth/two-fa'
+import { Route as AppPortalRouteImport } from './routes/_app/portal'
+
+const UnauthorizedRoute = UnauthorizedRouteImport.update({
+  id: '/unauthorized',
+  path: '/unauthorized',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const GuideRoute = GuideRouteImport.update({
+  id: '/guide',
+  path: '/guide',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRoute = AuthLoginRouteImport.update({
+  id: '/_auth/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginSsoRoute = AuthLoginSsoRouteImport.update({
+  id: '/_auth/login/sso',
+  path: '/sso',
+  getParentRoute: () => AuthLoginRoute,
+} as any)
+
+const AuthTwoFaRoute = AuthTwoFaRouteImport.update({
+  id: '/_auth/two-fa',
+  path: '/two-fa',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AppPortalRoute = AppPortalRouteImport.update({
+  id: '/_app/portal',
+  path: '/portal',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRouteWithChildren = AuthLoginRoute._addFileChildren({
+  AuthLoginSsoRoute,
+})
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/_auth/login': typeof AuthLoginRouteWithChildren
+  '/_auth/login/sso': typeof AuthLoginSsoRoute
+  '/_auth/two-fa': typeof AuthTwoFaRoute
+  '/_app/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  id:
+    | '__root__'
+    | '/'
+    | '/guide'
+    | '/_auth/login'
+    | '/_auth/login/sso'
+    | '/_auth/two-fa'
+    | '/_app/portal'
+    | '/unauthorized'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GuideRoute: typeof GuideRoute
+  AuthLoginRoute: typeof AuthLoginRouteWithChildren
+  AuthTwoFaRoute: typeof AuthTwoFaRoute
+  AppPortalRoute: typeof AppPortalRoute
+  UnauthorizedRoute: typeof UnauthorizedRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/unauthorized': {
+      id: '/unauthorized'
+      path: '/unauthorized'
+      fullPath: '/unauthorized'
+      preLoaderRoute: typeof UnauthorizedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/guide': {
+      id: '/guide'
+      path: '/guide'
+      fullPath: '/guide'
+      preLoaderRoute: typeof GuideRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/_auth/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof AuthLoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login/sso': {
+      id: '/_auth/login/sso'
+      path: '/sso'
+      fullPath: '/login/sso'
+      preLoaderRoute: typeof AuthLoginSsoRouteImport
+      parentRoute: typeof AuthLoginRouteImport
+    }
+    '/two-fa': {
+      id: '/_auth/two-fa'
+      path: '/two-fa'
+      fullPath: '/two-fa'
+      preLoaderRoute: typeof AuthTwoFaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/portal': {
+      id: '/_app/portal'
+      path: '/portal'
+      fullPath: '/portal'
+      preLoaderRoute: typeof AppPortalRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute,
+  GuideRoute,
+  AuthLoginRoute: AuthLoginRouteWithChildren,
+  AuthTwoFaRoute,
+  AppPortalRoute,
+  UnauthorizedRoute,
+}
+
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/__root.tsx

@@ -0,0 +1,12 @@
+import { createRootRouteWithContext } from '@tanstack/react-router'
+
+import AppLayoutWrapper from '@/components/Layouts/AppLayoutWrapper'
+import { Provider } from '@/integrations/tanstack-query/root-provider'
+
+export const Route = createRootRouteWithContext()({
+  component: () => (
+    <Provider>
+      <AppLayoutWrapper />
+    </Provider>
+  ),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/_app/portal.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterProtectedPage } from '@/features/starter/components/starter-protected-page'
+
+export const Route = createFileRoute('/_app/portal')({
+  component: StarterProtectedPage,
+  beforeLoad: () => ({
+    layout: 'MainLayout' as const,
+    requiresAuth: true,
+  }),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/_auth/login/sso.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import Loader from '@/components/ui/loader/loader'
+import { useSsoCallbackHandler } from '@/features/auth/use-sso-callback-handler'
+
+function SsoCallbackPage() {
+  const router = useRouter()
+  const search = Route.useSearch()
+  const { isLoading } = useSsoCallbackHandler({ router, routeSearch: search })
+
+  if (isLoading) {
+    return <Loader text="Completing SSO sign-in…" />
+  }
+
+  return null
+}
+
+export const Route = createFileRoute('/_auth/login/sso')({
+  component: SsoCallbackPage,
+  validateSearch: (search: Record<string, unknown>) => ({
+    code: typeof search.code === 'string' ? search.code : undefined,
+    state: typeof search.state === 'string' ? search.state : undefined,
+  }),
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/_auth/login.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterLogin } from '@/features/auth/components/starter-login'
+
+export const Route = createFileRoute('/_auth/login')({
+  component: StarterLogin,
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/_auth/two-fa.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Form, FormField } from '@/components/ui/Form'
+import { Input } from '@/components/ui/Input'
+import Loader from '@/components/ui/loader/loader'
+import { handleAuthLoginResponse } from '@/features/auth/login-session-bridge'
+import { useMfaLoginOtpFlow } from '@/features/auth/use-mfa-login-otp-flow'
+import { clearMfaPendingLoginSession } from '@/features/auth/auth-session'
+import { Routes } from '@/config/routes'
+
+function TwoFaPage() {
+  const router = useRouter()
+  const {
+    otp,
+    setOtp,
+    destination,
+    isSending,
+    isVerifying,
+    resendSecondsLeft,
+    sendOtp,
+    verifyOtp,
+  } = useMfaLoginOtpFlow()
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const response = await verifyOtp()
+    if (!response) {
+      return
+    }
+    const result = await handleAuthLoginResponse(response, router)
+    if (result.success && !result.mfaRequired) {
+      toast.success('Signed in')
+    }
+  }
+
+  if (isSending && !destination) {
+    return <Loader text="Sending verification code…" />
+  }
+
+  return (
+    <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <h1 className="mb-2 text-xl font-semibold text-gray-900">Two-factor authentication</h1>
+      <p className="mb-6 text-sm text-gray-600">
+        Enter the code sent to {destination ?? 'your registered contact'}.
+      </p>
+      <Form onSubmit={onSubmit}>
+        <FormField label="Verification code">
+          <Input
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={otp}
+            onChange={(e) => setOtp(e.target.value)}
+            placeholder="000000"
+          />
+        </FormField>
+        <Button type="submit" className="w-full" disabled={isVerifying}>
+          {isVerifying ? 'Verifying…' : 'Verify'}
+        </Button>
+      </Form>
+      <div className="mt-4 flex items-center justify-between text-sm">
+        <button
+          type="button"
+          className="text-orange-600 disabled:text-gray-400"
+          disabled={resendSecondsLeft > 0 || isSending}
+          onClick={() => void sendOtp()}
+        >
+          {resendSecondsLeft > 0 ? `Resend in ${resendSecondsLeft}s` : 'Resend code'}
+        </button>
+        <button
+          type="button"
+          className="text-gray-600"
+          onClick={() => {
+            clearMfaPendingLoginSession()
+            router.navigate({ to: Routes.login })
+          }}
+        >
+          Back to login
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/_auth/two-fa')({
+  component: TwoFaPage,
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/guide.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterGuidePage } from '@/features/starter/components/starter-guide-page'
+
+export const Route = createFileRoute('/guide')({
+  component: StarterGuidePage,
+  beforeLoad: () => ({
+    layout: 'MainLayout' as const,
+  }),
+})

package/examples/greenfield/module-hybrid-cdn-auth-full/src/routes/index.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { Routes } from '@/config/routes'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    throw redirect({ to: Routes.guide })
+  },
+})