@spacemade/ui 0.0.1

package/src/lib/next-router.ts

@@ -0,0 +1,164 @@
+'use client'
+
+import { useCallback, useEffect, useMemo } from 'react'
+import { useParams, usePathname, useRouter as useAppRouter, useSearchParams } from 'next/navigation'
+
+type RouteEvent = 'routeChangeStart' | 'routeChangeComplete' | 'routeChangeError'
+type Listener = (...args: any[]) => void
+
+const listenerMap: Record<RouteEvent, Set<Listener>> = {
+  routeChangeStart: new Set<Listener>(),
+  routeChangeComplete: new Set<Listener>(),
+  routeChangeError: new Set<Listener>(),
+}
+
+const events = {
+  on(event: RouteEvent, cb: Listener) {
+    listenerMap[event].add(cb)
+  },
+  off(event: RouteEvent, cb: Listener) {
+    listenerMap[event].delete(cb)
+  },
+  emit(event: RouteEvent, ...args: any[]) {
+    listenerMap[event].forEach((cb) => {
+      try {
+        cb(...args)
+      } catch {
+        // keep navigation flow if one listener throws
+      }
+    })
+  },
+}
+
+type HrefInput =
+  | string
+  | {
+      pathname?: string
+      query?: Record<string, string | string[] | number | boolean | null | undefined>
+    }
+
+const toHref = (value: HrefInput) => {
+  if (typeof value === 'string') return value
+
+  const pathname = value.pathname || '/'
+  const query = value.query || {}
+  const params = new URLSearchParams()
+  Object.entries(query).forEach(([key, val]) => {
+    if (val === null || val === undefined || val === '') return
+    if (Array.isArray(val)) {
+      val.forEach((item) => params.append(key, String(item)))
+      return
+    }
+    params.set(key, String(val))
+  })
+
+  const qs = params.toString()
+  return qs ? `${pathname}?${qs}` : pathname
+}
+
+const buildQuery = (
+  params: Record<string, string | string[]>,
+  searchParams: URLSearchParams
+): Record<string, string | string[]> => {
+  const query: Record<string, string | string[]> = { ...params }
+
+  for (const [key, value] of searchParams.entries()) {
+    const existing = query[key]
+    if (existing === undefined) {
+      query[key] = value
+      continue
+    }
+
+    if (Array.isArray(existing)) {
+      query[key] = [...existing, value]
+      continue
+    }
+
+    query[key] = [existing, value]
+  }
+
+  return query
+}
+
+export type NextRouterCompat = {
+  push: (href: HrefInput, as?: string, options?: { shallow?: boolean; scroll?: boolean }) => Promise<boolean>
+  replace: (href: HrefInput, as?: string, options?: { shallow?: boolean; scroll?: boolean }) => Promise<boolean>
+  back: () => void
+  forward: () => void
+  prefetch: (href: string) => Promise<void>
+  reload: () => void
+  pathname: string
+  route: string
+  asPath: string
+  query: Record<string, string | string[]>
+  isReady: boolean
+  events: typeof events
+}
+
+export const useRouter = (): NextRouterCompat => {
+  const appRouter = useAppRouter()
+  const pathname = usePathname() || '/'
+  const params = useParams()
+  const searchParams = useSearchParams()
+
+  const query = useMemo(() => {
+    const baseParams: Record<string, string | string[]> = {}
+    Object.entries(params || {}).forEach(([key, value]) => {
+      if (typeof value === 'string' || Array.isArray(value)) {
+        baseParams[key] = value
+      }
+    })
+
+    return buildQuery(baseParams, new URLSearchParams(searchParams?.toString() || ''))
+  }, [params, searchParams])
+
+  const asPath = useMemo(() => {
+    const qs = searchParams?.toString()
+    return qs ? `${pathname}?${qs}` : pathname
+  }, [pathname, searchParams])
+
+  useEffect(() => {
+    events.emit('routeChangeComplete', asPath, { shallow: false })
+  }, [asPath])
+
+  const push = useCallback(async (href: HrefInput, _as?: string, options?: { shallow?: boolean; scroll?: boolean }) => {
+    const url = toHref(href)
+    events.emit('routeChangeStart', url, { shallow: !!options?.shallow })
+    appRouter.push(url, { scroll: options?.scroll })
+    return true
+  }, [appRouter])
+
+  const replace = useCallback(async (href: HrefInput, _as?: string, options?: { shallow?: boolean; scroll?: boolean }) => {
+    const url = toHref(href)
+    events.emit('routeChangeStart', url, { shallow: !!options?.shallow })
+    appRouter.replace(url, { scroll: options?.scroll })
+    return true
+  }, [appRouter])
+
+  const prefetch = useCallback(async (href: string) => {
+    await appRouter.prefetch(href)
+  }, [appRouter])
+
+  const back = useCallback(() => appRouter.back(), [appRouter])
+  const forward = useCallback(() => appRouter.forward(), [appRouter])
+  const reload = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.location.reload()
+    }
+  }, [])
+
+  return {
+    push,
+    replace,
+    back,
+    forward,
+    prefetch,
+    reload,
+    pathname,
+    route: pathname,
+    asPath,
+    query,
+    isReady: true,
+    events,
+  }
+}

