Merge branch 'dev' into onboarding

Author: jmgasper

package.json

@@ -32,6 +32,7 @@
     "apexcharts": "^3.36.0",
     "axios": "^1.1.2",
     "browser-cookies": "^1.2.0",
+    "city-timezones": "^1.2.1",
     "classnames": "^2.3.2",
     "contentful": "^9.2.5",
     "country-calling-code": "0.0.3",

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/lib/helpers.ts

@@ -1,3 +1,10 @@
+import { UserProfile } from '~/libs/core'
+
+declare global {
+    interface Window { tcUniNav: any }
+}
+
+window.tcUniNav = window.tcUniNav || {}
 /**
  * Convert number to fixed digits string
  */
@@ -6,3 +13,11 @@ export function numberToFixed(value: number | string, digits: number = 2): strin
 
     return n ? n.toFixed(digits) : '0'
 }
+
+export function notifyUniNavi(profile: UserProfile): void {
+    if (window?.tcUniNav) {
+        window.tcUniNav('update', '*', {
+            user: { ...profile, photoUrl: profile.photoURL },
+        })
+    }
+}

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,11 +1,13 @@
-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 { notifyUniNavi } from '../../lib'
 
 import { ModifyAboutMeModal } from './ModifyAboutMeModal'
 import styles from './AboutMe.module.scss'
@@ -32,6 +34,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)
@@ -54,6 +60,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
             setIsEditMode(false)
             mutateTraits()
             props.refreshProfile(props.profile.handle)
+            notifyUniNavi(props.profile)
         }, 1000)
     }
 
@@ -66,7 +73,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 +83,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,8 +5,9 @@ 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 { notifyUniNavi } from '../../lib'
 
 import { ModifyEducationModal } from './ModifyEducationModal'
 import { EducationCard } from './EducationCard'
@@ -54,6 +55,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
         setTimeout(() => {
             setIsEditMode(false)
             mutateTraits()
+            notifyUniNavi(props.profile)
         }, 1000)
     }
 
@@ -71,14 +73,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} />