QQQ-28 Updates for bulk processes

src/qqq/pages/process-run/index.tsx

@@ -13,10 +13,10 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import {useEffect, useState} from "react";
+import React, {useEffect, useState, Fragment} from "react";
 
 // formik components
-import {Formik, Form} from "formik";
+import {Form, Formik, useFormikContext} from "formik";
 
 // @mui material components
 import Grid from "@mui/material/Grid";
@@ -36,7 +36,6 @@ import Footer from "examples/Footer";
 
 // ProcessRun layout schemas for form and form fields
 import * as Yup from "yup";
-import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
 import {useLocation, useParams} from "react-router-dom";
@@ -45,113 +44,31 @@ import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
-import {
-   DataGridPro, GridColDef, GridRowParams, GridRowsProp,
-} from "@mui/x-data-grid-pro";
+import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
+import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
+import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
+import FormData from "form-data";
+import QClient from "qqq/utils/QClient";
+import {CircularProgress} from "@mui/material";
 import QDynamicForm from "../../components/QDynamicForm";
 import MDTypography from "../../../components/MDTypography";
 
-function getDynamicStepContent(
-   stepIndex: number,
-   step: any,
-   formData: any,
-   processError: string,
-   processValues: any,
-   recordConfig: any,
-): JSX.Element
+function logFormValidations(prefix: string, formValidations: any)
 {
-   const {
-      formFields, values, errors, touched,
-   } = formData;
-   // console.log(`in getDynamicStepContent: step label ${step?.label}`);
-
-   if (processError)
-   {
-      return (
-         <>
-            <MDTypography color="error" variant="h3">
-               Error
-            </MDTypography>
-            <div>{processError}</div>
-         </>
-      );
-   }
-
-   if (step === null)
-   {
-      console.log("in getDynamicStepContent.  No step yet, so returning 'loading'");
-      return <div>Loading...</div>;
-   }
-
-   console.log(`in getDynamicStepContent. the step looks like: ${JSON.stringify(step)}`);
-
-   return (
-      <>
-         {step.formFields && <QDynamicForm formData={formData} formLabel={step.label} />}
-         {step.viewFields && (
-            <div>
-               {step.viewFields.map((field: QFieldMetaData) => (
-                  <div key={field.name}>
-                     <b>
-                        {field.label}
-                        :
-                     </b>
-                     {" "}
-                     {processValues[field.name]}
-                  </div>
-               ))}
-            </div>
-         )}
-         {step.recordListFields && (
-            <div>
-               <b>Records</b>
-               {" "}
-               <br />
-               <MDBox height="100%">
-                  <DataGridPro
-                     page={recordConfig.pageNo}
-                     disableSelectionOnClick
-                     autoHeight
-                     rows={recordConfig.rows}
-                     columns={recordConfig.columns}
-                     rowBuffer={10}
-                     rowCount={recordConfig.totalRecords}
-                     pageSize={recordConfig.rowsPerPage}
-                     rowsPerPageOptions={[10, 25, 50]}
-                     onPageSizeChange={recordConfig.handleRowsPerPageChange}
-                     onPageChange={recordConfig.handlePageChange}
-                     onRowClick={recordConfig.handleRowClick}
-                     paginationMode="server"
-                     pagination
-                     density="compact"
-                     loading={recordConfig.loading}
-                  />
-               </MDBox>
-            </div>
-         )}
-      </>
-   );
+   console.log(`${prefix}: ${JSON.stringify(formValidations)} `);
 }
 
