PROD-2643 PROD-2619 PROD-2620 PROD-2760 PROD-2644 Fix the issues in self-service -> dev

src-ts/lib/form/form-functions/form.functions.ts

@@ -72,13 +72,13 @@ export async function onSubmitAsync<T>(
 ): Promise<void> {
 
     event.preventDefault()
+    event.stopPropagation()
 
     const { groups, shortName, successMessage }: FormDefinition = formDef
     const inputs: Array<FormInputModel> = getFormInputFields(groups || [])
 
     // get the dirty fields before we validate b/c validation marks them dirty on submit
     const dirty: FormInputModel | undefined = inputs?.find(fieldDef => !!fieldDef.dirty)
-
     // if there are any validation errors, display a message and stop submitting
     // NOTE: need to check this before we check if the form is dirty bc you
     // could have a form that's not dirty but has errors and you wouldn't

src-ts/lib/svgs/icon-wrapper/IconWrapper.module.scss

@@ -0,0 +1,17 @@
+@import '../../styles/includes';
+
+.iconWrapper {
+  @include icon-mxx;
+
+  margin: 0 $space-lg $space-lg $space-lg;
+  background: $tc-grad12;
+  border-radius: $space-xxl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    @include icon-xl;
+    color: $tc-white;
+  }
+}

src-ts/lib/svgs/icon-wrapper/IconWrapper.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+import styles from './IconWrapper.module.scss'
+
+interface IconWrapperProps {
+  className?: string
+  icon: JSX.Element
+}
+
+const IconWrapper: FC<IconWrapperProps> = ({ className, icon }: IconWrapperProps) => (
+  <div className={classNames(styles.iconWrapper, className)}>
+    <>{icon}</>
+  </div>
+)
+
+export default IconWrapper

src-ts/lib/svgs/icon-wrapper/index.ts

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

src-ts/lib/svgs/index.ts

@@ -37,3 +37,4 @@ export {
     GitlabIcon,
     GithubIcon
 }
+export * from './icon-wrapper'

src-ts/tools/index.ts

@@ -28,4 +28,5 @@ export {
     WorkTypeCategoryUnknownIcon,
     WorkTypeConfigs,
     BugHuntIntakeForm,
+    bugHuntRoute
 } from './work'

src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts

