[MDS-5927] Bring Projects Form to CORE

services/common/src/components/forms/RenderFileUpload.tsx

@@ -134,8 +134,11 @@ export const FileUpload = (props: FileUploadProps) => {
     const fileTypeList = listedFileTypes ?? Object.keys(acceptedFileTypesMap);
     const fileTypeDisplayString =
       fileTypeList.slice(0, -1).join(", ") + ", and " + fileTypeList.slice(-1);
+    const fileSize = props.maxFileSize
+      ? ` with max individual file size of ${props.maxFileSize}`
+      : "";
     const secondLine = abbrevLabel
-      ? `<div>We accept most common ${fileTypeDisplayString} files</div>`
+      ? `<div>We accept most common ${fileTypeDisplayString} files${fileSize}.</div>`
       : `<div>Accepted filetypes: ${fileTypeDisplayString}</div>`;
     return `${labelInstruction}<br>${secondLine}`;
   };

services/common/src/components/forms/Step.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+
+export interface StepProps {
+  disabled?: boolean;
+  key: string;
+}
+
+const Step: FC<StepProps> = (props) => {
+  return <>{props.children}</>;
+};
+
+export default Step;

services/common/src/components/forms/SteppedForm.tsx

@@ -1,54 +1,57 @@
-import { Button, Col, Form, Menu, Popconfirm, Row } from "antd";
+import React, { FC, ReactElement, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { getFormSyncErrors, getFormValues, submit } from "redux-form";
+import { Button, Col, Menu, Popconfirm, Row, StepProps } from "antd";
 import LeftOutlined from "@ant-design/icons/LeftOutlined";
 import RightOutlined from "@ant-design/icons/RightOutlined";
-import React, { useEffect, useState } from "react";
-
-import PropTypes from "prop-types";
 import { indexOf } from "lodash";
-import { formatUrlToUpperCaseString } from "@mds/common/redux/utils/helpers";
-
-const propTypes = {
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  handleTabChange: PropTypes.func.isRequired,
-  handleSaveDraft: PropTypes.func,
-  handleSaveData: PropTypes.func,
-  handleCancel: PropTypes.func,
-  activeTab: PropTypes.string.isRequired,
-  errors: PropTypes.arrayOf(PropTypes.string),
-  submitText: PropTypes.string,
-  cancelText: PropTypes.string,
-  cancelConfirmMessage: PropTypes.string,
-  sectionChangeText: PropTypes.string,
-};
-
-const defaultProps = {
-  submitText: undefined,
-  cancelText: undefined,
-  handleSaveDraft: undefined,
-  handleSaveData: undefined,
-  handleCancel: undefined,
-  cancelConfirmMessage: undefined,
-  errors: [],
-  sectionChangeText: undefined,
-};
-
-const SteppedForm = (props) => {
-  const {
-    children,
-    handleTabChange,
-    activeTab,
-    handleSaveDraft,
-    handleSaveData,
-    submitText,
-    cancelText,
-    handleCancel,
-    cancelConfirmMessage,
-    errors,
-    sectionChangeText,
-  } = props;
+import { flattenObject, formatUrlToUpperCaseString } from "@mds/common/redux/utils/helpers";
+import FormWrapper from "./FormWrapper";
+
+interface SteppedFormProps {
+  formName: string;
+  initialValues?: any;
+  isEditMode?: boolean;
+  children: Array<ReactElement<StepProps>>;
+  handleTabChange: (newTab: string) => void | Promise<void>;
+  handleSaveDraft?: (formValues) => Promise<void>;
+  handleSaveData?: (values, newActiveTab?: string) => Promise<void>;
+  handleCancel?: () => void | Promise<void>;
+  transformPayload?: (values: any) => any;
+  activeTab: string;
+  submitText?: string; // "Submit"
+  cancelText?: string; // "Cancel"
+  cancelConfirmMessage?: string;
+  sectionChangeText?: string; // Save & Continue
+  nextText?: string; // "Next"
+  disableTabsOnError?: boolean;
+}
+
+const SteppedForm: FC<SteppedFormProps> = ({
+  formName,
+  initialValues,
+  children,
+  transformPayload,
+  handleTabChange,
+  handleSaveDraft,
+  handleSaveData,
+  handleCancel,
+  activeTab,
+  isEditMode = true,
+  submitText = "Submit",
+  cancelText = "Cancel",
+  cancelConfirmMessage,
+  sectionChangeText = "Save & Continue",
+  nextText = "Next",
+  disableTabsOnError = true,
+}) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [tabIndex, setTabIndex] = useState(0);
   const tabs = children.map((child) => child.key);
+  const dispatch = useDispatch();
+  const formValues = useSelector(getFormValues(formName));
+  const formErrors = useSelector((state) => getFormSyncErrors(formName)(state));
+  const errors = Object.keys(flattenObject(formErrors));
 
   useEffect(() => {
     setTabIndex(tabs.indexOf(activeTab));
@@ -70,17 +73,29 @@ const SteppedForm = (props) => {
     }
   };
 
-  const handleNextClick = async (evt, tab) => {
-    evt.preventDefault();
+  // checks for validation errors before saving draft or save & continues
+  const saveCheck = async () => {
+    await dispatch(submit(formName));
+    const valid = !errors.length;
+    return valid;
+  };
 
+  const getValues = (formValues) => {
+    if (transformPayload) {
+      return transformPayload(formValues);
+    }
+    return formValues;
+  };
+
+  const handleDraftClick = async (evt, tab) => {
+    evt.preventDefault();
     setIsSubmitting(true);
 
     try {
-      if (handleSaveData) {
-        await handleSaveData(null, tab);
+      if (handleSaveDraft && (await saveCheck())) {
+        await handleSaveDraft(getValues(formValues));
       }
       if (errors.length > 0) return;
-
       setTabIndex(indexOf(tabs, tab));
     } finally {
       setIsSubmitting(false);
@@ -90,12 +105,26 @@ const SteppedForm = (props) => {
   const isFirst = tabIndex === 0;
   const isLast = tabs.length - 1 === tabIndex;
 
+  const handleNextClick = async (evt, tab) => {
+    evt.preventDefault();
+    setIsSubmitting(true);
+    try {
+      if (handleSaveData && (await saveCheck())) {
+        await handleSaveData(getValues(formValues), tab);
+      }
+      if (errors.length > 0) return;
+      setTabIndex(indexOf(tabs, tab));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   const items = tabs.map((tab) => {
     const child = children.find((childTab) => childTab.key === tab);
     return {
       label: formatUrlToUpperCaseString(tab),
       key: tab,
-      disabled: child?.props?.disabled,
+      disabled: child?.props?.disabled || (disableTabsOnError && errors.length > 0),
       className: "stepped-menu-item",
       onClick: () => handleTabClick(tabs[indexOf(tabs, tab)]),
     };
@@ -104,12 +133,29 @@ const SteppedForm = (props) => {
   return (
     <Row>
       <Col span={6} className="stepped-form-menu-container">
-        <Menu className="stepped-form" mode="inline" selectedKeys={tabs[tabIndex]} items={items} />
+        <Menu
+          className="stepped-form"
+          mode="inline"
+          selectedKeys={[tabs[tabIndex].toString()]}
+          items={items}
+        />
       </Col>
       <Col span={18}>
         {children && (
           <div className="stepped-form-form-container">
-            <Form layout="vertical">{children.find((child) => child.key === tabs[tabIndex])}</Form>
+            <FormWrapper
+              name={formName}
+              onSubmit={() => {}}
+              initialValues={initialValues}
+              isEditMode={isEditMode}
+              reduxFormConfig={{
+                touchOnBlur: true,
+                touchOnChange: false,
+                enableReinitialize: true,
+              }}
+            >
+              {children.find((child) => child.key === tabs[tabIndex])}
+            </FormWrapper>
             <Row
               justify={isFirst && tabs.length > 1 ? "end" : "space-between"}
               className="stepped-form-button-row"
@@ -137,30 +183,40 @@ const SteppedForm = (props) => {
                 </Popconfirm>
               )}
 
-              {!isLast && (
+              {isEditMode && !isLast && (
                 <div>
                   {handleSaveDraft && (
                     <Button
                       type="text"
                       className="full-mobile draft-button"
-                      onClick={handleSaveDraft}
+                      onClick={(e) => handleDraftClick(e, tabs[tabIndex + 1])}
                       style={{ marginRight: 16 }}
                     >
                       Save Draft
                     </Button>
                   )}
                   <Button
                     type="primary"
+                    htmlType="button"
                     disabled={isSubmitting}
                     onClick={(e) => handleNextClick(e, tabs[tabIndex + 1])}
                   >
-                    {sectionChangeText ?? <>Save &amp; Continue</>}
+                    {sectionChangeText}
                     <RightOutlined />
                   </Button>
                 </div>
               )}
-              {isLast && (
-                <Button type="primary" disabled={isSubmitting} onClick={handleSaveData}>
+              {!isEditMode && !isLast && (
+                <Button type="primary" htmlType="button" onClick={() => setTabIndex(tabIndex + 1)}>
+                  {nextText}
+                </Button>
+              )}
+              {isEditMode && isLast && (
+                <Button
+                  type="primary"
+                  onClick={(e) => handleNextClick(e, null)}
+                  disabled={isSubmitting}
+                >
                   {submitText || "Submit"}
                 </Button>
               )}
@@ -172,7 +228,4 @@ const SteppedForm = (props) => {
   );
 };
 
-SteppedForm.propTypes = propTypes;
-SteppedForm.defaultProps = defaultProps;
-
 export default SteppedForm;

services/minespace-web/src/components/Forms/projects/projectSummary/Agent.tsx → services/common/src/components/projectSummary/Agent.tsx

@@ -2,7 +2,7 @@ import React, { FC, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Field, change, getFormValues } from "redux-form";
 import { Col, Row, Typography, Alert } from "antd";
-import { FORM } from "@mds/common";
+import { FORM } from "@mds/common/constants/forms";
 import RenderField from "@mds/common/components/forms/RenderField";
 import RenderRadioButtons from "@mds/common/components/forms/RenderRadioButtons";
 import RenderSelect from "@mds/common/components/forms/RenderSelect";
@@ -15,14 +15,15 @@ import {
   requiredRadioButton,
 } from "@mds/common/redux/utils/Validate";
 import { getDropdownProvinceOptions } from "@mds/common/redux/selectors/staticContentSelectors";
-import { CONTACTS_COUNTRY_OPTIONS, IOrgbookCredential } from "@mds/common";
+import { IOrgbookCredential } from "@mds/common/interfaces/party";
+import { CONTACTS_COUNTRY_OPTIONS } from "@mds/common/constants/strings";
 import RenderOrgBookSearch from "@mds/common/components/forms/RenderOrgBookSearch";
 import {
   fetchOrgBookCredential,
   verifyOrgBookCredential,
 } from "@mds/common/redux/actionCreators/orgbookActionCreator";
 import { getOrgBookCredential } from "@mds/common/redux/selectors/orgbookSelectors";
-import { normalizePhone } from "@common/utils/helpers";
+import { normalizePhone } from "@mds/common/redux/utils/helpers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleCheck, faCircleX, faSpinner } from "@fortawesome/pro-light-svg-icons";
 
@@ -260,15 +261,6 @@ export const Agent: FC = () => {
           )}
 
           <Row gutter={16}>
-            {/* TODO: With Orgbook integration, this should probably be the agent.party_name */}
-            {/* <Col md={12} sm={24}>
-                <Field
-                  name="agent.doing_business_as"
-                  label="Doing Business As"
-                  component={RenderField}
-                  help="if different than the Company Legal Name"
-                />
-              </Col> */}
             <Col md={12} sm={24}>
               <Field name="agent.job_title" label="Agent's Title" component={RenderField} />
             </Col>

services/minespace-web/src/components/Forms/projects/projectSummary/Applicant.tsx → services/common/src/components/projectSummary/Applicant.tsx

@@ -11,7 +11,9 @@ import {
   requiredRadioButton,
 } from "@mds/common/redux/utils/Validate";
 import RenderRadioButtons from "@mds/common/components/forms/RenderRadioButtons";
-import { CONTACTS_COUNTRY_OPTIONS, FORM, IOrgbookCredential } from "@mds/common";
+import { FORM } from "@mds/common/constants/forms";
+import { CONTACTS_COUNTRY_OPTIONS } from "@mds/common/constants/strings";
+import { IOrgbookCredential } from "@mds/common/interfaces/party";
 import RenderOrgBookSearch from "@mds/common/components/forms/RenderOrgBookSearch";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleCheck, faCircleX, faSpinner } from "@fortawesome/pro-light-svg-icons";
@@ -23,7 +25,7 @@ import RenderField from "@mds/common/components/forms/RenderField";
 import { getDropdownProvinceOptions } from "@mds/common/redux/selectors/staticContentSelectors";
 import RenderSelect from "@mds/common/components/forms/RenderSelect";
 import RenderCheckbox from "@mds/common/components/forms/RenderCheckbox";
-import { normalizePhone } from "@common/utils/helpers";
+import { normalizePhone } from "@mds/common/redux/utils/helpers";
 import { getOrgBookCredential } from "@mds/common/redux/selectors/orgbookSelectors";
 
 const { Title, Paragraph } = Typography;

services/minespace-web/src/components/Forms/projects/projectSummary/ApplicationSummary.tsx → services/common/src/components/projectSummary/ApplicationSummary.tsx

@@ -1,4 +1,3 @@
-import { FORM } from "@mds/common";
 import React, { FC, useEffect, useState } from "react";
 import { getFormValues } from "redux-form";
 import { useSelector } from "react-redux";
@@ -11,9 +10,9 @@ import { renderTextColumn } from "@mds/common/components/common/CoreTableCommonC
 import CoreTable from "@mds/common/components/common/CoreTable";
 import { ColumnsType } from "antd/es/table";
 import { Button, Alert, Typography, Col, Row } from "antd";
-import { EDIT_PROJECT_SUMMARY } from "@/constants/routes";
 import { useHistory } from "react-router-dom";
 import { getPermits } from "@mds/common/redux/selectors/permitSelectors";
+import { FORM } from "@mds/common/constants/forms";
 
 interface IAuthorizationSummaryColumn {
   type: string;
@@ -221,7 +220,7 @@ export const ApplicationSummary: FC = () => {
   const handleEditClicked = () => {
     const projectGuid = formValues?.project_guid;
     const projectSummaryGuid = formValues?.project_summary_guid;
-    const url = EDIT_PROJECT_SUMMARY.dynamicRoute(
+    const url = GLOBAL_ROUTES?.EDIT_PROJECT_SUMMARY.dynamicRoute(
       projectGuid,
       projectSummaryGuid,
       "purpose-and-authorization"