-function trace(name: string, isComponent: boolean = false)
-{
-   if (isComponent)
-   {
-      console.log(`COMPONENT: ${name}`);
-   }
-   else
-   {
-      console.log(`  function: ${name}`);
-   }
-}
-
-const qController = new QController("");
-
 function ProcessRun(): JSX.Element
 {
    const {processName} = useParams();
+
+   ///////////////////
+   // process state //
+   ///////////////////
    const [processUUID, setProcessUUID] = useState(null as string);
    const [jobUUID, setJobUUID] = useState(null as string);
+   const [qJobRunning, setQJobRunning] = useState(null as QJobRunning);
+   const [qJobRunningDate, setQJobRunningDate] = useState(null as Date);
    const [activeStepIndex, setActiveStepIndex] = useState(0);
    const [activeStep, setActiveStep] = useState(null as QFrontendStepMetaData);
    const [newStep, setNewStep] = useState(null);
@@ -159,33 +76,239 @@ function ProcessRun(): JSX.Element
    const [needInitialLoad, setNeedInitialLoad] = useState(true);
    const [processMetaData, setProcessMetaData] = useState(null);
    const [processValues, setProcessValues] = useState({} as any);
+   const [processError, setProcessError] = useState(null as string);
+   const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
    const [lastProcessResponse, setLastProcessResponse] = useState(
       null as QJobStarted | QJobComplete | QJobError | QJobRunning,
    );
+   const onLastStep = activeStepIndex === steps.length - 2;
+   const noMoreSteps = activeStepIndex === steps.length - 1;
+
+   ////////////////
+   // form state //
+   ////////////////
    const [formId, setFormId] = useState("");
    const [formFields, setFormFields] = useState({});
    const [initialValues, setInitialValues] = useState({});
    const [validationScheme, setValidationScheme] = useState(null);
    const [validationFunction, setValidationFunction] = useState(null);
-   const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
-   const [needRecords, setNeedRecords] = useState(false);
-   const [processError, setProcessError] = useState(null as string);
-   const [recordConfig, setRecordConfig] = useState({} as any);
-   const onLastStep = activeStepIndex === steps.length - 2;
-   const noMoreSteps = activeStepIndex === steps.length - 1;
+   const [formError, setFormError] = useState(null as string);
 
-   trace("ProcessRun", true);
+   ///////////////////////
+   // record list state //
+   ///////////////////////
+   const [needRecords, setNeedRecords] = useState(false);
+   const [recordConfig, setRecordConfig] = useState({} as any);
+   const [pageNumber, setPageNumber] = useState(0);
+   const [rowsPerPage, setRowsPerPage] = useState(10);
+
+   //////////////////////////////
+   // state for bulk edit form //
+   //////////////////////////////
+   const [disabledBulkEditFields, setDisabledBulkEditFields] = useState({} as any);
+
+   const doesStepHaveComponent = (step: QFrontendStepMetaData, type: QComponentType): boolean =>
+   {
+      if (step.components)
+      {
+         for (let i = 0; i < step.components.length; i++)
+         {
+            if (step.components[i].type === type)
+            {
+               return (true);
+            }
+         }
+      }
+      return (false);
+   };
+
+   //////////////////////////////////////////////////////////////
+   // event handler for the bulk-edit field-enabled checkboxes //
+   //////////////////////////////////////////////////////////////
+   const bulkEditSwitchChanged = (name: string, switchValue: boolean) =>
+   {
+      const newDisabledBulkEditFields = JSON.parse(JSON.stringify(disabledBulkEditFields));
+      newDisabledBulkEditFields[name] = !switchValue;
+      setDisabledBulkEditFields(newDisabledBulkEditFields);
+   };
+
+   const formatViewValue = (value: any): JSX.Element =>
+   {
+      if (value === null || value === undefined)
+      {
+         return <span>--</span>;
+      }
+
+      if (typeof value === "string")
+      {
+         return (
+            <>
+               {value.split(/\n/).map((value: string, index: number) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Fragment key={index}>
+                     <span>{value}</span>
+                     <br />
+                  </Fragment>
+               ))}
+            </>
+         );
+      }
+
+      return (<span>{value}</span>);
+   };
+
+   ////////////////////////////////////////////////////
+   // generate the main form body content for a step //
+   ////////////////////////////////////////////////////
+   const getDynamicStepContent = (
+      stepIndex: number,
+      step: any,
+      formData: any,
+      processError: string,
+      processValues: any,
+      recordConfig: any,
+   ): JSX.Element =>
+   {
+      if (processError)
+      {
+         return (
+            <>
+               <MDTypography color="error" variant="h5">
+                  Error
+               </MDTypography>
+               <MDTypography color="body" variant="button">
+                  {processError}
+               </MDTypography>
+            </>
+         );
+      }
+
+      if (qJobRunning)
+      {
+         return (
+            <>
+               <MDTypography variant="h5">
+                  {" "}
+                  Working
+               </MDTypography>
+               <Grid container>
+                  <Grid item padding={1}>
+                     <CircularProgress color="info" />
+                  </Grid>
+                  <Grid item>
+                     <MDTypography color="body" variant="button">
+                        {qJobRunning?.message}
+                        <br />
+                        {qJobRunning.current && qJobRunning.total && (
+                           <div>{`${qJobRunning.current.toLocaleString()} of ${qJobRunning.total.toLocaleString()}`}</div>
+                        )}
+                        <i>
+                           {`Updated at ${qJobRunningDate.toLocaleTimeString()}`}
+                        </i>
+                     </MDTypography>
+                  </Grid>
+               </Grid>
+            </>
+         );
+      }
+
+      if (step === null)
+      {
+         console.log("in getDynamicStepContent.  No step yet, so returning 'loading'");
+         return <div>Loading...</div>;
+      }
+
+      return (
+         <>
+            <MDTypography variation="h5" fontWeight="bold">{step?.label}</MDTypography>
+            {step.components && (
+               step.components.map((component: QFrontendComponent, index: number) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={index}>
+                     {
+                        component.type === QComponentType.HELP_TEXT && (
+                           <MDTypography variant="button" color="info">
+                              {component.values.text}
+                           </MDTypography>
+                        )
+                     }
+                  </div>
+               )))}
+            {(step.formFields || doesStepHaveComponent(step, QComponentType.FILE_UPLOAD)) && (
+               <QDynamicForm
+                  formData={formData}
+                  bulkEditMode={doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM)}
+                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
+               />
+            )}
+            {step.viewFields && (
+               <div>
+                  {step.viewFields.map((field: QFieldMetaData) => (
+                     <MDBox key={field.name} display="flex" py={1} pr={2}>
+                        <MDTypography variant="button" fontWeight="bold">
+                           {field.label}
+                           : &nbsp;
+                        </MDTypography>
+                        <MDTypography variant="button" fontWeight="regular" color="text">
+                           {formatViewValue(processValues[field.name])}
+                        </MDTypography>
+                     </MDBox>
+                  ))}
+               </div>
+            )}
+            {(step.recordListFields && recordConfig.columns) && (
+               <div>
+                  <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
+                  {" "}
+                  <br />
+                  <MDBox height="100%">
+                     <DataGridPro
+                        page={recordConfig.pageNo}
+                        disableSelectionOnClick
+                        autoHeight
+                        rows={recordConfig.rows}
+                        columns={recordConfig.columns}
+                        rowBuffer={10}
+                        rowCount={recordConfig.totalRecords}
+                        pageSize={recordConfig.rowsPerPage}
+                        rowsPerPageOptions={[10, 25, 50]}
+                        onPageSizeChange={recordConfig.handleRowsPerPageChange}
+                        onPageChange={recordConfig.handlePageChange}
+                        onRowClick={recordConfig.handleRowClick}
+                        getRowId={(row) => row.__idForDataGridPro__}
+                        paginationMode="server"
+                        pagination
+                        density="compact"
+                        loading={recordConfig.loading}
+                        disableColumnFilter
+                     />
+                  </MDBox>
+               </div>
+            )}
+         </>
+      );
+   };
+
+   const handlePageChange = (page: number) =>
+   {
+      setPageNumber(page);
+   };
+
+   const handleRowsPerPageChange = (size: number) =>
+   {
+      setRowsPerPage(size);
+   };
 
    function buildNewRecordConfig()
    {
       const newRecordConfig = {} as any;
-      newRecordConfig.pageNo = 1;
-      newRecordConfig.rowsPerPage = 20;
+      newRecordConfig.pageNo = pageNumber;
+      newRecordConfig.rowsPerPage = rowsPerPage;
       newRecordConfig.columns = [] as GridColDef[];
       newRecordConfig.rows = [];
       newRecordConfig.totalRecords = 0;
-      newRecordConfig.handleRowsPerPageChange = null;
-      newRecordConfig.handlePageChange = null;
+      newRecordConfig.handleRowsPerPageChange = handleRowsPerPageChange;
+      newRecordConfig.handlePageChange = handlePageChange;
       newRecordConfig.handleRowClick = null;
       newRecordConfig.loading = true;
       return (newRecordConfig);
@@ -196,8 +319,6 @@ function ProcessRun(): JSX.Element
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    useEffect(() =>
    {
-      trace("updateActiveStep");
-
       if (!processMetaData)
       {
          console.log("No process meta data yet, so returning early");
@@ -249,10 +370,39 @@ function ProcessRun(): JSX.Element
                initialValues[field.name] = processValues[field.name];
             });
 
+            ////////////////////////////////////////////////////
+            // disable all fields if this is a bulk edit form //
+            ////////////////////////////////////////////////////
+            if (doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM))
+            {
+               const newDisabledBulkEditFields: any = {};
+               activeStep.formFields.forEach((field) =>
+               {
+                  newDisabledBulkEditFields[field.name] = true;
+                  dynamicFormFields[field.name].isRequired = false;
+                  formValidations[field.name] = null;
+               });
+               setDisabledBulkEditFields(newDisabledBulkEditFields);
+            }
+
             setFormFields(dynamicFormFields);
             setInitialValues(initialValues);
             setValidationScheme(Yup.object().shape(formValidations));
             setValidationFunction(null);
+
+            logFormValidations("Post-disable thingie", formValidations);
+         }
+         else if (doesStepHaveComponent(activeStep, QComponentType.FILE_UPLOAD))
+         {
+            //////////////////////////////////////////////////////////////////////////
+            // if this step has an upload component, then set up the form for that. //
+            //////////////////////////////////////////////////////////////////////////
+            const {dynamicFormFields, formValidations} = DynamicFormUtils.getFormDataForUploadForm("fileUpload", "File");
+            setFormFields(dynamicFormFields);
+            setInitialValues(initialValues);
+
+            setValidationScheme(Yup.object().shape(formValidations));
+            setValidationFunction(null);
          }
          else
          {
@@ -263,24 +413,65 @@ function ProcessRun(): JSX.Element
             setValidationScheme(null);
             setValidationFunction(() => true);
          }
