From 15bf2c5535cc7aacc121d59d0a3f995b950a2629 Mon Sep 17 00:00:00 2001
From: Mat Busby <83598933+matbusby-fw@users.noreply.github.com>
Date: Fri, 3 Nov 2023 13:09:45 -0600
Subject: [PATCH] [MDS-5591] - ESUP creation application flow enhancement
 (#2778)

update esup modal flow to automatically move to issue stage after initial creation.  Typescript conversions.
---
 .../permits/explosivesPermit.interface.ts     |   8 +
 .../models/explosives_permit_amendment.py     |   2 +-
 .../ExplosivesPermitDecisionForm.js           | 142 ------------------
 .../ExplosivesPermitDecisionForm.tsx          | 135 +++++++++++++++++
 .../ExplosivesPermitFormNew.tsx               |  16 +-
 .../ExplosivesPermit/ExplosivesPermit.tsx     | 104 +++++++------
 ...xplosivesPermitApplicationDecisionModal.js |  28 ----
 ...plosivesPermitApplicationDecisionModal.tsx |  34 +++++
 .../ExplosivesPermitDecisionForm.spec.js.snap |   3 -
 9 files changed, 236 insertions(+), 236 deletions(-)
 delete mode 100644 services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.js
 create mode 100644 services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.tsx
 delete mode 100644 services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.js
 create mode 100644 services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.tsx

diff --git a/services/common/src/interfaces/permits/explosivesPermit.interface.ts b/services/common/src/interfaces/permits/explosivesPermit.interface.ts
index 8ae49c390f..d7f30b3ac0 100644
--- a/services/common/src/interfaces/permits/explosivesPermit.interface.ts
+++ b/services/common/src/interfaces/permits/explosivesPermit.interface.ts
@@ -101,3 +101,11 @@ export interface IDocumentTemplate {
   document_template_code: string;
   form_spec: IDocumentTemplateField[];
 }
+
+export interface IExplosivesPermitDocumentType {
+  explosives_permit_document_type_code: string;
+  description: string;
+  active_ind: boolean;
+  display_order: number;
+  document_template: IDocumentTemplate;
+}
diff --git a/services/core-api/app/api/mines/explosives_permit_amendment/models/explosives_permit_amendment.py b/services/core-api/app/api/mines/explosives_permit_amendment/models/explosives_permit_amendment.py
index adfd52d83a..702b881d02 100644
--- a/services/core-api/app/api/mines/explosives_permit_amendment/models/explosives_permit_amendment.py
+++ b/services/core-api/app/api/mines/explosives_permit_amendment/models/explosives_permit_amendment.py
@@ -37,7 +37,7 @@ class ExplosivesPermitAmendment(SoftDeleteMixin, AuditMixin, PermitMixin, Base):
         db.Integer, db.ForeignKey('explosives_permit.explosives_permit_id'), nullable=False)
 
     explosives_permit_guid = db.Column(
-        db.Integer, db.ForeignKey('explosives_permit.explosives_permit_guid'), nullable=False)
+        UUID(as_uuid=True), db.ForeignKey('explosives_permit.explosives_permit_guid'), nullable=False)
 
     explosives_permit = db.relationship(
         'ExplosivesPermit',
diff --git a/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.js b/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.js
deleted file mode 100644
index 667e47662f..0000000000
--- a/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { Field, reduxForm, getFormValues, isSubmitting } from "redux-form";
-import { Form } from "@ant-design/compatible";
-import "@ant-design/compatible/assets/index.css";
-import { Button, Col, Row, Popconfirm } from "antd";
-import { required } from "@common/utils/Validate";
-import { resetForm } from "@common/utils/helpers";
-import CustomPropTypes from "@/customPropTypes";
-import { renderConfig } from "@/components/common/config";
-import * as FORM from "@/constants/forms";
-import { getGenerateDocumentFormField } from "@/components/common/GenerateDocumentFormField";
-
-const propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  previewDocument: PropTypes.func.isRequired,
-  inspectors: CustomPropTypes.groupOptions.isRequired,
-  submitting: PropTypes.bool.isRequired,
-  formValues: CustomPropTypes.explosivesPermit.isRequired,
-  documentType: PropTypes.objectOf(PropTypes.any).isRequired,
-};
-
-const defaultProps = {};
-
-export class ExplosivesPermitDecisionForm extends Component {
-  state = { isPreviewingLetter: false, isPreviewingPermit: false };
-
-  render() {
-    return (
-      <Form layout="vertical" onSubmit={this.props.handleSubmit}>
-        <Row gutter={48}>
-          <Col span={24}>
-            <Form.Item>
-              <Field
-                id="issuing_inspector_party_guid"
-                name="issuing_inspector_party_guid"
-                label="Issuing Inspector*"
-                component={renderConfig.GROUPED_SELECT}
-                placeholder="Start typing the Issuing Inspector's name"
-                validate={[required]}
-                data={this.props.inspectors}
-              />
-            </Form.Item>
-            <Form.Item>
-              <Field
-                id="issue_date"
-                name="issue_date"
-                label="Issue Date*"
-                component={renderConfig.DATE}
-                validate={[required]}
-              />
-            </Form.Item>
-            <Form.Item>
-              <Field
-                id="expiry_date"
-                name="expiry_date"
-                label="Expiry Date*"
-                component={renderConfig.DATE}
-                validate={[required]}
-              />
-            </Form.Item>
-            {this.props.documentType.document_template.form_spec
-              .filter((field) => !field["read-only"])
-              .map((field) => (
-                <Form.Item key={field.id}>{getGenerateDocumentFormField(field)}</Form.Item>
-              ))}
-          </Col>
-        </Row>
-        <div className="right center-mobile" style={{ paddingTop: "14px" }}>
-          <Popconfirm
-            placement="topRight"
-            title="Are you sure you want to cancel?"
-            onConfirm={this.props.closeModal}
-            okText="Yes"
-            cancelText="No"
-            disabled={this.props.submitting}
-          >
-            <Button className="full-mobile" type="secondary" disabled={this.props.submitting}>
-              Cancel
-            </Button>
-          </Popconfirm>
-          <Button
-            className="full-mobile"
-            type="secondary"
-            onClick={() => {
-              this.setState({ isPreviewingLetter: true });
-              this.props
-                .previewDocument("LET", this.props.formValues)
-                .finally(() => this.setState({ isPreviewingLetter: false }));
-            }}
-            disabled={this.props.submitting}
-            loading={this.state.isPreviewingLetter}
-          >
-            Preview Letter
-          </Button>
-          <Button
-            className="full-mobile"
-            type="secondary"
-            onClick={() => {
-              this.setState({ isPreviewingPermit: true });
-              this.props
-                .previewDocument("PER", this.props.formValues)
-                .finally(() => this.setState({ isPreviewingPermit: false }));
-            }}
-            disabled={this.props.submitting}
-            loading={this.state.isPreviewingPermit}
-          >
-            Preview Permit Certificate
-          </Button>
-          <Button
-            type="primary"
-            className="full-mobile"
-            htmlType="submit"
-            loading={this.props.submitting}
-          >
-            Issue Permit
-          </Button>
-        </div>
-      </Form>
-    );
-  }
-}
-
-ExplosivesPermitDecisionForm.propTypes = propTypes;
-ExplosivesPermitDecisionForm.defaultProps = defaultProps;
-
-const mapStateToProps = (state) => ({
-  submitting: isSubmitting(FORM.EXPLOSIVES_PERMIT_DECISION)(state),
-  formValues: getFormValues(FORM.EXPLOSIVES_PERMIT_DECISION)(state),
-});
-
-export default compose(
-  connect(mapStateToProps),
-  reduxForm({
-    form: FORM.EXPLOSIVES_PERMIT_DECISION,
-    touchOnBlur: true,
-    onSubmitSuccess: resetForm(FORM.EXPLOSIVES_PERMIT_DECISION),
-  })
-)(ExplosivesPermitDecisionForm);
diff --git a/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.tsx b/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.tsx
new file mode 100644
index 0000000000..3bb487f156
--- /dev/null
+++ b/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm.tsx
@@ -0,0 +1,135 @@
+import React, { FC, useState } from "react";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { Field, getFormValues, isSubmitting, reduxForm } from "redux-form";
+import { Form } from "@ant-design/compatible";
+import "@ant-design/compatible/assets/index.css";
+import { Button, Col, Popconfirm, Row } from "antd";
+import { required } from "@common/utils/Validate";
+import { resetForm } from "@common/utils/helpers";
+import { renderConfig } from "@/components/common/config";
+import * as FORM from "@/constants/forms";
+import { getGenerateDocumentFormField } from "@/components/common/GenerateDocumentFormField";
+import { IExplosivesPermitDocumentType, IParty } from "@mds/common";
+
+interface ExplosivesPermitDecisionFormProps {
+  handleSubmit?: any;
+  closeModal: any;
+  previewDocument: any;
+  inspectors: IParty[];
+  submitting?: any;
+  formValues?: any;
+  documentType: IExplosivesPermitDocumentType;
+  initialValues: any;
+  onSubmit: any;
+}
+
+export const ExplosivesPermitDecisionForm: FC<ExplosivesPermitDecisionFormProps> = ({
+  inspectors,
+  handleSubmit,
+  documentType,
+  submitting,
+  previewDocument,
+  formValues,
+  ...props
+}) => {
+  const [isPreviewingLetter, setIsPreviewingLetter] = useState(false);
+  const [isPreviewingPermit, setIsPreviewingPermit] = useState(false);
+
+  return (
+    <Form layout="vertical" onSubmit={handleSubmit}>
+      <Row gutter={48}>
+        <Col span={24}>
+          <Form.Item>
+            <Field
+              id="issuing_inspector_party_guid"
+              name="issuing_inspector_party_guid"
+              label="Issuing Inspector*"
+              component={renderConfig.GROUPED_SELECT}
+              placeholder="Start typing the Issuing Inspector's name"
+              validate={[required]}
+              data={inspectors}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Field
+              id="issue_date"
+              name="issue_date"
+              label="Issue Date*"
+              component={renderConfig.DATE}
+              validate={[required]}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Field
+              id="expiry_date"
+              name="expiry_date"
+              label="Expiry Date*"
+              component={renderConfig.DATE}
+              validate={[required]}
+            />
+          </Form.Item>
+          {documentType.document_template.form_spec
+            .filter((field) => !field["read-only"])
+            .map((field) => (
+              <Form.Item key={field.id}>{getGenerateDocumentFormField(field)}</Form.Item>
+            ))}
+        </Col>
+      </Row>
+      <div className="right center-mobile" style={{ paddingTop: "14px" }}>
+        <Popconfirm
+          placement="topRight"
+          title="Are you sure you want to cancel?"
+          onConfirm={props.closeModal}
+          okText="Yes"
+          cancelText="No"
+          disabled={submitting}
+        >
+          <Button className="full-mobile" disabled={submitting}>
+            Cancel
+          </Button>
+        </Popconfirm>
+        <Button
+          className="full-mobile"
+          onClick={() => {
+            setIsPreviewingLetter(true);
+            previewDocument("LET", formValues).finally(() => setIsPreviewingLetter(false));
+          }}
+          disabled={submitting}
+          loading={isPreviewingLetter}
+        >
+          Preview Letter
+        </Button>
+        <Button
+          className="full-mobile"
+          onClick={() => {
+            setIsPreviewingPermit(true);
+
+            previewDocument("PER", formValues).finally(() => setIsPreviewingPermit(false));
+          }}
+          disabled={submitting}
+          loading={isPreviewingPermit}
+        >
+          Preview Permit Certificate
+        </Button>
+        <Button type="primary" className="full-mobile" htmlType="submit" loading={submitting}>
+          Issue Permit
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  submitting: isSubmitting(FORM.EXPLOSIVES_PERMIT_DECISION)(state),
+  formValues: getFormValues(FORM.EXPLOSIVES_PERMIT_DECISION)(state),
+});
+
+export default compose(
+  connect(mapStateToProps),
+  reduxForm({
+    form: FORM.EXPLOSIVES_PERMIT_DECISION,
+    touchOnBlur: true,
+    onSubmitSuccess: resetForm(FORM.EXPLOSIVES_PERMIT_DECISION),
+  })
+)(ExplosivesPermitDecisionForm as any) as FC<ExplosivesPermitDecisionFormProps>;
diff --git a/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitFormNew.tsx b/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitFormNew.tsx
index 5b3ebde38c..eefca7e568 100644
--- a/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitFormNew.tsx
+++ b/services/core-web/src/components/Forms/ExplosivesPermit/ExplosivesPermitFormNew.tsx
@@ -538,19 +538,11 @@ export const ExplosivesPermitFormNew: FC<ExplosivesPermitFormProps &
         </Col>
       </Row>
       <Row className="flex-between form-button-container-row">
