feat: add profile completion card to ad slot

packages/shared/src/components/Feed.tsx

@@ -64,6 +64,7 @@ import { getProductsQueryOptions } from '../graphql/njord';
 import { useUpdateQuery } from '../hooks/useUpdateQuery';
 import { BriefBannerFeed } from './cards/brief/BriefBanner/BriefBannerFeed';
 import { ActionType } from '../graphql/actions';
+import { useProfileCompletionIndicator } from '../hooks/profile/useProfileCompletionIndicator';
 
 const FeedErrorScreen = dynamic(
   () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'),
@@ -204,6 +205,8 @@ export default function Feed<T>({
   });
   const showBriefCard = isMyFeed && briefCardFeatureValue && hasNoBriefAction;
   const [getProducts] = useUpdateQuery(getProductsQueryOptions());
+  const { showIndicator: showProfileCompletion } =
+    useProfileCompletionIndicator();
 
   const { value: briefBannerPage } = useConditionalFeature({
     feature: briefFeedEntrypointPage,
@@ -239,6 +242,7 @@ export default function Feed<T>({
         disableAds,
         adPostLength: isSquadFeed ? 2 : undefined,
         showAcquisitionForm,
+        showProfileCompletion,
         ...(showMarketingCta && { marketingCta }),
         ...(plusEntryFeed && { plusEntry: plusEntryFeed }),
         feedName,

packages/shared/src/components/FeedItemComponent.tsx

@@ -45,6 +45,7 @@ import { MarketingCtaBriefing } from './marketingCta/MarketingCtaBriefing';
 import { MarketingCtaYearInReview } from './marketingCta/MarketingCtaYearInReview';
 import PollGrid from './cards/poll/PollGrid';
 import { PollList } from './cards/poll/PollList';
+import { ProfileCompletionGrid } from './cards/profileCompletion/ProfileCompletionGrid';
 
 export type FeedItemComponentProps = {
   item: FeedItem;
@@ -141,6 +142,7 @@ const getTags = ({
     AcquisitionFormTag: useListCards
       ? AcquisitionFormList
       : AcquisitionFormGrid,
+    ProfileCompletionTag: ProfileCompletionGrid,
   };
 };
 
@@ -242,6 +244,7 @@ function FeedItemComponent({
     MarketingCtaTag,
     PlusGridTag,
     AcquisitionFormTag,
+    ProfileCompletionTag,
   } = getTags({
     isListFeedLayout: shouldUseListFeedLayout,
     shouldUseListMode,
@@ -379,6 +382,8 @@ function FeedItemComponent({
       );
     case FeedItemType.PlusEntry:
       return <PlusGridTag {...item.plusEntry} />;
+    case FeedItemType.ProfileCompletion:
+      return <ProfileCompletionTag key="profile-completion-card" />;
     default:
       return <PlaceholderTag />;
   }

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

@@ -79,4 +79,5 @@ export enum FeedItemType {
   Placeholder = 'placeholder',
   UserAcquisition = 'userAcquisition',
   MarketingCta = 'marketingCta',
+  ProfileCompletion = 'profileCompletion',
 }

packages/shared/src/components/cards/profileCompletion/ProfileCompletionGrid.tsx

@@ -0,0 +1,127 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import ProgressCircle from '../../ProgressCircle';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../typography/Typography';
+import type { ProfileCompletion as ProfileCompletionData } from '../../../lib/user';
+import { webappUrl } from '../../../lib/constants';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+
+type CompletionItem = {
+  label: string;
+  completed: boolean;
+  redirectPath: string;
+};
+
+const getCompletionItems = (
+  completion: ProfileCompletionData,
+): CompletionItem[] => {
+  return [
+    {
+      label: 'Profile image',
+      completed: completion.hasProfileImage,
+      redirectPath: `${webappUrl}settings/profile`,
+    },
+    {
+      label: 'Headline',
+      completed: completion.hasHeadline,
+      redirectPath: `${webappUrl}settings/profile?field=bio`,
+    },
+    {
+      label: 'Experience level',
+      completed: completion.hasExperienceLevel,
+      redirectPath: `${webappUrl}settings/profile?field=experienceLevel`,
+    },
+    {
+      label: 'Work experience',
+      completed: completion.hasWork,
+      redirectPath: `${webappUrl}settings/profile/experience/work`,
+    },
+    {
+      label: 'Education',
+      completed: completion.hasEducation,
+      redirectPath: `${webappUrl}settings/profile/experience/education`,
+    },
+  ];
+};
+
+const formatNextStep = (incompleteItems: CompletionItem[]): string => {
+  if (incompleteItems.length === 0) {
+    return 'Your profile is complete!';
+  }
+
+  const labels = incompleteItems.map((item) => item.label.toLowerCase());
+  const formattedList =
+    labels.length === 1
+      ? labels[0]
+      : `${labels.slice(0, -1).join(', ')} and ${labels[labels.length - 1]}`;
+
+  return `Add ${formattedList}.`;
+};
+
+export const ProfileCompletionGrid = (): ReactElement | null => {
+  const { user } = useAuthContext();
+  const profileCompletion = user?.profileCompletion;
+
+  const items = useMemo(
+    () => (profileCompletion ? getCompletionItems(profileCompletion) : []),
+    [profileCompletion],
+  );
+
+  const incompleteItems = useMemo(
+    () => items.filter((item) => !item.completed),
+    [items],
+  );
+
+  const nextStep = useMemo(
+    () => formatNextStep(incompleteItems),
+    [incompleteItems],
+  );
+
+  const firstIncompleteItem = incompleteItems[0];
+  const redirectPath = firstIncompleteItem?.redirectPath;
+
+  const progress = profileCompletion?.percentage ?? 0;
+
+  if (!profileCompletion || !redirectPath) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 rounded-16 border border-action-help-active bg-action-help-float px-6 py-4">
+      <ProgressCircle
+        progress={progress}
+        size={48}
+        showPercentage
+        color="help"
+      />
+      <Typography
+        type={TypographyType.Title2}
+        color={TypographyColor.Primary}
+        bold
+      >
+        Profile completion
+      </Typography>
+      <Typography
+        type={TypographyType.Callout}
+        color={TypographyColor.Secondary}
+      >
+        {nextStep}
+      </Typography>
+      <Button
+        className="mt-auto w-full"
+        tag="a"
+        href={redirectPath}
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Small}
+      >
+        Update your profile
+      </Button>
+    </div>
+  );
+};

packages/shared/src/hooks/useFeed.ts

@@ -69,6 +69,7 @@ export type FeedItem =
   | MarketingCtaItem
   | FeedItemBase<FeedItemType.Placeholder>
   | FeedItemBase<FeedItemType.UserAcquisition>
+  | FeedItemBase<FeedItemType.ProfileCompletion>
   | PlusEntryItem;
 
 export const isBoostedPostAd = (item: FeedItem): item is AdPostItem =>
@@ -98,6 +99,7 @@ type UseFeedSettingParams = {
   adPostLength?: number;
   disableAds?: boolean;
   showAcquisitionForm?: boolean;
+  showProfileCompletion?: boolean;
   marketingCta?: MarketingCta;
   plusEntry?: MarketingCta;
   feedName?: string;
@@ -325,6 +327,8 @@ export default function useFeed<T>(
               });
             } else if (withFirstIndex(settings.showAcquisitionForm)) {
               acc.push({ type: FeedItemType.UserAcquisition });
+            } else if (withFirstIndex(settings.showProfileCompletion)) {
+              acc.push({ type: FeedItemType.ProfileCompletion });
             } else {
               acc.push(adItem);
             }
@@ -371,6 +375,7 @@ export default function useFeed<T>(
     feedQuery.dataUpdatedAt,
     settings.marketingCta,
     settings.showAcquisitionForm,
+    settings.showProfileCompletion,
     placeholdersPerPage,
     getAd,
     settings.plusEntry,