Merge pull request #719 from topcoder-platform/MP-170_empty-profile-public

MP-170 empty profile public, MP-172 empty self profile -> dev

Author: vas3a

src/apps/profiles/src/components/EmptySection/EmptySection.module.scss

@@ -0,0 +1,31 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    flex: 1 1;
+    width: 100%;
+    height: 100%;
+
+    .warning {
+        color: $red-100;
+    }
+}
+
+.publicContent {
+    background: $black-10;
+    border-radius: $sp-4;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    text-align: center;
+
+    gap: $sp-8;
+    padding: $sp-15 $sp-11;
+
+    &:global(.m-lg) {
+        padding: $sp-15 2*$sp-15;
+    }
+
+}

src/apps/profiles/src/components/EmptySection/EmptySection.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import styles from './EmptySection.module.scss'
+
+interface EmptySectionProps {
+    children?: ReactNode
+    className?: string
+    isSelf?: boolean
+    selfMessage?: string
+    title?: string
+    wide?: boolean
+}
+
+const EmptySection: FC<EmptySectionProps> = props => (
+    <div
+        className={
+            classNames(
+                props.className,
+                styles.wrap,
+                !props.isSelf && props.children && styles.publicContent,
+                props.wide && 'm-lg',
+            )
+        }
+    >
+        {props.isSelf
+            ? (
+                <div className={classNames('body-main', styles.warning)}>
+                    {props.selfMessage}
+                </div>
+            )
+            : (
+                <>
+                    {props.title && (
+                        <div className='body-medium-bold'>{props.title}</div>
+                    )}
+                    {props.children}
+                </>
+            )}
+    </div>
+)
+
+export default EmptySection

src/apps/profiles/src/components/EmptySection/index.ts

@@ -0,0 +1 @@
+export { default as EmptySection } from './EmptySection'

src/apps/profiles/src/components/index.ts

@@ -15,3 +15,4 @@ export * from './LogoDesignDetailsModal'
 export * from './WebDesignDetailsModal'
 export * from './DesignF2FDetailsModal'
 export * from './EditMemberPropertyBtn'
+export * from './EmptySection'

src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss

@@ -17,5 +17,8 @@
         align-items: center;
         justify-content: center;
         margin-bottom: $sp-10;
+        &.emptyDesc {
+            margin-bottom: 0;
+        }
     }
-}
+}

src/apps/profiles/src/member-profile/about-me/AboutMe.tsx

@@ -1,10 +1,11 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
+import classNames from 'classnames'
 
 import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
 
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifyAboutMeModal } from './ModifyAboutMeModal'
@@ -32,6 +33,10 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
     const memberTitleTrait: any
         = memberPersonalizationTraits?.[0]?.traits?.data?.find((trait: any) => trait.profileSelfTitle)
 
+    const hasEmptyDescription = useMemo(() => (
+        props.profile && !props.profile.description
+    ), [props.profile])
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.aboutMe) {
             setIsEditMode(true)
@@ -66,7 +71,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                 {' '}
                 {props.profile?.firstName || props.profile?.handle}
             </p>
-            <div className={styles.wizzardWrap}>
+            <div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
                 <p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
                 {
                     canEdit && (
@@ -76,6 +81,16 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                     )
                 }
             </div>
+            {hasEmptyDescription && (
+                <EmptySection
+                    className={styles.empty}
+                    selfMessage={`
+                        Your bio is an opportunity to share your personality
+                        and interests with the community and customers.
+                    `}
+                    isSelf={canEdit}
+                />
+            )}
             <p>{props.profile?.description}</p>
 
             {

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss

@@ -22,5 +22,6 @@
     .educationContentWrap {
         display: flex;
         flex-direction: column;
+        padding-bottom: $sp-8;
     }
 }

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -5,7 +5,7 @@ import { KeyedMutator } from 'swr'
 import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { MemberTCAInfo } from '../tca-info'
 
 import { ModifyEducationModal } from './ModifyEducationModal'
@@ -71,14 +71,24 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
             </div>
 
             <div className={styles.educationContentWrap}>
-                {
-                    memberEducation?.map((education: UserTrait) => (
+                {(memberEducation?.length as number) > 0
+                    ? memberEducation?.map((education: UserTrait) => (
                         <EducationCard
                             key={`${education.schoolCollegeName}-${education.major}`}
                             education={education}
                         />
                     ))
-                }
+                    : (
+                        <EmptySection
+                            selfMessage={`
+                                Including your education and certifications enhances the strength
+                                of your profile in comparison to others.
+                            `}
+                            isSelf={canEdit}
+                        >
+                            I&apos;m still building up my education and certifications here at Topcoder.
+                        </EmptySection>
+                    )}
             </div>
 
             <MemberTCAInfo profile={props.profile} />

src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss

@@ -1,7 +1,6 @@
 @import '@libs/ui/styles/includes';
 
 .educationCard {
-    margin-bottom: $sp-4;
     flex: 1;
 
     .educationCardHeader {

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { isVerifiedSkill, UserEMSISkill, UserProfile } from '~/libs/core'
 import { IconOutline } from '~/libs/ui'
 
-import { EditMemberPropertyBtn } from '../../components'
+import { EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
@@ -68,8 +68,8 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             </div>
 
             <div className={styles.skillsWrap}>
-                {
-                    memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
+                {memberEMSISkills?.length > 0
+                    ? memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
                         <div
                             className={classNames(
                                 styles.skillItem,
@@ -81,7 +81,17 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                             {isVerifiedSkill(memberEMSISkill.skillSources) && <IconOutline.CheckCircleIcon />}
                         </div>
                     ))
-                }
+                    : (
+                        <EmptySection
+                            title='Topcoder verifies and tracks skills as our members complete projects and challenges.'
+                            wide
+                            selfMessage='Adding at least five skills will increase your visibility with customers.'
+                            isSelf={canEdit}
+                        >
+                            This member has not yet provided skills, but check back soon as their skills will grow as
+                            they complete project tasks.
+                        </EmptySection>
+                    )}
             </div>
 
             {