PM-3452 Customer Portal App skeleton

src/apps/customer-portal/index.ts

@@ -0,0 +1 @@
+export * from './src'

src/apps/customer-portal/src/CustomerPortalApp.tsx

@@ -0,0 +1,37 @@
+/**
+ * The customer portal app.
+ */
+import { FC, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { CustomerPortalAppContextProvider, Layout, SWRConfigProvider } from './lib'
+import { toolTitle } from './customer-portal.routes'
+import './lib/styles/index.scss'
+
+const CustomerPortalApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [getChildRoutes])
+
+    useEffect(() => {
+        document.body.classList.add('customer-portal-app')
+        return () => {
+            document.body.classList.remove('customer-portal-app')
+        }
+    }, [])
+
+    return (
+        <CustomerPortalAppContextProvider>
+            <SWRConfigProvider>
+                <Layout>
+                    <Outlet />
+                    <Routes>{childRoutes}</Routes>
+                </Layout>
+            </SWRConfigProvider>
+        </CustomerPortalAppContextProvider>
+
+    )
+}
+
+export default CustomerPortalApp

src/apps/customer-portal/src/config/index.config.ts

@@ -0,0 +1,5 @@
+export const PRIVILEGED_ROLES = [
+    'administrator',
+    'Project Manager',
+    'Talent Manager',
+]

src/apps/customer-portal/src/config/routes.config.ts

@@ -0,0 +1,11 @@
+/**
+ * Common config for routes in Customer Portal app.
+ */
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.customer
+        ? ''
+        : `/${AppSubdomain.customer}`
+
+export const talentSearchRouteId = 'talent-search'

src/apps/customer-portal/src/customer-portal.routes.tsx

@@ -0,0 +1,39 @@
+/**
+ * App routes
+ */
+import { AppSubdomain, ToolTitle } from '~/config'
+import {
+    lazyLoad,
+    LazyLoadedComponent,
+    PlatformRoute,
+    Rewrite,
+} from '~/libs/core'
+
+import {
+    rootRoute,
+    talentSearchRouteId,
+} from './config/routes.config'
+import { customerPortalTalentSearchRoutes } from './pages/talent-search/talent-search.routes'
+
+const CustomerPortalApp: LazyLoadedComponent = lazyLoad(() => import('./CustomerPortalApp'))
+
+export const toolTitle: string = ToolTitle.customer
+
+export const customerPortalRoutes: ReadonlyArray<PlatformRoute> = [
+    // Customer portal App Root
+    {
+        children: [
+            {
+                authRequired: true,
+                element: <Rewrite to={talentSearchRouteId} />,
+                route: '',
+            },
+            ...customerPortalTalentSearchRoutes,
+        ],
+        domain: AppSubdomain.customer,
+        element: <CustomerPortalApp />,
+        id: toolTitle,
+        route: rootRoute,
+        title: toolTitle,
+    },
+]

src/apps/customer-portal/src/index.ts

@@ -0,0 +1,2 @@
+export { customerPortalRoutes } from './customer-portal.routes'
+export { rootRoute as customerPortalRootRoute } from './config/routes.config'

src/apps/customer-portal/src/lib/assets/index.ts

@@ -0,0 +1,11 @@
+import { ReactComponent as IconFile } from './icon-file.svg'
+import { ReactComponent as IconChevronDown } from './selector.svg'
+import { ReactComponent as IconArrowLeft } from './arrow-left.svg'
+import { ReactComponent as IconExternalLink } from './external-link.svg'
+
+export {
+    IconFile,
+    IconChevronDown,
+    IconArrowLeft,
+    IconExternalLink,
+}

src/apps/customer-portal/src/lib/components/BreadCrumb/BreadCrumb.module.scss

@@ -0,0 +1,31 @@
+@import '@libs/ui/styles/includes';
+
+.breadcrumb {
+    padding-bottom: $sp-6;
+    ul {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        li {
+            font-size: 14px;
+            line-height: 20px;
+            white-space: nowrap;
+            button,
+            a {
+                font-family: "Nunito Sans", sans-serif;
+                color: var(--GrayFontColor);
+                align-items: center;
+                display: flex;
+                &::after {
+                    color: var(--GrayFontColor);
+                    content: '/';
+                    padding: 0 $sp-2;
+                }
+            }
+            span {
+                font-family: "Nunito Sans", sans-serif;
+                color: var(--FontColor);
+            }
+        }
+    }
+}

src/apps/customer-portal/src/lib/components/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+
+import { BreadCrumbData } from '../../models'
+import { useAppNavigate } from '../../hooks'
+
+import styles from './BreadCrumb.module.scss'
+
+interface Props {
+    list: BreadCrumbData[]
+}
+
+export const BreadCrumb: FC<Props> = (props: Props) => {
+    const navigate = useAppNavigate()
+    return (
+        <div className={styles.breadcrumb}>
+            <ul>
+                {props.list.map(item => (
+                    <li key={item.index}>
+                        {item.path ? (
+                            item.fallback ? (
+                                <button
+                                    type='button'
+                                    onClick={function onClick() {
+                                        navigate(item.path as number, {
+                                            fallback: item.fallback,
+                                        })
+                                    }}
+                                >
+                                    {item.label}
+                                </button>
+                            ) : (
+                                <Link to={item.path as string}>
+                                    {item.label}
+                                </Link>
+                            )
+                        ) : (
+                            <span>{item.label}</span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default BreadCrumb

src/apps/customer-portal/src/lib/components/BreadCrumb/index.ts

@@ -0,0 +1 @@
+export { default as BreadCrumb } from './BreadCrumb'

src/apps/customer-portal/src/lib/components/Layout/Layout.module.scss

@@ -0,0 +1,29 @@
+@import '@libs/ui/styles/includes';
+
+.layout {
+    position: relative;
+    font-family: $font-roboto;
+    color: var(--Primary);
+
+    .main {
+        @include ltelg {
+            padding: 36px 0;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-family: $font-roboto;
+    }
+}
+
+.contentLayoutOuter {
+    margin: $sp-6 auto !important;
+}
+
+.contantentLayoutInner {
+    box-sizing: border-box;
+    width: 100%;
+}

src/apps/customer-portal/src/lib/components/Layout/Layout.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react'
+
+import { ContentLayout } from '~/libs/ui'
+
+import { NavTabs } from '../NavTabs'
+
+import styles from './Layout.module.scss'
+
+export const NullLayout: FC<PropsWithChildren> = props => (
+    <>{props.children}</>
+)
+
+export const Layout: FC<PropsWithChildren> = props => (
+    <>
+        <NavTabs />
+        <ContentLayout
+            innerClass={styles.contantentLayoutInner}
+            outerClass={styles.contentLayoutOuter}
+        >
+            <div className={styles.layout}>
+                <div className={styles.main}>{props.children}</div>
+            </div>
+        </ContentLayout>
+    </>
+)
+
+export default Layout

src/apps/customer-portal/src/lib/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export * from './Layout'
+export { default as Layout } from './Layout'