package/src/lib/routes.ts

@@ -0,0 +1,36 @@
+import { isModuleEnabled, type ModuleKey } from '../config/modules'
+
+const routeToModule: Array<{ prefix: string; key: ModuleKey }> = [
+  { prefix: '/activity', key: 'activity' },
+  { prefix: '/addresses', key: 'addresses' },
+  { prefix: '/forms', key: 'forms' },
+  { prefix: '/invoices', key: 'invoices' },
+  { prefix: '/media', key: 'media' },
+  { prefix: '/posts', key: 'posts' },
+  { prefix: '/products', key: 'products' },
+  { prefix: '/projects', key: 'projects' },
+  { prefix: '/orgs', key: 'orgs' },
+  { prefix: '/providers', key: 'providers' },
+  { prefix: '/purchases', key: 'purchases' },
+  { prefix: '/sites', key: 'sites' },
+  { prefix: '/subscriptions', key: 'subscriptions' },
+  { prefix: '/tags', key: 'tags' },
+  { prefix: '/tickets', key: 'tickets' },
+  { prefix: '/usage', key: 'usage' },
+  { prefix: '/users', key: 'users' },
+  { prefix: '/pricing', key: 'pricing' },
+  { prefix: '/settings', key: 'settings' },
+  { prefix: '/admin', key: 'admin' },
+  { prefix: '/storage', key: 'storage' },
+  { prefix: '/blog', key: 'blog' },
+  { prefix: '/story', key: 'story' },
+]
+
+export const isRouteAllowed = (pathname: string): boolean => {
+  const match = routeToModule.find(
+    (item) => pathname === item.prefix || pathname.startsWith(`${item.prefix}/`)
+  )
+
+  if (!match) return true
+  return isModuleEnabled(match.key)
+}

package/src/lib/security.ts

@@ -0,0 +1,19 @@
+import type { ModuleKey } from '../config/modules'
+import type { PermissionAction, AppRole, OrgRole } from '../helpers/permissions'
+import type { SessionSnapshot } from './auth'
+
+const isPrivileged = (role: AppRole, orgRole: OrgRole) => {
+  return role === 'owner' || role === 'admin' || orgRole === 'owner' || orgRole === 'admin'
+}
+
+const anonymousAllowed = new Set<ModuleKey>(['pricing'])
+
+export const canAccessRouteModule = (
+  session: SessionSnapshot,
+  moduleKey: ModuleKey,
+  _action: PermissionAction = 'read'
+) => {
+  if (moduleKey === 'admin') return isPrivileged(session.role, session.orgRole)
+  if (session.userId) return true
+  return anonymousAllowed.has(moduleKey)
+}

