Release-11.0.1

src/core/adaptors/users/index.adaptors.tsx

@@ -5,10 +5,12 @@ import {
   addLanguage,
   Education,
   Experience,
+  getUserDetails,
   importLinkedin,
   LanguageCode,
   ProjectType,
   reviews,
+  UserDetails,
 } from 'src/core/api';
 import { getIdentityMeta } from 'src/core/utils';
 import { v4 as uuidv4 } from 'uuid';
@@ -130,3 +132,14 @@ export const getReviewsAdaptor = async (page = 1, limit = 10): Promise<AdaptorRe
     return { data: null, error: 'Error in getting reviews list' };
   }
 };
+
+//FIXME Use this type after migrating to v3
+export const getUserDetailsAdaptor = async (username: string): Promise<AdaptorRes<UserDetails>> => {
+  try {
+    const data = await getUserDetails(username);
+    return { data, error: null };
+  } catch (error) {
+    console.error('Error in getting user details: ', error);
+    return { data: null, error: 'Error in getting user details' };
+  }
+};

src/core/api/users/users.api.ts

@@ -1,3 +1,4 @@
+import { config } from 'src/config';
 import { post, get } from 'src/core/api/http';
 import { ApplicantsRes, JobsRes, MissionsRes, OffersRes } from 'src/core/api/jobs/jobs.types';
 import { FilterReq, PaginateReq, SuccessRes } from 'src/core/api/types';
@@ -23,8 +24,14 @@ import {
   ReferReq,
   ImportRes,
   Reviews,
+  UserDetails,
 } from './users.types';
 
+const overwrittenConfigV3 = {
+  baseURL: config.baseURLV3,
+  withCredentials: false,
+};
+
 export async function profile(): Promise<User> {
   return (await get<User>('user/profile')).data;
 }
@@ -159,3 +166,7 @@ export async function importLinkedin(file: File): Promise<ImportRes> {
 export async function reviews(params: PaginateReq, filters?: FilterReq): Promise<Reviews> {
   return (await get<Reviews>('user/reviews', { params }, filters)).data;
 }
+
+export async function getUserDetails(username: string): Promise<UserDetails> {
+  return (await get<UserDetails>(`users/by-username/${username}`, { ...overwrittenConfigV3 })).data;
+}

src/core/api/users/users.types.ts

@@ -268,3 +268,27 @@ export interface Review {
 export interface Reviews extends PaginateRes {
   items: Review[];
 }
+
+//FIXME Use this type after migrating to v3
+export interface UserDetails {
+  id: string;
+  first_name: string;
+  last_name: string;
+  username: string;
+  mission: string | null;
+  impact_points: number;
+  social_causes: string[];
+  followers: number;
+  followings: number;
+  skills: string[];
+  open_to_work: boolean;
+  open_to_volunteer: boolean;
+  identity_verified: boolean;
+  events: string[];
+  tags: string[];
+  avatar_id: string | null;
+  avatar: Media | null;
+  cover_id: string | null;
+  cover: Media | null;
+  created_at: string;
+}

src/core/router/router.blueprint.tsx

@@ -40,7 +40,7 @@ import { Layout as NowruzLayout } from 'src/modules/layout';
 import FallBack from 'src/pages/fallback/fallback';
 import { RootState } from 'src/store';
 
-import { getReviewsAdaptor } from '../adaptors/users/index.adaptors';
+import { getReviewsAdaptor, getUserDetailsAdaptor } from '../adaptors/users/index.adaptors';
 import { DeepLinks } from '../deepLinks';
 import { checkSearchFilters } from '../utils';
 
@@ -84,12 +84,14 @@ export const blueprint: RouteObject[] = [
                           kind: 'SERVICE',
                         });
                         const reviews = await getReviewsAdaptor(1, 5);
+                        const userDetails = await getUserDetailsAdaptor(params.id);
                         // Keep this, it might be needed in the future
                         // const [userBadges, missions] = await Promise.all([badges(user.id), userMissions(user.id)]);
                         return {
                           user,
                           services: services.data,
                           reviews: reviews.data,
+                          userTags: userDetails.data?.tags || [],
                           // badges: userBadges,
                           // missions,
                         };

src/core/translation/locales/en/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "Request sent",
       "connect": "Connect",
       "message": "Message"
-    }
+    },
+    "available-for-work": "Available for work",
+    "hiring": "Hiring"
   },
   "main-info": {
     "connections": "connections",

src/core/translation/locales/es/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "Solicitud enviada",
       "connect": "Conectar",
       "message": "Mensaje"
-    }
+    },
+    "available-for-work": "Disponible para trabajar",
+    "hiring": "Contratando"
   },
   "main-info": {
     "connections": "conexiones",

src/core/translation/locales/jp/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "リクエスト送信済み",
       "connect": "接続",
       "message": "メッセージ"
-    }
+    },
+    "available-for-work": "仕事を探しています",
+    "hiring": "採用中"
   },
   "main-info": {
     "connections": "つながり",

src/core/translation/locales/kr/profile.json

@@ -16,7 +16,9 @@
       "request-sent": "요청 전송됨",
       "connect": "연결",
       "message": "메시지"
-    }
+    },
+    "available-for-work": "구직 중",
+    "hiring": "채용 중"
   },
   "main-info": {
     "connections": "연결",

src/modules/userProfile/components/profileHeader/desktopHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ConnectStatus, Organization, User } from 'src/core/api';
-import { getIdentityMeta } from 'src/core/utils';
+import { getIdentityMeta, translate } from 'src/core/utils';
 import { ThreeDotsButton } from 'src/modules/connections/threeDotsButton';
 import { AvatarProfile } from 'src/modules/general/components/avatarProfile';
 import { Button } from 'src/modules/general/components/Button';
