Merge branch 'dev' into profiles-app

Author: kkartunov

.storybook/main.ts

@@ -32,7 +32,15 @@ const config: StorybookConfig = {
         };
     }
 
-    return config;
+    return {
+        ...config,
+        plugins: config.plugins?.filter(plugin => {
+          if (plugin.constructor.name === 'ESLintWebpackPlugin') {
+            return false
+          }
+          return true
+        }),
+    };
   }
 };
 export default config;

.vscode/components.code-snippets

@@ -26,7 +26,7 @@
         "interface ${1:ComponentName}Props {",
         "}",
         "",
-        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = (props: ${1:ComponentName}Props) => {",
+        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = props => {",
         "",
         "  return (",
         "    <div className={styles['wrap']}>",

src/.eslintrc.js

@@ -71,7 +71,7 @@ module.exports = {
             parameter: true,
             memberVariableDeclaration: true,
             callSignature: true,
-            variableDeclaration: true,
+            variableDeclaration: false,
             arrayDestructuring: false,
             objectDestructuring: true,
           },

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 { notifyUniNavi } from '../../lib'
 
@@ -33,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)
@@ -68,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 && (
@@ -78,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;
     }
 }