package/src/pages/404.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react'
+import { GetStaticProps } from 'next'
+import { publicRuntimeConfig } from '@config/runtime'
+import { normalizePathTrailingSlash } from 'next/dist/client/normalize-trailing-slash'
+import { getClientBuildManifest } from 'next/dist/client/route-loader'
+import { isDynamicRoute } from 'next/dist/shared/lib/router/utils/is-dynamic'
+import { parseRelativeUrl } from 'next/dist/shared/lib/router/utils/parse-relative-url'
+import { getRouteRegex } from 'next/dist/shared/lib/router/utils/route-regex'
+import Link from 'next/link'
+import { NextRouter, useRouter } from 'next/router'
+import { AppEnvironments } from '@enum/AppEnvironments'
+import { PageProps } from '@helpers/types/page-props'
+
+async function getDoesLocationMatchPage(location: string) {
+	const pages = await getPageList()
+	let parsed = parseRelativeUrl(location)
+	let { pathname } = parsed
+	return pathMatchesPage(pathname, pages)
+}
+
+async function getPageList() {
+	if (publicRuntimeConfig.appEnvironment === AppEnvironments.dev) {
+		if (typeof window !== 'undefined' && window.__DEV_PAGES_MANIFEST) {
+			return window.__DEV_PAGES_MANIFEST.pages
+		}
+	} else {
+		const { sortedPages } = await getClientBuildManifest()
+		return sortedPages
+	}
+	return []
+}
+
+function pathMatchesPage(pathname: string, pages: string[]) {
+	const cleanPathname = normalizePathTrailingSlash(pathname)
+	if (pages.includes(cleanPathname)) {
+		return true
+	}
+	const page = pages.find(
+		(page) => isDynamicRoute(page) && getRouteRegex(page).re.test(cleanPathname)
+	)
+	if (page) {
+		return true
+	}
+	return false
+}
+
+function weAreLost(router: NextRouter) {
+	return router.pathname !== router.asPath
+}
+
+export const getStaticProps: GetStaticProps<PageProps> = async () => {
+	return {
+		props: {
+			pageTitle: 'Page not found',
+		},
+	}
+}
+
+export default function PageNotFound() {
+	const router = useRouter()
+	const [isNotFound, setIsNotFound] = React.useState(false)
+
+	const processLocationAndRedirect = async (router: NextRouter) => {
+		if (weAreLost(router)) {
+			const targetIsValidPage = await getDoesLocationMatchPage(router.asPath)
+			if (targetIsValidPage) {
+				await router.replace(router.asPath)
+				return
+			}
+		}
+		setIsNotFound(true)
+	}
+
+	React.useEffect(() => {
+		if (router.isReady) {
+			processLocationAndRedirect(router)
+		}
+	}, [router])
+
+	if (!isNotFound) return null
+
+	return (
+		<>
+			<div className='mw-xs-500p text-center mx-auto'>
+				<div className='w-md-500p mx-auto'>
+				{/*
+					<img src={404Image} alt='Detective' className='img-fluid' />
+				*/}
+				</div>
+				<h2 className='fs-xxl'>404</h2>
+				<h1 className='h2 mb-0'>This page is missing!</h1>
+				<p className='lead pt-3'>{`It's elementary: we can't find what you're looking for.`}</p>
+				<Link
+					href={`/`}
+					className='btn link btn-primary text-white rounded-xl mt-2'
+					aria-label='Navigate back to home'
+				>
+					Go home, Holmes
+				</Link>
+			</div>
+		</>
+	)
+}

package/src/pages/500.tsx

@@ -0,0 +1,26 @@
+import type { NextPage } from 'next'
+import Button from '@components/common/button/Button'
+import { PageProps } from '@helpers/types/page-props'
+
+const Error500: NextPage<PageProps> = () => (
+	<>
+		<div className='mw-xs-500p text-center mx-auto'>
+			<h1 className='fs-xxl'>500</h1>
+			<h2>Internal server error</h2>
+			<p className='lead'>
+				Sorry, something went wrong. Try to refresh this page or feel free to
+				contact us if the problem persists.
+			</p>
+			<Button
+				onClick={() => window?.location.reload()}
+				color='primary'
+				className='text-white'
+				aria-label='Reload Page'
+			>
+				Reload
+			</Button>
+		</div>
+	</>
+)
+
+export default Error500

package/src/pages/_app.tsx

