feat(tp/joblisting): show expiry overlay (#998)

* feat(tp/joblisting): show expiry overlay

* overlays on top of job listing not whole viewport

* fix z-index layering on mobile

* include FAQ links

apps/redi-talent-pool/src/components/organisms/Navbar.scss

@@ -45,7 +45,7 @@
     position: fixed;
     width: 100%;
     height: 100%;
-    z-index: 10;
+    z-index: 2000;
     padding: 8rem 1.25rem;
     background-color: $white;
     // TODO: can we use relative import here instead?

apps/redi-talent-pool/src/pages/app/job-listing/JobListing.scss

@@ -233,3 +233,44 @@
     line-height: 180%; /* 28.8px */
   }
 }
+
+.expired-job-listing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  z-index: 5;
+  padding-top: 200px;
+}
+
+.expired-job-listing-message {
+  max-width: 500px;
+  padding: 2rem;
+  text-align: center;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 0 1rem;
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5;
+    color: #333;
+  }
+
+  a {
+    color: #e82e5a;
+    text-decoration: none;
+    font-weight: 600;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

apps/redi-talent-pool/src/pages/app/job-listing/JobListing.tsx

@@ -1,17 +1,17 @@
+import { useMediaQuery } from '@mui/material'
+import { TpJobListing, TpJobListingStatus } from '@talent-connect/data-access'
+import { Chip, SVGImage } from '@talent-connect/shared-atomic-design-components'
 import {
   employmentTypesIdToLabelMap,
   topSkillsIdToLabelMap,
 } from '@talent-connect/talent-pool/config'
 import moment from 'moment'
 import { Element } from 'react-bulma-components'
-import { useParams } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import Avatar from '../../../components/organisms/Avatar'
 import { LoggedIn } from '../../../components/templates'
 import { useFindOneJobListingQuery } from './JobListing.generated'
 import './JobListing.scss'
-import { TpJobListing } from '@talent-connect/data-access'
-import { useMediaQuery } from '@mui/material'
-import { Chip, SVGImage } from '@talent-connect/shared-atomic-design-components'
 
 const JobListingLocation = ({
   location,
@@ -233,6 +233,22 @@ const JobListingAboutTheCompany = ({
   )
 }
 
+const ExpiredJobListingOverlay = () => {
+  return (
+    <div className="expired-job-listing-overlay">
+      <div className="expired-job-listing-message">
+        <p>
+          Hey there! It looks like this job listing has expired. You can save
+          this link to check if the job becomes available again, or you can{' '}
+          <Link to="/app/browse">browse other job openings</Link>. If you have
+          any questions in the meantime, feel free to check out the{' '}
+          <Link to="/faq">FAQ</Link>.
+        </p>
+      </div>
+    </div>
+  )
+}
+
 export function JobListing() {
   const { tpJobListingId }: { tpJobListingId: string } = useParams()
 
@@ -241,12 +257,12 @@ export function JobListing() {
   })
 
   const jobListing = jobListingQuery.data?.tpJobListing
-
+  const isExpired = jobListing?.status === TpJobListingStatus.Expired
   const isDesktop = useMediaQuery('(min-width:1024px)')
 
   return (
     <LoggedIn>
-      <div className="jobListing">
+      <div className="jobListing" style={{ position: 'relative' }}>
         {isDesktop ? (
           <>
             <JobListingHeader jobListing={jobListing} />
@@ -280,6 +296,7 @@ export function JobListing() {
             </div>
           </>
         )}
+        {isExpired && <ExpiredJobListingOverlay />}
       </div>
     </LoggedIn>
   )