Merge branch 'PROD-2321_bug-hunt-intake-form' of https://github.com/topcoder-platform/platform-ui into PROD-2321_bug-hunt-intake-form

Author: dave-armstrong-topcoder

src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx

@@ -0,0 +1,26 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import {
+    ContentLayout,
+    routeContext,
+    RouteContextData,
+} from '../../../../lib'
+
+export const intakeFormsTitle: string = 'Work Intake Forms'
+
+const IntakeForms: FC<{}> = () => {
+
+    const { getChildRoutes }: RouteContextData = useContext(routeContext)
+
+    return (
+        <ContentLayout>
+            <Outlet />
+            <Routes>
+                {getChildRoutes(intakeFormsTitle)}
+            </Routes>
+        </ContentLayout>
+    )
+}
+
+export default IntakeForms

src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx

@@ -28,6 +28,7 @@ import { WorkIntakeFormRoutes } from '../../../work-lib/work-provider/work-funct
 import { WorkServicePrice } from '../../../work-service-price'
 import { WorkTypeBanner } from '../../../work-type-banner'
 import { dashboardRoute } from '../../../work.routes'
+import IntakeFormsBreadcrumb from '../intake-forms-breadcrumb/IntakeFormsBreadcrumb'
 
 import { BugHuntFormConfig } from './bug-hunt.form.config'
 import styles from './BugHunt.module.scss'
