@djb25/digit-ui-module-ws 1.0.15 → 1.0.16

package/dist/index.modern.js

@@ -30945,32 +30945,389 @@ const RequiredDocuments = ({
   })));
 };
 
+const FORM_STORAGE_KEY = "WS_EMPLOYEE_NEW_APPLICATION_FORM";
+const MAX_FILE_SIZE = 5242880;
+const SUPPORTED_FILE_TYPES = /(\.pdf|\.png|\.jpe?g)$/i;
+const NAME_PATTERN = /^[a-zA-Z\s.'-]{1,50}$/;
+const EMAIL_PATTERN = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+const MOBILE_PATTERN = /^[6-9][0-9]{9}$/;
+const OFFICE_PATTERN = /^[0-9]{6,12}$/;
+const PINCODE_PATTERN = /^[1-9][0-9]{5}$/;
+const NUMBER_PATTERN = /^\d+$/;
+const DECIMAL_PATTERN = /^\d+(\.\d{1,2})?$/;
+const IFSC_PATTERN = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+const ACCOUNT_PATTERN = /^[0-9]{9,18}$/;
+const COLLAPSIBLE_CONTENT_TAB = "__WS_SECTION_CONTENT__";
+const createOption = (code, name) => ({
+  code,
+  name
+});
+const TYPE_OF_REQUEST_OPTIONS = [createOption("NEW_CONNECTION", "New Connection"), createOption("TEMPORARY_CONNECTION", "Temporary Connection"), createOption("CHANGE_REQUEST", "Change Request")];
+const CONNECTION_TYPE_OPTIONS = [createOption("METERED", "Metered"), createOption("NON_METERED", "Non Metered")];
+const LOCALITY_OPTIONS = [createOption("DWARKA", "Dwarka"), createOption("ROHINI", "Rohini"), createOption("KAROL_BAGH", "Karol Bagh")];
+const SUB_LOCALITY_OPTIONS = {
+  DWARKA: [createOption("SECTOR_6", "Sector 6"), createOption("SECTOR_10", "Sector 10"), createOption("SECTOR_12", "Sector 12")],
+  ROHINI: [createOption("SECTOR_3", "Sector 3"), createOption("SECTOR_8", "Sector 8"), createOption("SECTOR_16", "Sector 16")],
+  KAROL_BAGH: [createOption("DEV_NAGAR", "Dev Nagar"), createOption("PAHAR_GANJ", "Pahar Ganj"), createOption("PATEL_NAGAR", "Patel Nagar")]
+};
+const ASSEMBLY_OPTIONS = [createOption("DWARKA_ASSEMBLY", "Dwarka Assembly"), createOption("ROHINI_ASSEMBLY", "Rohini Assembly"), createOption("KAROL_BAGH_ASSEMBLY", "Karol Bagh Assembly")];
+const WARD_OPTIONS = [createOption("WARD_101", "Ward 101"), createOption("WARD_102", "Ward 102"), createOption("WARD_103", "Ward 103")];
+const PROPERTY_TYPE_OPTIONS = [createOption("RESIDENTIAL", "Residential"), createOption("COMMERCIAL", "Commercial"), createOption("INDUSTRIAL", "Industrial"), createOption("INSTITUTIONAL", "Institutional"), createOption("HOSPITAL_NURSING_HOME", "Hospital / Nursing Home")];
+const WATER_CONNECTION_CATEGORY_OPTIONS = [createOption("DOMESTIC", "Domestic"), createOption("NON_DOMESTIC", "Non-Domestic"), createOption("MIXED_USE", "Mixed Use")];
+const WATER_CONNECTION_USED_BY_OPTIONS = [createOption("OWNER", "Owner"), createOption("TENANT", "Tenant"), createOption("AUTHORIZED_OCCUPIER", "Authorized Occupier")];
+const PROOF_OF_IDENTITY_OPTIONS = [createOption("AADHAAR", "Aadhaar"), createOption("PAN", "PAN"), createOption("VOTER_ID", "Voter ID"), createOption("PASSPORT", "Passport"), createOption("DRIVING_LICENSE", "Driving License")];
+const OWNERSHIP_STATUS_OPTIONS = [createOption("SELF_OWNED", "Self Owned"), createOption("LEASED", "Leased"), createOption("RENTED", "Rented"), createOption("GOVERNMENT_ALLOTTED", "Government Allotted")];
+const SUBMITTED_BY_OPTIONS = [createOption("APPLICANT", "Applicant"), createOption("AUTHORIZED_SIGNATORY", "Authorized Signatory"), createOption("DJB_COUNTER", "DJB Counter")];
+const DEFAULT_SECTION_STATE = {
+  application: true,
+  applicant: true,
+  contact: true,
+  employee: true,
+  address: true,
+  usage: true,
+  bank: true,
+  rainWaterHarvesting: true,
+  documents: true,
+  declaration: true
+};
+const DEFAULT_FORM_VALUES = {
+  typeOfRequest: null,
+  connectionType: null,
+  applicant: {
+    firstName: "",
+    middleName: "",
+    lastName: "",
+    fatherOrHusbandName: "",
+    isGovernmentOrganization: false,
+    applicantIdProofFile: null,
+    governmentOrganizationName: ""
+  },
+  contact: {
+    emailId: "",
+    mobileNumber: "",
+    officeNumber: ""
+  },
+  djbEmployee: {
+    isDjbEmployee: false,
+    employeeId: "",
+    retirementDate: "",
+    officeNameAndAddress: ""
+  },
+  propertyAddress: {
+    address: "",
+    landmark: "",
+    pinCode: "",
+    locality: null,
+    subLocality: null,
+    assembly: null,
+    ward: null
+  },
+  useDetails: {
+    propertyType: null,
+    noOfFloors: "",
+    hospitalBeds: "",
+    plotArea: "",
+    builtUpArea: "",
+    waterConnectionCategory: null,
+    waterConnectionUsedBy: null
+  },
+  bankDetails: {
+    bankName: "",
+    branchName: "",
+    ifscCode: "",
+    bankAccountNumber: ""
+  },
+  rainWaterHarvesting: {
+    applyForAdequacyCertificate: false
+  },
+  documents: {
+    proofOfIdentity: null,
+    identityProofFile: null,
+    ownershipStatus: null,
+    ownershipDocumentFile: null,
+    otherDocumentFile: null
+  },
+  declaration: {
+    submittedBy: null,
+    signatureFile: null,
+    captcha: "",
+    agree: false
+  },
+  cpt: {
+    id: "",
+    details: null
+  }
+};
+const fieldWrapperStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  minWidth: 0
+};
+const secondaryButtonStyle = {
+  background: "#FFFFFF",
+  border: "1px solid #0B4B66",
+  boxShadow: "none",
+  color: "#0B4B66"
+};
+const actionBarStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  gap: "16px",
+  flexWrap: "wrap"
+};
+const captchaBoxStyle = {
+  background: "#F3F7F9",
+  border: "1px dashed #0B4B66",
+  borderRadius: "4px",
+  fontFamily: "monospace",
+  fontSize: "20px",
+  fontWeight: "700",
+  letterSpacing: "4px",
+  padding: "12px 16px"
+};
+const linkButtonStyle = {
+  background: "transparent",
+  border: "none",
+  color: "#0B4B66",
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: "600",
+  padding: 0,
+  textDecoration: "underline"
+};
+const getStoredFormData = () => {
+  if (typeof window === "undefined") return {};
+  try {
+    const savedData = window.sessionStorage.getItem(FORM_STORAGE_KEY);
+    return savedData ? JSON.parse(savedData) : {};
+  } catch (error) {
+    return {};
+  }
+};
+const buildDefaultValues = (savedFormData = {}) => ({
+  typeOfRequest: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.typeOfRequest) || DEFAULT_FORM_VALUES.typeOfRequest,
+  connectionType: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.connectionType) || DEFAULT_FORM_VALUES.connectionType,
+  applicant: {
+    ...DEFAULT_FORM_VALUES.applicant,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.applicant) || {})
+  },
+  contact: {
+    ...DEFAULT_FORM_VALUES.contact,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.contact) || {})
+  },
+  djbEmployee: {
+    ...DEFAULT_FORM_VALUES.djbEmployee,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.djbEmployee) || {})
+  },
+  propertyAddress: {
+    ...DEFAULT_FORM_VALUES.propertyAddress,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.propertyAddress) || {})
+  },
+  useDetails: {
+    ...DEFAULT_FORM_VALUES.useDetails,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.useDetails) || {})
+  },
+  bankDetails: {
+    ...DEFAULT_FORM_VALUES.bankDetails,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.bankDetails) || {})
+  },
+  rainWaterHarvesting: {
+    ...DEFAULT_FORM_VALUES.rainWaterHarvesting,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.rainWaterHarvesting) || {})
+  },
+  documents: {
+    ...DEFAULT_FORM_VALUES.documents,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.documents) || {})
+  },
+  declaration: {
+    ...DEFAULT_FORM_VALUES.declaration,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.declaration) || {})
+  },
+  cpt: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.cpt) || {
+    id: "",
+    details: null
+  }
+});
+const resolveNestedValue = (value, path) => path.split(".").reduce((accumulator, currentKey) => {
+  if (accumulator === null || accumulator === undefined) return undefined;
+  return accumulator[currentKey];
+}, value);
+const getDisplayValue = value => {
+  if (value === null || value === undefined || value === "") return "Not provided";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "object") {
+    if (value !== null && value !== void 0 && value.fileName) return value.fileName;
+    if (value !== null && value !== void 0 && value.name) return value.name;
+    if (value !== null && value !== void 0 && value.code) return value.code;
+  }
+  return String(value);
+};
+const generateCaptcha = () => {
+  const characters = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+  let captcha = "";
+  for (let index = 0; index < 6; index += 1) {
+    captcha += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return captcha;
+};
+const FieldBlock = ({
+  label,
+  required,
+  error,
+  children,
+  hint,
+  isFullWidth
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...fieldWrapperStyle,
+      ...(isFullWidth ? {
+        gridColumn: "1 / -1"
+      } : {})
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "600",
+      marginBottom: "0px"
+    }
+  }, required ? `${label} *` : label), children, hint ? /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      color: "#505A5F",
+      fontSize: "14px",
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, hint) : null, error ? /*#__PURE__*/React.createElement(CardLabelError, null, (error === null || error === void 0 ? void 0 : error.message) || error) : null);
+};
+const SectionCard = ({
+  title,
+  description,
+  isOpen: _isOpen = true,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ws-new-application-collapsible",
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(CollapsibleCardPage, {
+    defaultOpen: _isOpen,
+    defaultTab: COLLAPSIBLE_CONTENT_TAB,
+    tabs: [COLLAPSIBLE_CONTENT_TAB],
+    title: title
+  }, () => /*#__PURE__*/React.createElement(React.Fragment, null, description ? /*#__PURE__*/React.createElement(CardSectionSubText, {
+    style: {
+      marginBottom: "16px"
+    }
+  }, description) : null, /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-grid"
+  }, children))));
+};
+const PreviewItem = ({
+  label,
+  value,
+  isFullWidth
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...fieldWrapperStyle,
+      ...(isFullWidth ? {
+        gridColumn: "1 / -1"
+      } : {})
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "600",
+      marginBottom: "0px"
+    }
+  }, label), /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, getDisplayValue(value)));
+};
+const FileUploadField = ({
+  id,
+  label,
+  value,
+  onUpload,
+  onDelete,
+  error,
+  isUploading,
+  helperText,
+  required
+}) => {
+  return /*#__PURE__*/React.createElement(FieldBlock, {
+    label: label,
+    required: required,
+    error: error,
+    hint: helperText
+  }, /*#__PURE__*/React.createElement(UploadFile, {
+    accept: "image/*,.pdf,.png,.jpeg,.jpg",
+    buttonType: "button",
+    error: !!error,
+    id: id,
+    message: value !== null && value !== void 0 && value.fileStoreId ? "1 file uploaded" : "No file uploaded",
+    onDelete: onDelete,
+    onUpload: onUpload
+  }), /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, isUploading ? "Uploading file..." : (value === null || value === void 0 ? void 0 : value.fileName) || "No file selected"));
+};
 const NewApplication = () => {
-  var _Digit$SessionStorage;
+  var _Digit$SessionStorage, _formValues$applicant, _formValues$applicant2, _formValues$applicant3, _formValues$applicant4, _formValues$applicant5, _formValues$applicant6, _formValues$applicant7, _formValues$applicant8, _formValues$contact, _formValues$contact2, _formValues$contact3, _formValues$djbEmploy, _formValues$djbEmploy2, _formValues$djbEmploy3, _formValues$djbEmploy4, _formValues$djbEmploy5, _formValues$propertyA, _formValues$propertyA2, _formValues$propertyA3, _formValues$propertyA4, _formValues$propertyA5, _formValues$propertyA6, _formValues$propertyA7, _formValues$useDetail, _formValues$useDetail2, _formValues$useDetail3, _formValues$useDetail4, _formValues$useDetail5, _formValues$useDetail6, _formValues$useDetail7, _formValues$useDetail8, _formValues$useDetail9, _formValues$bankDetai, _formValues$bankDetai2, _formValues$bankDetai3, _formValues$bankDetai4, _formValues$rainWater, _formValues$documents, _formValues$documents2, _formValues$documents3, _formValues$documents4, _formValues$documents5, _formValues$declarati, _formValues$declarati2, _formValues$declarati3, _formValues$declarati4;
   const {
     t
   } = useTranslation();
   const history = useHistory();
-  const [canSubmit, setSubmitValve] = useState(false);
-  const [isEnableLoader, setIsEnableLoader] = useState(false);
+  const location = useLocation();
+  const stateId = Digit.ULBService.getStateId();
+  const tenantId = Digit.ULBService.getCurrentTenantId() || ((_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code);
+  const [previewMode, setPreviewMode] = useState(false);
+  const [collapsedSections, setCollapsedSections] = useState(DEFAULT_SECTION_STATE);
   const [showToast, setShowToast] = useState(null);
+  const [generatedCaptcha, setGeneratedCaptcha] = useState(generateCaptcha());
+  const [uploadingFields, setUploadingFields] = useState({});
+  const [isEnableLoader, setIsEnableLoader] = useState(false);
   const [appDetails, setAppDetails] = useState({});
   const [waterAndSewerageBoth, setWaterAndSewerageBoth] = useState(null);
-  const [config, setConfig] = useState({
-    head: "",
-    body: []
-  });
-  let tenantId = Digit.ULBService.getCurrentTenantId();
-  tenantId ? tenantId : (_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code;
-  const stateId = Digit.ULBService.getStateId();
-  let {
-    data: newConfig,
-    isLoading
-  } = Digit.Hooks.ws.useWSConfigMDMS.WSCreateConfig(stateId, {});
-  const [propertyId, setPropertyId] = useState(new URLSearchParams(useLocation().search).get("propertyId"));
-  const [sessionFormData, setSessionFormData, clearSessionFormData] = Digit.Hooks.useSessionStorage("PT_CREATE_EMP_WS_NEW_FORM", {});
+  const [propertyId, setPropertyId] = useState(new URLSearchParams(location.search).get("propertyId"));
+  console.log(propertyId, 'property idddddd');
+  const initialFormValues = buildDefaultValues(getStoredFormData());
   const {
-    data: propertyDetails
+    register,
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    setError,
+    clearErrors,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    defaultValues: initialFormValues,
+    shouldUnregister: false
+  });
+  const formValues = watch();
+  const isGovernmentOrganization = watch("applicant.isGovernmentOrganization");
+  const isDjbEmployee = watch("djbEmployee.isDjbEmployee");
+  const selectedPropertyType = watch("useDetails.propertyType");
+  const selectedLocality = watch("propertyAddress.locality");
+  const selectedSubLocality = watch("propertyAddress.subLocality");
+  const subLocalityOptions = selectedLocality ? SUB_LOCALITY_OPTIONS[selectedLocality.code] || [] : [];
+  const hasPendingUpload = Object.values(uploadingFields).some(Boolean);
+  const isHospitalProperty = (selectedPropertyType === null || selectedPropertyType === void 0 ? void 0 : selectedPropertyType.code) === "HOSPITAL_NURSING_HOME";
+  const {
+    data: propertyDetails,
+    isLoading: isPropertyLoading
   } = Digit.Hooks.pt.usePropertySearch({
     filters: {
       propertyIds: propertyId
@@ -30981,114 +31338,189 @@ const NewApplication = () => {
       propertyIds: propertyId
     },
     tenantId: tenantId,
-    enabled: propertyId && propertyId != "" ? true : false
+    enabled: !!propertyId
   });
-  useEffect(() => {
-    if (!isLoading) {
-      var _config$body;
-      const config = newConfig.find(conf => conf.hideInCitizen && conf.isCreate);
-      config.head = "WS_APP_FOR_WATER_AND_SEWERAGE_LABEL";
-      let bodyDetails = [];
-      config === null || config === void 0 ? void 0 : (_config$body = config.body) === null || _config$body === void 0 ? void 0 : _config$body.forEach(data => {
-        if (data !== null && data !== void 0 && data.isCreateConnection) bodyDetails.push(data);
-      });
-      config.body = bodyDetails;
-      setConfig(config);
-    }
-  }, [newConfig]);
-  useEffect(() => {
-    var _sessionFormData$cpt, _sessionFormData$cpt$, _sessionFormData$cpt2, _sessionFormData$cpt3;
-    !propertyId && (sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$cpt = sessionFormData.cpt) === null || _sessionFormData$cpt === void 0 ? void 0 : (_sessionFormData$cpt$ = _sessionFormData$cpt.details) === null || _sessionFormData$cpt$ === void 0 ? void 0 : _sessionFormData$cpt$.propertyId) && setPropertyId(sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$cpt2 = sessionFormData.cpt) === null || _sessionFormData$cpt2 === void 0 ? void 0 : (_sessionFormData$cpt3 = _sessionFormData$cpt2.details) === null || _sessionFormData$cpt3 === void 0 ? void 0 : _sessionFormData$cpt3.propertyId);
-  }, [sessionFormData === null || sessionFormData === void 0 ? void 0 : sessionFormData.cpt]);
-  useEffect(() => {
-    var _propertyDetails$Prop;
-    setSessionFormData({
-      ...sessionFormData,
-      cpt: {
-        details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop = propertyDetails.Properties) === null || _propertyDetails$Prop === void 0 ? void 0 : _propertyDetails$Prop[0]
-      }
-    });
-  }, [propertyDetails]);
   const {
-    isLoading: creatingWaterApplicationLoading,
-    isError: createWaterApplicationError,
-    data: createWaterResponse,
-    error: createWaterError,
     mutate: waterMutation
   } = Digit.Hooks.ws.useWaterCreateAPI("WATER");
   const {
-    isLoading: updatingWaterApplicationLoading,
-    isError: updateWaterApplicationError,
-    data: updateWaterResponse,
-    error: updateWaterError,
     mutate: waterUpdateMutation
   } = Digit.Hooks.ws.useWSApplicationActions("WATER");
   const {
-    isLoading: creatingSewerageApplicationLoading,
-    isError: createSewerageApplicationError,
-    data: createSewerageResponse,
-    error: createSewerageError,
     mutate: sewerageMutation
   } = Digit.Hooks.ws.useWaterCreateAPI("SEWERAGE");
   const {
-    isLoading: updatingSewerageApplicationLoading,
-    isError: updateSewerageApplicationError,
-    data: updateSewerageResponse,
-    error: updateSewerageError,
     mutate: sewerageUpdateMutation
   } = Digit.Hooks.ws.useWSApplicationActions("SEWERAGE");
