feat: add location and company to ProfileHeader

packages/shared/src/components/VerifiedCompanyUserBadge.tsx

@@ -15,13 +15,18 @@ export type VerifiedCompanyUserBadgeProps = {
   size?: ProfileImageSize;
   showCompanyName?: boolean;
   showVerified?: boolean;
+  companyNameTypography?: {
+    type: TypographyType;
+    color?: TypographyColor;
+  };
 };
 
 export const VerifiedCompanyUserBadge = ({
   user,
   size = ProfileImageSize.Size16,
   showCompanyName,
   showVerified,
+  companyNameTypography,
 }: VerifiedCompanyUserBadgeProps): ReactElement => {
   const { isVerified } = useUserCompaniesQuery();
   const { companies } = user;
@@ -54,8 +59,8 @@ export const VerifiedCompanyUserBadge = ({
         />
         {showCompanyName && (
           <Typography
-            type={TypographyType.Footnote}
-            color={TypographyColor.Secondary}
+            type={companyNameTypography.type}
+            color={companyNameTypography?.color || TypographyColor.Secondary}
           >
             {companies[0].name}
           </Typography>

packages/shared/src/components/profile/ProfileHeader.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import dynamic from 'next/dynamic';
 import { Image } from '../image/Image';
-import { Typography, TypographyType } from '../typography/Typography';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
 import { EditIcon, PlusIcon } from '../icons';
 import type { PublicProfile } from '../../lib/user';
 import type { UserStatsProps } from './UserStats';
@@ -12,6 +16,9 @@ import { Button, ButtonVariant } from '../buttons/Button';
 import { webappUrl } from '../../lib/constants';
 import Link from '../utilities/Link';
 import { useAuthContext } from '../../contexts/AuthContext';
+import { ProfileImageSize } from '../ProfilePicture';
+import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
+import { locationToString } from '../../lib/utils';
 
 const ProfileActions = dynamic(
   () =>
@@ -60,20 +67,38 @@ const ProfileHeader = ({ user, userStats }: ProfileHeaderProps) => {
         </div>
         <div className="flex flex-col gap-2">
           {bio && <Typography type={TypographyType.Body}>{bio}</Typography>}
-          {/* TODO: Implement company badge from experience when implemented. We will have to either update the VerifiedCompanyUserBadge component, or add the badge + job separately here */}
-          {/* {user?.companies?.length > 0 && (
-            <div className="flex">
+          <div className="flex items-center">
+            {user?.companies?.length > 0 && (
               <VerifiedCompanyUserBadge
-                size={ProfileImageSize.Small}
+                size={ProfileImageSize.XSmall}
                 user={user}
                 showCompanyName
-                showVerified
+                showVerified={false}
+                companyNameTypography={{
+                  type: TypographyType.Subhead,
+                }}
               />
-            </div>
-          )} */}
+            )}
+            {user?.companies?.length > 0 && user?.location && (
+              <Separator className="text-text-secondary" />
+            )}
+            {user?.location && (
+              <Typography
+                type={TypographyType.Subhead}
+                color={TypographyColor.Secondary}
+              >
+                {locationToString(user.location)}
+              </Typography>
+            )}
+          </div>
           <div className="flex items-center">
-            <Typography type={TypographyType.Subhead}>@{username}</Typography>
-            <Separator />
+            <Typography
+              type={TypographyType.Subhead}
+              color={TypographyColor.Secondary}
+            >
+              @{username}
+            </Typography>
+            <Separator className="text-text-secondary" />
             <JoinedDate
               className="text-text-secondary typo-subhead"
               date={new Date(user.createdAt)}

packages/shared/src/features/profile/components/experience/forms/UserCertificationForm.spec.tsx

@@ -33,7 +33,7 @@ const FormWrapper: React.FC<FormWrapperProps> = ({
     defaultValues: {
       title: '',
       customCompanyName: '',
-      currentPosition: false,
+      current: false,
       startedAt: null,
       endedAt: null,
       externalReferenceId: '',
@@ -157,7 +157,7 @@ describe('UserCertificationForm', () => {
     const defaultValues = {
       title: 'Google Cloud Professional Data Engineer',
       customCompanyName: 'Google',
-      currentPosition: true,
+      current: true,
       externalReferenceId: 'GCP-987654321',
       url: 'https://example-cloud.com/certification/verify/987654321',
       description: 'Expertise in data engineering on Google Cloud Platform',

packages/shared/src/graphql/users.ts

@@ -63,6 +63,11 @@ export const USER_BY_ID_STATIC_FIELDS_QUERY = `
       readmeHtml
       isPlus
       experienceLevel
+      location {
+        city
+        subdivision
+        country
+      }
       companies {
         name
         image

packages/shared/src/lib/user.ts

@@ -58,6 +58,7 @@ export interface PublicProfile {
   isPlus?: boolean;
   plusMemberSince?: Date;
   experienceLevel?: keyof typeof UserExperienceLevel;
+  location?: TLocation;
 }
 
 export enum UserExperienceLevel {