@@ -52,7 +53,7 @@ const BugHuntIntakeForm: React.FC = () => {
     const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
         = useState<FormDefinition>({ ...BugHuntFormConfig })
 
-    const [formValues, setFormValues]: [any,  Dispatch<any>] = useState({
+    const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
         currentStep: 'basicInfo',
         [ChallengeMetadataName.packageType]: 'standard',
     })
@@ -151,6 +152,10 @@ const BugHuntIntakeForm: React.FC = () => {
 
     return (
         <>
+            <IntakeFormsBreadcrumb
+                basicInfoRoute={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}
+                workType={workBugHuntConfig.type}
+            />
             <WorkTypeBanner
                 title={workBugHuntConfig.title}
                 subTitle={workBugHuntConfig.subtitle}

src-ts/tools/work/work-self-service/intake-forms/intake-forms-breadcrumb/IntakeFormsBreadcrumb.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react'
+
+import { Breadcrumb, BreadcrumbItemModel } from '../../../../../lib'
+import { WorkType } from '../../../work-lib'
+import { dashboardRoute, selfServiceStartRoute } from '../../../work.routes'
+
+interface IntakeFormsBreadcrumbProps {
+    basicInfoRoute: string,
+    reviewRoute?: string,
+    workType: WorkType,
+}
+
+const IntakeFormsBreadcrumb: FC<IntakeFormsBreadcrumbProps> = ({ basicInfoRoute, reviewRoute, workType }) => {
+    const breadcrumbs: Array<BreadcrumbItemModel> = [
+        { url: dashboardRoute, name: 'My Work' },
+        { url: selfServiceStartRoute, name: 'Start Work' },
+        { url: basicInfoRoute, name: workType },
+    ]
+
+    if (reviewRoute) {
+        breadcrumbs.push(
+            { url: reviewRoute, name: 'Review & Payment' }
+        )
+    }
+
+    return (
+        <Breadcrumb items={breadcrumbs} />
+    )
+}
+
+export default IntakeFormsBreadcrumb

src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx

@@ -6,15 +6,12 @@ import { useParams } from 'react-router-dom'
 import { EnvironmentConfig } from '../../../../../config'
 import { PaymentForm } from '../../../../../lib'
 import { WorkDetailDetailsPane } from '../../../work-detail-details'
-import {
-    Challenge,
-    ChallengeMetadataName,
-    WorkType,
-} from '../../../work-lib'
+import { ChallengeMetadataName, WorkType } from '../../../work-lib'
 import { ChallengeMetadata, workStoreGetChallengeByWorkId } from '../../../work-lib/work-provider/work-functions/work-store'
 import { WorkIntakeFormRoutes } from '../../../work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config'
 import { bugHuntConfig } from '../../../work-lib/work-provider/work-functions/work-store/work-type.config'
 import { WorkTypeBanner } from '../../../work-type-banner'
+import IntakeFormsBreadcrumb from '../intake-forms-breadcrumb/IntakeFormsBreadcrumb'
 
 import styles from './Review.module.scss'
 
@@ -39,7 +36,7 @@ const Review: React.FC = () => {
     useEffect(() => {
         const useEffectAsync: () => Promise<void> = async () => {
             // fetch challenge using workId
-            const response: any = await workStoreGetChallengeByWorkId(workId)
+            const response: any = await workStoreGetChallengeByWorkId(workId || '')
             const intakeFormBH: any = response.metadata.find((item: ChallengeMetadata) => item.name === ChallengeMetadataName.intakeForm)
             setFormData(JSON.parse(intakeFormBH.value).form)
         }
@@ -75,6 +72,13 @@ const Review: React.FC = () => {
 
     return (
         <div className={styles['review-container']}>
+            {/* TODO: We need to not hard code the configs to that of BugHunt and instead
+            use the challenge data to determine the WorkType */}
+            <IntakeFormsBreadcrumb
+                basicInfoRoute={`${WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}/${workId}`}
+                reviewRoute={WorkIntakeFormRoutes[WorkType.bugHunt]['review']}
+                workType={bugHuntConfig.type}
+            />
             <WorkTypeBanner
                 title={bugHuntConfig.review.title}
                 subTitle={bugHuntConfig.review.subtitle}

src-ts/tools/work/work.routes.tsx

@@ -6,6 +6,7 @@ import Work, { toolTitle } from './Work'
 import { WorkLoginPrompt } from './work-login-prompt'
 import { WorkNotLoggedIn } from './work-not-logged-in'
 import { BugHuntIntakeForm, Review } from './work-self-service'
+import IntakeForms, { intakeFormsTitle } from './work-self-service/intake-forms/IntakeForms'
 import { WorkTable } from './work-table'
 import { WorkThankYou } from './work-thank-you'
 
@@ -51,28 +52,44 @@ export const workRoutes: Array<PlatformRoute> = [
         route: selfServiceRootRoute,
     },
     {
-        element: <BugHuntIntakeForm />,
-        route: `/${selfServiceRootRoute}/work/new/bug-hunt/basic-info`,
-    },
-    {
-        element: <BugHuntIntakeForm />,
-        route: `/${selfServiceRootRoute}/work/new/bug-hunt/basic-info/:workId`,
-    },
-    {
-        element: <WorkLoginPrompt />,
-        route: `/${selfServiceRootRoute}${rootRoute}/new/:workType/login-prompt`,
-    },
-    {
-        element: <Review />,
-        route: `/${selfServiceRootRoute}/work/new/bug-hunt/review`,
-    },
-    {
-        element: <Review />,
-        route: `/${selfServiceRootRoute}/work/new/bug-hunt/review/:workId`,
-    },
-    {
-        element: <WorkThankYou />,
-        route: `/${selfServiceRootRoute}${rootRoute}/new/:workType/thank-you`,
+        children: [
+            // Bug Hunt
+            {
+                element: <BugHuntIntakeForm />,
+                route: `bug-hunt/basic-info`,
+                title: intakeFormsTitle,
+            },
+            {
+                element: <BugHuntIntakeForm />,
+                route: `bug-hunt/basic-info/:workId`,
+                title: intakeFormsTitle,
+            },
+            // General
+            {
+                element: <WorkLoginPrompt />,
+                route: `:workType/login-prompt`,
+                title: intakeFormsTitle,
+            },
+            {
+                element: <Review />,
+                route: `:workType/review`,
+                title: intakeFormsTitle,
+            },
+            {
+                element: <Review />,
+                route: `:workType/review/:workId`,
+                title: intakeFormsTitle,
+            },
+            {
+                element: <WorkThankYou />,
+                route: `:workType/thank-you`,
+                title: intakeFormsTitle,
+            },
+        ],
+        customerOnly: true,
+        element: <IntakeForms />,
+        route: `/${selfServiceRootRoute}${rootRoute}/new`,
+        title: intakeFormsTitle,
     },
     {
         element: <Navigate to={dashboardRoute} />,

yarn.lock

@@ -2476,6 +2476,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17":
+  version "17.0.47"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
+  integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"