MP-172 - empty profile messages for self view

Author: vas3a

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

@@ -1,12 +1,19 @@
 @import "@libs/ui/styles/includes";
 
 .wrap {
-    background: $black-10;
-    border-radius: $sp-4;
     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;

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

@@ -1,19 +1,42 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
 import styles from './EmptySection.module.scss'
 
-interface EmptySectionProps extends PropsWithChildren {
+interface EmptySectionProps {
+    children?: ReactNode
+    className?: string
+    isSelf?: boolean
+    selfMessage?: string
     title?: string
     wide?: boolean
 }
 
 const EmptySection: FC<EmptySectionProps> = props => (
-    <div className={classNames(styles.wrap, props.wide && 'm-lg')}>
-        {props.title && (
-            <div className='body-medium-bold'>{props.title}</div>
-        )}
-        {props.children}
+    <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>
 )
 

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

@@ -79,7 +79,13 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                         />
                     ))
                     : (
-                        <EmptySection>
+                        <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>
                     )}

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

@@ -85,6 +85,8 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         <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.

src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss

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

src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx

@@ -75,7 +75,10 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
                         <WorkExpirenceCard key={`${work.company}-${work.industry}-${work.position}`} work={work} />
                     ))
                     : (
-                        <EmptySection>
+                        <EmptySection
+                            selfMessage='Adding experience enhances the professional appearance of your profile.'
+                            isSelf={canEdit}
+                        >
                             I&apos;m still building up my experience here at Topcoder.
                         </EmptySection>
                     )}