PROD-2659 #comment Loading page is not appearing when challenge is being created and payment processing in bug hunt page and no back button in log in prompt page

Author: asadath1395

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 = type === 'Overlay'
     return (
-        <div className={classNames(styles['loading-spinner'], styles.show, className)}>
+        <div className={classNames(styles['loading-spinner'], styles.show, isOverlay ? styles.overlay : '', 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,40 @@
 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 = () => {
+      navigate(
+        previousPageUrl
+      );
+    };
+
     return (
         <>
             <div className={styles.container}>
@@ -46,6 +60,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

@@ -97,7 +97,7 @@ export const workRoutes: Array<PlatformRoute> = [
                 route: `bug-hunt/review/:workId`,
             },
             {
-                element: <WorkLoginPrompt />,
+                element: <WorkLoginPrompt previousPageUrl="/self-service/work/new/bug-hunt/basic-info" />,
                 route: `bug-hunt/login-prompt/:retUrl`,
             },
             // General