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 {