-        <Popconfirm
-          placement="topRight"
-          title="Are you sure you want to cancel?"
-          onConfirm={props.closeModal}
-          okText="Yes"
-          cancelText="No"
-        >
-          <Button className="full-mobile" type="ghost">
-            Cancel
-          </Button>
-        </Popconfirm>
+        <Button onClick={() => setParentView(true)} className="full-mobile" type="ghost">
+          Back
+        </Button>
         <Button type="primary" className="full-mobile" htmlType="submit" loading={props.submitting}>
-          Submit
+          {isHistoric ? "Submit" : "Finish And Generate Certificate"}
         </Button>
       </Row>
     </Form>
diff --git a/services/core-web/src/components/mine/ExplosivesPermit/ExplosivesPermit.tsx b/services/core-web/src/components/mine/ExplosivesPermit/ExplosivesPermit.tsx
index 746ffec697..a42cf1ac56 100644
--- a/services/core-web/src/components/mine/ExplosivesPermit/ExplosivesPermit.tsx
+++ b/services/core-web/src/components/mine/ExplosivesPermit/ExplosivesPermit.tsx
@@ -66,15 +66,67 @@ export const ExplosivesPermit: FC<ExplosivesPermitProps> = ({
   explosivesPermitDocumentTypeDropdownOptions,
   ...props
 }) => {
+  const handleIssueExplosivesPermit = (values, record) => {
+    const payload = { ...record, ...values, application_status: "APP" };
+    return props
+      .updateExplosivesPermit(mineGuid, record.explosives_permit_guid, payload, true)
+      .then(() => {
+        props.fetchExplosivesPermits(mineGuid);
+        props.closeModal();
+      });
+  };
+
+  const handleDocumentPreview = (documentTypeCode, values, record) => {
+    const payload = {
+      explosives_permit_guid: record.explosives_permit_guid,
+      template_data: values,
+    };
+    return props.generateExplosivesPermitDocument(
+      documentTypeCode,
+      payload,
+      "Successfully generated preview of Explosives Permit document",
+      true
+    );
+  };
+
+  const handleOpenExplosivesPermitDecisionModal = (event, record: IExplosivesPermit) => {
+    event?.preventDefault();
+    props
+      .fetchExplosivesPermitDocumentContextTemplate("LET", record.explosives_permit_guid)
+      .then((documentContextTemplate) => {
+        const initialValues = {};
+        documentContextTemplate.document_template.form_spec.forEach(
+          (item) => (initialValues[item.id] = item["context-value"])
+        );
+        props.openModal({
+          props: {
+            initialValues,
+            documentType: documentContextTemplate,
+            inspectors,
+            onSubmit: (values) => handleIssueExplosivesPermit(values, record),
+            previewDocument: (documentTypeCode, values) =>
+              handleDocumentPreview(documentTypeCode, values, record),
+            title: "Issue Explosives Storage & Use Permit",
+          },
+          width: "75vw",
+          content: modalConfig.EXPLOSIVES_PERMIT_DECISION_MODAL,
+        });
+      });
+  };
+
   const handleAddExplosivesPermit = (values) => {
     const system = values.permit_tab ? "MMS" : "Core";
     const payload = {
       originating_system: system,
       ...values,
     };
-    return props.createExplosivesPermit(mineGuid, payload).then(() => {
+    return props.createExplosivesPermit(mineGuid, payload).then((newPermit) => {
       props.fetchExplosivesPermits(mineGuid);
-      props.closeModal();
+      if (system === "Core") {
+        handleOpenExplosivesPermitDecisionModal(null, newPermit.data);
+      } else {
+        props.closeModal();
+      }
     });
   };
 
@@ -212,16 +264,6 @@ export const ExplosivesPermit: FC<ExplosivesPermitProps> = ({
     });
   };
 
-  const handleIssueExplosivesPermit = (values, record) => {
-    const payload = { ...record, ...values, application_status: "APP" };
-    return props
-      .updateExplosivesPermit(mineGuid, record.explosives_permit_guid, payload, true)
-      .then(() => {
-        props.fetchExplosivesPermits(mineGuid);
-        props.closeModal();
-      });
-  };
-
   const handleDeleteExplosivesPermit = (event, record) => {
     event.preventDefault();
     return props.deleteExplosivesPermit(mineGuid, record.explosives_permit_guid).then(() => {
@@ -229,44 +271,6 @@ export const ExplosivesPermit: FC<ExplosivesPermitProps> = ({
     });
   };
 
-  const handleDocumentPreview = (documentTypeCode, values, record) => {
-    const payload = {
-      explosives_permit_guid: record.explosives_permit_guid,
-      template_data: values,
-    };
-    return props.generateExplosivesPermitDocument(
-      documentTypeCode,
-      payload,
-      "Successfully generated preview of Explosives Permit document",
-      true
-    );
-  };
-
-  const handleOpenExplosivesPermitDecisionModal = (event, record) => {
-    event.preventDefault();
-    props
-      .fetchExplosivesPermitDocumentContextTemplate("LET", record.explosives_permit_guid)
-      .then((documentContextTemplate) => {
-        const initialValues = {};
-        documentContextTemplate.document_template.form_spec.forEach(
-          (item) => (initialValues[item.id] = item["context-value"])
-        );
-        props.openModal({
-          props: {
-            initialValues,
-            documentType: documentContextTemplate,
-            inspectors,
-            onSubmit: (values) => handleIssueExplosivesPermit(values, record),
-            previewDocument: (documentTypeCode, values) =>
-              handleDocumentPreview(documentTypeCode, values, record),
-            title: "Issue Explosives Storage & Use Permit",
-          },
-          width: "75vw",
-          content: modalConfig.EXPLOSIVES_PERMIT_DECISION_MODAL,
-        });
-      });
-  };
-
   const title = isPermitTab
     ? "Explosives Storage & Use Permit"
     : "Explosives Storage & Use Permit Applications";
diff --git a/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.js b/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.js
deleted file mode 100644
index d80527767e..0000000000
--- a/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import CustomPropTypes from "@/customPropTypes";
-import ExplosivesPermitDecisionForm from "@/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm";
-
-const propTypes = {
-  initialValues: PropTypes.objectOf(PropTypes.string).isRequired,
-  documentType: PropTypes.string.isRequired,
-  inspectors: CustomPropTypes.groupOptions.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  previewDocument: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-};
-
-export const ExplosivesPermitApplicationDecisionModal = (props) => (
-  <ExplosivesPermitDecisionForm
-    initialValues={props.initialValues}
-    documentType={props.documentType}
-    inspectors={props.inspectors}
-    onSubmit={props.onSubmit}
-    previewDocument={props.previewDocument}
-    closeModal={props.closeModal}
-  />
-);
-
-ExplosivesPermitApplicationDecisionModal.propTypes = propTypes;
-
-export default ExplosivesPermitApplicationDecisionModal;
diff --git a/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.tsx b/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.tsx
new file mode 100644
index 0000000000..c7cf61a37f
--- /dev/null
+++ b/services/core-web/src/components/modalContent/ExplosivesPermitApplicationDecisionModal.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import PropTypes from "prop-types";
+import CustomPropTypes from "@/customPropTypes";
+import ExplosivesPermitDecisionForm from "@/components/Forms/ExplosivesPermit/ExplosivesPermitDecisionForm";
+import { IExplosivesPermitDocumentType, IParty } from "@mds/common";
+
+interface ExplosivesPermitApplicationDecisionModalProps {
+  initialValues: any;
+  documentType: IExplosivesPermitDocumentType;
+  inspectors: IParty[];
+  onSubmit: any;
+  previewDocument: any;
+  closeModal: any;
+}
+
+export const ExplosivesPermitApplicationDecisionModal: FC<ExplosivesPermitApplicationDecisionModalProps> = ({
+  initialValues,
+  documentType,
+  inspectors,
+  onSubmit,
+  previewDocument,
+  closeModal,
+}) => (
+  <ExplosivesPermitDecisionForm
+    initialValues={initialValues}
+    documentType={documentType}
+    inspectors={inspectors}
+    onSubmit={onSubmit}
+    previewDocument={previewDocument}
+    closeModal={closeModal}
+  />
+);
+
+export default ExplosivesPermitApplicationDecisionModal;
diff --git a/services/core-web/src/tests/components/Forms/ExplosivesPermit/__snapshots__/ExplosivesPermitDecisionForm.spec.js.snap b/services/core-web/src/tests/components/Forms/ExplosivesPermit/__snapshots__/ExplosivesPermitDecisionForm.spec.js.snap
index fb225bf0d3..00eb13c831 100644
--- a/services/core-web/src/tests/components/Forms/ExplosivesPermit/__snapshots__/ExplosivesPermitDecisionForm.spec.js.snap
+++ b/services/core-web/src/tests/components/Forms/ExplosivesPermit/__snapshots__/ExplosivesPermitDecisionForm.spec.js.snap
@@ -81,7 +81,6 @@ exports[`ExplosivesPermitDecisionForm renders properly 1`] = `
       <Button
         className="full-mobile"
         disabled={false}
-        type="secondary"
       >
         Cancel
       </Button>
@@ -91,7 +90,6 @@ exports[`ExplosivesPermitDecisionForm renders properly 1`] = `
       disabled={false}
       loading={false}
       onClick={[Function]}
-      type="secondary"
     >
       Preview Letter
     </Button>
@@ -100,7 +98,6 @@ exports[`ExplosivesPermitDecisionForm renders properly 1`] = `
       disabled={false}
       loading={false}
       onClick={[Function]}
-      type="secondary"
     >
       Preview Permit Certificate
     </Button>