Chore: in progress

Author: andrea-williams

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

@@ -120,6 +120,7 @@ export const registrationInformationUiSchema: UiSchema = {
     "ui:classNames": "text-bc-bg-blue text-lg",
     "ui:FieldTemplate": TitleOnlyFieldTemplate,
     "ui:title": "Regulated Operation",
+  },
   registration_purpose: {
     "ui:widget": "ComboBox",
   },

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

@@ -28,7 +28,6 @@ export const createRegistrationInformationSchema =
           })),
         },
       },
-
       dependencies: {
         registration_purpose: {
           oneOf: registrationPurposes.map((purpose: string) => {
@@ -72,6 +71,9 @@ export const registrationInformationUiSchema: UiSchema = {
     "regulated_products",
   ],
   "ui:FieldTemplate": SectionFieldTemplate,
+  registration_purpose: {
+    "ui:widget": "MultiSelectWidget",
+  },
   regulated_products: {
     "ui:widget": "MultiSelectWidget",
     "ui:placeholder": "Select Regulated Product",

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { Box, Button } from "@mui/material";
+import Modal from "@bciers/components/modal/Modal";
+import React from "react";
+
+const ChangeRegistrationPurposeModal = () => {
+  const [modalState, setModalState] = useState("" as string);
+
+  const resetFormData = () => {
+    return;
+  };
+
+  const handleCloseModal = () => {
+    setModalState("");
+  };
+  const handleConfirmChange = () => {
+    resetFormData();
+    setModalState("");
+    return;
+  };
+
+  return (
+    <Box>
+      <Modal
+        title="Confirmation"
+        open={Boolean(modalState)}
+        onClose={handleCloseModal}
+      >
+        <Box
+          sx={{
+            fontSize: "20px",
+            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: "center",
+            marginTop: "24px",
+          }}
+        >
+          <Button
+            onClick={handleCloseModal}
+            color="secondary"
+            variant="contained"
+            aria-label="Cancel"
+            sx={{ marginRight: "12px" }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConfirmChange}
+            color="primary"
+            variant="contained"
+            aria-label="Confirm"
+          >
+            Change registration purpose
+          </Button>
+        </Box>
+      </Modal>
+    </Box>
+  );
+};
+
+export default ChangeRegistrationPurposeModal;

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

@@ -17,6 +17,7 @@ import {
   RegistrationPurposeHelpText,
   RegistrationPurposes,
 } from "@/registration/app/components/operations/registration/enums";
+import ChangeRegistrationPurposeModal from "@/registration/app/components/operations/registration/ChangeRegistrationPurposeModal";
 
 interface OperationInformationFormProps {
   rawFormData: OperationInformationFormData;
@@ -129,26 +130,32 @@ const OperationInformationForm = ({
   };
 
   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}
-    />
+    <>
+      <ChangeRegistrationPurposeModal />
+      <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}
+      />
+    </>
   );
 };