Merge pull request #1137 from topcoder-platform/dev

[PROD RELEASE] - Copilot Portal fixes

Author: kkartunov

.circleci/config.yml

@@ -222,7 +222,7 @@ workflows:
                               - LVT-256
                               - CORE-635
                               - feat/system-admin
-                              - pm-1464
+                              - pm-1448_1
 
             - deployQa:
                   context: org-global

src/apps/copilots/src/pages/copilot-opportunity-details/apply-opportunity-modal/ApplyOpportunityModal.tsx

@@ -50,7 +50,7 @@ const ApplyOpportunityModal: FC<ApplyOpportunityModalProps> = props => {
             buttons={
                 !success ? (
                     <>
-                        <Button primary onClick={onApply} label='Apply' />
+                        <Button disabled={!notes?.trim()} primary onClick={onApply} label='Apply' />
                         <Button secondary onClick={props.onClose} label='Cancel' />
                     </>
                 ) : (

src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx

@@ -261,7 +261,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                         <TabsNavbar
                             defaultActive={activeTab}
                             onChange={handleTabChange}
-                            tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                            tabs={getCopilotDetailsTabsConfig(isAdminOrPM, copilotApplications?.length || 0)}
                         />
                     )
                 }

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts

@@ -5,12 +5,16 @@ export enum CopilotDetailsTabViews {
     applications = '1',
 }
 
-export const getCopilotDetailsTabsConfig = (isAdminOrPM: boolean): TabsNavItem[] => (isAdminOrPM ? [
+export const getCopilotDetailsTabsConfig = (isAdminOrPM: boolean, count: number): TabsNavItem[] => (isAdminOrPM ? [
     {
         id: CopilotDetailsTabViews.details,
         title: 'Details',
     },
     {
+        badges: [{
+            count,
+            type: 'info',
+        }],
         id: CopilotDetailsTabViews.applications,
         title: 'Applications',
     },

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplicationAction.tsx

@@ -54,13 +54,17 @@ const CopilotApplicationAction = (
                 !isInvited
                 && copilotApplication.status === CopilotApplicationStatus.PENDING
                 && copilotApplication.opportunityStatus === 'active' && (
-                    <IconSolid.UserAddIcon />
+                    <Tooltip content='Send Invitation'>
+                        <IconSolid.UserAddIcon />
+                    </Tooltip>
                 )
             }
 
             {
                 copilotApplication.status === CopilotApplicationStatus.ACCEPTED && (
-                    <IconSolid.BadgeCheckIcon />
+                    <Tooltip content='Application Accepted'>
+                        <IconSolid.BadgeCheckIcon />
+                    </Tooltip>
                 )
             }
         </div>

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -1,6 +1,7 @@
 import { FC, useContext, useMemo, useState } from 'react'
 import { bind, debounce, isEmpty } from 'lodash'
 import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { profileContext, ProfileContextData } from '~/libs/core'
@@ -16,6 +17,7 @@ import styles from './styles.module.scss'
 // eslint-disable-next-line
 const CopilotRequestForm: FC<{}> = () => {
     const { profile }: ProfileContextData = useContext(profileContext)
+    const navigate = useNavigate()
 
     const [formValues, setFormValues] = useState<any>({})
     const [isFormChanged, setIsFormChanged] = useState(false)
@@ -217,6 +219,10 @@ const CopilotRequestForm: FC<{}> = () => {
                     setIsFormChanged(false)
                     setFormErrors({})
                     setPaymentType('')
+                    // Added a small timeout for the toast to be visible properly to the users
+                    setTimeout(() => {
+                        navigate('/requests')
+                    }, 1000)
                 })
                 .catch(e => {
                     toast.error(e.message)

src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import { Button, ContentLayout, LinkButton, LoadingCircles } from '~/libs/ui'
@@ -17,6 +17,9 @@ import styles from './SearchResultsPage.module.scss'
 const SearchResultsPage: FC = () => {
     const [showSkillsModal, setShowSkillsModal] = useState(false)
 
+    const [currentPage, setCurrentPage] = useState(1)
+    const itemsPerPage = 10
+
     const [skills, setSkills] = useUrlQuerySearchParms('q')
     const {
         loading,
@@ -25,6 +28,27 @@ const SearchResultsPage: FC = () => {
         hasNext,
         total,
     }: InfiniteTalentMatchesResposne = useInfiniteTalentMatches(skills)
+    const paginatedMatches = matches.slice(0, currentPage * itemsPerPage)
+
+    useEffect(() => {
+        const handleScroll: () => void = () => {
+            const scrollY = window.scrollY
+            const visibleHeight = window.innerHeight
+            const fullHeight = document.body.scrollHeight
+            const footerElem = document.getElementById('footer-nav-el')
+            const footerHeight = (footerElem && footerElem.offsetHeight) || 650
+            if (scrollY + visibleHeight >= fullHeight - (footerHeight + 100)) {
+            // Scroll near bottom
+                setCurrentPage(prev => {
+                    const maxPages = Math.ceil(matches.length / itemsPerPage)
+                    return prev < maxPages ? prev + 1 : prev
+                })
+            }
+        }
+
+        window.addEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', handleScroll)
+    }, [matches])
 
     const toggleSkillsModal = useCallback(() => setShowSkillsModal(s => !s), [])
 
@@ -100,7 +124,7 @@ const SearchResultsPage: FC = () => {
                     )}
                 </div>
                 <div className={styles.resultsWrap}>
-                    {matches.map(member => (
+                    {paginatedMatches.map(member => (
                         <TalentCard
                             queriedSkills={skills}
                             member={member}

src/libs/shared/lib/components/profile-picture/ProfilePicture.tsx

@@ -29,8 +29,8 @@ const ProfilePicture: FC<ProfilePictureProps> = props => {
         >
             {!loaded && (
                 <span className={styles.profileInitials}>
-                    {props.member.firstName.slice(0, 1)}
-                    {props.member.lastName.slice(0, 1)}
+                    {props.member?.firstName?.slice(0, 1)}
+                    {props.member?.lastName?.slice(0, 1)}
                 </span>
             )}
             {props.member.photoURL && !error && (