Feat job opportunity modal

packages/shared/src/components/modals/BootPopups.tsx

@@ -310,6 +310,31 @@ export const BootPopups = (): ReactElement => {
     });
   }, [alerts.showTopReader, logEvent, updateAlerts, updateLastBootPopup]);
 
+  /**
+   * Job opportunity modal
+   */
+  useEffect(() => {
+    if (!alerts?.opportunityId || alerts?.flags?.hasSeenOpportunity) {
+      return;
+    }
+
+    addBootPopup({
+      type: LazyModal.JobOpportunity,
+      props: {
+        opportunityId: alerts.opportunityId,
+        onAfterClose: () => {
+          updateAlerts({ flags: { hasSeenOpportunity: true } });
+          updateLastBootPopup();
+        },
+      },
+    });
+  }, [
+    alerts.opportunityId,
+    alerts?.flags?.hasSeenOpportunity,
+    updateAlerts,
+    updateLastBootPopup,
+  ]);
+
   /**
    * Actual rendering of the boot popup that's first in line
    */

packages/shared/src/components/modals/JobOpportunityModal.tsx

@@ -0,0 +1,112 @@
+import type { MouseEvent, ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import type { ModalProps } from './common/Modal';
+import { Modal } from './common/Modal';
+import { Button, ButtonVariant } from '../buttons/Button';
+import { Image } from '../image/Image';
+import Link from '../utilities/Link';
+import { opportunityUrl } from '../../lib/constants';
+import { useViewSize, ViewSize } from '../../hooks';
+import { useThemedAsset } from '../../hooks/utils';
+import { Typography, TypographyType } from '../typography/Typography';
+import { MoveToIcon } from '../icons';
+import { useLogContext } from '../../contexts/LogContext';
+import { LogEvent, TargetId } from '../../lib/log';
+
+export interface JobOpportunityModalProps extends ModalProps {
+  opportunityId: string;
+}
+
+export const JobOpportunityModal = ({
+  opportunityId,
+  onRequestClose,
+  ...modalProps
+}: JobOpportunityModalProps): ReactElement => {
+  const isMobile = useViewSize(ViewSize.MobileL);
+  const { jobOfferDesktop, jobOfferMobile } = useThemedAsset();
+  const { logEvent } = useLogContext();
+  const logRef = useRef<typeof logEvent>();
+  const hasLoggedRef = useRef(false);
+  logRef.current = logEvent;
+
+  const logExtraPayload = JSON.stringify({
+    count: 1, // always 1 for now
+  });
+
+  const onClick = (event: MouseEvent) => {
+    logRef.current({
+      event_name: LogEvent.ClickOpportunityNudge,
+      target_id: TargetId.Fullscreen,
+      extra: logExtraPayload,
+    });
+    onRequestClose(event);
+  };
+
+  useEffect(() => {
+    if (hasLoggedRef.current) {
+      return;
+    }
+
+    logRef.current({
+      event_name: LogEvent.ImpressionOpportunityNudge,
+      target_id: TargetId.Fullscreen,
+      extra: logExtraPayload,
+    });
+    hasLoggedRef.current = true;
+  }, [logExtraPayload]);
+
+  return (
+    <>
+      <div className="fixed z-header size-full rounded-[63.75rem] bg-background-default blur-[6.875rem]">
+        test
+      </div>
+      <Modal
+        {...modalProps}
+        kind={Modal.Kind.FlexibleCenter}
+        size={Modal.Size.Medium}
+        onRequestClose={onRequestClose}
+        className="!border-transparent !bg-transparent !shadow-none"
+        overlayClassName="!bg-transparent"
+        isDrawerOnMobile
+      >
+        <Modal.Body className="items-center overflow-hidden !p-0">
+          <div className="flex h-full flex-col items-start justify-center gap-6 px-6 py-10 tablet:items-center tablet:px-10 tablet:py-14">
+            <div className="relative flex items-center justify-center">
+              <Image
+                src={isMobile ? jobOfferMobile : jobOfferDesktop}
+                alt="Job offer for you"
+                className="h-72 w-auto tablet:h-64"
+              />
+            </div>
+            <Typography type={TypographyType.Title3}>
+              We think this role deserves your attention, but your decision is
+              private. If it’s a fit, we’ll handle it quietly. If not, it’s gone
+              for good.
+            </Typography>
+            <div className="flex w-full flex-col gap-3">
+              <Link href={`${opportunityUrl}/${opportunityId}`} passHref>
+                <Button
+                  tag="a"
+                  className="w-full gap-2"
+                  variant={ButtonVariant.Primary}
+                  onClick={onClick}
+                >
+                  Show me now <MoveToIcon />
+                </Button>
+              </Link>
+              <Button
+                className="w-full"
+                variant={ButtonVariant.Float}
+                onClick={onClick}
+              >
+                Maybe later
+              </Button>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default JobOpportunityModal;

packages/shared/src/components/modals/common.tsx

@@ -334,6 +334,13 @@ const OpportunityEditModal = dynamic(() =>
   ).then((mod) => mod.OpportunityEditModal),
 );
 
+const JobOpportunityModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "jobOpportunityModal" */ './JobOpportunityModal'
+    ),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -389,6 +396,7 @@ export const modals = {
   [LazyModal.ActionSuccess]: ActionSuccessModal,
   [LazyModal.SquadNotificationSettings]: SquadNotificationSettingsModal,
   [LazyModal.OpportunityEdit]: OpportunityEditModal,
+  [LazyModal.JobOpportunity]: JobOpportunityModal,
 };
 
 type GetComponentProps<T> = T extends

packages/shared/src/components/modals/common/types.ts

@@ -79,6 +79,7 @@ export enum LazyModal {
   ActionSuccess = 'actionSuccess',
   SquadNotificationSettings = 'squadNotificationSettings',
   OpportunityEdit = 'opportunityEdit',
+  JobOpportunity = 'jobOpportunity',
 }
 
 export type ModalTabItem = {

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

@@ -11,7 +11,7 @@ import Link from '../../../components/utilities/Link';
 import { useViewSize, ViewSize } from '../../../hooks';
 import { useAlertsContext } from '../../../contexts/AlertContext';
 import { useLogContext } from '../../../contexts/LogContext';
-import { LogEvent } from '../../../lib/log';
+import { LogEvent, TargetId } from '../../../lib/log';
 import { useFeaturesReadyContext } from '../../../components/GrowthBookProvider';
 import { opportunityButtonCopy } from '../../../lib/featureManagement';
 
@@ -40,6 +40,7 @@ export const JobOpportunityButton = ({
   const handleClick = (): void => {
     logRef.current({
       event_name: LogEvent.ClickOpportunityNudge,
+      target_id: TargetId.HomepageButton,
       extra: logExtraPayload,
     });
   };
@@ -51,6 +52,7 @@ export const JobOpportunityButton = ({
 
     logRef.current({
       event_name: LogEvent.ImpressionOpportunityNudge,
+      target_id: TargetId.HomepageButton,
       extra: logExtraPayload,
     });
     hasLoggedRef.current = true;

packages/shared/src/graphql/alerts.ts

@@ -1,6 +1,10 @@
 import { gql } from 'graphql-request';
 import type { Opportunity } from '../features/opportunity/types';
 
+export type AlertsFlags = {
+  hasSeenOpportunity?: boolean;
+};
+
 export type Alerts = {
   filter?: boolean;
   rankLastSeen?: Date;
@@ -20,6 +24,7 @@ export type Alerts = {
   showTopReader?: boolean;
   briefBannerLastSeen?: Date;
   opportunityId?: Opportunity['id'] | null;
+  flags?: AlertsFlags;
 };
 
 export type AlertsUpdate = Omit<Alerts, 'changelog' | 'banner'>;

packages/shared/src/hooks/utils/useThemedAsset.ts

@@ -18,6 +18,10 @@ import {
   boostNewPostBannerLight,
   jobsWelcomeDarkMode,
   jobsWelcomeLightMode,
+  jobOfferLightDesktop,
+  jobOfferDarkDesktop,
+  jobOfferDarkMobile,
+  jobOfferLightMobile,
 } from '../../lib/image';
 
 interface UseAsset {
@@ -30,6 +34,8 @@ interface UseAsset {
   slackIntegrationHeader: string;
   gardrError: string;
   jobsWelcome: string;
+  jobOfferDesktop: string;
+  jobOfferMobile: string;
 }
 
 export const useIsLightTheme = (): boolean => {
@@ -70,5 +76,7 @@ export const useThemedAsset = (): UseAsset => {
       ? cloudinaryGenericErrorLight
       : cloudinaryGenericErrorDark,
     jobsWelcome: isLight ? jobsWelcomeLightMode : jobsWelcomeDarkMode,
+    jobOfferDesktop: isLight ? jobOfferLightDesktop : jobOfferDarkDesktop,
+    jobOfferMobile: isLight ? jobOfferLightMobile : jobOfferDarkMobile,
   };
 };

packages/shared/src/lib/image.ts

@@ -375,3 +375,11 @@ export const recruiterSpamCampaignSEO =
   'https://media.daily.dev/image/upload/s--PBa-49xs--/f_auto/v1759245831/public/Recruiter%20-%206';
 export const adFaviconPlaceholder =
   'https://media.daily.dev/image/upload/s--SOLIE7Bc--/f_auto/v1761801782/webapp/daily.dev_-_Boost_Icon';
+export const jobOfferDarkDesktop =
+  'https://media.daily.dev/image/upload/s--NfynfZap--/f_auto/v1762762600/public/new-offer-dark-web';
+export const jobOfferLightDesktop =
+  'https://media.daily.dev/image/upload/s--NfynfZap--/f_auto/v1762762601/public/new-offer-light-web';
+export const jobOfferDarkMobile =
+  'https://media.daily.dev/image/upload/s--Fucq4fUY--/f_auto/v1762762600/public/new-offer-dark-mobile';
+export const jobOfferLightMobile =
+  'https://media.daily.dev/image/upload/s--kgtQcvdc--/f_auto/v1762762601/public/new-offer-light-mobile';

packages/shared/src/lib/log.ts

@@ -440,6 +440,8 @@ export enum TargetId {
   OpportunityUnavailablePage = 'opportunity unavailable page',
   OpportunityWelcomePage = 'opportunity welcome page',
   ProfileSettingsMenu = 'profile settings menu',
+  HomepageButton = 'homepage button',
+  Fullscreen = 'fullscreen',
 }
 
 export enum NotificationChannel {