Merge branch 'dev' into onboarding

Author: jmgasper

.vscode/components.code-snippets

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

.vscode/settings.json

@@ -42,6 +42,7 @@ module.exports = {
             '@devCenter': resolve('src/apps/dev-center/src'),
             '@gamificationAdmin': resolve('src/apps/gamification-admin/src'),
             '@talentSearch': resolve('src/apps/talent-search/src'),
+            '@profiles': resolve('src/apps/profiles/src'),
 
             '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files

craco.config.js

@@ -2,20 +2,20 @@ import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
 import { routerContext, RouterContextData } from '~/libs/core'
+import { SharedSwrConfig } from '~/libs/shared'
 
 import { toolTitle } from './profiles.routes'
-import { ProfileSwr } from './lib'
 
 const ProfilesApp: FC<{}> = () => {
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
 
     return (
-        <ProfileSwr>
+        <SharedSwrConfig>
             <Outlet />
             <Routes>
                 {getChildRoutes(toolTitle)}
             </Routes>
-        </ProfileSwr>
+        </SharedSwrConfig>
     )
 }
 

src/apps/profiles/src/ProfilesApp.tsx

@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './BannersIconsDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface BannersIconsDetailsModalProps {
+    onClose: () => void
+    bannersIconsStats: MemberStats | undefined
+}
+
+const BannersIconsDetailsModal: FC<BannersIconsDetailsModalProps> = (props: BannersIconsDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Banners Or Icons'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.bannersIconsStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.bannersIconsStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default BannersIconsDetailsModal

src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.tsx

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

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

@@ -55,7 +55,9 @@ const DesignF2FDetailsModal: FC<DesignF2FDetailsModalProps> = (props: DesignF2FD
                         Screening Success Rate
                     </div>
                     <div>
-                        <span className='member-stat-value'>{props.designF2FStats?.avgPlacement}</span>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.designF2FStats?.avgPlacement || 0)}
+                        </span>
                         Average Placement
                     </div>
                 </div>

src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx

@@ -34,7 +34,9 @@ const EmptySection: FC<EmptySectionProps> = props => (
                     {props.title && (
                         <div className='body-medium-bold'>{props.title}</div>
                     )}
-                    {props.children}
+                    <div className='body-main'>
+                        {props.children}
+                    </div>
                 </>
             )}
     </div>

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

@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}