@pmate/account-sdk 0.5.4 → 0.6.0

package/src/components/Drawer.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react"
+
+type DrawerAnchor = "left" | "right" | "top" | "bottom"
+
+export interface DrawerProps {
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  anchor?: DrawerAnchor
+  className?: string
+  overlayClassName?: string
+  id?: string
+  style?: React.CSSProperties
+}
+
+const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(" ")
+
+const positionClassMap: Record<DrawerAnchor, string> = {
+  left: "left-0 top-0 h-full",
+  right: "right-0 top-0 h-full",
+  top: "left-0 top-0 w-full",
+  bottom: "bottom-0 left-0 w-full",
+}
+
+const hiddenTransformMap: Record<DrawerAnchor, string> = {
+  left: "-translate-x-full",
+  right: "translate-x-full",
+  top: "-translate-y-full",
+  bottom: "translate-y-full",
+}
+
+export const Drawer = ({
+  open,
+  onClose,
+  children,
+  anchor = "right",
+  className,
+  overlayClassName,
+  id,
+  style,
+}: DrawerProps) => {
+  const [mounted, setMounted] = useState(open)
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+    }
+  }, [open])
+
+  const handleTransitionEnd = () => {
+    if (!open) {
+      setMounted(false)
+    }
+  }
+
+  if (!mounted) return null
+
+  return (
+    <div
+      id={id}
+      className={joinClassNames("fixed inset-0 z-[1002]", overlayClassName)}
+      onClick={onClose}
+    >
+      <div
+        className={joinClassNames(
+          "absolute bg-white transition-transform duration-300",
+          positionClassMap[anchor],
+          open ? "translate-x-0 translate-y-0" : hiddenTransformMap[anchor],
+          className,
+        )}
+        style={style}
+        onClick={(event) => event.stopPropagation()}
+        onTransitionEnd={handleTransitionEnd}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./AuthProviderV2"

package/src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_APP_ID = "@pmate/chat"

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from "./useProfileStepFlow"
+export * from "./useAuthApp"
+export * from "./useAppBackgroundStyle"
+export * from "./useAppConfig"
+export * from "./useIsAuthenticated"

package/src/hooks/useAppBackgroundStyle.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo, useState } from "react"
+import { getWindowSearch, subscribeToLocationChange } from "../utils/location"
+import { useAppConfig } from "./useAppConfig"
+
+export const useAppBackgroundStyle = () => {
+  const [search, setSearch] = useState(getWindowSearch())
+  useEffect(() => {
+    const update = () => setSearch(getWindowSearch())
+    const unsubscribe = subscribeToLocationChange(update)
+    return () => unsubscribe()
+  }, [])
+  const appParam = useMemo(
+    () => new URLSearchParams(search).get("app"),
+    [search]
+  )
+  const { appConfig } = useAppConfig(appParam)
+
+  return useMemo(
+    () => ({
+      background:
+        appConfig?.background || "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)",
+    }),
+    [appConfig]
+  )
+}

