Merge branch 'dev' into TCA-455_npm-modules-update

Author: brooketopcoder

package.json

@@ -7,7 +7,6 @@
         "start": "sh start-ssl.sh",
         "start:brooke": "sudo sh start-ssl-brooke.sh",
         "build": "yarn react-app-rewired build",
-        "postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css",
         "lint": "tslint 'src-ts/**/*.{ts,tsx}' && eslint 'src*/**/*.{js,jsx,ts,tsx}'",
         "lint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix && eslint 'src*/**/*.{js,jsx,ts,tsx}' --fix",
         "tslint": "tslint 'src-ts/**/*.{ts,tsx}'",

src-ts/lib/loading-spinner/LoadingSpinner.module.scss

@@ -21,4 +21,8 @@
     &.show {
         opacity: 1;
     }
+    &.overlay {
+      position: fixed;
+      background: $white-100-opacity-10;
+    }
 }

src-ts/lib/loading-spinner/LoadingSpinner.tsx

@@ -9,19 +9,25 @@ import { PuffLoader } from 'react-spinners'
 
 import styles from './LoadingSpinner.module.scss'
 
+// This will determine whether we want to show the loading indicator on top of existing content or if its shown
+// without any content
+type LoadingSpinnerType = 'Overlay' | 'Normal'
+
 export interface LoadingSpinnerProps {
     className?: string
     hide?: boolean
+    type?: LoadingSpinnerType
 }
 