-  const onFormValueChange = (setValue, formData, formState) => {
-    var _formState$errors, _formState$errors$Con, _Object$keys, _formState$errors2, _formState$errors2$Co;
-    if (!lodash.isEqual(sessionFormData, formData)) {
-      setSessionFormData({
-        ...sessionFormData,
-        ...formData
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.sessionStorage.setItem(FORM_STORAGE_KEY, JSON.stringify(formValues));
+  }, [formValues]);
+  useEffect(() => {
+    if (!isGovernmentOrganization) {
+      setValue("applicant.governmentOrganizationName", "");
+      clearErrors("applicant.governmentOrganizationName");
+    }
+  }, [isGovernmentOrganization, setValue, clearErrors]);
+  useEffect(() => {
+    if (!isDjbEmployee) {
+      setValue("djbEmployee.employeeId", "");
+      setValue("djbEmployee.retirementDate", "");
+      setValue("djbEmployee.officeNameAndAddress", "");
+      clearErrors("djbEmployee.employeeId");
+      clearErrors("djbEmployee.retirementDate");
+      clearErrors("djbEmployee.officeNameAndAddress");
+    }
+  }, [isDjbEmployee, setValue, clearErrors]);
+  useEffect(() => {
+    if (!isHospitalProperty) {
+      setValue("useDetails.hospitalBeds", "");
+      clearErrors("useDetails.hospitalBeds");
+    }
+  }, [isHospitalProperty, setValue, clearErrors]);
+  useEffect(() => {
+    const isValidSubLocality = selectedSubLocality ? subLocalityOptions.some(option => option.code === selectedSubLocality.code) : true;
+    if (!isValidSubLocality) {
+      setValue("propertyAddress.subLocality", null);
+    }
+  }, [selectedLocality === null || selectedLocality === void 0 ? void 0 : selectedLocality.code, selectedSubLocality === null || selectedSubLocality === void 0 ? void 0 : selectedSubLocality.code, setValue]);
+  const closeToast = () => setShowToast(null);
+  const closeToastOfError = () => setShowToast(null);
+  const toggleSection = sectionKey => {
+    setCollapsedSections(previousState => ({
+      ...previousState,
+      [sectionKey]: !previousState[sectionKey]
+    }));
+  };
+  const getFieldError = fieldName => resolveNestedValue(errors, fieldName);
+  const refreshCaptcha = () => {
+    setGeneratedCaptcha(generateCaptcha());
+    setValue("declaration.captcha", "");
+    clearErrors("declaration.captcha");
+  };
+  const uploadFile = async (event, fieldName, onChange) => {
+    var _event$target, _event$target$files;
+    const file = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$files = _event$target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
+    if (!file) {
+      onChange(null);
+      return;
+    }
+    setUploadingFields(previousState => ({
+      ...previousState,
+      [fieldName]: true
+    }));
+    clearErrors(fieldName);
+    try {
+      var _response$data, _response$data$files, _response$data$files$;
+      if (file.size > MAX_FILE_SIZE) {
+        throw new Error("File size should be 5 MB or less.");
+      }
+      if (!SUPPORTED_FILE_TYPES.test(file.name)) {
+        throw new Error("Only PDF, PNG, JPG and JPEG files are supported.");
+      }
+      const response = await Digit.UploadServices.Filestorage("WS", file, stateId);
+      const fileStoreId = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$files = _response$data.files) === null || _response$data$files === void 0 ? void 0 : (_response$data$files$ = _response$data$files[0]) === null || _response$data$files$ === void 0 ? void 0 : _response$data$files$.fileStoreId;
+      if (!fileStoreId) {
+        throw new Error("File upload failed. Please try again.");
+      }
+      onChange({
+        fileName: file.name,
+        fileSize: file.size,
+        fileStoreId,
+        fileType: file.type
+      });
+      clearErrors(fieldName);
+    } catch (error) {
+      onChange(null);
+      setError(fieldName, {
+        type: "manual",
+        message: (error === null || error === void 0 ? void 0 : error.message) || "File upload failed. Please try again."
+      });
+      setShowToast({
+        key: "error",
+        message: (error === null || error === void 0 ? void 0 : error.message) || "File upload failed. Please try again."
       });
-      sessionStorage.setItem("FORMSTATE_ERRORS", JSON.stringify(formState === null || formState === void 0 ? void 0 : formState.errors));
+    } finally {
+      setUploadingFields(previousState => ({
+        ...previousState,
+        [fieldName]: false
+      }));
     }
-    if (Object.keys(formState.errors).length > 0 && Object.keys(formState.errors).length == 1 && formState !== null && formState !== void 0 && (_formState$errors = formState.errors) !== null && _formState$errors !== void 0 && (_formState$errors$Con = _formState$errors["ConnectionHolderDetails"]) !== null && _formState$errors$Con !== void 0 && _formState$errors$Con.type && ((_Object$keys = Object.keys(formState === null || formState === void 0 ? void 0 : (_formState$errors2 = formState.errors) === null || _formState$errors2 === void 0 ? void 0 : (_formState$errors2$Co = _formState$errors2["ConnectionHolderDetails"]) === null || _formState$errors2$Co === void 0 ? void 0 : _formState$errors2$Co.type)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) == 1 && formState.errors["ConnectionHolderDetails"] && Object.values(formState.errors["ConnectionHolderDetails"].type).filter(ob => {
-      var _ob$ref;
-      return ob.type === "required" && (ob === null || ob === void 0 ? void 0 : (_ob$ref = ob.ref) === null || _ob$ref === void 0 ? void 0 : _ob$ref.value) !== "";
-    }).length > 0) setSubmitValve(true);else setSubmitValve(!Object.keys(formState.errors).length);
   };
-  const closeToastOfError = () => {
-    setShowToast(null);
+  const clearUploadedFile = (fieldName, onChange) => {
+    onChange(null);
+    clearErrors(fieldName);
   };
-  const onSubmit = async data => {
-    var _data$cpt, _propertyDetails$Prop2, _formStateErros$Conne, _Object$keys2, _formStateErros$Conne2;
-    if (!(data !== null && data !== void 0 && (_data$cpt = data.cpt) !== null && _data$cpt !== void 0 && _data$cpt.id) && !(propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop2 = propertyDetails.Properties) !== null && _propertyDetails$Prop2 !== void 0 && _propertyDetails$Prop2[0])) {
-      var _data$cpt2;
-      if (!(data !== null && data !== void 0 && (_data$cpt2 = data.cpt) !== null && _data$cpt2 !== void 0 && _data$cpt2.details) || !propertyDetails) {
-        setShowToast({
-          key: "error",
-          message: "ERR_INVALID_PROPERTY_ID"
-        });
-        return;
-      }
+  const scrollToTop = () => {
+    if (typeof window !== "undefined") {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
     }
-    const errors = sessionStorage.getItem("FORMSTATE_ERRORS");
-    const formStateErros = typeof errors == "string" ? JSON.parse(errors) : {};
-    if (Object.keys(formStateErros).length > 0 && !(Object.keys(formStateErros).length == 1 && formStateErros !== null && formStateErros !== void 0 && (_formStateErros$Conne = formStateErros["ConnectionHolderDetails"]) !== null && _formStateErros$Conne !== void 0 && _formStateErros$Conne.type && ((_Object$keys2 = Object.keys(formStateErros === null || formStateErros === void 0 ? void 0 : (_formStateErros$Conne2 = formStateErros["ConnectionHolderDetails"]) === null || _formStateErros$Conne2 === void 0 ? void 0 : _formStateErros$Conne2.type)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) == 1 && formStateErros["ConnectionHolderDetails"] && Object.values(formStateErros["ConnectionHolderDetails"].type).filter(ob => {
-      var _ob$ref2;
-      return ob.type === "required" && (ob === null || ob === void 0 ? void 0 : (_ob$ref2 = ob.ref) === null || _ob$ref2 === void 0 ? void 0 : _ob$ref2.value) !== "";
-    }).length > 0)) {
+  };
+  const validateCaptcha = data => {
+    var _data$declaration, _data$declaration$cap, _data$declaration$cap2;
+    if ((data === null || data === void 0 ? void 0 : (_data$declaration = data.declaration) === null || _data$declaration === void 0 ? void 0 : (_data$declaration$cap = _data$declaration.captcha) === null || _data$declaration$cap === void 0 ? void 0 : (_data$declaration$cap2 = _data$declaration$cap.trim()) === null || _data$declaration$cap2 === void 0 ? void 0 : _data$declaration$cap2.toUpperCase()) !== generatedCaptcha) {
+      setError("declaration.captcha", {
+        type: "manual",
+        message: "Captcha does not match."
+      });
       setShowToast({
         warning: true,
-        message: "PLEASE_FILL_MANDATORY_DETAILS"
+        message: "Captcha does not match."
+      });
+      return false;
+    }
+    clearErrors("declaration.captcha");
+    return true;
+  };
+  const onPreview = data => {
+    if (hasPendingUpload) {
+      setShowToast({
+        warning: true,
+        message: "Please wait for all file uploads to complete."
       });
       return;
-    } else {
-      var _data$cpt3;
-      if (!(data !== null && data !== void 0 && (_data$cpt3 = data.cpt) !== null && _data$cpt3 !== void 0 && _data$cpt3.details)) {
-        var _propertyDetails$Prop3;
-        data.cpt = {
-          details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop3 = propertyDetails.Properties) === null || _propertyDetails$Prop3 === void 0 ? void 0 : _propertyDetails$Prop3[0]
-        };
-      }
-      const allDetails = cloneDeep_1(data);
-      const payload = await createPayloadOfWS(data);
+    }
+    if (!validateCaptcha(data)) return;
+    setPreviewMode(true);
+    scrollToTop();
+  };
+  const onSubmit = async data => {
+    var _propertyDetails$Prop;
+    if (hasPendingUpload) {
+      setShowToast({
+        warning: true,
+        message: "Please wait for all file uploads to complete."
+      });
+      return;
+    }
+    if (!validateCaptcha(data)) return;
+    if (!(propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop = propertyDetails.Properties) !== null && _propertyDetails$Prop !== void 0 && _propertyDetails$Prop[0])) {
+      setShowToast({
+        key: "error",
+        message: "ERR_INVALID_PROPERTY_ID"
+      });
+      return;
+    }
+    try {
+      var _propertyDetails$Prop2;
+      const formDataWithProperty = {
+        ...data,
+        cpt: {
+          details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop2 = propertyDetails.Properties) === null || _propertyDetails$Prop2 === void 0 ? void 0 : _propertyDetails$Prop2[0]
+        }
+      };
+      const payload = await createPayloadOfWS(formDataWithProperty);
       let waterAndSewerageLoader = false;
       if (payload !== null && payload !== void 0 && payload.water && payload !== null && payload !== void 0 && payload.sewerage) waterAndSewerageLoader = true;
+      if (waterAndSewerageLoader) {
+        setWaterAndSewerageBoth(true);
+        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(true));
+      } else {
+        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(false));
+      }
       let waterConnection = {
         WaterConnection: payload,
         disconnectRequest: false,
@@ -31099,26 +31531,20 @@ const NewApplication = () => {
         disconnectRequest: false,
         reconnectRequest: false
       };
-      if (waterAndSewerageLoader) {
-        setWaterAndSewerageBoth(true);
-        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(true));
-      } else {
-        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(false));
-      }
       if (payload !== null && payload !== void 0 && payload.water && payload !== null && payload !== void 0 && payload.sewerage) {
         if (waterMutation && sewerageMutation) {
           setIsEnableLoader(true);
           await waterMutation(waterConnection, {
-            onError: (error, variables) => {
-              var _error$response, _error$response$data, _error$response$data$, _error$response2, _error$response2$data, _error$response2$data2;
+            onError: error => {
+              var _error$response, _error$response$data, _error$response$data$;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response = error.response) !== null && _error$response !== void 0 && (_error$response$data = _error$response.data) !== null && _error$response$data !== void 0 && (_error$response$data$ = _error$response$data.Errors) !== null && _error$response$data$ !== void 0 && _error$response$data$[0].message ? error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : _error$response2$data2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : _error$response$data$[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (waterData, variables) => {
+            onSuccess: async waterData => {
               var _waterData$WaterConne;
               let response = await updatePayloadOfWS(waterData === null || waterData === void 0 ? void 0 : (_waterData$WaterConne = waterData.WaterConnection) === null || _waterData$WaterConne === void 0 ? void 0 : _waterData$WaterConne[0], "WATER");
               let waterConnectionUpdate = {
@@ -31127,32 +31553,34 @@ const NewApplication = () => {
                 reconnectRequest: false
               };
               waterUpdateMutation(waterConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response3, _error$response3$data, _error$response3$data2, _error$response4, _error$response4$data, _error$response4$data2;
+                onError: error => {
+                  var _error$response2, _error$response2$data, _error$response2$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response3 = error.response) !== null && _error$response3 !== void 0 && (_error$response3$data = _error$response3.data) !== null && _error$response3$data !== void 0 && (_error$response3$data2 = _error$response3$data.Errors) !== null && _error$response3$data2 !== void 0 && _error$response3$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : (_error$response4$data2 = _error$response4$data.Errors) === null || _error$response4$data2 === void 0 ? void 0 : _error$response4$data2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : _error$response2$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: async (waterUpdateData, variables) => {
-                  var _waterUpdateData$Wate;
-                  setAppDetails({
-                    ...appDetails,
-                    waterConnection: waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate === void 0 ? void 0 : _waterUpdateData$Wate[0]
+                onSuccess: async waterUpdateData => {
+                  setAppDetails(prev => {
+                    var _waterUpdateData$Wate;
+                    return {
+                      ...prev,
+                      waterConnection: waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate === void 0 ? void 0 : _waterUpdateData$Wate[0]
+                    };
                   });
                   await sewerageMutation(sewerageConnection, {
-                    onError: (error, variables) => {
-                      var _error$response5, _error$response5$data, _error$response5$data2, _error$response6, _error$response6$data, _error$response6$data2;
+                    onError: error => {
+                      var _error$response3, _error$response3$data, _error$response3$data2;
                       setIsEnableLoader(false);
                       setShowToast({
                         key: "error",
-                        message: error !== null && error !== void 0 && (_error$response5 = error.response) !== null && _error$response5 !== void 0 && (_error$response5$data = _error$response5.data) !== null && _error$response5$data !== void 0 && (_error$response5$data2 = _error$response5$data.Errors) !== null && _error$response5$data2 !== void 0 && _error$response5$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : (_error$response6$data = _error$response6.data) === null || _error$response6$data === void 0 ? void 0 : (_error$response6$data2 = _error$response6$data.Errors) === null || _error$response6$data2 === void 0 ? void 0 : _error$response6$data2[0].message : error
+                        message: (error === null || error === void 0 ? void 0 : (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : (_error$response3$data = _error$response3.data) === null || _error$response3$data === void 0 ? void 0 : (_error$response3$data2 = _error$response3$data.Errors) === null || _error$response3$data2 === void 0 ? void 0 : _error$response3$data2[0].message) || error
                       });
                       setTimeout(closeToastOfError, 5000);
                     },
-                    onSuccess: async (sewerageData, variables) => {
+                    onSuccess: async sewerageData => {
                       var _sewerageData$Sewerag;
                       let response = await updatePayloadOfWS(sewerageData === null || sewerageData === void 0 ? void 0 : (_sewerageData$Sewerag = sewerageData.SewerageConnections) === null || _sewerageData$Sewerag === void 0 ? void 0 : _sewerageData$Sewerag[0], "SEWERAGE");
                       let sewerageConnectionUpdate = {
@@ -31161,22 +31589,25 @@ const NewApplication = () => {
                         reconnectRequest: false
                       };
                       await sewerageUpdateMutation(sewerageConnectionUpdate, {
-                        onError: (error, variables) => {
-                          var _error$response7, _error$response7$data, _error$response7$data2, _error$response8, _error$response8$data, _error$response8$data2;
+                        onError: error => {
+                          var _error$response4, _error$response4$data, _error$response4$data2;
                           setIsEnableLoader(false);
                           setShowToast({
                             key: "error",
-                            message: error !== null && error !== void 0 && (_error$response7 = error.response) !== null && _error$response7 !== void 0 && (_error$response7$data = _error$response7.data) !== null && _error$response7$data !== void 0 && (_error$response7$data2 = _error$response7$data.Errors) !== null && _error$response7$data2 !== void 0 && _error$response7$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response8 = error.response) === null || _error$response8 === void 0 ? void 0 : (_error$response8$data = _error$response8.data) === null || _error$response8$data === void 0 ? void 0 : (_error$response8$data2 = _error$response8$data.Errors) === null || _error$response8$data2 === void 0 ? void 0 : _error$response8$data2[0].message : error
+                            message: (error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : (_error$response4$data2 = _error$response4$data.Errors) === null || _error$response4$data2 === void 0 ? void 0 : _error$response4$data2[0].message) || error
                           });
                           setTimeout(closeToastOfError, 5000);
                         },
-                        onSuccess: async (sewerageUpdateData, variables) => {
-                          var _sewerageUpdateData$S, _waterUpdateData$Wate2, _waterUpdateData$Wate3, _sewerageUpdateData$S2, _sewerageUpdateData$S3;
-                          setAppDetails({
-                            ...appDetails,
-                            sewerageConnection: sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S === void 0 ? void 0 : _sewerageUpdateData$S[0]
+                        onSuccess: async sewerageUpdateData => {
+                          var _waterUpdateData$Wate2, _waterUpdateData$Wate3, _sewerageUpdateData$S2, _sewerageUpdateData$S3;
+                          setAppDetails(prev => {
+                            var _sewerageUpdateData$S;
+                            return {
+                              ...prev,
+                              sewerageConnection: sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S === void 0 ? void 0 : _sewerageUpdateData$S[0]
+                            };
                           });
-                          clearSessionFormData();
+                          window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                           history.push(`/digit-ui/employee/ws/ws-response?applicationNumber=${waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate2 = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate2 === void 0 ? void 0 : (_waterUpdateData$Wate3 = _waterUpdateData$Wate2[0]) === null || _waterUpdateData$Wate3 === void 0 ? void 0 : _waterUpdateData$Wate3.applicationNo}&applicationNumber1=${sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S2 = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S2 === void 0 ? void 0 : (_sewerageUpdateData$S3 = _sewerageUpdateData$S2[0]) === null || _sewerageUpdateData$S3 === void 0 ? void 0 : _sewerageUpdateData$S3.applicationNo}`);
                         }
                       });
@@ -31191,38 +31622,41 @@ const NewApplication = () => {
         if (waterMutation) {
           setIsEnableLoader(true);
           await waterMutation(waterConnection, {
-            onError: (error, variables) => {
-              var _error$response9, _error$response9$data, _error$response9$data2, _error$response0, _error$response0$data, _error$response0$data2;
+            onError: error => {
+              var _error$response5, _error$response5$data, _error$response5$data2;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response9 = error.response) !== null && _error$response9 !== void 0 && (_error$response9$data = _error$response9.data) !== null && _error$response9$data !== void 0 && (_error$response9$data2 = _error$response9$data.Errors) !== null && _error$response9$data2 !== void 0 && _error$response9$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response0 = error.response) === null || _error$response0 === void 0 ? void 0 : (_error$response0$data = _error$response0.data) === null || _error$response0$data === void 0 ? void 0 : (_error$response0$data2 = _error$response0$data.Errors) === null || _error$response0$data2 === void 0 ? void 0 : _error$response0$data2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : (_error$response5$data = _error$response5.data) === null || _error$response5$data === void 0 ? void 0 : (_error$response5$data2 = _error$response5$data.Errors) === null || _error$response5$data2 === void 0 ? void 0 : _error$response5$data2[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (data, variables) => {
+            onSuccess: async data => {
               var _data$WaterConnection;
               let response = await updatePayloadOfWS(data === null || data === void 0 ? void 0 : (_data$WaterConnection = data.WaterConnection) === null || _data$WaterConnection === void 0 ? void 0 : _data$WaterConnection[0], "WATER");
               let waterConnectionUpdate = {
                 WaterConnection: response
               };
               waterUpdateMutation(waterConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response1, _error$response1$data, _error$response1$data2, _error$response10, _error$response10$dat, _error$response10$dat2;
+                onError: error => {
+                  var _error$response6, _error$response6$data, _error$response6$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response1 = error.response) !== null && _error$response1 !== void 0 && (_error$response1$data = _error$response1.data) !== null && _error$response1$data !== void 0 && (_error$response1$data2 = _error$response1$data.Errors) !== null && _error$response1$data2 !== void 0 && _error$response1$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response10 = error.response) === null || _error$response10 === void 0 ? void 0 : (_error$response10$dat = _error$response10.data) === null || _error$response10$dat === void 0 ? void 0 : (_error$response10$dat2 = _error$response10$dat.Errors) === null || _error$response10$dat2 === void 0 ? void 0 : _error$response10$dat2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : (_error$response6$data = _error$response6.data) === null || _error$response6$data === void 0 ? void 0 : (_error$response6$data2 = _error$response6$data.Errors) === null || _error$response6$data2 === void 0 ? void 0 : _error$response6$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: (data, variables) => {
-                  var _data$WaterConnection2, _data$WaterConnection3, _data$WaterConnection4;
-                  setAppDetails({
-                    ...appDetails,
-                    waterConnection: data === null || data === void 0 ? void 0 : (_data$WaterConnection2 = data.WaterConnection) === null || _data$WaterConnection2 === void 0 ? void 0 : _data$WaterConnection2[0]
+                onSuccess: data => {
+                  var _data$WaterConnection3, _data$WaterConnection4;
+                  setAppDetails(prev => {
+                    var _data$WaterConnection2;
+                    return {
+                      ...prev,
+                      waterConnection: data === null || data === void 0 ? void 0 : (_data$WaterConnection2 = data.WaterConnection) === null || _data$WaterConnection2 === void 0 ? void 0 : _data$WaterConnection2[0]
+                    };
                   });
-                  clearSessionFormData();
+                  window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                   history.push(`/digit-ui/employee/ws/ws-response?applicationNumber=${data === null || data === void 0 ? void 0 : (_data$WaterConnection3 = data.WaterConnection) === null || _data$WaterConnection3 === void 0 ? void 0 : (_data$WaterConnection4 = _data$WaterConnection3[0]) === null || _data$WaterConnection4 === void 0 ? void 0 : _data$WaterConnection4.applicationNo}`);
                 }
               });
@@ -31233,38 +31667,41 @@ const NewApplication = () => {
         if (sewerageMutation) {
           setIsEnableLoader(true);
           await sewerageMutation(sewerageConnection, {
-            onError: (error, variables) => {
-              var _error$response11, _error$response11$dat, _error$response11$dat2, _error$response12, _error$response12$dat, _error$response12$dat2;
+            onError: error => {
+              var _error$response7, _error$response7$data, _error$response7$data2;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response11 = error.response) !== null && _error$response11 !== void 0 && (_error$response11$dat = _error$response11.data) !== null && _error$response11$dat !== void 0 && (_error$response11$dat2 = _error$response11$dat.Errors) !== null && _error$response11$dat2 !== void 0 && _error$response11$dat2[0].message ? error === null || error === void 0 ? void 0 : (_error$response12 = error.response) === null || _error$response12 === void 0 ? void 0 : (_error$response12$dat = _error$response12.data) === null || _error$response12$dat === void 0 ? void 0 : (_error$response12$dat2 = _error$response12$dat.Errors) === null || _error$response12$dat2 === void 0 ? void 0 : _error$response12$dat2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response7 = error.response) === null || _error$response7 === void 0 ? void 0 : (_error$response7$data = _error$response7.data) === null || _error$response7$data === void 0 ? void 0 : (_error$response7$data2 = _error$response7$data.Errors) === null || _error$response7$data2 === void 0 ? void 0 : _error$response7$data2[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (data, variables) => {
+            onSuccess: async data => {
               var _data$SewerageConnect;
               let response = await updatePayloadOfWS(data === null || data === void 0 ? void 0 : (_data$SewerageConnect = data.SewerageConnections) === null || _data$SewerageConnect === void 0 ? void 0 : _data$SewerageConnect[0], "SEWERAGE");
               let sewerageConnectionUpdate = {
                 SewerageConnection: response
               };
               await sewerageUpdateMutation(sewerageConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response13, _error$response13$dat, _error$response13$dat2, _error$response14, _error$response14$dat, _error$response14$dat2;
+                onError: error => {
+                  var _error$response8, _error$response8$data, _error$response8$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response13 = error.response) !== null && _error$response13 !== void 0 && (_error$response13$dat = _error$response13.data) !== null && _error$response13$dat !== void 0 && (_error$response13$dat2 = _error$response13$dat.Errors) !== null && _error$response13$dat2 !== void 0 && _error$response13$dat2[0].message ? error === null || error === void 0 ? void 0 : (_error$response14 = error.response) === null || _error$response14 === void 0 ? void 0 : (_error$response14$dat = _error$response14.data) === null || _error$response14$dat === void 0 ? void 0 : (_error$response14$dat2 = _error$response14$dat.Errors) === null || _error$response14$dat2 === void 0 ? void 0 : _error$response14$dat2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response8 = error.response) === null || _error$response8 === void 0 ? void 0 : (_error$response8$data = _error$response8.data) === null || _error$response8$data === void 0 ? void 0 : (_error$response8$data2 = _error$response8$data.Errors) === null || _error$response8$data2 === void 0 ? void 0 : _error$response8$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: (data, variables) => {
-                  var _data$SewerageConnect2, _data$SewerageConnect3, _data$SewerageConnect4;
-                  setAppDetails({
-                    ...appDetails,
-                    sewerageConnection: data === null || data === void 0 ? void 0 : (_data$SewerageConnect2 = data.SewerageConnections) === null || _data$SewerageConnect2 === void 0 ? void 0 : _data$SewerageConnect2[0]
+                onSuccess: data => {
+                  var _data$SewerageConnect3, _data$SewerageConnect4;
+                  setAppDetails(prev => {
+                    var _data$SewerageConnect2;
+                    return {
+                      ...prev,
+                      sewerageConnection: data === null || data === void 0 ? void 0 : (_data$SewerageConnect2 = data.SewerageConnections) === null || _data$SewerageConnect2 === void 0 ? void 0 : _data$SewerageConnect2[0]
+                    };
                   });
-                  clearSessionFormData();
+                  window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                   history.push(`/digit-ui/employee/ws/ws-response?applicationNumber1=${data === null || data === void 0 ? void 0 : (_data$SewerageConnect3 = data.SewerageConnections) === null || _data$SewerageConnect3 === void 0 ? void 0 : (_data$SewerageConnect4 = _data$SewerageConnect3[0]) === null || _data$SewerageConnect4 === void 0 ? void 0 : _data$SewerageConnect4.applicationNo}`);
                 }
               });
@@ -31272,32 +31709,979 @@ const NewApplication = () => {
           });
         }
       }
+    } catch (error) {
+      setIsEnableLoader(false);
+      setShowToast({
+        key: "error",
+        message: "Failed to generate payload or submit application."
+      });
     }
   };
-  const closeToast = () => {
+  const onEdit = () => {
+    setPreviewMode(false);
+    scrollToTop();
+  };
+  const onReset = () => {
+    reset(DEFAULT_FORM_VALUES);
+    setPreviewMode(false);
+    setGeneratedCaptcha(generateCaptcha());
+    setCollapsedSections(DEFAULT_SECTION_STATE);
+    setUploadingFields({});
     setShowToast(null);
+    if (typeof window !== "undefined") {
+      window.sessionStorage.removeItem(FORM_STORAGE_KEY);
+    }
+    scrollToTop();
   };
-  if (isEnableLoader || isLoading) {
+  if (isEnableLoader || isPropertyLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content-with-action-bar"
-  }, /*#__PURE__*/React.createElement(FormComposer, {
-    config: config.body,
-    userType: "employee",
-    onFormValueChange: onFormValueChange,
-    label: t("CS_COMMON_SUBMIT"),
-    onSubmit: onSubmit,
-    defaultValues: sessionFormData,
-    cardFormWrapperClassName: "new-application-card"
-  }), showToast && /*#__PURE__*/React.createElement(Toast, {
-    isDleteBtn: true,
-    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error" ? true : false,
-    warning: showToast === null || showToast === void 0 ? void 0 : showToast.warning,
-    label: t(showToast === null || showToast === void 0 ? void 0 : showToast.message),
+  }, /*#__PURE__*/React.createElement("style", null, `
+          .ws-new-application-collapsible .collapsible-card-tabs {
+            display: none;
+          }
+
+          .ws-new-application-collapsible .collapsible-card-tab-content {
+            padding: 0;
+          }
+        `), /*#__PURE__*/React.createElement(Header, null, t("New Water / Sewerage Application")), /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(CardSubHeader, null, previewMode ? t("Preview Application") : t("Application Form"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: previewMode ? "none" : "block"
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Primary request selections",
+    isOpen: collapsedSections.application,
+    onToggle: toggleSection,
+    sectionKey: "application",
+    title: "Application Selection"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("typeOfRequest"),
+    label: "Type of Request",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "typeOfRequest",
+    rules: {
+      required: "Type of Request is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
+      name: "typeOfRequest",
+      options: TYPE_OF_REQUEST_OPTIONS,
+      optionsKey: "name",
+      onSelect: props.onChange,
+      selectedOption: props.value
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("connectionType"),
+    label: "Connection Type",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "connectionType",
+    rules: {
+      required: "Connection Type is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
+      name: "connectionType",
+      options: CONNECTION_TYPE_OPTIONS,
+      optionsKey: "name",
+      onSelect: props.onChange,
+      selectedOption: props.value
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Applicant name, organization details, and supporting ID proof.",
+    isOpen: collapsedSections.applicant,
+    onToggle: toggleSection,
+    sectionKey: "applicant",
+    title: "Details of Applicant"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.firstName"),
+    label: "First Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.firstName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "First Name is required."
+    }),
+    name: "applicant.firstName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.middleName"),
+    label: "Middle Name"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.middleName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      }
+    }),
+    name: "applicant.middleName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.lastName"),
+    label: "Last Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.lastName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "Last Name is required."
+    }),
+    name: "applicant.lastName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.fatherOrHusbandName"),
+    label: "Father / Husband Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.fatherOrHusbandName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "Father / Husband Name is required."
+    }),
+    name: "applicant.fatherOrHusbandName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    label: "Government Organization"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "applicant.isGovernmentOrganization",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Applicant belongs to a Government Organization",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  })), isGovernmentOrganization ? /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.governmentOrganizationName"),
+    isFullWidth: true,
+    label: "Name of Government Organization",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.governmentOrganizationName"),
+    inputRef: register({
+      required: isGovernmentOrganization ? "Government Organization Name is required." : false
+    }),
+    name: "applicant.governmentOrganizationName"
+  })) : null, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "applicant.applicantIdProofFile",
+    rules: {
+      validate: value => !!value || "Applicant ID Proof is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("applicant.applicantIdProofFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "applicant-id-proof",
+      isUploading: !!uploadingFields["applicant.applicantIdProofFile"],
+      label: "Upload ID Proof",
+      onDelete: () => clearUploadedFile("applicant.applicantIdProofFile", props.onChange),
+      onUpload: event => uploadFile(event, "applicant.applicantIdProofFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Basic communication details for the application.",
+    isOpen: collapsedSections.contact,
+    onToggle: toggleSection,
+    sectionKey: "contact",
+    title: "Contact Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.emailId"),
+    label: "Email ID",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.emailId"),
+    inputRef: register({
+      pattern: {
+        value: EMAIL_PATTERN,
+        message: "Enter a valid email address."
+      },
+      required: "Email ID is required."
+    }),
+    name: "contact.emailId"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.mobileNumber"),
+    label: "Mobile Number",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.mobileNumber"),
+    inputRef: register({
+      pattern: {
+        value: MOBILE_PATTERN,
+        message: "Enter a valid 10-digit mobile number."
+      },
+      required: "Mobile Number is required."
+    }),
+    maxlength: 10,
+    name: "contact.mobileNumber"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.officeNumber"),
+    label: "Office No."
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.officeNumber"),
+    inputRef: register({
+      pattern: {
+        value: OFFICE_PATTERN,
+        message: "Enter a valid office number."
+      }
+    }),
+    name: "contact.officeNumber"
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Enable this section only when the applicant is a DJB employee.",
+    isOpen: collapsedSections.employee,
+    onToggle: toggleSection,
+    sectionKey: "employee",
+    title: "For DJB Employee"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    label: "DJB Employee"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "djbEmployee.isDjbEmployee",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Applicant is a DJB Employee",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.employeeId"),
+    label: "Employee ID",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("djbEmployee.employeeId"),
+    inputRef: register({
+      required: isDjbEmployee ? "Employee ID is required." : false
+    }),
+    name: "djbEmployee.employeeId"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.retirementDate"),
+    label: "Date of Retirement",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "djbEmployee.retirementDate",
+    rules: {
+      required: isDjbEmployee ? "Date of Retirement is required." : false
+    },
+    render: props => /*#__PURE__*/React.createElement(DatePicker, {
+      date: props.value,
+      onChange: props.onChange
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.officeNameAndAddress"),
+    isFullWidth: true,
+    label: "Office Name & Address",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    className: getFieldError("djbEmployee.officeNameAndAddress") ? "employee-card-input-error" : "",
+    inputRef: register({
+      required: isDjbEmployee ? "Office Name & Address is required." : false
+    }),
+    name: "djbEmployee.officeNameAndAddress",
+    style: {
+      minHeight: "96px"
+    }
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property location and administrative boundary details.",
+    isOpen: collapsedSections.address,
+    onToggle: toggleSection,
+    sectionKey: "address",
+    title: "Property Address"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.address"),
+    isFullWidth: true,
+    label: "Address",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    className: getFieldError("propertyAddress.address") ? "employee-card-input-error" : "",
+    inputRef: register({
+      required: "Address is required."
+    }),
+    name: "propertyAddress.address",
+    style: {
+      minHeight: "96px"
+    }
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.landmark"),
+    label: "Landmark"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("propertyAddress.landmark"),
+    inputRef: register(),
+    name: "propertyAddress.landmark"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.pinCode"),
+    label: "Pin Code",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("propertyAddress.pinCode"),
+    inputRef: register({
+      pattern: {
+        value: PINCODE_PATTERN,
+        message: "Enter a valid 6-digit pin code."
+      },
+      required: "Pin Code is required."
+    }),
+    maxlength: 6,
+    name: "propertyAddress.pinCode"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.locality"),
+    label: "Locality",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.locality",
+    rules: {
+      required: "Locality is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: LOCALITY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.subLocality"),
+    label: "Sub Locality",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.subLocality",
+    rules: {
+      required: "Sub Locality is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      disable: !selectedLocality,
+      option: subLocalityOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.assembly"),
+    label: "Assembly",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.assembly",
+    rules: {
+      required: "Assembly is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: ASSEMBLY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.ward"),
+    label: "Ward",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.ward",
+    rules: {
+      required: "Ward is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WARD_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Usage attributes for the property and the requested water connection.",
+    isOpen: collapsedSections.usage,
+    onToggle: toggleSection,
+    sectionKey: "usage",
+    title: "Property and Water Connection Use Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.propertyType"),
+    label: "Property Type",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.propertyType",
+    rules: {
+      required: "Property Type is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: PROPERTY_TYPE_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.noOfFloors"),
+    label: "No. of Floors",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.noOfFloors"),
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: "Enter a valid whole number."
+      },
+      required: "No. of Floors is required."
+    }),
+    name: "useDetails.noOfFloors"
+  })), isHospitalProperty ? /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.hospitalBeds"),
+    label: "No. of Beds for Hospitals & Nursing Home",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.hospitalBeds"),
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: "Enter a valid whole number."
+      },
+      required: isHospitalProperty ? "No. of Beds is required for Hospital / Nursing Home." : false
+    }),
+    name: "useDetails.hospitalBeds"
+  })) : null, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.plotArea"),
+    label: "Plot Area in Sqm",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.plotArea"),
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: "Enter a valid numeric value."
+      },
+      required: "Plot Area is required."
+    }),
+    name: "useDetails.plotArea"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.builtUpArea"),
+    label: "Built Up Area",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.builtUpArea"),
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: "Enter a valid numeric value."
+      },
+      required: "Built Up Area is required."
+    }),
+    name: "useDetails.builtUpArea"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.waterConnectionCategory"),
+    label: "Water Connection Category",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.waterConnectionCategory",
+    rules: {
+      required: "Water Connection Category is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WATER_CONNECTION_CATEGORY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.waterConnectionUsedBy"),
+    label: "Water Connection Used By",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.waterConnectionUsedBy",
+    rules: {
+      required: "Water Connection Used By is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WATER_CONNECTION_USED_BY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Refund or payment-linked bank account details.",
+    isOpen: collapsedSections.bank,
+    onToggle: toggleSection,
+    sectionKey: "bank",
+    title: "Bank Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.bankName"),
+    label: "Name of the Bank",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.bankName"),
+    inputRef: register({
+      required: "Bank Name is required."
+    }),
+    name: "bankDetails.bankName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.branchName"),
+    label: "Name of the Branch",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.branchName"),
+    inputRef: register({
+      required: "Branch Name is required."
+    }),
+    name: "bankDetails.branchName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.ifscCode"),
+    label: "IFSC Code",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.ifscCode"),
+    inputRef: register({
+      pattern: {
+        value: IFSC_PATTERN,
+        message: "Enter a valid IFSC code."
+      },
+      required: "IFSC Code is required."
+    }),
+    name: "bankDetails.ifscCode",
+    onChange: event => {
+      event.target.value = event.target.value.toUpperCase();
+    }
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.bankAccountNumber"),
+    label: "Bank Account No.",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.bankAccountNumber"),
+    inputRef: register({
+      pattern: {
+        value: ACCOUNT_PATTERN,
+        message: "Enter a valid bank account number."
+      },
+      required: "Bank Account Number is required."
+    }),
+    name: "bankDetails.bankAccountNumber"
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Optional rain water harvesting certificate request.",
+    isOpen: collapsedSections.rainWaterHarvesting,
+    onToggle: toggleSection,
+    sectionKey: "rainWaterHarvesting",
+    title: "Rain Water Harvesting"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    isFullWidth: true,
+    label: "Apply for RWH Adequacy Certificate"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "rainWaterHarvesting.applyForAdequacyCertificate",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Apply for RWH Adequacy Certificate",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Documents to be attached. Maximum allowed file size is 5 MB.",
+    isOpen: collapsedSections.documents,
+    onToggle: toggleSection,
+    sectionKey: "documents",
+    title: "Documents to be Attached"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("documents.proofOfIdentity"),
+    label: "Proof of Identity",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.proofOfIdentity",
+    rules: {
+      required: "Proof of Identity is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: PROOF_OF_IDENTITY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.identityProofFile",
+    rules: {
+      validate: value => !!value || "Upload Identity Proof is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.identityProofFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "identity-proof-file",
+      isUploading: !!uploadingFields["documents.identityProofFile"],
+      label: "Upload Identity Proof",
+      onDelete: () => clearUploadedFile("documents.identityProofFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.identityProofFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("documents.ownershipStatus"),
+    label: "Ownership Status",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.ownershipStatus",
+    rules: {
+      required: "Ownership Status is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: OWNERSHIP_STATUS_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.ownershipDocumentFile",
+    rules: {
+      validate: value => !!value || "Upload Ownership Document is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.ownershipDocumentFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "ownership-document-file",
+      isUploading: !!uploadingFields["documents.ownershipDocumentFile"],
+      label: "Upload Ownership Document",
+      onDelete: () => clearUploadedFile("documents.ownershipDocumentFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.ownershipDocumentFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.otherDocumentFile",
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.otherDocumentFile"),
+      helperText: "Optional. Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "other-document-file",
+      isUploading: !!uploadingFields["documents.otherDocumentFile"],
+      label: "Other Document",
+      onDelete: () => clearUploadedFile("documents.otherDocumentFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.otherDocumentFile", props.onChange),
+      value: props.value
+    })
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Final undertaking details before preview and submit.",
+    isOpen: collapsedSections.declaration,
+    onToggle: toggleSection,
+    sectionKey: "declaration",
+    title: "Declaration / Undertaking"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.submittedBy"),
+    label: "Submitted By",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.submittedBy",
+    rules: {
+      required: "Submitted By is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: SUBMITTED_BY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.signatureFile",
+    rules: {
+      validate: value => !!value || "Upload Signature is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("declaration.signatureFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "signature-file",
+      isUploading: !!uploadingFields["declaration.signatureFile"],
+      label: "Upload Signature",
+      onDelete: () => clearUploadedFile("declaration.signatureFile", props.onChange),
+      onUpload: event => uploadFile(event, "declaration.signatureFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(FieldBlock, {
+    isFullWidth: true,
+    label: "Captcha",
+    required: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "16px",
+      flexWrap: "wrap",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: captchaBoxStyle
+  }, generatedCaptcha), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: refreshCaptcha,
+    style: linkButtonStyle
+  }, "Refresh Captcha"))), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.captcha"),
+    label: "Enter Captcha",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("declaration.captcha"),
+    inputRef: register({
+      required: "Captcha is required."
+    }),
+    name: "declaration.captcha"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.agree"),
+    isFullWidth: true,
+    label: "Declaration",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.agree",
+    rules: {
+      validate: value => value || "Please accept the declaration to continue."
+    },
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "I Agree",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  }))))), previewMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Selected request and connection type.",
+    isOpen: collapsedSections.application,
+    onToggle: toggleSection,
+    sectionKey: "application",
+    title: "Application Selection"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Type of Request",
+    value: formValues === null || formValues === void 0 ? void 0 : formValues.typeOfRequest
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Connection Type",
+    value: formValues === null || formValues === void 0 ? void 0 : formValues.connectionType
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Applicant identity and organization information.",
+    isOpen: collapsedSections.applicant,
+    onToggle: toggleSection,
+    sectionKey: "applicant",
+    title: "Details of Applicant"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "First Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant = formValues.applicant) === null || _formValues$applicant === void 0 ? void 0 : _formValues$applicant.firstName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Middle Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant2 = formValues.applicant) === null || _formValues$applicant2 === void 0 ? void 0 : _formValues$applicant2.middleName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Last Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant3 = formValues.applicant) === null || _formValues$applicant3 === void 0 ? void 0 : _formValues$applicant3.lastName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Father / Husband Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant4 = formValues.applicant) === null || _formValues$applicant4 === void 0 ? void 0 : _formValues$applicant4.fatherOrHusbandName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Government Organization",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant5 = formValues.applicant) === null || _formValues$applicant5 === void 0 ? void 0 : _formValues$applicant5.isGovernmentOrganization
+  }), formValues !== null && formValues !== void 0 && (_formValues$applicant6 = formValues.applicant) !== null && _formValues$applicant6 !== void 0 && _formValues$applicant6.isGovernmentOrganization ? /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Name of Government Organization",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant7 = formValues.applicant) === null || _formValues$applicant7 === void 0 ? void 0 : _formValues$applicant7.governmentOrganizationName
+  }) : null, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Uploaded ID Proof",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant8 = formValues.applicant) === null || _formValues$applicant8 === void 0 ? void 0 : _formValues$applicant8.applicantIdProofFile
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Communication details captured in the application.",
+    isOpen: collapsedSections.contact,
+    onToggle: toggleSection,
+    sectionKey: "contact",
+    title: "Contact Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Email ID",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact = formValues.contact) === null || _formValues$contact === void 0 ? void 0 : _formValues$contact.emailId
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Mobile Number",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact2 = formValues.contact) === null || _formValues$contact2 === void 0 ? void 0 : _formValues$contact2.mobileNumber
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Office No.",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact3 = formValues.contact) === null || _formValues$contact3 === void 0 ? void 0 : _formValues$contact3.officeNumber
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "DJB employee-specific information.",
+    isOpen: collapsedSections.employee,
+    onToggle: toggleSection,
+    sectionKey: "employee",
+    title: "For DJB Employee"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "DJB Employee",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy = formValues.djbEmployee) === null || _formValues$djbEmploy === void 0 ? void 0 : _formValues$djbEmploy.isDjbEmployee
+  }), formValues !== null && formValues !== void 0 && (_formValues$djbEmploy2 = formValues.djbEmployee) !== null && _formValues$djbEmploy2 !== void 0 && _formValues$djbEmploy2.isDjbEmployee ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Employee ID",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy3 = formValues.djbEmployee) === null || _formValues$djbEmploy3 === void 0 ? void 0 : _formValues$djbEmploy3.employeeId
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Date of Retirement",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy4 = formValues.djbEmployee) === null || _formValues$djbEmploy4 === void 0 ? void 0 : _formValues$djbEmploy4.retirementDate
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Office Name & Address",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy5 = formValues.djbEmployee) === null || _formValues$djbEmploy5 === void 0 ? void 0 : _formValues$djbEmploy5.officeNameAndAddress
+  })) : null), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property address and administrative boundary values.",
+    isOpen: collapsedSections.address,
+    onToggle: toggleSection,
+    sectionKey: "address",
+    title: "Property Address"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Address",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA = formValues.propertyAddress) === null || _formValues$propertyA === void 0 ? void 0 : _formValues$propertyA.address
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Landmark",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA2 = formValues.propertyAddress) === null || _formValues$propertyA2 === void 0 ? void 0 : _formValues$propertyA2.landmark
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Pin Code",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA3 = formValues.propertyAddress) === null || _formValues$propertyA3 === void 0 ? void 0 : _formValues$propertyA3.pinCode
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Locality",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA4 = formValues.propertyAddress) === null || _formValues$propertyA4 === void 0 ? void 0 : _formValues$propertyA4.locality
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Sub Locality",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA5 = formValues.propertyAddress) === null || _formValues$propertyA5 === void 0 ? void 0 : _formValues$propertyA5.subLocality
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Assembly",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA6 = formValues.propertyAddress) === null || _formValues$propertyA6 === void 0 ? void 0 : _formValues$propertyA6.assembly
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Ward",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA7 = formValues.propertyAddress) === null || _formValues$propertyA7 === void 0 ? void 0 : _formValues$propertyA7.ward
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property and connection usage values.",
+    isOpen: collapsedSections.usage,
+    onToggle: toggleSection,
+    sectionKey: "usage",
+    title: "Property and Water Connection Use Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Property Type",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail = formValues.useDetails) === null || _formValues$useDetail === void 0 ? void 0 : _formValues$useDetail.propertyType
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "No. of Floors",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail2 = formValues.useDetails) === null || _formValues$useDetail2 === void 0 ? void 0 : _formValues$useDetail2.noOfFloors
+  }), (formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail3 = formValues.useDetails) === null || _formValues$useDetail3 === void 0 ? void 0 : (_formValues$useDetail4 = _formValues$useDetail3.propertyType) === null || _formValues$useDetail4 === void 0 ? void 0 : _formValues$useDetail4.code) === "HOSPITAL_NURSING_HOME" ? /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "No. of Beds for Hospitals & Nursing Home",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail5 = formValues.useDetails) === null || _formValues$useDetail5 === void 0 ? void 0 : _formValues$useDetail5.hospitalBeds
+  }) : null, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Plot Area in Sqm",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail6 = formValues.useDetails) === null || _formValues$useDetail6 === void 0 ? void 0 : _formValues$useDetail6.plotArea
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Built Up Area",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail7 = formValues.useDetails) === null || _formValues$useDetail7 === void 0 ? void 0 : _formValues$useDetail7.builtUpArea
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Water Connection Category",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail8 = formValues.useDetails) === null || _formValues$useDetail8 === void 0 ? void 0 : _formValues$useDetail8.waterConnectionCategory
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Water Connection Used By",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail9 = formValues.useDetails) === null || _formValues$useDetail9 === void 0 ? void 0 : _formValues$useDetail9.waterConnectionUsedBy
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Banking information as entered in the form.",
+    isOpen: collapsedSections.bank,
+    onToggle: toggleSection,
+    sectionKey: "bank",
+    title: "Bank Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Name of the Bank",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai = formValues.bankDetails) === null || _formValues$bankDetai === void 0 ? void 0 : _formValues$bankDetai.bankName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Name of the Branch",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai2 = formValues.bankDetails) === null || _formValues$bankDetai2 === void 0 ? void 0 : _formValues$bankDetai2.branchName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "IFSC Code",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai3 = formValues.bankDetails) === null || _formValues$bankDetai3 === void 0 ? void 0 : _formValues$bankDetai3.ifscCode
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Bank Account No.",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai4 = formValues.bankDetails) === null || _formValues$bankDetai4 === void 0 ? void 0 : _formValues$bankDetai4.bankAccountNumber
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Rain water harvesting request status.",
+    isOpen: collapsedSections.rainWaterHarvesting,
+    onToggle: toggleSection,
+    sectionKey: "rainWaterHarvesting",
+    title: "Rain Water Harvesting"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Apply for RWH Adequacy Certificate",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$rainWater = formValues.rainWaterHarvesting) === null || _formValues$rainWater === void 0 ? void 0 : _formValues$rainWater.applyForAdequacyCertificate
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Uploaded supporting documents.",
+    isOpen: collapsedSections.documents,
+    onToggle: toggleSection,
+    sectionKey: "documents",
+    title: "Documents to be Attached"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Proof of Identity",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents = formValues.documents) === null || _formValues$documents === void 0 ? void 0 : _formValues$documents.proofOfIdentity
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Identity Proof",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents2 = formValues.documents) === null || _formValues$documents2 === void 0 ? void 0 : _formValues$documents2.identityProofFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Ownership Status",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents3 = formValues.documents) === null || _formValues$documents3 === void 0 ? void 0 : _formValues$documents3.ownershipStatus
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Ownership Document",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents4 = formValues.documents) === null || _formValues$documents4 === void 0 ? void 0 : _formValues$documents4.ownershipDocumentFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Other Document",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents5 = formValues.documents) === null || _formValues$documents5 === void 0 ? void 0 : _formValues$documents5.otherDocumentFile
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Declaration and undertaking details.",
+    isOpen: collapsedSections.declaration,
+    onToggle: toggleSection,
+    sectionKey: "declaration",
+    title: "Declaration / Undertaking"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Submitted By",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati = formValues.declaration) === null || _formValues$declarati === void 0 ? void 0 : _formValues$declarati.submittedBy
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Signature",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati2 = formValues.declaration) === null || _formValues$declarati2 === void 0 ? void 0 : _formValues$declarati2.signatureFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Entered Captcha",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati3 = formValues.declaration) === null || _formValues$declarati3 === void 0 ? void 0 : _formValues$declarati3.captcha
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "I Agree",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati4 = formValues.declaration) === null || _formValues$declarati4 === void 0 ? void 0 : _formValues$declarati4.agree
+  }))), /*#__PURE__*/React.createElement(ActionBar, {
+    style: actionBarStyle
+  }, !previewMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: "Reset",
+    onSubmit: onReset,
+    style: secondaryButtonStyle
+  }), /*#__PURE__*/React.createElement(SubmitBar, {
+    disabled: hasPendingUpload,
+    label: hasPendingUpload ? "Uploading..." : "Preview",
+    onSubmit: handleSubmit(onPreview)
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: "Edit Details",
+    onSubmit: onEdit,
+    style: secondaryButtonStyle
+  }), /*#__PURE__*/React.createElement(SubmitBar, {
+    disabled: hasPendingUpload,
+    label: hasPendingUpload ? "Uploading..." : "Submit",
+    onSubmit: handleSubmit(onSubmit)
+  }))), showToast ? /*#__PURE__*/React.createElement(Toast, {
+    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error",
+    label: showToast === null || showToast === void 0 ? void 0 : showToast.message,
     onClose: closeToast,
-    isWarning: showToast === null || showToast === void 0 ? void 0 : showToast.isWarning
-  }));
+    warning: showToast === null || showToast === void 0 ? void 0 : showToast.warning
+  }) : null);
 };
 
 const configPTApproverApplication = ({