@@ -26,11 +26,11 @@ interface DesktopHeaderProps {
   displayConnectButton: () => boolean;
   displayMessageButton: () => boolean;
   displayThreeDotsButton: () => boolean;
+  userTags: string[];
 }
 export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
   identity,
   myProfile,
-  isLoggedIn,
   connectStatus,
   handleOpenEditInfoModal,
   handleOpenQRCodeModal,
@@ -41,6 +41,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
   displayConnectButton,
   displayMessageButton,
   displayThreeDotsButton,
+  userTags,
 }) => {
   const { username, name, profileImage } = getIdentityMeta(identity);
 
@@ -59,7 +60,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
             <div className="text-2xl md:text-3xl font-semibold text-Gray-light-mode-900">{name}</div>
             {type === 'users' && (identity as User).open_to_work && (
               <Chip
-                label="Available for work"
+                label={translate('profile-header.available-for-work')}
                 size="lg"
                 theme="secondary"
                 startIcon={<Dot color={variables.color_success_500} size="small" shadow={false} />}
@@ -69,13 +70,16 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
 
             {type === 'organizations' && (identity as Organization).hiring && (
               <Chip
-                label="Hiring"
+                label={translate('profile-header.hiring')}
                 size="lg"
                 theme="secondary"
                 startIcon={<Dot color={variables.color_success_500} size="small" shadow={false} />}
                 shape="sharp"
               />
             )}
+
+            {type === 'users' &&
+              userTags.map(tag => <Chip key={tag} label={tag} size="lg" theme="secondary" shape="sharp" />)}
           </div>
           <div className="text-base font-normal text-Gray-light-mode-500">{username}</div>
         </div>
@@ -88,7 +92,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
             onClick={handleOpenQRCodeModal}
           >
             <Icon fontSize={20} name="share-01" color={variables.color_grey_700} />
-            Share
+            {translate('profile-header.actions.share')}
           </Button>
           {displayMessageButton() && (
             <Button
@@ -97,7 +101,7 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
               style={{ height: '40px', fontSize: '14px' }}
               onClick={handleMessage}
             >
-              Message
+              {translate('profile-header.actions.message')}
             </Button>
           )}
           {displayConnectButton() && (
@@ -108,7 +112,9 @@ export const DesktopHeader: React.FC<DesktopHeaderProps> = ({
               style={{ height: '40px', fontSize: '14px' }}
               onClick={() => setOpenConnectRequest(true)}
             >
-              {connectStatus === 'PENDING' ? 'Request sent' : 'Connect'}
+              {connectStatus === 'PENDING'
+                ? translate('profile-header.actions.request-sent')
+                : translate('profile-header.actions.connect')}
             </Button>
           )}
           {displayThreeDotsButton() && <ThreeDotsButton otherIdentityId={identity?.id || ''} />}

src/modules/userProfile/components/profileHeader/index.tsx

@@ -16,7 +16,11 @@ import { EditImageModal } from '../../containers/editImage';
 import { EditInfoOrgModal } from '../../containers/editInfoOrg';
 import { ShareProfile } from '../../containers/shareProfile';
 
-export const ProfileHeader = () => {
+interface ProfileHeaderProps {
+  userTags?: string[];
+}
+
+export const ProfileHeader = ({ userTags = [] }: ProfileHeaderProps) => {
   const {
     identity,
     identityType,
@@ -100,13 +104,15 @@ export const ProfileHeader = () => {
           displayConnectButton={displayConnectButton}
           displayMessageButton={displayMessageButton}
           displayThreeDotsButton={displayThreeDotsButton}
+          userTags={userTags}
         />
         <MobileHeader
           identity={identity}
           type={identityType}
           myProfile={myProfile}
           handleOpenEditInfoModal={handleOpenEditInfoModal}
           handleOpenEditAvatar={handleOpenEditAvatar}
+          userTags={userTags}
         />
       </div>
       <div className="md:hidden">

src/modules/userProfile/components/profileHeader/mobileHeader.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Organization, User } from 'src/core/api';
-import { getIdentityMeta } from 'src/core/utils';
+import { getIdentityMeta, translate } from 'src/core/utils';
 import { AvatarProfile } from 'src/modules/general/components/avatarProfile';
+import { Chip } from 'src/modules/general/components/Chip';
 import { Dot } from 'src/modules/general/components/dot';
 import { IconButton } from 'src/modules/general/components/iconButton';
 import variables from 'src/styles/constants/_exports.module.scss';
@@ -14,13 +15,15 @@ interface MobileHeaderProps {
   handleOpenEditInfoModal: () => void;
   handleOpenEditAvatar: () => void;
   type: 'users' | 'organizations';
+  userTags: string[];
 }
 export const MobileHeader: React.FC<MobileHeaderProps> = ({
   identity,
   myProfile,
   handleOpenEditInfoModal,
   handleOpenEditAvatar,
   type,
+  userTags,
 }) => {
   const { profileImage, name, username } = getIdentityMeta(identity);
   return (
@@ -48,7 +51,15 @@ export const MobileHeader: React.FC<MobileHeaderProps> = ({
         {type === 'users' && (identity as User).open_to_work && (
           <div className={css.status}>
             <Dot color={variables.color_success_500} size="small" shadow={false} />
-            <span className={css.statusText}>Available for work</span>
+            <span className={css.statusText}>{translate('profile-header.available-for-work')}</span>
+          </div>
+        )}
+
+        {type === 'users' && !!userTags.length && (
+          <div className="flex flex-wrap gap-2 mt-2">
+            {userTags.map(tag => (
+              <Chip key={tag} label={tag} size="lg" theme="secondary" shape="sharp" />
+            ))}
           </div>
         )}
 

src/pages/userProfile/index.tsx

@@ -6,11 +6,11 @@ import css from './userProfile.module.scss';
 import { useUserProfile } from './useUserProfile';
 
 export const UserProfile = () => {
-  const { tabs, activeTabIndex } = useUserProfile();
+  const { tabs, activeTabIndex, userTags } = useUserProfile();
 
   return (
     <div className="w-full">
-      <ProfileHeader />
+      <ProfileHeader userTags={userTags} />
       <div className={`${css.content} p-4 pt-0 md:p-8 md:pt-0`}>
         <div className={` ${css.leftCol} hidden md:block`}>
           <MainInfo />

src/pages/userProfile/useUserProfile.tsx

@@ -10,8 +10,9 @@ import { setIdentity, setIdentityType } from 'src/store/reducers/profile.reducer
 export const useUserProfile = () => {
   const { hash } = useLocation();
   const dispatch = useDispatch();
-  const { user } = useLoaderData() as {
+  const { user, userTags } = useLoaderData() as {
     user: UserProfile;
+    userTags: string[];
   };
 
   dispatch(setIdentity(user));
@@ -30,5 +31,5 @@ export const useUserProfile = () => {
     '#services': 1,
   };
 
-  return { tabs, activeTabIndex: activeTabIndex[hash] || 0 };
+  return { tabs, activeTabIndex: activeTabIndex[hash] || 0, userTags };
 };