Feat/change registration purpose/2169

bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationOperationInformation.ts

@@ -54,9 +54,9 @@ export const administrationOperationInformationUiSchema: UiSchema = {
       "date_of_first_shipment",
       "new_entrant_application",
     ],
-    registration_purpose: {
-      "ui:widget": "ReadOnlyWidget",
-    },
+    // registration_purpose: {
+    //   "ui:widget": "ReadOnlyWidget",
+    // },
     ...optedInOperationDetailsUiSchema,
   },
 };

bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationRegistrationInformation.ts

@@ -1,7 +1,10 @@
 import SectionFieldTemplate from "@bciers/components/form/fields/SectionFieldTemplate";
 import { TitleOnlyFieldTemplate } from "@bciers/components/form/fields";
 import { RJSFSchema, UiSchema } from "@rjsf/utils";
-import { getRegulatedProducts } from "@bciers/actions/api";
+import {
+  getRegulatedProducts,
+  getRegistrationPurposes,
+} from "@bciers/actions/api";
 import { RegistrationPurposes } from "apps/registration/app/components/operations/registration/enums";
 
 export const createAdministrationRegistrationInformationSchema = async (
@@ -10,14 +13,30 @@ export const createAdministrationRegistrationInformationSchema = async (
   // fetch db values that are dropdown options
   const regulatedProducts: { id: number; name: string }[] =
     await getRegulatedProducts();
+  const registrationPurposes = await getRegistrationPurposes();
 
   const isRegulatedProducts =
     registrationPurposeValue ===
     RegistrationPurposes.OBPS_REGULATED_OPERATION.valueOf();
-  const isNewEntrant =
-    registrationPurposeValue === RegistrationPurposes.NEW_ENTRANT_OPERATION;
-  const isOptIn =
-    registrationPurposeValue === RegistrationPurposes.OPTED_IN_OPERATION;
+
+  const regulatedProductsSchema: RJSFSchema = {
+    regulated_operation_preface: {
+      // Not an actual field, just used to display a message
+      type: "object",
+      readOnly: true,
+    },
+    regulated_products: {
+      title: "Regulated Product Name(s)",
+      type: "array",
+      minItems: 1,
+      items: {
+        enum: regulatedProducts.map((product) => product.id),
+        // Ts-ignore until we refactor enumNames https://github.com/bcgov/cas-registration/issues/2176
+        // @ts-ignore
+        enumNames: regulatedProducts.map((product) => product.name),
+      },
+    },
+  };
 
   // create the schema with the fetched values
   const registrationInformationSchema: RJSFSchema = {
@@ -28,77 +47,89 @@ export const createAdministrationRegistrationInformationSchema = async (
       registration_purpose: {
         type: "string",
         title: "The purpose of this registration is to register as a:",
+        enum: registrationPurposes,
       },
-      ...(isRegulatedProducts && {
-        regulated_operation_preface: {
-          // Not an actual field, just used to display a message
-          type: "object",
-          readOnly: true,
-        },
-        regulated_products: {
-          title: "Regulated Product Name(s)",
-          type: "array",
-          minItems: 1,
-          items: {
-            enum: regulatedProducts.map((product) => product.id),
-            // Ts-ignore until we refactor enumNames https://github.com/bcgov/cas-registration/issues/2176
-            // @ts-ignore
-            enumNames: regulatedProducts.map((product) => product.name),
-          },
-        },
-      }),
-      ...(isOptIn && {
-        opted_in_preface: {
-          // Not an actual field, just used to display a message
-          type: "object",
-          readOnly: true,
-        },
-        opted_in_operation: {
-          type: "object",
-          properties: {
-            meets_section_3_emissions_requirements: {
-              type: "boolean",
-            },
-            meets_electricity_import_operation_criteria: {
-              type: "boolean",
-            },
-            meets_entire_operation_requirements: {
-              type: "boolean",
-            },
-            meets_section_6_emissions_requirements: {
-              type: "boolean",
-            },
-            meets_naics_code_11_22_562_classification_requirements: {
-              type: "boolean",
-            },
-            meets_producing_gger_schedule_a1_regulated_product: {
-              type: "boolean",
+    },
+    dependencies: {
+      registration_purpose: {
+        oneOf: [
+          {
+            properties: {
+              registration_purpose: {
+                const: RegistrationPurposes.OBPS_REGULATED_OPERATION,
+              },
+              ...regulatedProductsSchema,
             },
-            meets_reporting_and_regulated_obligations: {
-              type: "boolean",
+          },
+          {
+            properties: {
+              registration_purpose: {
+                const: RegistrationPurposes.OPTED_IN_OPERATION,
+              },
+              ...regulatedProductsSchema,
+              opted_in_preface: {
+                // Not an actual field, just used to display a message
+                type: "object",
+                readOnly: true,
+              },
+              opted_in_operation: {
+                type: "object",
+                properties: {
+                  meets_section_3_emissions_requirements: {
+                    type: "boolean",
+                  },
+                  meets_electricity_import_operation_criteria: {
+                    type: "boolean",
+                  },
+                  meets_entire_operation_requirements: {
+                    type: "boolean",
+                  },
+                  meets_section_6_emissions_requirements: {
+                    type: "boolean",
+                  },
+                  meets_naics_code_11_22_562_classification_requirements: {
+                    type: "boolean",
+                  },
+                  meets_producing_gger_schedule_a1_regulated_product: {
+                    type: "boolean",
+                  },
+                  meets_reporting_and_regulated_obligations: {
+                    type: "boolean",
+                  },
+                  meets_notification_to_director_on_criteria_change: {
+                    type: "boolean",
+                  },
+                },
+              },
             },
-            meets_notification_to_director_on_criteria_change: {
-              type: "boolean",
+          },
+          {
+            properties: {
+              registration_purpose: {
+                const: RegistrationPurposes.NEW_ENTRANT_OPERATION,
+              },
+              ...regulatedProductsSchema,
+              new_entrant_preface: {
+                // Not an actual field, just used to display a message
+                type: "object",
+                readOnly: true,
+              },
+              date_of_first_shipment: {
+                type: "string",
+                title: "When is this operation's date of First Shipment?",
+                enum: [
+                  "On or before March 31, 2024",
+                  "On or after April 1, 2024",
+                ],
+              },
+              new_entrant_application: {
+                type: "string",
+                title: "New Entrant Application and Statutory Declaration",
+              },
             },
           },
-        },
-      }),
-      ...(isNewEntrant && {
-        new_entrant_preface: {
-          // Not an actual field, just used to display a message
-          type: "object",
-          readOnly: true,
-        },
-        date_of_first_shipment: {
-          type: "string",
-          title: "When is this operation's date of First Shipment?",
-          enum: ["On or before March 31, 2024", "On or after April 1, 2024"],
-        },
-        new_entrant_application: {
-          type: "string",
-          title: "New Entrant Application and Statutory Declaration",
-        },
-      }),
+        ],
+      },
     },
   };
   return registrationInformationSchema;
@@ -114,6 +145,9 @@ export const registrationInformationUiSchema: UiSchema = {
     "new_entrant_application",
   ],
   "ui:FieldTemplate": SectionFieldTemplate,
+  registration_purpose: {
+    "ui:widget": "SelectWidget",
+  },
   regulated_operation_preface: {
     "ui:classNames": "text-bc-bg-blue text-lg",
     "ui:FieldTemplate": TitleOnlyFieldTemplate,

bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx

@@ -5,6 +5,7 @@ import { OperationInformationFormData } from "apps/registration/app/components/o
 import { actionHandler } from "@bciers/actions";
 import { RJSFSchema } from "@rjsf/utils";
 import { useState } from "react";
+import { Button, Box } from "@mui/material";
 import { IChangeEvent } from "@rjsf/core";
 import { getOperationRegistration } from "@bciers/actions/api";
 import {
@@ -17,6 +18,8 @@ import {
   RegistrationPurposeHelpText,
   RegistrationPurposes,
 } from "@/registration/app/components/operations/registration/enums";
+import Modal from "@bciers/components/modal/Modal";
+import { isUndefined } from "lodash";
 
 interface OperationInformationFormProps {
   rawFormData: OperationInformationFormData;
@@ -39,11 +42,13 @@ const OperationInformationForm = ({
     ? createNestedFormData(rawFormData, schema)
     : {};
   const [formState, setFormState] = useState(nestedFormData);
+  const [pendingFormDataState, setPendingFormDataState] = useState<any>();
   const [key, setKey] = useState(Math.random());
   const [selectedPurpose, setSelectedPurpose] = useState("");
   const [currentUiSchema, setCurrentUiSchema] = useState(
     registrationOperationInformationUiSchema,
   );
+  const [isModalOpenState, setIsModalOpenState] = useState(false);
 
   function customValidate(
     formData: { [key: string]: any },
@@ -105,9 +110,13 @@ const OperationInformationForm = ({
     setKey(Math.random());
   };
 
-  const handleSelectedPurposeChange = (data: any) => {
+  const handleCloseModal = () => {
+    setIsModalOpenState(false);
+  };
+
+  const handleConfirmChangePurpose = () => {
     const newSelectedPurpose: RegistrationPurposes =
-      data.section1.registration_purpose;
+      pendingFormDataState.section1.registration_purpose;
     setSelectedPurpose(newSelectedPurpose);
     setCurrentUiSchema({
       ...registrationOperationInformationUiSchema,
@@ -125,30 +134,92 @@ const OperationInformationForm = ({
         },
       },
     });
-    setFormState(data);
+    setFormState(pendingFormDataState);
+    setPendingFormDataState(undefined);
+    setIsModalOpenState(false);
   };
 
   return (
-    <MultiStepBase
-      key={key}
-      cancelUrl="/"
-      formData={formState}
-      onSubmit={handleSubmit}
-      schema={schema}
-      step={step}
-      steps={steps}
-      error={error}
-      onChange={(e: IChangeEvent) => {
-        let newSelectedOperation = e.formData?.section1?.operation;
-        let newSelectedPurpose = e.formData?.section1?.registration_purpose;
-        if (newSelectedOperation && newSelectedOperation !== selectedOperation)
-          handleSelectOperationChange(e.formData);
-        if (newSelectedPurpose !== selectedPurpose)
-          handleSelectedPurposeChange(e.formData);
-      }}
-      uiSchema={currentUiSchema}
-      customValidate={customValidate}
-    />
+    <>
+      <Modal
+        title="Confirmation"
+        open={isModalOpenState}
+        onClose={handleCloseModal}
+      >
+        <Box
+          sx={{
+            fontSize: "16px",
+            minWidth: "100%",
+            margin: "8px 0",
+          }}
+        >
+          Are you sure you want to change your registration purpose? If you
+          proceed, all of the form data you have entered will be lost.
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "left",
+            marginTop: "24px",
+          }}
+        >
+          <Button
+            onClick={handleCloseModal}
+            color="primary"
+            variant="outlined"
+            aria-label="Cancel"
+          >
+            {"Cancel"}
+          </Button>
+          <Button
+            onClick={handleConfirmChangePurpose}
+            color="primary"
+            variant="contained"
+            aria-label="Change registration purpose"
+          >
+            {"Change registration purpose"}
+          </Button>
+        </Box>
+      </Modal>
+      <MultiStepBase
+        key={key}
+        cancelUrl="/"
+        formData={formState}
+        onSubmit={handleSubmit}
+        schema={schema}
+        step={step}
+        steps={steps}
+        error={error}
+        onChange={(e: IChangeEvent) => {
+          let newSelectedOperation = e.formData?.section1?.operation;
+          let newSelectedPurpose = e.formData?.section1?.registration_purpose;
+          if (
+            newSelectedOperation &&
+            newSelectedOperation !== selectedOperation
+          )
+            handleSelectOperationChange(e.formData);
+          if (
+            newSelectedPurpose &&
+            selectedPurpose != "" &&
+            newSelectedPurpose !== selectedPurpose
+          )
+            console.log(
+              "selected purpose ",
+              selectedPurpose,
+              " newSelectedPurpose ",
+              newSelectedPurpose,
+            );
+          setPendingFormDataState(e.formData);
+          setIsModalOpenState(true);
+          // handleSelectedPurposeChange(e.formData);
+        }}
+        uiSchema={currentUiSchema}
+        customValidate={customValidate}
+      />
+    </>
   );
 };