@@ -0,0 +1,87 @@
+import type { AppProps } from 'next/app'
+import { createElement, useEffect, useRef } from 'react'
+import type { ComponentType } from 'react'
+import { Provider } from 'react-redux'
+import { setupListeners } from '@reduxjs/toolkit/query'
+import { compose } from 'redux'
+import { makeStore } from '@store/store'
+import DefaultMetadata from '@components/head/DefaultMetadata'
+import PageSeo from '@components/head/PageSeo'
+import WithCustomerIO from '@components/hoc/WithCustomerIO'
+import WithGTM from '@components/hoc/WithGTM'
+import WithGlobalContext from '@components/hoc/WithGlobalContext'
+import TopNav from '@components/nav/TopNav'
+import { PageProps } from '@helpers/types/page-props'
+import '../sass/app.scss'
+import AuthBootstrap from '@components/auth/AuthBootstrap'
+import 'bootstrap-icons/font/bootstrap-icons.css'
+
+declare global {
+  interface Window {
+    __OSIRUS_REDUX_STORE__?: unknown;
+    __OSIRUS_RTKQ_LISTENERS__?: boolean;
+  }
+}
+
+type Store = ReturnType<typeof makeStore>
+
+type AppContentProps = AppProps & PageProps & {
+  reduxStore: Store
+}
+
+function AppContent({ Component, pageProps, reduxStore }: AppContentProps) {
+  useEffect(() => {
+    window.__OSIRUS_REDUX_STORE__ = reduxStore
+    if (!window.__OSIRUS_RTKQ_LISTENERS__) {
+      setupListeners((reduxStore as any).dispatch)
+      window.__OSIRUS_RTKQ_LISTENERS__ = true
+    }
+  }, [reduxStore])
+
+	return (
+		<>
+			<DefaultMetadata />
+
+			<PageSeo
+				title={pageProps.pageTitle || undefined}
+				description={pageProps.pageDescription || undefined}
+				furlImageUrl={pageProps.pageSocialImage || undefined}
+				furlImageAltText={pageProps.furlImageAltText || undefined}
+				articleProps={pageProps.articleProps}
+				profileProps={pageProps.profileProps}
+				breadcrumbSchema={pageProps.breadcrumbSchema}
+			/>
+
+			<AuthBootstrap />
+			
+			<div className={`${!pageProps.excludeTopNav ? 'body' : ''}`}>
+				{!pageProps.excludeTopNav && (
+					<TopNav hideLinks={pageProps.hideTopNavLinks} />
+				)}
+				<Component {...pageProps} />
+			</div>
+			
+		</>
+	)
+}
+
+function App(props: AppProps & PageProps) {
+  const storeRef = useRef<Store | null>(null)
+  if (!storeRef.current) {
+    storeRef.current = makeStore()
+  }
+
+  return createElement(
+    Provider as any,
+    { store: storeRef.current },
+    createElement(AppWithHocs, { ...props, reduxStore: storeRef.current })
+  )
+}
+
+const AppWithHocs = compose(
+	WithGlobalContext,
+	WithGTM,
+	WithCustomerIO
+)(AppContent as any) as ComponentType<AppContentProps>
+
+export default App

package/src/pages/_document.tsx

@@ -0,0 +1,26 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+function Document() {
+	return (
+		<Html lang='en' data-scroll-behavior='smooth'>
+			<Head>
+				<link rel='preconnect' href='https://fonts.googleapis.com' />
+				<link
+					rel='preconnect'
+					href='https://fonts.gstatic.com'
+					crossOrigin=''
+				/>
+				<link
+					href='https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Manrope:wght@400;500;600&family=Poppins:wght@300;400;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap'
+					rel='stylesheet'
+				/>
+			</Head>
+			<body>
+				<Main />
+				<NextScript />
+			</body>
+		</Html>
+	)
+}
+
+export default Document

