Form Submission - UseMutation Refactor - 2 retries; style: secondary button - pipe - changed to the proper color

src/api/requests/createFiling.ts

@@ -7,14 +7,11 @@ export const createFiling = async (
   lei: string,
   filingPeriod: FilingPeriodType,
 ): Promise<FilingType> => {
-  // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-  return request<FilingType>({
+  return request<undefined, FilingType>({
     axiosInstance: filingApiClient,
     url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}`,
     method: 'post',
     headers: { Authorization: `Bearer ${auth.user?.access_token}` },
-    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-    body: 'no-body',
   });
 };
 

src/api/requests/submitWarningsVerified.ts → src/api/requests/submitWarningsAccept.ts

@@ -1,11 +1,11 @@
 import { filingApiClient, request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { SubmissionResponse } from 'types/filingTypes';
+import type { FilingPeriodType } from 'types/filingTypes';
 
 interface Parameters {
   lei: string;
-  filingPeriod: string;
-  submissionId: number;
+  filingPeriod: FilingPeriodType;
+  submissionId: number | undefined;
 }
 
 const submitWarningsAccept = async (
@@ -15,7 +15,7 @@ const submitWarningsAccept = async (
   if (![lei, filingPeriod, submissionId].every(Boolean))
     throw new Error('submitWarningsAccept: Missing required parameter');
 
-  return request<Partial<SubmissionResponse>, null>({
+  return request<undefined, null>({
     axiosInstance: filingApiClient,
     url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}/submissions/${submissionId}/accept`,
     method: 'put',

src/pages/Filing/FilingApp/FilingWarnings/index.tsx

@@ -1,6 +1,4 @@
 import { useQueryClient } from '@tanstack/react-query';
-import submitWarningsAccept from 'api/requests/submitWarningsVerified';
-import useSblAuth from 'api/useSblAuth';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
@@ -22,6 +20,7 @@ import { FileSubmissionState } from 'types/filingTypes';
 import { sblHelpMail } from 'utils/common';
 import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
+import useSubmitWarningsAccept from 'utils/useSubmitWarningsAccept';
 import FieldSummary from '../FieldSummary';
 import { getErrorsWarningsSummary } from '../FilingErrors/FilingErrors.helpers';
 import FilingFieldLinks from '../FilingFieldLinks';
@@ -38,11 +37,9 @@ const isSubmissionAccepted = (submission?: SubmissionResponse): boolean => {
 
 function FilingWarnings(): JSX.Element {
   const navigate = useNavigate();
-  const auth = useSblAuth();
   const queryClient = useQueryClient();
   const { lei, year } = useParams();
   const [boxChecked, setBoxChecked] = useState(false);
-  const [formSubmitLoading, setFormSubmitLoading] = useState(false);
   const [formSubmitError, setFormSubmitError] = useState(false);
   const [hasVerifyError, setHasVerifyError] = useState(false);
 
@@ -90,6 +87,16 @@ function FilingWarnings(): JSX.Element {
     setBoxChecked(!boxChecked);
   };
 
+  const {
+    mutateAsync: mutateSubmitWarningsAccept,
+    isLoading: isLoadingSubmitWarningsAccept,
+  } = useSubmitWarningsAccept({
+    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+    lei,
+    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+    filingPeriod: year,
+  });
+
   const onFormSubmit = async (): Promise<void> => {
     const nextPage = `/filing/${year}/${lei}/contact`;
 
@@ -108,15 +115,7 @@ function FilingWarnings(): JSX.Element {
       return;
     }
 
-    setFormSubmitLoading(true); // Show loading indicator
-
-    // TODO: Refactor to use useMutation
-    const response = await submitWarningsAccept(auth, {
-      // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-      lei,
-      // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-      filingPeriod: year,
-      // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+    const response = mutateSubmitWarningsAccept({
       submissionId: submission?.id,
     });
 
@@ -127,7 +126,6 @@ function FilingWarnings(): JSX.Element {
       });
       navigate(nextPage);
     } else {
-      setFormSubmitLoading(false); // Clear loading indicator
       // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
       setFormSubmitError(response); // Display error alert
     }
@@ -234,7 +232,10 @@ function FilingWarnings(): JSX.Element {
                 label='I verify the accuracy of register values flagged by warning validations and no corrections are required.'
                 onChange={onClickCheckbox}
                 checked={isVerified}
-                disabled={formSubmitLoading || isSubmissionAccepted(submission)}
+                disabled={
+                  isLoadingSubmitWarningsAccept ||
+                  isSubmissionAccepted(submission)
+                }
                 status={hasVerifyError ? 'error' : undefined}
               />
               {hasVerifyError ? (
@@ -273,7 +274,7 @@ function FilingWarnings(): JSX.Element {
             onPreviousClick={onPreviousClick}
             onNextClick={onFormSubmit}
             appearanceNext={canContinue ? 'primary' : 'secondary'}
-            isLoading={formSubmitLoading}
+            isLoading={isLoadingSubmitWarningsAccept}
           />
         </FormButtonGroup>
       </FormWrapper>

src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx

@@ -1,8 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import submitUpdateFinancialProfile, {
-  collectChangedData,
-} from 'api/requests/submitUpdateFinancialProfile';
-import useSblAuth from 'api/useSblAuth';
+import { collectChangedData } from 'api/requests/submitUpdateFinancialProfile';
 import Button from 'components/Button';
 import CrumbTrail from 'components/CrumbTrail';
 import FormButtonGroup from 'components/FormButtonGroup';
@@ -18,13 +15,14 @@ import type { UpdateInstitutionType } from 'pages/Filing/UpdateFinancialProfile/
 import { UpdateInstitutionSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 import { scenarios } from 'pages/Summary/Summary.data';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { Five } from 'utils/constants';
 import { updateFinancialProfileKeyLogic } from 'utils/getFormErrorKeyLogic';
 import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
+import useSubmitUpdateFinancialProfile from 'utils/useSubmitUpdateFinancialProfile';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 import UpdateAffiliateInformation from './UpdateAffiliateInformation';
 import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
@@ -37,10 +35,8 @@ export default function UFPForm({
   data: InstitutionDetailsApiType;
 }): JSXElement {
   const { lei } = useParams();
-  const auth = useSblAuth();
   const isRoutingEnabled = getIsRoutingEnabled();
   const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
 
   const defaultValues = useMemo(() => buildProfileFormDefaults(data), [data]);
 
@@ -61,6 +57,11 @@ export default function UFPForm({
   // Used for error scrolling
   const formErrorHeaderId = 'UFPFormErrorHeader';
 
+  const {
+    mutateAsync: mutateSubmitUpdateFinancialProfile,
+    isLoading: isLoadingSubmitUpdateFinancialProfile,
+  } = useSubmitUpdateFinancialProfile();
+
   // NOTE: This function is used for submitting the multipart/formData
   const onSubmitButtonAction = async (): Promise<void> => {
     const passesValidation = await trigger();
@@ -74,9 +75,9 @@ export default function UFPForm({
         );
       }
       try {
-        setLoading(true);
-        await submitUpdateFinancialProfile(auth, changedData);
-        setLoading(false);
+        await mutateSubmitUpdateFinancialProfile({
+          financialProfileObject: changedData,
+        });
         if (isRoutingEnabled)
           navigate('/summary', {
             state: { scenario: scenarios.SuccessInstitutionProfileUpdate },
@@ -160,7 +161,7 @@ export default function UFPForm({
             appearance='primary'
             // eslint-disable-next-line @typescript-eslint/no-misused-promises
             onClick={onSubmitButtonAction}
-            iconRight={loading ? 'updating' : ''}
+            iconRight={isLoadingSubmitUpdateFinancialProfile ? 'updating' : ''}
             disabled={!changedData}
             type='submit'
           />

src/pages/PointOfContact/index.tsx

@@ -15,8 +15,6 @@ import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
-import submitPointOfContact from 'api/requests/submitPointOfContact';
-import useSblAuth from 'api/useSblAuth';
 import FormErrorHeader from 'components/FormErrorHeader';
 import type { PocFormHeaderErrorsType } from 'components/FormErrorHeader.data';
 import { PocFormHeaderErrors } from 'components/FormErrorHeader.data';
@@ -44,6 +42,7 @@ import { ContactInfoMap, pointOfContactSchema } from 'types/formTypes';
 import useAddressStates from 'utils/useAddressStates';
 import useFilingStatus from 'utils/useFilingStatus';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
+import useSubmitPointOfContact from 'utils/useSubmitPointOfContact';
 
 const defaultValuesPOC = {
   firstName: '',
@@ -62,7 +61,6 @@ const defaultValuesPOC = {
 function PointOfContact(): JSX.Element {
   const [previousContactInfoValid, setPreviousContactInfoValid] =
     useState<boolean>(false);
-  const auth = useSblAuth();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { lei, year } = useParams();
@@ -154,6 +152,13 @@ function PointOfContact(): JSX.Element {
   const navigateSignSubmit = (): void =>
     navigate(`/filing/${year}/${lei}/submit`);
 
+  const { mutateAsync: mutateSubmitPointOfContact } = useSubmitPointOfContact({
+    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+    lei,
+    // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
+    filingPeriod: year,
+  });
+
   // NOTE: This function is used for submitting the multipart/formData
   const onSubmitButtonAction = async (
     event: React.FormEvent,
@@ -174,13 +179,7 @@ function PointOfContact(): JSX.Element {
         const formattedUserProfileObject =
           formatPointOfContactObject(preFormattedData);
 
-        await submitPointOfContact(auth, {
-          data: formattedUserProfileObject,
-          // @ts-expect-error @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-          lei,
-          // @ts-expect-error @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-          filingPeriod: year,
-        });
+        await mutateSubmitPointOfContact({ data: formattedUserProfileObject });
 
         await queryClient.invalidateQueries({
           queryKey: [`fetch-filing-submission`, lei, year],

src/pages/ProfileForm/CreateProfileForm/index.tsx

@@ -30,7 +30,6 @@ import { validationSchemaCPF } from 'types/formTypes';
 import Step1FormInfoFieldGroup from '../Step1Form/Step1FormInfoFieldGroup';
 import AddFinancialInstitution from './AddFinancialInstitution';
 
-import { submitUserProfile, submitUserProfileFi } from 'api/requests';
 import { scenarios } from 'pages/Summary/Summary.data';
 
 import { useNavigate } from 'react-router-dom';
@@ -39,10 +38,12 @@ import { sblHelpMail } from 'utils/common';
 import { One } from 'utils/constants';
 import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 
+import useSubmitUserProfile from 'utils/useSubmitUserProfile';
+import useSubmitUserProfileFi from 'utils/useSubmitUserProfileFi';
+
 function CreateProfileForm(): JSX.Element {
   const navigate = useNavigate();
   const { emailAddress } = useSblAuth();
-  const auth = useSblAuth();
   const formErrorHeaderId = 'CreateProfileFormErrors';
   const defaultValues: ValidationSchemaCPF = {
     firstName: '',
@@ -73,6 +74,9 @@ function CreateProfileForm(): JSX.Element {
   const onAppendFinancialInstitutions = (): void =>
     append(emptyAddFinancialInstitution);
 
+  const { mutateAsync: mutateSubmitUserProfile } = useSubmitUserProfile();
+  const { mutateAsync: mutateSubmitUserProfileFi } = useSubmitUserProfileFi();
+
   const onSubmitButtonAction = async (): Promise<void> => {
     const passesValidation = await trigger();
     if (passesValidation) {
@@ -86,9 +90,11 @@ function CreateProfileForm(): JSX.Element {
           },
           false,
         );
-        await submitUserProfile(auth, formattedUserProfileObject);
+        await mutateSubmitUserProfile({
+          userProfileObject: formattedUserProfileObject,
+        });
         // 2.) Sending the financial institutions list to the mail api
-        await submitUserProfileFi(auth, preFormattedData);
+        await mutateSubmitUserProfileFi({ formFieldsObject: preFormattedData });
         navigate('/summary', { state: { scenario: scenarios.Warning4 } });
       } catch (error) {
         // eslint-disable-next-line no-console

src/pages/ProfileForm/Step1Form/Step1Form.tsx

@@ -28,7 +28,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { CupFormHeaderErrorsType } from 'components/FormErrorHeader.data';
 import { CupFormHeaderErrors } from 'components/FormErrorHeader.data';
 
-import { fetchInstitutions, submitUserProfile } from 'api/requests';
+import { fetchInstitutions } from 'api/requests';
 import FormMain from 'components/FormMain';
 import FormWrapper from 'components/FormWrapper';
 import {
@@ -45,6 +45,7 @@ import Step1FormInfoHeader from './Step1FormInfoHeader';
 import CrumbTrail from 'components/CrumbTrail';
 import { Link } from 'components/Link';
 import { useNavigate } from 'react-router-dom';
+import useSubmitUserProfile from 'utils/useSubmitUserProfile';
 
 function Step1Form(): JSX.Element {
   const queryClient = useQueryClient();
@@ -155,6 +156,8 @@ function Step1Form(): JSX.Element {
   // Used for error scrolling
   const formErrorHeaderId = 'step1FormErrorHeader';
 
+  const { mutateAsync: mutateSubmitUserProfile } = useSubmitUserProfile();
+
   // Post Submission
   const onSubmitButtonAction = async (): Promise<void> => {
     // TODO: Handle error UX on submission failure or timeout
@@ -165,14 +168,8 @@ function Step1Form(): JSX.Element {
         userProfileObject,
         true,
       );
-      await submitUserProfile(auth, formattedUserProfileObject);
-      await auth.signinSilent();
-      // cache busting
-      await queryClient.invalidateQueries({
-        queryKey: ['fetch-associated-institutions', email],
-      });
-      await queryClient.invalidateQueries({
-        queryKey: ['fetch-user-profile', email],
+      await mutateSubmitUserProfile({
+        userProfileObject: formattedUserProfileObject,
       });
       navigate('/landing');
     } else {

src/pages/TypesFinancialInstitutions/index.tsx

@@ -22,6 +22,7 @@ import { UpdateTypeOfInstitutionSchema } from 'pages/Filing/UpdateFinancialProfi
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 import { useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
+import { UPLOAD_SUBMIT_MAX_RETRIES } from 'utils/constants';
 import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
 import { formatTypesForApi } from './TypesFinancialInstitutions.helpers';
@@ -61,6 +62,7 @@ function TypesFinancialInstitutions(): JSX.Element {
     mutationFn: async () =>
       // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
       submitUpdateInstitutionTypeSbl(auth, lei, formatTypesForApi(getValues())),
+    retry: UPLOAD_SUBMIT_MAX_RETRIES,
   });
 
   // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717

src/utils/constants.ts

@@ -5,7 +5,7 @@ export const NegativeOne = -1;
 export const One = 1;
 export const Two = 2;
 export const MAX_RETRIES = 3;
-export const UPLOAD_CSV_MAX_RETRIES = 2;
+export const UPLOAD_SUBMIT_MAX_RETRIES = 2;
 export const Five = 5;
 export const Ten = 10;
 export const ITEMS_PER_PAGE = 20;