@@ -548,7 +548,11 @@ function getProgress(challenge: Challenge, workStatus: WorkStatus): WorkProgress
             name: 'Submitted',
         },
         {
-            date: getProgressStepDateStart(challenge, [ChallengePhaseName.registration]),
+            date: getProgressStepDateStart(challenge, [
+              ChallengePhaseName.specificationReview,
+              ChallengePhaseName.specificationSubmission,
+              ChallengePhaseName.registration,
+            ]),
             name: 'Started',
         },
         {
@@ -694,7 +698,10 @@ function getTypeCategory(type: WorkType): WorkTypeCategory {
         case WorkType.designLegacy:
             return WorkTypeCategory.design
 
-        // TOOD: other categories: qa and dev
+        case WorkType.bugHunt:
+          return WorkTypeCategory.qa
+
+        // TOOD: other categories: dev
         default:
             return WorkTypeCategory.unknown
     }

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge-phase-name.enum.ts

@@ -1,4 +1,6 @@
 export enum ChallengePhaseName {
+    specificationReview = 'Specification Review',
+    specificationSubmission = 'Specification Submission',
     appeals = 'Appeals',
     appealsResponse = 'Appeals Response',
     approval = 'Approval',

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

@@ -29,7 +29,7 @@ import {
 } from '../../../work-lib'
 import { WorkServicePrice } from '../../../work-service-price'
 import { WorkTypeBanner } from '../../../work-type-banner'
-import { dashboardRoute } from '../../../work.routes'
+import { dashboardRoute, selfServiceStartRoute } from '../../../work.routes'
 import IntakeFormsBreadcrumb from '../intake-forms-breadcrumb/IntakeFormsBreadcrumb'
 
 import { BugHuntFormConfig } from './bug-hunt.form.config'
@@ -52,7 +52,7 @@ const BugHuntIntakeForm: React.FC = () => {
     BugHuntFormConfig.buttons.primaryGroup[0].hidden = !isLoggedIn
     BugHuntFormConfig.buttons.primaryGroup[1].onClick = () => { setAction('submit') }
     if (BugHuntFormConfig.buttons.secondaryGroup) {
-        BugHuntFormConfig.buttons.secondaryGroup[0].onClick = () => { navigate(-1) }
+        BugHuntFormConfig.buttons.secondaryGroup[0].onClick = () => { navigate(selfServiceStartRoute) }
     }
 
     const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()

src-ts/tools/work/work-service-price/WorkServicePrice.module.scss

@@ -4,20 +4,6 @@
 
   margin-top: $space-xl;
 
-  .iconWrapper {
-      height: 48;
-      width: 48;
-      margin: 0 $space-lg $space-lg $space-lg;
-      background: $tc-grad12;
-      border-radius: 24px;
-
-      svg {
-        @include icon-xl;
-        margin: $space-md;
-        color: $tc-white;
-      }
-    }
-
   .inline {
     display: flex;
     flex-direction: row;

src-ts/tools/work/work-service-price/WorkServicePrice.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { IconOutline, textFormatMoneyLocaleString, Tooltip } from '../../../lib'
+import { IconOutline, IconWrapper, textFormatMoneyLocaleString, Tooltip } from '../../../lib'
 
 import styles from './WorkServicePrice.module.scss'
 
@@ -20,11 +20,9 @@ const ServicePrice: FC<WorkServicePriceProps> = (props: WorkServicePriceProps) =
   return (
     <div className={styles.container}>
       <div className={styles.inline}>
-        <div className={styles.iconWrapper}>
-          {!!showIcon && !!icon && (
-            <>{icon}</>
-          )}
-        </div>
+        {!!showIcon && !!icon && (
+          <IconWrapper icon={icon} />
+        )}
         <div>
           {!hideTitle && (
             <p><h3 className={styles.serviceTitle}>

src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.module.scss

@@ -27,4 +27,13 @@
         margin-top: 6px;
         @include text-clamp(3);
     }
+
+    .qa-icon {
+      margin: 0px 12px 0px 0px;
+
+      svg {
+        min-width: unset;
+        margin: 0px;
+      }
+    }
 }

src-ts/tools/work/work-table/work-table-title-renderer/WorkTableTitleRenderer.tsx

@@ -1,5 +1,4 @@
-import { FC, SVGProps } from 'react'
-
+import { IconOutline, IconWrapper } from '../../../../lib'
 import {
     Work,
     WorkTypeCategory,
@@ -12,26 +11,35 @@ import styles from './WorkTableTitleRenderer.module.scss'
 
 function WorkTableTitleRenderer(data: Work): JSX.Element {
 
-    let Icon: FC<SVGProps<SVGSVGElement>>
+    let Icon: JSX.Element
     switch (data.typeCategory) {
 
         case WorkTypeCategory.data:
-            Icon = WorkTypeCategoryDataIcon
+            Icon = <WorkTypeCategoryDataIcon />
             break
 
         case WorkTypeCategory.design:
-            Icon = WorkTypeCategoryDesignIcon
+            Icon = <WorkTypeCategoryDesignIcon />
             break
 
-        // TODO: qa and dev work categories
+        case WorkTypeCategory.qa:
+          Icon = (
+            <IconWrapper
+              className={styles['qa-icon']}
+              icon={<IconOutline.BadgeCheckIcon />}
+            />
+          )
+          break
+
+        // TODO: dev work categories
         default:
-            Icon = WorkTypeCategoryUnknownIcon
+            Icon = <WorkTypeCategoryUnknownIcon />
             break
     }
 
     return (
         <div className={styles['work-table-title-container']}>
-            <Icon />
+            {Icon}
             <div className={styles['work-table-title']}>
                 <div className={styles.title}>
                     {data.title}

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

@@ -20,6 +20,7 @@ export const rootRoute: string = '/work'
 export const selfServiceRootRoute: string = '/self-service'
 export const selfServiceStartRoute: string = `${selfServiceRootRoute}/wizard`
 export const dashboardRoute: string = `${rootRoute}/dashboard`
+export const bugHuntRoute: string = 'bug-hunt/'
 
 export function workDashboardRoute(active: string): string {
 return `${dashboardRoute}/${active}`
@@ -82,23 +83,23 @@ export const workRoutes: Array<PlatformRoute> = [
             // Bug Hunt
             {
                 element: <BugHuntIntakeForm />,
-                route: `bug-hunt/basic-info`,
+                route: `${bugHuntRoute}basic-info`,
             },
             {
                 element: <BugHuntIntakeForm />,
-                route: `bug-hunt/basic-info/:workId`,
+                route: `${bugHuntRoute}basic-info/:workId`,
             },
             {
                 element: <Review />,
-                route: `bug-hunt/review`,
+                route: `${bugHuntRoute}review`,
             },
             {
                 element: <Review />,
-                route: `bug-hunt/review/:workId`,
+                route: `${bugHuntRoute}review/:workId`,
             },
             {
                 element: <WorkLoginPrompt previousPageUrl={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']} />,
-                route: `bug-hunt/login-prompt/:retUrl`,
+                route: `${bugHuntRoute}login-prompt/:retUrl`,
             },
             // General
             {

src/IntakeForm.jsx

@@ -1,4 +1,4 @@
-import { useNavigate, Route, Routes } from "react-router-dom";
+import { useNavigate, Route, Routes, useLocation } from "react-router-dom";
 import _ from "lodash";
 import React, { useContext, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
@@ -28,11 +28,12 @@ import WebsiteDesign from "./routes/Products/WebsiteDesign";
 import DataAdvisory from "./routes/Products/DataAdvisory";
 import WebsiteDesignLegacy from "./routes/Products/WebsiteDesignLegacy";
 
-import { profileContext, WorkType } from "../src-ts";
+import { profileContext, WorkType, bugHuntRoute } from "../src-ts";
 
 export default function IntakeForm() {
 
   const dispatch = useDispatch();
+  const location = useLocation();
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate()
 
@@ -141,7 +142,8 @@ export default function IntakeForm() {
   };
 
   const syncSavedData = (savedData) => {
-    if (!savedData) return;
+    const isBugHuntRoute = location.pathname.indexOf(`/${bugHuntRoute}`) > -1
+    if (!savedData || isBugHuntRoute) return;
     const { form, progress } = savedData;
     if (form) dispatch(saveForm(form));
     if (progress?.currentStep) {