package/src/pages/account/verify.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect, useRef, useState } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { toast } from 'react-toastify'
+import {
+	UserTokenAction,
+	useResendVerifyEmailMutation,
+	useSignUpSessionDataQuery,
+	useVerifyTokenQuery,
+	useVerifyUserMutation,
+} from '@store/slice/api/authApiSlice'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { SiteLogoIcon } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+
+const VerifyUser: NextPage<
+	PageProps & { token?: string }
+> = WithReCaptcha(({ token }) => {
+		const { push: redirect } = useRouter()
+		const { setUserLoggedIn } = useUserAuthContext()
+		const [resendVerifyEmail, { isLoading: isSendingEmail }] =
+			useResendVerifyEmailMutation()
+		const [verifyUser, { isLoading: isVerifyingUser }] = useVerifyUserMutation()
+		const { data: sessionData } = useSignUpSessionDataQuery()
+		const { executeRecaptcha } = useGoogleReCaptcha()
+		const [hasError, setHasError] = useState(false)
+		const hasRunRef = useRef(false)
+		const { data: tokenStatus, isFetching: isCheckingToken } = useVerifyTokenQuery(
+			{ token: token || '', action: UserTokenAction.verify_email },
+			{ skip: !token }
+		)
+
+		useEffect(() => {
+			if (!token) {
+				setHasError(true)
+				return
+			}
+
+			if (!tokenStatus) return
+
+			if (!tokenStatus.isValid) {
+				setHasError(true)
+				return
+			}
+
+			if (hasRunRef.current) return
+			hasRunRef.current = true
+
+			;(async () => {
+				try {
+					const verifyResponse = await verifyUser(token).unwrap()
+					if (verifyResponse.user) {
+						setUserLoggedIn(verifyResponse.user)
+					}
+					toast.success('Your account has been verified!')
+					redirect(verifyResponse.nextStepUrl ?? '/')
+				} catch {
+					setHasError(true)
+				}
+			})()
+		}, [token, tokenStatus, verifyUser, setUserLoggedIn, redirect])
+
+		const resendEmail = async () => {
+			try {
+				if (!executeRecaptcha && isReCaptchaAvailable) {
+					toast.error('Execute recaptcha not yet available')
+					return
+				}
+
+				const captcha = executeRecaptcha
+					? await executeRecaptcha(ReCaptchaActions.resend_verify_email)
+					: null
+
+				await resendVerifyEmail({ captcha }).unwrap()
+				toast.success('Email Sent!')
+			} catch (error: any) {
+				switch (error.status) {
+					case HTTPErrorStatus.UNPROCESSABLE_ENTITY:
+						toast.error(error.data.message)
+						redirect('/login')
+						break
+					case HTTPErrorStatus.CONFLICT:
+						/**
+						 * ignore since CONFLICT in this case means we can't resend the email
+						 * because the user already requested one less than 25 minutes ago.
+						 * So we'll show a message asking to wait.
+						 */
+						break
+					default:
+						toast.error(
+							'Sorry, something went wrong. Please try to sign in to your account'
+						)
+						redirect('/login')
+						break
+				}
+			}
+		}
+
+		if (!hasError) return <LoadingScreen />
+
+		return (
+			<div className='d-flex justify-content-center align-items-center'>
+				<div className='bg-white p-4 p-lg-5 rounded-md' style={{ maxWidth: '600px', width: '100%' }}>
+						<div className='text-center'>
+							<Link href='/' aria-label='Osirus AI home'>
+								<span className='d-block p-2 bg-primary w-fit-content rounded-md mx-auto'>
+									<img
+										alt='Osirus Logo'
+										src={SiteLogoIcon}
+										className='img-fluid w-xs-80p invert-filter'
+									/>
+								</span>
+							</Link>
+						</div>
+						<h1 className='pb-3 text-center mt-4 pt-2 display-6'>
+							Email verification link is no longer valid
+						</h1>
+						<p className='text-center'>
+							This link may have expired or been replaced by a newer verification
+							email. Not to worry, we can send the link again.
+						</p>
+						<div className='d-flex justify-content-center flex-column align-items-center'>
+							<Button
+								type='button'
+								className='text-white mw-md-180p w-100 rounded-xl'
+								ariaLabel='Resend verification link'
+								color='primary'
+								isLoading={isSendingEmail}
+								disabled={
+									isSendingEmail || sessionData?.canResendEmail === false
+								}
+								onClick={resendEmail}
+							>
+								Resend Email
+							</Button>
+							{sessionData?.canResendEmail === false &&
+								sessionData?.canResendEmailAgainInMinutes && (
+									<span className='text-warning small d-block mt-2'>
+										You can request the email again in{' '}
+										{sessionData?.canResendEmailAgainInMinutes} minutes
+									</span>
+								)}
+						</div>
+				</div>
+			</div>
+		)
+	})
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+	const tokenParam = context.query.token
+	const token =
+		typeof tokenParam === 'string'
+			? tokenParam
+			: Array.isArray(tokenParam)
+				? tokenParam[0]
+				: undefined
+
+	return {
+		props: {
+			pageTitle: 'Verify User',
+			token,
+			excludeTopNav: true,
+		},
+	}
+}
+
+export default VerifyUser