Merge branch 'dev' into onboarding

Author: jmgasper

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

@@ -0,0 +1,19 @@
+@import "@libs/ui/styles/includes";
+
+.wrap {
+    margin-top: $sp-2;
+
+    &:global(.mt0) {
+        margin-top: 0;
+    }
+}
+
+.addButton {
+    padding: 0 !important;
+    color: $black-100;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}

src/apps/profiles/src/components/AddButton/AddButton.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline } from '~/libs/ui'
+
+import styles from './AddButton.module.scss'
+
+interface AddButtonProps {
+    className?: string
+    label?: string
+    onClick: () => void
+    variant?: 'mt0'
+}
+
+const AddButton: FC<AddButtonProps> = props => (
+    <div className={classNames(styles.wrap, props.variant, props.className)}>
+        <Button
+            icon={IconOutline.PlusIcon}
+            onClick={props.onClick}
+            className={styles.addButton}
+            size='lg'
+            label={props.label}
+            link
+            variant='linkblue'
+        />
+    </div>
+)
+
+export default AddButton

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

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

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx

@@ -1,18 +1,20 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 
 import { Button, IconOutline } from '~/libs/ui'
 
 import styles from './EditMemberPropertyBtn.module.scss'
 
 interface EditMemberPropertyBtnProps {
+    className?: string
     onClick: () => void
 }
 
 const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMemberPropertyBtnProps) => (
     <Button
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
-        className={styles.editMemberPropertyBtn}
+        className={classNames(styles.editMemberPropertyBtn, props.className)}
         size='lg'
     />
 )

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

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

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

@@ -16,9 +16,14 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: $sp-10;
+        margin-bottom: $sp-4;
         &.emptyDesc {
             margin-bottom: 0;
         }
     }
 }
+
+.empty {
+    height: auto;
+    margin-top: $sp-4;
+}

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

@@ -4,11 +4,13 @@ import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
 import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
+import { Button } from '~/libs/ui'
 
-import { EditMemberPropertyBtn, EmptySection } from '../../components'
+import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifyAboutMeModal } from './ModifyAboutMeModal'
+import MemberRatingCard from './MemberRatingCard/MemberRatingCard'
 import styles from './AboutMe.module.scss'
 
 interface AboutMeProps {
@@ -71,25 +73,48 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                 {' '}
                 {props.profile?.firstName || props.profile?.handle}
             </p>
+
+            <MemberRatingCard profile={props.profile} />
+
             <div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
                 <p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
-                {
-                    canEdit && (
-                        <EditMemberPropertyBtn
-                            onClick={handleEditClick}
-                        />
-                    )
-                }
+                {canEdit && !hasEmptyDescription && (
+                    <EditMemberPropertyBtn
+                        onClick={handleEditClick}
+                    />
+                )}
             </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}
-                />
+                <>
+                    <EmptySection
+                        className={styles.empty}
+                        selfMessage={`
+                            Your bio is an opportunity to share your personality
+                            and interests with the community and customers.
+                        `}
+                        isSelf={canEdit}
+                    >
+                        I&apos;m a proud Topcoder member, working hard to solve some of the worlds biggest problems.
+                        <br />
+                        <br />
+                        I&apos;m excited to hear about your technology challenges and look forward to being
+                        on your next project.
+                        <br />
+                        <Button
+                            link
+                            variant='linkblue'
+                            size='lg'
+                        >
+                            Let&apos;s connect!
+                        </Button>
+                    </EmptySection>
+                    {canEdit && (
+                        <AddButton
+                            label='Add your bio'
+                            onClick={handleEditClick}
+                        />
+                    )}
+                </>
             )}
             <p>{props.profile?.description}</p>
 

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

@@ -0,0 +1,36 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background-color: $tc-white;
+    padding: $sp-3;
+    margin: $sp-4 0;
+    border-radius: 16px;
+    width: 100%;
+
+    .innerWrap {
+        background-image: linear-gradient(90deg, #05456D, #0A7AC0);
+        color: $tc-white;
+        border-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+        padding: $sp-4;
+
+        .valueWrap {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .value {
+                font-size: 26px;
+                font-weight: 500;
+                font-family: $font-barlow-condensed;
+                line-height: 28px;
+            }
+
+            .name {
+                font-size: 12px;
+                line-height: 18px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,58 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { FC, useMemo } from 'react'
+
+import { useMemberStats, UserProfile, UserStats } from '~/libs/core'
+
+import styles from './MemberRatingCard.module.scss'
+
+interface MemberRatingCardProps {
+    profile: UserProfile
+}
+
+const MemberRatingCard: FC<MemberRatingCardProps> = (props: MemberRatingCardProps) => {
+    const memberStats: UserStats | undefined = useMemberStats(props.profile.handle)
+
+    const maxPercentile: number = useMemo(() => {
+        let memberPercentile: number = 0
+        if (memberStats?.DATA_SCIENCE) {
+            memberPercentile = memberStats.DATA_SCIENCE.MARATHON_MATCH?.rank?.percentile || 0
+            if ((memberStats.DATA_SCIENCE.SRM?.rank?.percentile || 0) > memberPercentile) {
+                memberPercentile = memberStats.DATA_SCIENCE.SRM.rank?.percentile || 0
+            }
+        }
+
+        if (memberStats?.DEVELOP) {
+            memberStats.DEVELOP.subTracks.forEach((subTrack: any) => {
+                const subPercentile = subTrack.rank.percentile || subTrack.rank.overallPercentile || 0
+                if (subPercentile > memberPercentile) {
+                    memberPercentile = subPercentile
+                }
+            })
+        }
+
+        return memberPercentile
+    }, [memberStats])
+
+    return memberStats?.maxRating?.rating ? (
+        <div className={styles.container}>
+            <div className={styles.innerWrap}>
+                <div className={styles.valueWrap}>
+                    <p className={styles.value}>{memberStats?.maxRating?.rating}</p>
+                    <p className={styles.name}>Rating</p>
+                </div>
+                <div className={styles.valueWrap}>
+                    <p className={styles.value}>
+                        {Number(maxPercentile)
+                            .toFixed(2)}
+                    </p>
+                    <p className={styles.name}>Percentile</p>
+                </div>
+                <div className='body-small-medium'>
+                    <a href='#' className={styles.link}>What is this?</a>
+                </div>
+            </div>
+        </div>
+    ) : <></>
+}
+
+export default MemberRatingCard

src/apps/profiles/src/member-profile/about-me/MemberRatingCard/index.ts

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