feat: new job hub pages (#5091)

Author: rebelchris

packages/shared/src/components/RecruiterLayout.tsx

@@ -52,7 +52,7 @@ export const RecruiterLayout = ({
       params.append(key, value as string);
     });
 
-    params.delete('id'); // remove opportunity id param
+    params.delete('id'); // remove jobs id param
 
     router.push(`${onboardingUrl}?${params.toString()}`);
   }, [shouldRedirectOnboarding, router]);

packages/shared/src/components/fields/DragDrop.tsx

@@ -152,8 +152,8 @@ export function DragDrop({
   renderCta,
   isCopyBold,
   dragDropDescription = 'Drag & Drop your CV or',
-  ctaLabelDesktop = 'Upload PDF',
-  ctaLabelMobile = 'Upload PDF',
+  ctaLabelDesktop = 'Upload CV',
+  ctaLabelMobile = 'Upload CV',
   uploadIcon,
   showRemove,
   fullClick = false,

packages/shared/src/components/opportunity/NewOpportunityPopover.tsx

@@ -34,7 +34,7 @@ export const NewOpportunityPopover = (): ReactElement => {
         >
           Your next big move is here!
         </Typography>
-        <Link href={`${webappUrl}opportunity/${alerts.opportunityId}`} passHref>
+        <Link href={`${webappUrl}jobs/${alerts.opportunityId}`} passHref>
           <Button
             size={ButtonSize.XSmall}
             onClick={logOpportunityNudgeClick}
@@ -52,7 +52,7 @@ export const NewOpportunityPopover = (): ReactElement => {
           Hey {user.name}, We&#39;ve found a new opportunity that aligns with
           your experience and what you’ve been exploring lately.
         </Typography>
-        <Link href={`${webappUrl}opportunity/${alerts.opportunityId}`} passHref>
+        <Link href={`${webappUrl}jobs/${alerts.opportunityId}`} passHref>
           <Button
             tag="a"
             variant={ButtonVariant.Primary}

packages/shared/src/components/opportunity/OpportunityEntryButton.tsx

@@ -56,8 +56,8 @@ export const OpportunityEntryButton = () => {
     <RenderTooltip content="Jobs" placement="bottom-end">
       <div>
         <Link
-          href={`${webappUrl}opportunity/${
-            hasOpportunityAlert ? alerts.opportunityId : 'welcome'
+          href={`${webappUrl}jobs/${
+            hasOpportunityAlert ? alerts.opportunityId : ''
           }`}
           passHref
         >

packages/shared/src/components/opportunity/OpportunityHeader.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import useSidebarRendered from '../../hooks/useSidebarRendered';
+import { Typography, TypographyType } from '../typography/Typography';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import Link from '../utilities/Link';
+import { settingsUrl, webappUrl } from '../../lib/constants';
+import { FilterIcon } from '../icons';
+
+const jobPreferenceUrl = `${settingsUrl}job-preferences`;
+const howItWorksUrl = `${webappUrl}opportunity/how-it-works`;
+export const OpportunityHeader = (): ReactElement => {
+  const { sidebarRendered } = useSidebarRendered();
+
+  if (sidebarRendered) {
+    return <></>;
+  }
+
+  return (
+    <div className="flex items-center justify-between border-b border-border-subtlest-tertiary px-5 py-3">
+      <Typography type={TypographyType.Title3} bold>
+        Jobs
+      </Typography>
+      <div className="flex gap-2">
+        <Link href={howItWorksUrl}>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+          >
+            How it works
+          </Button>
+        </Link>
+        <Link href={jobPreferenceUrl}>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<FilterIcon />}
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/opportunity/OpportunitySteps/OpportunityStepsInfo.tsx

@@ -35,7 +35,7 @@ export const OpportunityStepsInfo = (
   );
 
   const goToNextStep = () => {
-    router.push(`${webappUrl}opportunity/${opportunityId}/questions-setup`);
+    router.push(`${webappUrl}jobs/${opportunityId}/questions-setup`);
   };
 
   const {

packages/shared/src/components/opportunity/OpportunitySteps/OpportunityStepsQuestions.tsx

@@ -39,7 +39,7 @@ export const OpportunityStepsQuestions = (
   const { displayToast } = useToastNotification();
 
   const goToNextStep = () => {
-    router.push(`${webappUrl}opportunity/${opportunityId}/approved`);
+    router.push(`${webappUrl}jobs/${opportunityId}/approved`);
   };
 
   const {

packages/shared/src/components/sidebar/SidebarTablet.tsx

@@ -134,8 +134,8 @@ export const SidebarTablet = ({
       >
         <div className="relative">
           <Link
-            href={`${webappUrl}opportunity/${
-              hasOpportunityAlert ? alerts.opportunityId : 'welcome'
+            href={`${webappUrl}jobs/${
+              hasOpportunityAlert ? alerts.opportunityId : ''
             }`}
             prefetch={false}
             passHref

packages/shared/src/features/opportunity/components/IntroHeader.tsx

@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { DailyIcon } from '../../../components/icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { briefButtonBg } from '../../../styles/custom';
+
+export const IntroHeader = (): ReactElement => {
+  return (
+    <FlexCol className="items-center gap-2">
+      <FlexRow className="items-center gap-1">
+        <DailyIcon />{' '}
+        <Typography
+          center
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          Career mode unlocked (beta)
+        </Typography>
+      </FlexRow>
+      <Typography
+        center
+        type={TypographyType.LargeTitle}
+        bold
+        style={{
+          background: briefButtonBg,
+        }}
+        className="!bg-clip-text text-transparent"
+      >
+        Welcome to a new hiring experience that respects your time, privacy, and
+        intelligence
+      </Typography>
+    </FlexCol>
+  );
+};

packages/shared/src/features/opportunity/components/OpportunityAllSet.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { opportunityBriefcaseDone } from '../../../lib/image';
+import { briefButtonBg } from '../../../styles/custom';
+import { TargetId } from '../../../lib/log';
+import { CandidatePreferenceButton } from './CandidatePreferenceButton';
+
+export const OpportunityAllSet = (): ReactElement => {
+  return (
+    <div className="flex flex-col gap-6 rounded-16 border-border-subtlest-secondary px-4 py-6 laptop:border">
+      <div className="flex flex-col flex-wrap items-center gap-4 laptop:flex-row-reverse">
+        <img
+          src={opportunityBriefcaseDone}
+          className="max-w-36"
+          alt="daily.dev jobs"
+        />
+        <div className="flex flex-1 flex-wrap justify-center gap-2 text-center laptop:justify-start laptop:text-left">
+          <Typography
+            center
+            type={TypographyType.Title1}
+            bold
+            style={{
+              background: briefButtonBg,
+            }}
+            className="!bg-clip-text text-transparent"
+          >
+            You are all set!
+          </Typography>
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Primary}
+            className="flex-shrink"
+          >
+            We’ll surface the most relevant opportunities right here as they
+            become available, so you won’t miss anything important.
+          </Typography>
+        </div>
+      </div>
+      <CandidatePreferenceButton
+        label="Update job preferences"
+        targetId={TargetId.OpportunityWelcomePage}
+        className="w-full"
+      />
+    </div>
+  );
+};