package/src/hooks/useAppConfig.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react"
+import { AppService } from "../api/AppService"
+import { DEFAULT_APP_ID } from "../constants"
+import type { AppConfig } from "../types/app"
+import { resolveAppId } from "../utils/resolveAppId"
+
+type AppConfigState = {
+  appConfig: AppConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useAppConfig = (app?: string | null): AppConfigState => {
+  const resolvedApp = resolveAppId(app ?? DEFAULT_APP_ID)
+  const [state, setState] = useState<AppConfigState>({
+    appConfig: null,
+    isLoading: true,
+    error: null,
+  })
+
+  useEffect(() => {
+    let active = true
+    setState({ appConfig: null, isLoading: true, error: null })
+    AppService.getAppConfig(resolvedApp)
+      .then((appConfig) => {
+        if (!active) return
+        setState({ appConfig, isLoading: false, error: null })
+      })
+      .catch((error: unknown) => {
+        if (!active) return
+        setState({
+          appConfig: null,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error("Failed to load app config"),
+        })
+      })
+
+    return () => {
+      active = false
+    }
+  }, [resolvedApp])
+
+  return state
+}

package/src/hooks/useAuthApp.ts

@@ -0,0 +1,165 @@
+import { useCallback, useMemo } from "react"
+import { DEFAULT_APP_ID } from "../constants"
+import { resolveAppId } from "../utils/resolveAppId"
+import type { ProfileStepType } from "../utils/profileStep"
+
+type UseAuthAppOptions = {
+  app?: string
+  redirect?: string
+}
+
+type AuthAppRedirectOptions = {
+  app?: string
+  redirect?: string
+}
+
+type LogoutScope = "app" | "all"
+
+type AuthLogoutRedirectOptions = AuthAppRedirectOptions & {
+  scope?: LogoutScope
+}
+
+type AuthProfileRedirectOptions = AuthAppRedirectOptions & {
+  step?: ProfileStepType
+}
+
+const AUTH_APP_BASE = "https://auth.pmate.chat"
+
+const getDefaultRedirect = () => {
+  if (typeof window === "undefined") {
+    return ""
+  }
+  return window.location.href
+}
+
+export const useAuthApp = (options: UseAuthAppOptions = {}) => {
+  const app = resolveAppId(options.app ?? DEFAULT_APP_ID)
+  const redirect = useMemo(
+    () => options.redirect ?? getDefaultRedirect(),
+    [options.redirect]
+  )
+
+  const buildUrl = useCallback(
+    (path = "/", overrides: AuthAppRedirectOptions = {}) => {
+      const targetRedirect = overrides.redirect ?? redirect
+      const targetApp = overrides.app ?? app
+      const url = new URL(path, AUTH_APP_BASE)
+      if (targetRedirect) {
+        url.searchParams.set("redirect", targetRedirect)
+      }
+      if (targetApp) {
+        url.searchParams.set("app", targetApp)
+      }
+      return url.toString()
+    },
+    [app, redirect]
+  )
+
+  const buildProfileUrl = useCallback(
+    (path: string, overrides: AuthProfileRedirectOptions = {}) => {
+      const url = new URL(buildUrl(path, overrides))
+      if (overrides.step) {
+        url.searchParams.set("step", overrides.step)
+      }
+      return url.toString()
+    },
+    [buildUrl]
+  )
+
+  const buildLogoutUrl = useCallback(
+    (overrides?: AuthLogoutRedirectOptions) => {
+      const url = new URL(buildUrl("/logout", overrides))
+      if (overrides?.scope === "all") {
+        url.searchParams.set("scope", "all")
+      }
+      return url.toString()
+    },
+    [buildUrl]
+  )
+
+  const buildLoginUrl = useCallback(
+    (overrides?: AuthAppRedirectOptions) => buildUrl("/", overrides),
+    [buildUrl]
+  )
+
+  const buildCreateProfileUrl = useCallback(
+    (overrides?: AuthProfileRedirectOptions) =>
+      buildProfileUrl("/create-profile", overrides),
+    [buildProfileUrl]
+  )
+
+  const buildSelectProfileUrl = useCallback(
+    (overrides?: AuthAppRedirectOptions) =>
+      buildUrl("/select-profile", overrides),
+    [buildUrl]
+  )
+
+  const buildEditProfileUrl = useCallback(
+    (overrides?: AuthProfileRedirectOptions) =>
+      buildProfileUrl("/edit-profile", overrides),
+    [buildProfileUrl]
+  )
+
+  const login = useCallback(
+    (overrides?: AuthAppRedirectOptions) => {
+      if (typeof window === "undefined") {
+        return
+      }
+      window.location.assign(buildLoginUrl(overrides))
+    },
+    [buildLoginUrl]
+  )
+
+  const logout = useCallback(
+    (scopeOrOverrides?: LogoutScope | AuthLogoutRedirectOptions) => {
+      if (typeof window === "undefined") {
+        return
+      }
+      const overrides =
+        typeof scopeOrOverrides === "string"
+          ? { scope: scopeOrOverrides }
+          : (scopeOrOverrides ?? {})
+      window.location.assign(buildLogoutUrl(overrides))
+    },
+    [buildLogoutUrl]
+  )
+
+  const redirectToCreateProfile = useCallback(
+    (overrides?: AuthProfileRedirectOptions) => {
+      if (typeof window === "undefined") {
+        return
+      }
+      window.location.assign(buildCreateProfileUrl(overrides))
+    },
+    [buildCreateProfileUrl]
+  )
+
+  const redirectToSelectProfile = useCallback(
+    (overrides?: AuthAppRedirectOptions) => {
+      if (typeof window === "undefined") {
+        return
+      }
+      window.location.assign(buildSelectProfileUrl(overrides))
+    },
+    [buildSelectProfileUrl]
+  )
+
+  const redirectToEditProfile = useCallback(
+    (overrides?: AuthProfileRedirectOptions) => {
+      if (typeof window === "undefined") {
+        return
+      }
+      window.location.assign(buildEditProfileUrl(overrides))
+    },
+    [buildEditProfileUrl]
+  )
+
+  return {
+    app,
+    login,
+    logout,
+    selectProfile: redirectToSelectProfile,
+    createProfile: redirectToCreateProfile,
+    updateProfile: redirectToEditProfile,
+  }
+}

package/src/hooks/useAuthSnapshot.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react"
+import type { AccountSnapshot, AuthBehaviors } from "../types/account.types"
+import { AccountLifecycleState } from "../types/account.types"
+import { AccountManagerEvent, AccountManagerV2 } from "../utils/AccountManagerV2"
+
+const checkAuth = async ({
+  app,
+  behaviors,
+}: {
+  app: string
+  behaviors: AuthBehaviors
+}): Promise<AccountSnapshot> => {
+  const manager = AccountManagerV2.get(app)
+  if (behaviors.requiresAuth === false) {
+    return manager.getSnapshot()
+  }
+
+  try {
+    const account = await manager.loginUrlSessionOverride()
+    if (account) {
+      const profiles = await manager.getProfiles()
+      if (profiles.length > 0) {
+        manager.setSelectedProfile(profiles[0].id)
+      }
+    }
+    return manager.getSnapshot()
+  } catch (error) {
+    console.error(error)
+    return manager.getSnapshot()
+  }
+}
+
+export const useAuthSnapshot = ({
+  app,
+  behaviors,
+}: {
+  app: string
+  behaviors: AuthBehaviors
+}) => {
+  const [loading, setLoading] = useState(true)
+  const [snapshot, setSnapshot] = useState<AccountSnapshot>({
+    state: AccountLifecycleState.Idle,
+    profiles: [],
+    profile: null,
+    accountId: null,
+    account: null,
+    error: null,
+  })
+
+  useEffect(() => {
+    let isActive = true
+    const manager = AccountManagerV2.get(app)
+
+    const refreshSnapshot = async () => {
+      const next = await manager.getSnapshot()
+      if (!isActive) {
+        return
+      }
+      setSnapshot(next)
+    }
+
+    const loadSnapshot = async () => {
+      setLoading(true)
+      const snap = await checkAuth({ app, behaviors })
+      if (!isActive) {
+        return
+      }
+      setSnapshot(snap)
+      setLoading(false)
+    }
+
+    void loadSnapshot()
+    const unsubscribe = manager.on(AccountManagerEvent.StateChange, () => {
+      void refreshSnapshot()
+    })
+
+    return () => {
+      isActive = false
+      unsubscribe()
+    }
+  }, [app, behaviors.authBehavior, behaviors.requiresAuth])
+
+  return { loading, snapshot }
+}

package/src/hooks/useIsAuthenticated.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_APP_ID } from "../constants"
+import { useAuthSnapshot } from "./useAuthSnapshot"
+import { resolveAppId } from "../utils/resolveAppId"
+
+export const useIsAuthenticated = (app?: string) => {
+  const { loading, snapshot } = useAuthSnapshot({
+    app: resolveAppId(app ?? DEFAULT_APP_ID),
+    behaviors: {
+      authBehavior: "prompt",
+      requiresAuth: false,
+    },
+  })
+
+  if (loading) {
+    return false
+  }
+
+  return Boolean(snapshot.account)
+}

