From 858d5e7e16992848dd45b5b9873d126085bf77b1 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 4 Aug 2023 11:35:57 +0300
Subject: [PATCH] TAL-18 - add notification message for missing profile in
 talent search app

---
 .../routes/search-page/SearchPage.module.scss | 15 +++++++
 .../src/routes/search-page/SearchPage.tsx     | 45 ++++++++++++++-----
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss b/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss
index 853c38a1a..b1686ac78 100644
--- a/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss
+++ b/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss
@@ -51,3 +51,18 @@
     max-width: 931px;
     width: 100%;
 }
+
+.headerErrorWrap {
+    display: flex;
+    justify-content: center;
+}
+
+.headerError {
+    display: flex;
+    align-items: center;
+    gap: $sp-3;
+
+    padding: $sp-4 $sp-8;
+    border-radius: 10px;
+    background: $purple-140;
+}
diff --git a/src/apps/talent-search/src/routes/search-page/SearchPage.tsx b/src/apps/talent-search/src/routes/search-page/SearchPage.tsx
index 840213ba0..8c455f3e3 100644
--- a/src/apps/talent-search/src/routes/search-page/SearchPage.tsx
+++ b/src/apps/talent-search/src/routes/search-page/SearchPage.tsx
@@ -1,7 +1,7 @@
 import { FC, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 
-import { ContentLayout } from '~/libs/ui'
+import { ContentLayout, IconOutline } from '~/libs/ui'
 import { Skill } from '~/libs/shared'
 
 import { SearchInput } from '../../components/search-input'
@@ -12,6 +12,9 @@ import { encodeUrlQuerySearch } from '../../lib/utils/search-query'
 import styles from './SearchPage.module.scss'
 
 export const SearchPage: FC = () => {
+    const [params] = useSearchParams()
+    const isMissingProfileRoute = params.get('memberNotFound') !== null
+
     const searchInputRef = useRef<HTMLInputElement>()
     const navigate = useNavigate()
     const [skillsFilter, setSkillsFilter] = useState<Skill[]>([])
@@ -26,20 +29,42 @@ export const SearchPage: FC = () => {
         searchInputRef.current?.focus()
     }
 
+    function renderHeader(): JSX.Element {
+        return isMissingProfileRoute ? (
+            <>
+                <div className={styles.headerErrorWrap}>
+                    <div className={styles.headerError}>
+                        <IconOutline.ExclamationCircleIcon className='icon-xxxxl' />
+                        <span>We were unable to locate that profile</span>
+                    </div>
+                </div>
+                <div className={styles.subHeader}>
+                    <div className={styles.subHeaderText}>
+                        You can also try finding members through our Talent Search:
+                    </div>
+                </div>
+            </>
+        ) : (
+            <>
+                <div className={styles.searchHeader}>
+                    <span className={styles.searchHeaderText}>Looking for a technology expert?</span>
+                </div>
+                <div className={styles.subHeader}>
+                    <div className={styles.subHeaderText}>
+                        Search thousands of skills to match with our global experts.
+                    </div>
+                </div>
+            </>
+        )
+    }
+
     return (
         <ContentLayout
             contentClass={styles.contentLayout}
             outerClass={styles['contentLayout-outer']}
             innerClass={styles['contentLayout-inner']}
         >
-            <div className={styles.searchHeader}>
-                <span className={styles.searchHeaderText}>Looking for a technology expert?</span>
-            </div>
-            <div className={styles.subHeader}>
-                <div className={styles.subHeaderText}>
-                    Search thousands of skills to match with our global experts.
-                </div>
-            </div>
+            {renderHeader()}
             <div className={styles.searchOptions}>
                 <span className={styles.searchPrompt}>Search by skills</span>
                 <SearchInput