PROD-3115 #comment This commit updates the uni nav user and fixes bugs in the contact support modal that wasn't passing the work id and the self service flag was getting set on all requests. #time 30m

Author: brooketopcoder

src-ts/header/Header.tsx

@@ -84,8 +84,10 @@ const Header: FC = () => {
                 toolRoot: activeToolRoute,
                 type: 'tool',
                 user: profile ? {
+                    email: profile.email,
+                    firstName: profile.firstName,
                     handle: profile.handle,
-                    initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`,
+                    lastName: profile.lastName,
                     photoUrl: profile.photoURL,
                     userId: profile.userId,
                 } : undefined,

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -11,6 +11,7 @@ import styles from './ContactSupportForm.module.scss'
 
 export interface ContactSupportFormProps {
     formDef: FormDefinition
+    isSelfService?: boolean
     onSave: () => void
     workId?: string
 }
@@ -30,7 +31,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
         }
     }, [loading, saveOnSuccess, props.onSave])
 
-    const generateRequest = useCallback((
+    const generateRequest: (inputs: ReadonlyArray<FormInputModel>) => void = useCallback((
         inputs: ReadonlyArray<FormInputModel>,
     ): ContactSupportRequest => {
         const firstName: string
@@ -45,20 +46,21 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
             challengeId: props.workId,
             email,
             firstName,
-            isSelfService: true,
+            isSelfService: !!props.isSelfService,
             lastName,
             question,
         }
     }, [props.workId])
 
-    const saveAsync = useCallback(async (request: ContactSupportRequest): Promise<void> => {
-        setLoading(true)
-        return contactSupportSubmitRequestAsync(request)
-            .then(() => {
-                setSaveOnSuccess(true)
-            })
-            .finally(() => setLoading(false))
-    }, [])
+    const saveAsync: (request: ContactSupportRequest) => Promise<void>
+        = useCallback(async (request: ContactSupportRequest): Promise<void> => {
+            setLoading(true)
+            return contactSupportSubmitRequestAsync(request)
+                .then(() => {
+                    setSaveOnSuccess(true)
+                })
+                .finally(() => setLoading(false))
+        }, [])
 
     const emailElement: JSX.Element | undefined = !!profile?.email
         ? (

src-ts/lib/modals/contact-support-modal/ContactSupportModal.tsx

@@ -1,11 +1,12 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react'
 
 import { ContactSupportForm, contactSupportFormDef } from '../../contact-support-form'
 import { FormDefinition, formGetInputFields, formOnReset } from '../../form'
 import { BaseModal } from '../base-modal'
 
 export interface ContactSupportModalProps {
     isOpen: boolean
+    isSelfService?: boolean
     onClose: () => void
     workId?: string
 }
@@ -15,12 +16,12 @@ const ContactSupportModal: FC<ContactSupportModalProps> = (props: ContactSupport
     const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
         = useState<FormDefinition>({ ...contactSupportFormDef })
 
-    function onClose(): void {
+    const onClose: () => void = useCallback(() => {
         const updatedForm: FormDefinition = { ...formDef }
         formOnReset(formGetInputFields(updatedForm.groups || []))
         setFormDef(updatedForm)
         props.onClose()
-    }
+    }, [formDef, props])
 
     return (
         <BaseModal
@@ -31,7 +32,9 @@ const ContactSupportModal: FC<ContactSupportModalProps> = (props: ContactSupport
         >
             <ContactSupportForm
                 formDef={formDef}
+                isSelfService={props.isSelfService}
                 onSave={onClose}
+                workId={props.workId}
             />
         </BaseModal>
     )

src-ts/tools/work/work-self-service/intake-forms/support-info-card/SupportInfoCard.tsx

@@ -21,7 +21,8 @@ const SupportInfoCard: React.FC = () => {
             >
                 <div>
                     Topcoder also offers solutions for multiple other technical needs and problems.
-                    We have community members expertly skilled in Development, UX / UI Design, Data Science, Quality Assurance, and more.
+                    We have community members expertly skilled in Development, UX / UI Design, Data 
+                    Science, Quality Assurance, and more.
                     We’d love to talk with you about all of our services.
                 </div>
                 <div className={styles.supportButton}>

src/routes/BasicInfoLegacy/index.jsx

@@ -168,6 +168,7 @@ const BasicInfoLegacy = ({
       <ContactSupportModal
         workId={challenge?.id}
         isOpen={showSupportModal}
+        isSelfService={true}
         onClose={onHideSupportModal}
       />
       <Page>

src/routes/Products/components/BasicInfo/index.jsx

@@ -235,6 +235,7 @@ const BasicInfo = ({
       <ContactSupportModal
         challengeId={challenge?.id}
         isOpen={showSupportModal}
+        isSelfService={true}
         onClose={onHideSupportModal}
       />
       <Page>

src/routes/SelectWorkType/index.jsx

@@ -167,6 +167,7 @@ const SelectWorkType = ({
       <ContactSupportModal
         workId={challenge?.id}
         isOpen={showSupportModal}
+        isSelfService={true}
         onClose={onHideSupportModal}
       />
       <Breadcrumb items={breadcrumb} />