TCA-645 Auto-fix Lint Issues -> TCA-499_eslint

src-ts/header/Header.tsx

@@ -5,18 +5,16 @@ import { Logo } from './logo'
 import { ToolSelectors } from './tool-selectors'
 import { UtilitySelectors } from './utility-selectors'
 
-const Header: FC<{}> = () => {
-    return (
-        <div className={styles['header-wrap']}>
-            <header className={styles.header}>
-                <ToolSelectors isWide={false} />
-                <Logo />
-                <ToolSelectors isWide={true} />
-                <UtilitySelectors />
-            </header>
-            <div id='page-subheader-portal-el' className={styles.subheader}></div>
-        </div>
-    )
-}
+const Header: FC<{}> = () => (
+    <div className={styles['header-wrap']}>
+        <header className={styles.header}>
+            <ToolSelectors isWide={false} />
+            <Logo />
+            <ToolSelectors isWide />
+            <UtilitySelectors />
+        </header>
+        <div id='page-subheader-portal-el' className={styles.subheader} />
+    </div>
+)
 
 export default Header

src-ts/header/tool-selectors/ToolSelectors.tsx

@@ -7,8 +7,6 @@ interface ToolSelectorsProps {
     isWide: boolean
 }
 
-const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => {
-    return props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
-}
+const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
 
 export default ToolSelectors

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx

@@ -46,7 +46,7 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             >
                 {toolRoute.title}
             </Link>
-            <div className={styles['active-indicator']}></div>
+            <div className={styles['active-indicator']} />
         </div>
     )
 }

src-ts/header/utility-selectors/UtilitySelectors.tsx

@@ -3,13 +3,11 @@ import { FC } from 'react'
 import ProfileSelector from './UtilitySelector/ProfileSelector/ProfileSelector'
 import styles from './UtilitySelectors.module.scss'
 
-const UtilitySelectors: FC<{}> = () => {
-    return (
-        <div className={styles['utility-selectors']}>
-            {/* TODO: make this configurable  */}
-            <ProfileSelector />
-        </div>
-    )
-}
+const UtilitySelectors: FC<{}> = () => (
+    <div className={styles['utility-selectors']}>
+        {/* TODO: make this configurable  */}
+        <ProfileSelector />
+    </div>
+)
 
 export default UtilitySelectors

src-ts/index.ts

@@ -4,22 +4,22 @@
 export { default as AppNextGen } from './App'
 export { EnvironmentConfig } from './config'
 export {
-     Analytics,
-     Breadcrumb,
-     ContactSupportModal,
-     logInitialize,
-     OrderContractModal,
-     PageFooter,
-     PrivacyPolicyModal,
-     profileContext,
-     ProfileProvider,
-     RouteProvider,
-     TabsNavbar,
-     TermsModal,
-     xhrGetAsync,
-     xhrGetBlobAsync,
-     xhrPatchAsync,
-     xhrPostAsync,
+    Analytics,
+    Breadcrumb,
+    ContactSupportModal,
+    logInitialize,
+    OrderContractModal,
+    PageFooter,
+    PrivacyPolicyModal,
+    profileContext,
+    ProfileProvider,
+    RouteProvider,
+    TabsNavbar,
+    TermsModal,
+    xhrGetAsync,
+    xhrGetBlobAsync,
+    xhrPatchAsync,
+    xhrPostAsync,
 } from './lib'
 export * from './tools'
 export * from './utils'

src-ts/lib/analytics/Analytics.tsx

@@ -3,14 +3,11 @@ import { FC } from 'react'
 import { GoogleTagManager } from './google-tag-manater'
 import { SegmentAnalytics } from './segment-analytics'
 
-const Analytics: FC<{}> = () => {
-
-    return (
-        <>
-            <GoogleTagManager />
-            <SegmentAnalytics />
-        </>
-    )
-}
+const Analytics: FC<{}> = () => (
+    <>
+        <GoogleTagManager />
+        <SegmentAnalytics />
+    </>
+)
 
 export default Analytics

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -1,22 +1,20 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
-import styles from './../Breadcrumb.module.scss'
+import styles from "../Breadcrumb.module.scss"
 import { BreadcrumbItemModel } from './breadcrumb-item.model'
 
 interface BreadcrumbItemProps {
     index: number
     item: BreadcrumbItemModel
 }
 
-const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
-    return (
-        <li key={props.index} onClick={() => props.item.onClick?.(props.item)}>
-            <Link className={props.item.isElipsis && styles['elipsis']} to={props.item.url}>
-                {props.item.name}
-            </Link>
-        </li>
-    )
-}
+const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => (
+    <li key={props.index} onClick={() => props.item.onClick?.(props.item)}>
+        <Link className={props.item.isElipsis && styles.elipsis} to={props.item.url}>
+            {props.item.name}
+        </Link>
+    </li>
+)
 
 export default BreadcrumbItem

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

@@ -23,9 +23,9 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
     const [saveOnSuccess, setSaveOnSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     useEffect(() => {
-      if (!loading && saveOnSuccess) {
-        props.onSave()
-      }
+        if (!loading && saveOnSuccess) {
+            props.onSave()
+        }
     }, [loading, saveOnSuccess])
 
     function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
@@ -47,7 +47,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
         setLoading(true)
         return contactSupportSubmitRequestAsync(request)
             .then(() => {
-              setSaveOnSuccess(true)
+                setSaveOnSuccess(true)
             }).finally(() => setLoading(false))
     }
 