-const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className }: LoadingSpinnerProps) => {
+const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className, type = 'Normal' }: LoadingSpinnerProps) => {
 
     if (!!hide) {
         return <></>
     }
 
+    const isOverlay: boolean = type === 'Overlay'
     return (
-        <div className={classNames(styles['loading-spinner'], styles.show, className)}>
+        <div className={classNames(styles['loading-spinner'], styles.show, {[styles.overlay]: isOverlay}, className)}>
             <PuffLoader color={'#2196f3'} loading={true} size={100} />
         </div>
     )

src-ts/lib/payment-form/PaymentForm.tsx

@@ -202,6 +202,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 name='order-contract'
                 tabIndex={1}
                 type='checkbox'
+                checked={props.formData.orderContract}
                 onChange={(event) => props.onUpdateField('orderContract', event.target.checked)}
             />
 

src-ts/lib/styles/variables/_palette.scss

@@ -199,4 +199,5 @@ $tc-grad18: linear-gradient(84.92deg, #363D8C 2.08%, #723390 97.43%);
 
 
 /*  OPACITY */
-$black-100-opacity-80: rgba(255, 255, 255, 0.8)
+$black-100-opacity-80: rgba(255, 255, 255, 0.8);
+$white-100-opacity-10: rgba(0, 0, 0, 0.1);

src-ts/tools/work/work-login-prompt/WorkLoginPrompt.tsx

@@ -1,26 +1,39 @@
 import { FC, useContext } from 'react'
-import { Location, useLocation, useParams } from 'react-router-dom'
+import { Location, NavigateFunction, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import {
     authUrlLogin,
     Button,
+    PageDivider,
     routeContext,
     RouteContextData,
 } from '../../../lib'
+import { BackArrowIcon } from '../../../lib/svgs'
 
 import styles from './WorkLoginPrompt.module.scss'
 
-const WorkLoginPrompt: FC = () => {
+interface WorkLoginPromptProps {
+  previousPageUrl: string
+}
+
+const WorkLoginPrompt: FC<WorkLoginPromptProps> = ({ previousPageUrl }: WorkLoginPromptProps)  => {
 
     const routeData: RouteContextData = useContext(routeContext)
     const location: Location = useLocation()
+    const navigate: NavigateFunction = useNavigate()
     const customReturnUrl: string | undefined = useParams().retUrl
 
     function signUp(): void {
         const signUpUrl: string = routeData.getSignupUrl(location.pathname, routeData.toolsRoutes, customReturnUrl)
         window.location.href = signUpUrl
     }
 
+    const onBack: () => void = () => {
+      navigate(
+        previousPageUrl
+      )
+    }
+
     return (
         <>
             <div className={styles.container}>
@@ -46,6 +59,17 @@ const WorkLoginPrompt: FC = () => {
                     </div>
                 </div>
             </div>
+            <PageDivider />
+            <div className={styles['footerContent']}>
+              <div>
+                <Button
+                  size='md'
+                  icon={BackArrowIcon}
+                  buttonStyle='secondary'
+                  onClick={onBack}
+                />
+              </div>
+            </div>
         </>
     )
 }

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

@@ -5,11 +5,8 @@ import {
     Form,
     FormAction,
     FormDefinition,
-    formGetInputFields,
     formGetInputModel,
-    FormGroup,
     FormInputModel,
-    formOnReset,
     IconOutline,
     InfoCard,
     LoadingSpinner,
@@ -48,6 +45,8 @@ const BugHuntIntakeForm: React.FC = () => {
     const { isLoggedIn }: ProfileContextData = useContext<ProfileContextData>(profileContext)
 
     const [action, setAction]: [FormAction, Dispatch<SetStateAction<FormAction>>] = useState()
+    const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [saveSuccess, setSaveSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
     BugHuntFormConfig.buttons.primaryGroup[0].onClick = () => { setAction('save') }
     BugHuntFormConfig.buttons.primaryGroup[0].hidden = !isLoggedIn
@@ -68,17 +67,6 @@ const BugHuntIntakeForm: React.FC = () => {
     const [selectedPackage, setSelectedPackage]: [PricePackageName, Dispatch<SetStateAction<PricePackageName>>]
         = useState<PricePackageName>(formValues?.packageType)
 
-    const formInputs: Array<FormInputModel> = formGetInputFields(formDef.groups as Array<FormGroup>)
-
-    useEffect(() => {
-        if (!workId && !challenge) {
-            formOnReset(formInputs, formValues)
-        }
-        // Disabling lint rule as we only want this to run one time when component mounts, otherwise it resets
-        // the form for a user that is not logged in and has no challenge created yet
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
     useEffect(() => {
 
         async function getAndSetWork(): Promise<void> {
@@ -113,13 +101,20 @@ const BugHuntIntakeForm: React.FC = () => {
             }
         }
 
-        getAndSetWork()
+        setLoading(true)
+        getAndSetWork().finally(() => setLoading(false))
     }, [
         isLoggedIn,
         selectedPackage,
         workId,
     ])
 
+    useEffect(() => {
+      if (!loading && saveSuccess) {
+        handleSaveSuccess()
+      }
+    }, [loading, saveSuccess])
+
     const requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => void = (inputs) => {
         const projectTitle: string = formGetInputModel(inputs, ChallengeMetadataName.projectTitle).value as string
         const featuresToTest: string = formGetInputModel(inputs, ChallengeMetadataName.featuresToTest).value as string
@@ -161,16 +156,21 @@ const BugHuntIntakeForm: React.FC = () => {
             val.currentStep = 'review'
         }
 
-        return workUpdateAsync(WorkType.bugHunt, challenge, val)
+        setLoading(true)
+        return workUpdateAsync(WorkType.bugHunt, challenge, val).finally(() => setLoading(false))
+    }
+
+    const handleSaveSuccess: () => void = () => {
+      if (action === 'save') {
+        navigate(`${dashboardRoute}/draft`)
+      } else if (action === 'submit') {
+          const nextUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['review']}/${workId || challenge?.id}`
+          navigate(nextUrl)
+      }
     }
 
     const onSaveSuccess: () => void = () => {
-        if (action === 'save') {
-            navigate(`${dashboardRoute}/draft`)
-        } else if (action === 'submit') {
-            const nextUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['review']}/${workId || challenge?.id}`
-            navigate(nextUrl)
-        }
+      setSaveSuccess(true)
     }
 
     const goToLoginStep: (formData: any) => void = (formData: any) => {
@@ -183,12 +183,9 @@ const BugHuntIntakeForm: React.FC = () => {
         navigate(loginPromptUrl)
     }
 
-    if (!challenge && workId) {
-        return <LoadingSpinner />
-    }
-
     return (
         <>
+            <LoadingSpinner hide={!loading} type='Overlay' />
             <IntakeFormsBreadcrumb
                 basicInfoRoute={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}
                 workType={workBugHuntConfig.type}

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

@@ -193,7 +193,7 @@ const Review: FC = () => {
 
     return (
         <div className={styles['review-container']}>
-            <LoadingSpinner hide={!isLoading} />
+            <LoadingSpinner hide={!isLoading} type='Overlay' />
             {/* TODO: We need to not hard code the configs to that of BugHunt and instead
             use the challenge data to determine the WorkType */}
             <IntakeFormsBreadcrumb

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

@@ -3,7 +3,7 @@ import { Navigate } from 'react-router-dom'
 import { contactSupportPath, PlatformRoute } from '../../lib'
 
 import { dashboardTitle, default as WorkComponent, toolTitle } from './Work'
-import { Work, WorkIntakeFormRoutes, WorkStatus } from './work-lib'
+import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './work-lib'
 import { WorkLoginPrompt } from './work-login-prompt'
 import { WorkNotLoggedIn } from './work-not-logged-in'
 import {
@@ -97,7 +97,7 @@ export const workRoutes: Array<PlatformRoute> = [
                 route: `bug-hunt/review/:workId`,
             },
             {
-                element: <WorkLoginPrompt />,
+                element: <WorkLoginPrompt previousPageUrl={WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']} />,
                 route: `bug-hunt/login-prompt/:retUrl`,
             },
             // General