Prod - July 2026 release 2

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

@@ -9,4 +9,5 @@ export const rootRoute: string
         : `/${AppSubdomain.customer}`
 
 export const talentSearchRouteId = 'talent-search'
+export const showcaseSearchRouteId = 'showcase'
 export const flexiTalentRouteId = 'flexi-talent'

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

@@ -16,6 +16,7 @@ import {
 } from './config/routes.config'
 import { customerPortalFlexiTalentRoutes } from './pages/flexi-talent/flexi-talent.routes'
 import { customerPortalTalentSearchRoutes } from './pages/talent-search/talent-search.routes'
+import { customerPortalProjectShowcaseRoutes } from './pages/project-showcase/project-showcase.routes'
 
 const CustomerPortalApp: LazyLoadedComponent = lazyLoad(() => import('./CustomerPortalApp'))
 
@@ -32,6 +33,7 @@ export const customerPortalRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '',
             },
             ...customerPortalTalentSearchRoutes,
+            ...customerPortalProjectShowcaseRoutes,
             ...customerPortalFlexiTalentRoutes,
         ],
         domain: AppSubdomain.customer,

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

@@ -1,7 +1,7 @@
 @import '@libs/ui/styles/includes';
 
 .layout {
-    position: relative;
+    // position: relative;
     font-family: $font-roboto;
     color: var(--Primary);
 

src/apps/customer-portal/src/lib/components/NavTabs/config/tabs-config.ts

@@ -3,6 +3,7 @@ import _ from 'lodash'
 import { TabsNavItem } from '~/libs/ui'
 import {
     flexiTalentRouteId,
+    showcaseSearchRouteId,
     talentSearchRouteId,
 } from '~/apps/customer-portal/src/config/routes.config'
 
@@ -12,6 +13,9 @@ export function getTabsConfig(userRoles: string[], isAnonymous: boolean, isUnpri
         ...(!isUnprivilegedUser ? [{
             id: talentSearchRouteId,
             title: 'Talent Search',
+        }, {
+            id: showcaseSearchRouteId,
+            title: 'Showcase',
         }, {
             id: flexiTalentRouteId,
             title: 'Flexi-Talent',

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

@@ -5,6 +5,18 @@
     flex-direction: column;
 }
 
+:global([class*='ContentLayout-module_content-outer']) {
+    margin: 0 auto 0 !important;
+}
+
+:global([class*='ContentLayout-module_content__']) {
+    padding-bottom: 0 !important;
+}
+
+:global([class*='BreadCrumb-module_breadcrumb']) {
+    display: none;
+}
+
 .blockHeader {
     display: flex;
     align-items: center;
@@ -39,3 +51,129 @@
     margin-left: $sp-2;
     margin-bottom: 6px;
 }
+
+.pageArea {
+    position: relative;
+    @include substractPagePaddings;
+    background: $black-5;
+}
+
+.pageHero {
+    width: 100%;
+    height: 280px;
+    background-image: url('../../../lib/assets/talent-search-header.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.pageBody {
+    display: grid;
+    grid-template-columns: 443px 1fr;
+    gap: 24px;
+    margin-top: -232px;
+    padding: $sp-2 $sp-8 $sp-10 $sp-8;
+    position: relative;
+    z-index: 1;
+    font-family: $font-roboto;
+
+    @include ltemd {
+        grid-template-columns: 1fr;
+        margin-top: -232px;
+        padding: $sp-3 $sp-3 0;
+    }
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    @include ltemd {
+        margin-left: 0;
+        position: relative;
+        z-index: 2;
+    }
+}
+
+.panel {
+    background: $tc-white;
+    border: 0;
+    border-radius: 16px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: $sp-2;
+}
+
+.sidebar .panel + .panel {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 0;
+    padding-top: 14px;
+}
+
+.panelTitle {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin: 0;
+}
+
+.resultsPanel {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    overflow: visible;
+    min-height: 620px;
+}
+
+.resultsPanelEmpty {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+}
+
+
+.emptyState {
+    min-height: 470px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: $sp-6;
+    margin-top: 20vh;
+    text-align: center;
+    color: $black-60;
+
+    h4 {
+        margin: 0 0 $sp-2;
+        color: $black-100;
+    }
+
+    p {
+        margin: 0 0 $sp-1;
+        max-width: 500px;
+    }
+}
+
+.emptyStateTitle {
+    color: $black-100;
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 700;
+    margin: 0 0 $sp-2;
+}
+
+.emptyStateDescription {
+    color: $black-100;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    margin: 0;
+}

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

@@ -1,7 +1,8 @@
+/* eslint-disable react/no-array-index-key */
 /**
  * Page Wrapper.
  */
-import { FC, PropsWithChildren, ReactNode } from 'react'
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
@@ -20,55 +21,91 @@ interface Props {
     backUrl?: string
     backAction?: () => void
     titleUrl?: string | 'emptyLink'
-    rightHeader?: ReactNode,
+    rightHeader?: ReactNode
     breadCrumb: BreadCrumbData[]
+    introText: string
+    shouldShowIntroState?: boolean
+    sidebar: ReactNode | ReactNode[]
 }
 
-export const PageWrapper: FC<PropsWithChildren<Props>> = props => (
-    <div className={classNames(styles.container, props.className)}>
-        <BreadCrumb list={props.breadCrumb} />
-        <PageTitle>{props.pageTitle}</PageTitle>
-        <div className={styles.blockHeader}>
-            <div className={styles.blockHeaderRight}>
-                {props.backUrl && (
-                    <Link to={props.backUrl}>
-                        <IconArrowLeft />
-                    </Link>
-                )}
-                {props.backAction && (
-                    <button type='button' onClick={props.backAction}>
-                        <IconArrowLeft />
-                    </button>
-                )}
-                <div className={styles.blockHeaderTitle}>
-                    <PageHeader>
-                        <h3 className={styles.textTitle}>
-                            {props.pageTitle}
-                        </h3>
-                    </PageHeader>
-                    {props.titleUrl && props.titleUrl !== 'emptyLink' && (
-                        <a
-                            className={styles.blockExternalLink}
-                            href={props.titleUrl}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            <IconExternalLink />
-                        </a>
+export const PageWrapper: FC<PropsWithChildren<Props>> = props => {
+    const sidebarPanels: ReactNode[] = useMemo(() => (
+        props.sidebar && !Array.isArray(props.sidebar) ? [props.sidebar] : props.sidebar as ReactNode[]
+    ), [props.sidebar])
+
+    return (
+        <div className={classNames(styles.container, props.className)}>
+            <BreadCrumb list={props.breadCrumb} />
+            <PageTitle>{props.pageTitle}</PageTitle>
+            <div className={styles.blockHeader}>
+                <div className={styles.blockHeaderRight}>
+                    {props.backUrl && (
+                        <Link to={props.backUrl}>
+                            <IconArrowLeft />
+                        </Link>
                     )}
-                    {props.titleUrl && props.titleUrl === 'emptyLink' && (
-                        <button type='button' className={styles.blockExternalLink}>
-                            <IconExternalLink />
+                    {props.backAction && (
+                        <button type='button' onClick={props.backAction}>
+                            <IconArrowLeft />
                         </button>
                     )}
+                    <div className={styles.blockHeaderTitle}>
+                        <PageHeader>
+                            <h3 className={styles.textTitle}>
+                                {props.pageTitle}
+                            </h3>
+                        </PageHeader>
+                        {props.titleUrl && props.titleUrl !== 'emptyLink' && (
+                            <a
+                                className={styles.blockExternalLink}
+                                href={props.titleUrl}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                <IconExternalLink />
+                            </a>
+                        )}
+                        {props.titleUrl && props.titleUrl === 'emptyLink' && (
+                            <button type='button' className={styles.blockExternalLink}>
+                                <IconExternalLink />
+                            </button>
+                        )}
+                    </div>
                 </div>
+
+                {props.rightHeader}
             </div>
 
-            {props.rightHeader}
-        </div>
+            <div className={styles.pageArea}>
+                <div className={styles.pageHero} />
+                <div className={styles.pageBody}>
+                    <aside className={styles.sidebar}>
+                        {sidebarPanels?.map((panel, i) => (
+                            <section className={styles.panel} key={i}>{panel}</section>
+                        ))}
+                    </aside>
+                    <section
+                        className={classNames(
+                            styles.resultsPanel,
+                            props.shouldShowIntroState && styles.resultsPanelEmpty,
+                        )}
+                    >
+                        {props.shouldShowIntroState && (
+                            <div className={styles.emptyState}>
+                                <p className={styles.emptyStateDescription}>
+                                    {props.introText}
+                                </p>
+                            </div>
+                        )}
 
-        {props.children}
-    </div>
-)
+                        {!props.shouldShowIntroState && (
+                            <div className={styles.resultsContent}>{props.children}</div>
+                        )}
+                    </section>
+                </div>
+            </div>
+        </div>
+    )
+}
 
 export default PageWrapper

src/apps/customer-portal/src/lib/services/flexiTalent.service.ts

@@ -282,7 +282,7 @@ function buildFlexiEngagementWorkLinks(
     }
 
     if (normalizedEngagementId) {
-        links.engagementUrl = `${baseUrl}/projects/${normalizedProjectId}/engagements/${normalizedEngagementId}/view`
+        links.engagementUrl = `${baseUrl}/projects/${normalizedProjectId}/engagements/${normalizedEngagementId}`
         links.assigneeDetailsUrl
             = `${baseUrl}/projects/${normalizedProjectId}/engagements/${normalizedEngagementId}/assignments`
     }

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

@@ -1,2 +1,3 @@
 export * from './talentSearch.service'
 export * from './flexiTalent.service'
+export * from './showcasePost.service'

src/apps/customer-portal/src/lib/services/showcasePost.service.ts

@@ -0,0 +1,38 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { Challenge, fetchChallenge } from '~/apps/work/src/lib'
+
+export type UseFetchChallenges = SWRResponse<Challenge[], Error>
+
+export const useFetchChallenges = (challengeIds: string[]): UseFetchChallenges => {
+    const shouldFetchChallenges = challengeIds.length > 0
+
+    return useSWR<Challenge[], Error>(
+        shouldFetchChallenges ? ['work/challenge-list', challengeIds.join(',')] : undefined,
+        async () => {
+            const settledResults = await Promise.allSettled(
+                challengeIds.map(id => fetchChallenge(id)),
+            )
+
+            const loadedChallenges = settledResults
+                .filter(
+                    (result): result is PromiseFulfilledResult<Challenge> => result.status === 'fulfilled',
+                )
+                .map(result => result.value)
+
+            if (loadedChallenges.length === 0 && settledResults.length > 0) {
+                const rejection = settledResults.find(
+                    (result): result is PromiseRejectedResult => result.status === 'rejected',
+                )
+                throw rejection?.reason ?? new Error('Failed to load challenges')
+            }
+
+            return loadedChallenges
+        },
+        {
+            dedupingInterval: 0,
+            errorRetryCount: 2,
+            shouldRetryOnError: true,
+        },
+    )
+}