package/src/hooks/useProfileStepFlow.ts

@@ -0,0 +1,59 @@
+import { useCallback, useMemo } from "react"
+import { isProfileStepType, ProfileStepType } from "../utils/profileStep"
+import { useAppConfig } from "./useAppConfig"
+
+const DEFAULT_CREATE_STEP: ProfileStepType = "learning-language"
+
+type UseProfileStepFlowParams = {
+  params: URLSearchParams
+}
+
+export const useProfileStepFlow = ({
+  params,
+}: UseProfileStepFlowParams) => {
+  const appParam = params.get("app")
+  const redirectParam = params.get("redirect")
+  const { appConfig } = useAppConfig(appParam)
+  const appProfileSteps = useMemo<ProfileStepType[]>(
+    () =>
+      (appConfig?.profiles ?? [])
+        .map((profile) => profile.type)
+        .filter((type): type is ProfileStepType => isProfileStepType(type)),
+    [appConfig]
+  )
+  const stepParam = params.get("step")
+  const normalizedStep: ProfileStepType | null =
+    appProfileSteps.find((item) => item === stepParam) ?? null
+  const defaultStep: ProfileStepType = appProfileSteps[0] ?? DEFAULT_CREATE_STEP
+  const activeStep: ProfileStepType = normalizedStep ?? defaultStep
+  const createSteps = useMemo<ProfileStepType[]>(() => {
+    return appProfileSteps.length > 0 ? appProfileSteps : [DEFAULT_CREATE_STEP]
+  }, [appProfileSteps])
+  const currentStepIndex = createSteps.indexOf(activeStep)
+  const nextStep =
+    currentStepIndex >= 0 ? createSteps[currentStepIndex + 1] : undefined
+  const isCreateFlowStep = createSteps.includes(activeStep)
+  const buildStepUrl = useCallback(
+    (next: ProfileStepType) => {
+      const search = new URLSearchParams()
+      search.set("step", next)
+      if (appParam) {
+        search.set("app", appParam)
+      }
+      if (redirectParam) {
+        search.set("redirect", redirectParam)
+      }
+      return `/create-profile?${search.toString()}`
+    },
+    [appParam, redirectParam]
+  )
+
+  return {
+    activeStep,
+    appProfileSteps,
+    buildStepUrl,
+    createSteps,
+    isCreateFlowStep,
+    nextStep,
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,59 @@
+import i18next from "i18next"
+import {
+  I18nextProvider,
+  initReactI18next,
+  useTranslation as useI18nTranslation,
+} from "react-i18next"
+import arSA from "../locales/ar-SA.json"
+import deDE from "../locales/de-DE.json"
+import elGR from "../locales/el-GR.json"
+import en from "../locales/en.json"
+import esES from "../locales/es-ES.json"
+import fiFI from "../locales/fi-FI.json"
+import filPH from "../locales/fil-PH.json"
+import frFR from "../locales/fr-FR.json"
+import hiIN from "../locales/hi-IN.json"
+import jaJP from "../locales/ja-JP.json"
+import koKR from "../locales/ko-KR.json"
+import ptBR from "../locales/pt-BR.json"
+import ptPT from "../locales/pt-PT.json"
+import ruRU from "../locales/ru-RU.json"
+import taIN from "../locales/ta-IN.json"
+import ukUA from "../locales/uk-UA.json"
+import zhCN from "../locales/zh-CN.json"
+import zhTW from "../locales/zh-TW.json"
+
+const resources = {
+  en: { translation: en },
+  "ar-SA": { translation: arSA },
+  "de-DE": { translation: deDE },
+  "el-GR": { translation: elGR },
+  "es-ES": { translation: esES },
+  "fi-FI": { translation: fiFI },
+  "fil-PH": { translation: filPH },
+  "fr-FR": { translation: frFR },
+  "hi-IN": { translation: hiIN },
+  "ja-JP": { translation: jaJP },
+  "ko-KR": { translation: koKR },
+  "pt-BR": { translation: ptBR },
+  "pt-PT": { translation: ptPT },
+  "ru-RU": { translation: ruRU },
+  "ta-IN": { translation: taIN },
+  "uk-UA": { translation: ukUA },
+  "zh-CN": { translation: zhCN },
+  "zh-TW": { translation: zhTW },
+} as const
+
+const supportedLngs = Object.keys(resources)
+
+const i18n = i18next.createInstance()
+i18n.use(initReactI18next).init({
+  resources,
+  supportedLngs,
+  lng: "zh-CN",
+  fallbackLng: "zh-CN",
+  interpolation: { escapeValue: false },
+})
+
+export { i18n, I18nextProvider }
+export const useTranslation = () => useI18nTranslation().t

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from "./atoms"
+export * from "./components"
+export * from "./i18n"
+export { DEFAULT_APP_ID } from "./constants"
+export type { AppConfig, ProfileStep } from "./types/app"
+export * from "./hooks"
+export * from "./utils"
+export * from "./api"
+export type { ProfileDraft } from "./types/profile"