diff --git a/packages/shared/src/components/VerifiedCompanyUserBadge.tsx b/packages/shared/src/components/VerifiedCompanyUserBadge.tsx index 6af924dbdb5..9f96a413cc4 100644 --- a/packages/shared/src/components/VerifiedCompanyUserBadge.tsx +++ b/packages/shared/src/components/VerifiedCompanyUserBadge.tsx @@ -15,6 +15,10 @@ export type VerifiedCompanyUserBadgeProps = { size?: ProfileImageSize; showCompanyName?: boolean; showVerified?: boolean; + companyNameTypography?: { + type: TypographyType; + color?: TypographyColor; + }; }; export const VerifiedCompanyUserBadge = ({ @@ -22,6 +26,7 @@ export const VerifiedCompanyUserBadge = ({ size = ProfileImageSize.Size16, showCompanyName, showVerified, + companyNameTypography, }: VerifiedCompanyUserBadgeProps): ReactElement => { const { isVerified } = useUserCompaniesQuery(); const { companies } = user; @@ -54,8 +59,8 @@ export const VerifiedCompanyUserBadge = ({ /> {showCompanyName && ( {companies[0].name} diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx index bc402eb40a9..756624788f4 100644 --- a/packages/shared/src/components/profile/ProfileHeader.tsx +++ b/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) => {
{bio && {bio}} - {/* 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 && ( -
+
+ {user?.companies?.length > 0 && ( -
- )} */} + )} + {user?.companies?.length > 0 && user?.location && ( + + )} + {user?.location && ( + + {locationToString(user.location)} + + )} +
- @{username} - + + @{username} + + = ({ 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', diff --git a/packages/shared/src/graphql/users.ts b/packages/shared/src/graphql/users.ts index 99584f9aa1b..47f38a09bf8 100644 --- a/packages/shared/src/graphql/users.ts +++ b/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 diff --git a/packages/shared/src/lib/user.ts b/packages/shared/src/lib/user.ts index 94e1c7d2b1a..3fd59dc8a4b 100644 --- a/packages/shared/src/lib/user.ts +++ b/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 {