diff --git a/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationOperationInformation.ts b/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationOperationInformation.ts index 626968cd85..e590e555d7 100644 --- a/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationOperationInformation.ts +++ b/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, }, }; diff --git a/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationRegistrationInformation.ts b/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationRegistrationInformation.ts index 50a6c522ac..0e789149ea 100644 --- a/bciers/apps/administration/app/data/jsonSchema/operationInformation/administrationRegistrationInformation.ts +++ b/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, diff --git a/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx b/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx index 5014d09910..853ab39b4f 100644 --- a/bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx +++ b/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(); 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 ( - { - 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} - /> + <> + + + Are you sure you want to change your registration purpose? If you + proceed, all of the form data you have entered will be lost. + + + + + + + { + 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} + /> + ); };