-
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         // if there are fields to load, build a record config, and set the needRecords state flag //
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         if (activeStep.recordListFields)
-         {
-            const newRecordConfig = buildNewRecordConfig();
-            activeStep.recordListFields.forEach((field) =>
-            {
-               newRecordConfig.columns.push({field: field.name, headerName: field.label, width: 200});
-            });
-            setRecordConfig(newRecordConfig);
-            setNeedRecords(true);
-         }
       }
-   }, [newStep]);
+   }, [newStep, rowsPerPage, pageNumber]);
 
-   // when we need to load records, do so, async
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   // if there are records to load: build a record config, and set the needRecords state flag //
+   /////////////////////////////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if (activeStep && activeStep.recordListFields)
+      {
+         const newRecordConfig = buildNewRecordConfig();
+         activeStep.recordListFields.forEach((field) =>
+         {
+            newRecordConfig.columns.push({
+               field: field.name, headerName: field.label, width: 200, sortable: false,
+            });
+         });
+         setRecordConfig(newRecordConfig);
+         setNeedRecords(true);
+      }
+   }, [activeStep, rowsPerPage, pageNumber]);
+
+   /////////////////////////////////////////////////////
+   // handle a bulk-edit enabled-switch being checked //
+   /////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if (activeStep && activeStep.formFields)
+      {
+         console.log("In useEffect for disabledBulkEditFields");
+         console.log(disabledBulkEditFields);
+
+         const newDynamicFormFields: any = {};
+         const newFormValidations: any = {};
+         activeStep.formFields.forEach((field) =>
+         {
+            const fieldName = field.name;
+            const isDisabled = disabledBulkEditFields[fieldName];
+
+            newDynamicFormFields[field.name] = DynamicFormUtils.getDynamicField(field);
+            newFormValidations[field.name] = DynamicFormUtils.getValidationForField(field);
+
+            if (isDisabled)
+            {
+               newDynamicFormFields[field.name].isRequired = false;
+               newFormValidations[field.name] = null;
+            }
+
+            logFormValidations("Upon update", newFormValidations);
+
+            setFormFields(newDynamicFormFields);
+            setValidationScheme(Yup.object().shape(newFormValidations));
+         });
+      }
+   }, [disabledBulkEditFields]);
+
+   ////////////////////////////////////////////////
+   // when we need to load records, do so, async //
+   ////////////////////////////////////////////////
    useEffect(() =>
    {
       if (needRecords)
@@ -288,13 +479,15 @@ function ProcessRun(): JSX.Element
          setNeedRecords(false);
          (async () =>
          {
-            const records = await qController.processRecords(
+            const response = await QClient.getInstance().processRecords(
                processName,
                processUUID,
-               recordConfig.rowsPerPage * (recordConfig.pageNo - 1),
+               recordConfig.rowsPerPage * recordConfig.pageNo,
                recordConfig.rowsPerPage,
             );
 
+            const {records} = response;
+
             /////////////////////////////////////////////////////////////////////////////////////////
             // re-construct the recordConfig object, so the setState call triggers a new rendering //
             /////////////////////////////////////////////////////////////////////////////////////////
@@ -306,14 +499,11 @@ function ProcessRun(): JSX.Element
             records.forEach((record) =>
             {
                const row = Object.fromEntries(record.values.entries());
-               if (!row.id)
-               {
-                  row.id = ++rowId;
-               }
+               row.__idForDataGridPro__ = ++rowId;
                newRecordConfig.rows.push(row);
             });
-            // todo count?
-            newRecordConfig.totalRecords = records.length;
+
+            newRecordConfig.totalRecords = response.totalRecords;
             setRecordConfig(newRecordConfig);
          })();
       }
@@ -326,8 +516,9 @@ function ProcessRun(): JSX.Element
    {
       if (lastProcessResponse)
       {
-         trace("handleProcessResponse");
          setLastProcessResponse(null);
+
+         setQJobRunning(null);
          if (lastProcessResponse instanceof QJobComplete)
          {
             const qJobComplete = lastProcessResponse as QJobComplete;
@@ -345,6 +536,8 @@ function ProcessRun(): JSX.Element
          else if (lastProcessResponse instanceof QJobRunning)
          {
             const qJobRunning = lastProcessResponse as QJobRunning;
+            setQJobRunning(qJobRunning);
+            setQJobRunningDate(new Date());
             setNeedToCheckJobStatus(true);
          }
          else if (lastProcessResponse instanceof QJobError)
@@ -363,13 +556,12 @@ function ProcessRun(): JSX.Element
    {
       if (needToCheckJobStatus)
       {
-         trace("checkJobStatus");
          setNeedToCheckJobStatus(false);
          (async () =>
          {
             setTimeout(async () =>
             {
-               const processResponse = await qController.processJobStatus(
+               const processResponse = await QClient.getInstance().processJobStatus(
                   processName,
                   processUUID,
                   jobUUID,
@@ -385,7 +577,6 @@ function ProcessRun(): JSX.Element
    //////////////////////////////////////////////////////////////////////////////////////////
    if (needInitialLoad)
    {
-      trace("initialLoad");
       setNeedInitialLoad(false);
       (async () =>
       {
@@ -411,15 +602,28 @@ function ProcessRun(): JSX.Element
 
          console.log(`@dk: Query String for init: ${queryStringForInit}`);
 
-         const processMetaData = await qController.loadProcessMetaData(processName);
-         // console.log(processMetaData);
-         setProcessMetaData(processMetaData);
-         setSteps(processMetaData.frontendSteps);
+         try
+         {
+            const processMetaData = await QClient.getInstance().loadProcessMetaData(processName);
+            setProcessMetaData(processMetaData);
+            setSteps(processMetaData.frontendSteps);
+         }
+         catch (e)
+         {
+            setProcessError("Error loading process definition.");
+            return;
+         }
 
-         const processResponse = await qController.processInit(processName, queryStringForInit);
-         setProcessUUID(processResponse.processUUID);
-         setLastProcessResponse(processResponse);
-      // console.log(processResponse);
+         try
+         {
+            const processResponse = await QClient.getInstance().processInit(processName, queryStringForInit);
+            setProcessUUID(processResponse.processUUID);
+            setLastProcessResponse(processResponse);
+         }
+         catch (e)
+         {
+            setProcessError("Error initializing process.");
+         }
       })();
    }
 
@@ -429,7 +633,6 @@ function ProcessRun(): JSX.Element
    //////////////////////////////////////////////////////////////////////////////////////////////////////
    const handleBack = () =>
    {
-      trace("handleBack");
       setNewStep(activeStepIndex - 1);
    };
 
@@ -438,23 +641,44 @@ function ProcessRun(): JSX.Element
    //////////////////////////////////////////////////////////////////////////////////////////
    const handleSubmit = async (values: any, actions: any) =>
    {
-      trace("handleSubmit");
+      setFormError(null);
 
-      // todo - post?
-      let queryString = "";
+      const formData = new FormData();
       Object.keys(values).forEach((key) =>
       {
-         queryString += `${key}=${encodeURIComponent(values[key])}&`;
+         formData.append(key, values[key]);
       });
 
-      actions.setSubmitting(false);
-      actions.resetForm();
+      if (doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM))
+      {
+         const bulkEditEnabledFields: string[] = [];
+         activeStep.formFields.forEach((field) =>
+         {
+            if (!disabledBulkEditFields[field.name])
+            {
+               bulkEditEnabledFields.push(field.name);
+            }
+         });
 
-      const processResponse = await qController.processStep(
+         if (bulkEditEnabledFields.length === 0)
+         {
+            setFormError("You must edit at least one field to continue.");
+            return;
+         }
+         formData.append("bulkEditEnabledFields", bulkEditEnabledFields.join(","));
+      }
+
+      const formDataHeaders = {
+         "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
+      };
+
+      console.log("Calling processStep...");
+      const processResponse = await QClient.getInstance().processStep(
          processName,
          processUUID,
          activeStep.name,
-         queryString,
+         formData,
+         formDataHeaders,
       );
       setLastProcessResponse(processResponse);
    };
@@ -529,17 +753,24 @@ function ProcessRun(): JSX.Element
                                              back
                                           </MDButton>
                                        )}
-                                       {noMoreSteps || processError ? (
+                                       {noMoreSteps || processError || qJobRunning ? (
                                           <MDBox />
                                        ) : (
-                                          <MDButton
-                                             disabled={isSubmitting}
-                                             type="submit"
-                                             variant="gradient"
-                                             color="dark"
-                                          >
-                                             {onLastStep ? "submit" : "next"}
-                                          </MDButton>
+                                          <>
+                                             {formError && (
+                                                <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
+                                                   {formError}
+                                                </MDTypography>
+                                             )}
+                                             <MDButton
+                                                disabled={isSubmitting}
+                                                type="submit"
+                                                variant="gradient"
+                                                color="dark"
+                                             >
+                                                {onLastStep ? "submit" : "next"}
+                                             </MDButton>
+                                          </>
                                        )}
                                     </MDBox>
                                  </MDBox>