src-ts/lib/content-layout/ContentLayout.tsx

@@ -16,42 +16,40 @@ export interface ContentLayoutProps {
     titleClass?: string
 }
 
-const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
-    return (
-        <div className={classNames(styles.content, props.contentClass)}>
+const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => (
+    <div className={classNames(styles.content, props.contentClass)}>
 
-            <div className={classNames(styles['content-outer'], props.outerClass)}>
+        <div className={classNames(styles['content-outer'], props.outerClass)}>
 
-                <div className={classNames(styles['content-inner'], props.innerClass)}>
+            <div className={classNames(styles['content-inner'], props.innerClass)}>
 
-                    {!!props.title && (
-                        <div className={classNames(styles['page-header'], props.titleClass)}>
+                {!!props.title && (
+                    <div className={classNames(styles['page-header'], props.titleClass)}>
 
-                            <h1>
-                                {props.title}
-                            </h1>
+                        <h1>
+                            {props.title}
+                        </h1>
 
-                            {!!props.buttonConfig && (
-                                <div>
-                                    <Button
-                                        {...props.buttonConfig}
-                                        buttonStyle='primary'
-                                        size='lg'
-                                    />
-                                </div>
-                            )}
+                        {!!props.buttonConfig && (
+                            <div>
+                                <Button
+                                    {...props.buttonConfig}
+                                    buttonStyle='primary'
+                                    size='lg'
+                                />
+                            </div>
+                        )}
 
-                        </div>
-                    )}
+                    </div>
+                )}
 
-                    {props.children}
-
-                </div>
+                {props.children}
 
             </div>
 
         </div>
-    )
-}
+
+    </div>
+)
 
 export default ContentLayout

src-ts/lib/form/Form.tsx

@@ -86,11 +86,9 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
             inputs,
         ])
 
-        useEffect(() => {
-            return () => {
-                if (props.resetFormOnUnmount) {
-                    onReset()
-                }
+        useEffect(() => () => {
+            if (props.resetFormOnUnmount) {
+                onReset()
             }
         }, [])
 
@@ -148,34 +146,32 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
         formInitializeValues(inputs, props.formValues)
 
         const setOnClickOnReset: (button: FormButton) => FormButton = (button) => {
-          // if this is a reset button, set its onclick to reset
-          if (!!button.isReset) {
-              button = {
-                  ...button,
-                  onClick: onReset,
-              }
-          }
-
-          return button
-        }
+            // if this is a reset button, set its onclick to reset
+            if (!!button.isReset) {
+                button = {
+                    ...button,
+                    onClick: onReset,
+                }
+            }
 
-        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => {
-            return groups.map((button, index) => {
-                button = setOnClickOnReset(button)
-
-                const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
-
-                return (
-                    <Button
-                        {...button}
-                        key={button.label || `button-${index}`}
-                        disable={disabled}
-                        tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
-                    />
-                )
-            })
+            return button
         }
 
+        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => groups.map((button, index) => {
+            button = setOnClickOnReset(button)
+
+            const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
+
+            return (
+                <Button
+                    {...button}
+                    key={button.label || `button-${index}`}
+                    disable={disabled}
+                    tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
+                />
+            )
+        })
+
         const secondaryGroupButtons: Array<JSX.Element> = createButtonGroup(formDef.buttons.secondaryGroup || [], false)
 
         const primaryGroupButtons: Array<JSX.Element> = createButtonGroup(formDef.buttons.primaryGroup, true)
@@ -197,7 +193,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
 
         return (
             <form
-                action={''}
+                action=""
                 className={styles.form}
                 key={formKey}
                 onSubmit={onSubmitAsync}

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

@@ -109,9 +109,7 @@ export async function onSubmitAsync<T>(
             toast.success(safeSuccessMessage)
             onSuccess?.()
         })
-        .catch(error => {
-            return Promise.reject(error.response?.data?.result?.content || error.message || error)
-        })
+        .catch(error => Promise.reject(error.response?.data?.result?.content || error.message || error))
 }
 
 function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inputs: ReadonlyArray<FormInputModel>, event: 'blur' | 'change', formValues?: T): void {
@@ -126,6 +124,7 @@ function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inpu
     if (event === 'change') {
         inputDef.dirty = input.value !== originalValue
     }
+
     inputDef.touched = true
 
     // set the def value
@@ -174,6 +173,7 @@ function validateField(formInputDef: FormInputModel, formElements: HTMLFormContr
                 if (!nextError) {
                     formInputDef.error = undefined
                 }
+
                 return
             }
 

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -124,17 +124,15 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
     }
 
     const formGroups: Array<JSX.Element | undefined> = formDef?.groups
-        ?.map((element: FormGroup, index: number) => {
-            return (
-                <FormGroupItem
-                    key={`element-${index}`}
-                    group={element}
-                    renderFormInput={renderInputField}
-                    totalGroupCount={formDef.groups?.length || 0}
-                    renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
-                />
-            )
-        })
+        ?.map((element: FormGroup, index: number) => (
+            <FormGroupItem
+                key={`element-${index}`}
+                group={element}
+                renderFormInput={renderInputField}
+                totalGroupCount={formDef.groups?.length || 0}
+                renderDividers={props.formDef.groupsOptions?.renderGroupDividers}
+            />
+        ))
         || []
 
     return (