@djb25/digit-ui-module-ekyc 1.0.25 → 1.0.26

package/src/components/MeterDetails.js

@@ -1,24 +1,27 @@
 import React, { useState, Fragment, useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import {
-  CardLabel,
-  TextInput,
-  Dropdown,
-  UploadFile,
-  Toast,
-  FormStep,
-  Loader
-} from "@djb25/digit-ui-react-components";
+import { Toast, Loader, FormComposer } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import MeterDetailsConfig from "../config/MeterDetailsConfig";
 
 const MeterDetails = ({ config, onSelect, formData }) => {
+  const { t } = useTranslation();
   const location = useLocation();
   const flowState = location.state || {};
   const tenantId = Digit.ULBService.getCurrentTenantId();
 
-  const searchKno = flowState?.kNumber || flowState?.kno || formData?.kNumber || formData?.kno || sessionStorage.getItem("EKYC_K_NUMBER");
+  const queryParams = new URLSearchParams(location.search);
+  const urlKno = queryParams.get("kno");
+  const searchKno =
+    urlKno ||
+    flowState?.kNumber ||
+    flowState?.kno ||
+    formData?.kNumber ||
+    formData?.kno ||
+    sessionStorage.getItem("EKYC_K_NUMBER");
 
   const { isLoading, data: searchData } = Digit.Hooks.ekyc.useSearchConnection(
-    { tenantId, details: { kno: searchKno } },
+    { tenantId, details: { kno: searchKno, fetchType: "METER" } },
     { enabled: !!searchKno, cacheTime: 0 }
   );
 
@@ -27,101 +30,92 @@ const MeterDetails = ({ config, onSelect, formData }) => {
   const savedData = formData?.meterDetails || {};
 
   // 🔹 STATES
-  const [connectionCategory, setConnectionCategory] = useState(savedData.connectionCategory || "");
-  const [saType, setSaType] = useState(savedData.saType || "");
-  const [status, setStatus] = useState(savedData.status || "");
-
-  const [mrCode, setMrCode] = useState(savedData.mrCode || "");
-  const [areaCode, setAreaCode] = useState(savedData.areaCode || "");
-  const [mrKey, setMrKey] = useState(savedData.mrKey || "");
-
-  const [meterNumber, setMeterNumber] = useState(savedData.meterNumber || "");
-  const [meterMaker, setMeterMaker] = useState(savedData.meterMaker || "");
-
-  const [meterStatus, setMeterStatus] = useState(savedData.meterStatus ? { name: savedData.meterStatus } : null);
-  const [meterCondition, setMeterCondition] = useState(savedData.meterCondition ? { name: savedData.meterCondition } : null);
-  const [meterLocation, setMeterLocation] = useState(savedData.meterLocation ? { name: savedData.meterLocation } : null);
-
-  const [lastBillReceived, setLastBillReceived] = useState(savedData.lastBillReceived ? { name: savedData.lastBillReceived } : null);
-  const [billMonthYear, setBillMonthYear] = useState(savedData.billMonthYear ? { name: savedData.billMonthYear } : null);
-  const [reason, setReason] = useState(savedData.reason || "");
-
-  const [accessToMeter, setAccessToMeter] = useState(savedData.accessToMeter ? { name: savedData.accessToMeter } : null);
-  const [sewerConnection, setSewerConnection] = useState(savedData.sewerConnection ? { name: savedData.sewerConnection } : null);
-  const [septicTank, setSepticTank] = useState(savedData.septicTank ? { name: savedData.septicTank } : null);
-
   const [meterPhoto, setMeterPhoto] = useState(null);
   const [meterPhotoId, setMeterPhotoId] = useState(savedData.meterPhotoId || null);
-
   const [toast, setToast] = useState(null);
-
-  // 🔹 OPTIONS
-  const yesNo = [{ name: "Yes" }, { name: "No" }];
-
-  const meterStatusOptions = [
-    { name: "Metered" },
-    { name: "Unmetered" },
-    { name: "Can not be identified" },
-  ];
-
-  const meterConditionOptions = [
-    { name: "Damaged" },
-    { name: "Not-Damaged" },
-  ];
-
-  const meterLocationOptions = [
-    { name: "Inside" },
-    { name: "Outside" },
-  ];
-
-  // 🔹 MONTH-YEAR OPTIONS (1998–2026)
-  const monthYearOptions = [];
-  for (let y = 1998; y <= 2026; y++) {
-    for (let m = 1; m <= 12; m++) {
-      monthYearOptions.push({ name: `${m}/${y}` });
-    }
-  }
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const [canSubmit, setCanSubmit] = useState(false);
+
+  const [defaultValues, setDefaultValues] = useState(() => ({
+    connectionCategory: savedData.connectionCategory || "",
+    saType: savedData.saType || "",
+    status: savedData.status || "",
+    mrCode: savedData.mrCode || "",
+    areaCode: savedData.areaCode || "",
+    mrKey: savedData.mrKey || "",
+    meterNumber: savedData.meterNumber || "",
+    meterMaker: savedData.meterMaker || "",
+    meterStatus: savedData.meterStatus ? { name: savedData.meterStatus } : null,
+    meterCondition: savedData.meterCondition ? { name: savedData.meterCondition } : null,
+    meterLocation: savedData.meterLocation ? { name: savedData.meterLocation } : null,
+    lastBillReceived: savedData.lastBillReceived ? { name: savedData.lastBillReceived } : null,
+    billMonthYear: savedData.billMonthYear ? { name: savedData.billMonthYear } : null,
+    reason: savedData.reason || "",
+    accessToMeter: savedData.accessToMeter ? { name: savedData.accessToMeter } : null,
+    sewerConnection: savedData.sewerConnection ? { name: savedData.sewerConnection } : null,
+    septicTank: savedData.septicTank ? { name: savedData.septicTank } : null,
+    meterPhoto: savedData.meterPhotoId ? "Uploaded" : null,
+  }));
+
+  const [localFormData, setLocalFormData] = useState(defaultValues);
+
+  const extractApplicationData = (searchData) => {
+    if (!searchData) return null;
+    const reviewWrapper =
+      searchData?.applicationReviewInfo || searchData?.applicationReview || searchData;
+    const applicationData = (Array.isArray(reviewWrapper) ? reviewWrapper[0] : reviewWrapper) || {};
+    return applicationData?.newData || applicationData;
+  };
 
   useEffect(() => {
-    const rawData = searchData || formData?.connectionDetails;
+    const appData = extractApplicationData(searchData);
+    const rawData = appData || formData?.connectionDetails;
     const apiMeter = rawData?.meterDetails || rawData || {};
 
-    if (apiMeter && Object.keys(apiMeter).length > 0 && !savedData.connectionCategory) {
-      if (apiMeter.connectionCategory) setConnectionCategory(apiMeter.connectionCategory);
-      if (apiMeter.saType) setSaType(apiMeter.saType);
-      if (apiMeter.statusFlag) setStatus(apiMeter.statusFlag);
-
-      if (apiMeter.mrcode) setMrCode(String(apiMeter.mrcode));
-      if (apiMeter.areacode) setAreaCode(String(apiMeter.areacode));
-      if (apiMeter.mrkey) setMrKey(String(apiMeter.mrkey));
-
-      if (apiMeter.meterNumber) setMeterNumber(apiMeter.meterNumber);
-      if (apiMeter.meterMake) setMeterMaker(apiMeter.meterMake);
+    if (apiMeter && Object.keys(apiMeter).length > 0 && !isDataLoaded) {
+      let mStatus = null;
+      let mCondition = null;
+      let mLoc = null;
+      let billRec = null;
+      let billMonYr = null;
+      let accToMeter = null;
+      let sewerConn = null;
+      let sepTank = null;
 
       if (apiMeter.meterStatus) {
-        const matchingStatus = meterStatusOptions.find(o => o.name.toLowerCase() === apiMeter.meterStatus.toLowerCase());
-        if (matchingStatus) setMeterStatus(matchingStatus);
-        else setMeterStatus({ name: apiMeter.meterStatus });
+        const matchingStatus = [
+          { name: "Metered" },
+          { name: "Unmetered" },
+          { name: "Can not be identified" },
+        ].find((o) => o.name.toLowerCase() === apiMeter.meterStatus.toLowerCase());
+        if (matchingStatus) mStatus = matchingStatus;
+        else mStatus = { name: apiMeter.meterStatus };
       } else if (apiMeter.metered !== undefined) {
-        setMeterStatus({ name: apiMeter.metered ? "Metered" : "Unmetered" });
+        mStatus = { name: apiMeter.metered ? "Metered" : "Unmetered" };
       }
 
       if (apiMeter.meterCondition) {
-        const matchingCond = meterConditionOptions.find(o => o.name.toLowerCase() === apiMeter.meterCondition.toLowerCase());
-        if (matchingCond) setMeterCondition(matchingCond);
-        else setMeterCondition({ name: apiMeter.meterCondition });
+        const matchingCond = [{ name: "Damaged" }, { name: "Not-Damaged" }].find(
+          (o) => o.name.toLowerCase() === apiMeter.meterCondition.toLowerCase()
+        );
+        if (matchingCond) mCondition = matchingCond;
+        else mCondition = { name: apiMeter.meterCondition };
       }
 
       if (apiMeter.meterLocation) {
-        const matchingLoc = meterLocationOptions.find(o => o.name.toLowerCase() === apiMeter.meterLocation.toLowerCase() || apiMeter.meterLocation.toLowerCase().includes(o.name.toLowerCase()));
-        if (matchingLoc) setMeterLocation(matchingLoc);
-        else setMeterLocation({ name: apiMeter.meterLocation });
+        const matchingLoc = [{ name: "Inside" }, { name: "Outside" }].find(
+          (o) =>
+            o.name.toLowerCase() === apiMeter.meterLocation.toLowerCase() ||
+            apiMeter.meterLocation.toLowerCase().includes(o.name.toLowerCase())
+        );
+        if (matchingLoc) mLoc = matchingLoc;
+        else mLoc = { name: apiMeter.meterLocation };
       }
 
       if (apiMeter.lastBillRaised !== undefined && apiMeter.lastBillRaised !== null) {
         const strVal = String(apiMeter.lastBillRaised).toLowerCase();
-        if (strVal === "true" || strVal === "yes") setLastBillReceived({ name: "Yes" });
-        else setLastBillReceived({ name: "No" });
+        if (strVal === "true" || strVal === "yes") billRec = { name: "Yes" };
+        else billRec = { name: "No" };
       }
 
       if (apiMeter.lastBillReceivedDate) {
@@ -130,106 +124,157 @@ const MeterDetails = ({ config, onSelect, formData }) => {
         if (parsedParts.length === 2) {
           const mon = parseInt(parsedParts[0], 10);
           const yr = parseInt(parsedParts[1], 10);
-          setBillMonthYear({ name: `${mon}/${yr}` });
+          billMonYr = { name: `${mon}/${yr}` };
         } else {
-          setBillMonthYear({ name: apiMeter.lastBillReceivedDate });
+          billMonYr = { name: apiMeter.lastBillReceivedDate };
         }
       }
 
-      if (apiMeter.lastBillNotRaisedReason) setReason(apiMeter.lastBillNotRaisedReason);
-
       if (apiMeter.accessToMeter !== undefined && apiMeter.accessToMeter !== null) {
         const strVal = String(apiMeter.accessToMeter).toLowerCase();
-        if (strVal === "true" || strVal === "yes") setAccessToMeter({ name: "Yes" });
-        else setAccessToMeter({ name: "No" });
+        if (strVal === "true" || strVal === "yes") accToMeter = { name: "Yes" };
+        else accToMeter = { name: "No" };
       }
 
       if (apiMeter.sewerConnection !== undefined && apiMeter.sewerConnection !== null) {
         const strVal = String(apiMeter.sewerConnection).toLowerCase();
-        if (strVal === "true" || strVal === "yes") setSewerConnection({ name: "Yes" });
-        else setSewerConnection({ name: "No" });
+        if (strVal === "true" || strVal === "yes") sewerConn = { name: "Yes" };
+        else sewerConn = { name: "No" };
       }
 
       if (apiMeter.septicTank !== undefined && apiMeter.septicTank !== null) {
         const strVal = String(apiMeter.septicTank).toLowerCase();
-        if (strVal === "true" || strVal === "yes") setSepticTank({ name: "Yes" });
-        else setSepticTank({ name: "No" });
+        if (strVal === "true" || strVal === "yes") sepTank = { name: "Yes" };
+        else sepTank = { name: "No" };
       }
 
-      if (apiMeter.meterPhotoFileStoreId) setMeterPhotoId(apiMeter.meterPhotoFileStoreId);
+      const updatedDefaults = {
+        connectionCategory: savedData.connectionCategory || apiMeter.connectionCategory || "",
+        saType: savedData.saType || apiMeter.saType || "",
+        status: savedData.status || apiMeter.statusFlag || "",
+        mrCode: savedData.mrCode || (apiMeter.mrcode ? String(apiMeter.mrcode) : ""),
+        areaCode: savedData.areaCode || (apiMeter.areacode ? String(apiMeter.areacode) : ""),
+        mrKey: savedData.mrKey || (apiMeter.mrkey ? String(apiMeter.mrkey) : ""),
+        meterNumber: savedData.meterNumber || apiMeter.meterNumber || "",
+        meterMaker: savedData.meterMaker || apiMeter.meterMake || "",
+        meterStatus: savedData.meterStatus ? { name: savedData.meterStatus } : mStatus,
+        meterCondition: savedData.meterCondition ? { name: savedData.meterCondition } : mCondition,
+        meterLocation: savedData.meterLocation ? { name: savedData.meterLocation } : mLoc,
+        lastBillReceived: savedData.lastBillReceived ? { name: savedData.lastBillReceived } : billRec,
+        billMonthYear: savedData.billMonthYear ? { name: savedData.billMonthYear } : billMonYr,
+        reason: savedData.reason || apiMeter.lastBillNotRaisedReason || "",
+        accessToMeter: savedData.accessToMeter ? { name: savedData.accessToMeter } : accToMeter,
+        sewerConnection: savedData.sewerConnection ? { name: savedData.sewerConnection } : sewerConn,
+        septicTank: savedData.septicTank ? { name: savedData.septicTank } : sepTank,
+        meterPhoto: savedData.meterPhotoId || apiMeter.meterPhotoFileStoreId || null,
+      };
+
+      setDefaultValues(updatedDefaults);
+      setLocalFormData(updatedDefaults);
+      if (updatedDefaults.meterPhoto) {
+        setMeterPhotoId(updatedDefaults.meterPhoto);
+      }
+      setIsDataLoaded(true);
     }
-  }, [searchData, formData?.connectionDetails]);
-
-  // 🔹 FREEZE LOGIC
-  const isFrozen = meterStatus?.name === "Can not be identified";
+  }, [searchData, formData?.connectionDetails, isDataLoaded]);
 
   // 🔹 FILE UPLOAD
-  const uploadPhoto = async (e) => {
+  const handleUpload = async (e, onChange) => {
     const file = e.target.files[0];
     if (!file) return;
 
+    if (file.size > 2000000) {
+      setToast({ type: "error", message: t("Max size 2MB exceeded") });
+      return;
+    }
+
     try {
       const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
-      const id = res?.data?.files?.[0]?.fileStoreId;
+      const fileStoreId = res?.data?.files?.[0]?.fileStoreId;
 
-      if (id) {
-        setMeterPhotoId(id);
+      if (fileStoreId) {
+        onChange(file.name);
+        setMeterPhotoId(fileStoreId);
 
         const reader = new FileReader();
         reader.onloadend = () => setMeterPhoto(reader.result);
         reader.readAsDataURL(file);
+
+        setToast({ type: "success", message: t("Upload successful") });
       }
     } catch {
-      setToast({ type: "error", message: "Upload failed" });
+      setToast({ type: "error", message: t("Upload failed") });
     }
   };
 
-  // 🔹 VALIDATION
-  const isValid = () => {
-    if (!connectionCategory) return false;
-    if (!meterStatus) return false;
-    if (!meterLocation) return false;
-    if (!lastBillReceived) return false;
-    if (!sewerConnection) return false;
+  const onFormValueChange = (setValue, data) => {
+    const meterStatusChanged =
+      (data?.meterStatus?.name || data?.meterStatus) !==
+      (localFormData?.meterStatus?.name || localFormData?.meterStatus);
 
-    if (meterStatus?.name === "Metered" && !meterPhotoId) return false;
+    const lastBillReceivedChanged =
+      (data?.lastBillReceived?.name || data?.lastBillReceived) !==
+      (localFormData?.lastBillReceived?.name || localFormData?.lastBillReceived);
 
-    if (lastBillReceived?.name === "No" && !reason) return false;
-    if (lastBillReceived?.name === "Yes" && !billMonthYear) return false;
+    const sewerConnectionChanged =
+      (data?.sewerConnection?.name || data?.sewerConnection) !==
+      (localFormData?.sewerConnection?.name || localFormData?.sewerConnection);
 
-    if (sewerConnection?.name === "No" && !septicTank) return false;
+    if (meterStatusChanged || lastBillReceivedChanged || sewerConnectionChanged) {
+      setLocalFormData((prev) => ({
+        ...prev,
+        ...data,
+      }));
+    }
 
-    return true;
+    // Determine validation
+    const connCatVal = data?.connectionCategory;
+    const mStatusVal = data?.meterStatus;
+    const mLocVal = data?.meterLocation;
+    const billRecVal = data?.lastBillReceived;
+    const sewerConnVal = data?.sewerConnection;
+    const mPhotoId = meterPhotoId || data?.meterPhoto;
+    const reasonVal = data?.reason;
+    const billMonYrVal = data?.billMonthYear;
+    const sepTankVal = data?.septicTank;
+
+    let valid = true;
+    if (!connCatVal) valid = false;
+    if (!mStatusVal) valid = false;
+    if (!mLocVal) valid = false;
+    if (!billRecVal) valid = false;
+    if (!sewerConnVal) valid = false;
+
+    if (mStatusVal?.name === "Metered" && !mPhotoId) valid = false;
+    if (billRecVal?.name === "No" && !reasonVal) valid = false;
+    if (billRecVal?.name === "Yes" && !billMonYrVal) valid = false;
+    if (sewerConnVal?.name === "No" && !sepTankVal) valid = false;
+
+    if (valid !== canSubmit) {
+      setCanSubmit(valid);
+    }
   };
 
-  // 🔹 SUBMIT
-  const onStepSelect = async () => {
-    /*
-    if (!isValid()) {
-      setToast({ type: "error", message: "Fill all mandatory fields" });
-      return;
-    }
-    */
-
-    const data = {
-      connectionCategory,
-      saType,
-      status,
-      mrCode,
-      areaCode,
-      mrKey,
-      meterNumber,
-      meterMaker,
-      meterStatus: meterStatus?.name,
-      meterCondition: meterCondition?.name,
-      meterLocation: meterLocation?.name,
-      lastBillReceived: lastBillReceived?.name,
-      billMonthYear: billMonthYear?.name,
-      reason,
-      accessToMeter: accessToMeter?.name,
-      sewerConnection: sewerConnection?.name,
-      septicTank: septicTank?.name,
-      meterPhotoId,
+  const onSubmit = async (data) => {
+    const submitData = {
+      connectionCategory: data.connectionCategory,
+      saType: data.saType,
+      status: data.status,
+      mrCode: data.mrCode,
+      areaCode: data.areaCode,
+      mrKey: data.mrKey,
+      meterNumber: data.meterNumber,
+      meterMaker: data.meterMaker,
+      meterStatus: data.meterStatus?.name || data.meterStatus,
+      meterCondition: data.meterCondition?.name || data.meterCondition,
+      meterLocation: data.meterLocation?.name || data.meterLocation,
+      lastBillReceived: data.lastBillReceived?.name || data.lastBillReceived,
+      billMonthYear: data.billMonthYear?.name || data.billMonthYear,
+      reason: data.reason,
+      accessToMeter: data.accessToMeter?.name || data.accessToMeter,
+      sewerConnection: data.sewerConnection?.name || data.sewerConnection,
+      septicTank: data.septicTank?.name || data.septicTank,
+      meterPhotoId: meterPhotoId,
     };
 
     try {
@@ -237,12 +282,12 @@ const MeterDetails = ({ config, onSelect, formData }) => {
         RequestInfo: {},
         updateType: "METER",
         kno: searchKno,
-        ...data,
+        ...submitData,
       });
-      setToast({ type: "success", message: "Meter details updated successfully!" });
-      onSelect(config.key, data);
+      setToast({ type: "success", message: t("Meter details updated successfully!") });
+      onSelect(config.key, submitData);
     } catch (error) {
-      setToast({ type: "error", message: "Failed to update meter details" });
+      setToast({ type: "error", message: t("Failed to update meter details") });
     }
   };
 
@@ -250,121 +295,40 @@ const MeterDetails = ({ config, onSelect, formData }) => {
     return <Loader />;
   }
 
+  const Config = MeterDetailsConfig(
+    t,
+    localFormData,
+    handleUpload,
+    meterPhoto,
+    meterPhotoId,
+    setMeterPhoto,
+    setMeterPhotoId
+  );
+
   return (
     <Fragment>
-      <FormStep onSelect={onStepSelect} config={config} isDisabled={!isValid()}>
-        <div>
-          <CardLabel>Connection Category *</CardLabel>
-          <TextInput value={connectionCategory} onChange={(e) => setConnectionCategory(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>SA Type</CardLabel>
-          <TextInput value={saType} onChange={(e) => setSaType(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>Status</CardLabel>
-          <TextInput value={status} onChange={(e) => setStatus(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>MR Code</CardLabel>
-          <TextInput value={mrCode} onChange={(e) => setMrCode(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>Area Code</CardLabel>
-          <TextInput value={areaCode} onChange={(e) => setAreaCode(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>MR Key</CardLabel>
-          <TextInput value={mrKey} onChange={(e) => setMrKey(e.target.value)} />
-        </div>
-
-        {!isFrozen && (
-          <Fragment>
-            <div>
-              <CardLabel>Meter Number</CardLabel>
-              <TextInput value={meterNumber} onChange={(e) => setMeterNumber(e.target.value)} />
-            </div>
-
-            <div>
-              <CardLabel>Meter Maker</CardLabel>
-              <TextInput value={meterMaker} onChange={(e) => setMeterMaker(e.target.value)} />
-            </div>
-
-            <div>
-              <CardLabel>Meter Condition</CardLabel>
-              <Dropdown option={meterConditionOptions} selected={meterCondition} select={setMeterCondition} />
-            </div>
-
-            {meterStatus?.name === "Metered" && (
-              <Fragment>
-                <div>
-                  <CardLabel>Meter Photo *</CardLabel>
-                  <UploadFile onUpload={uploadPhoto} message={meterPhotoId ? "Uploaded" : "No file"} />
-                </div>
-                {meterPhoto && (
-                  <div style={{ gridColumn: "span 2" }}>
-                    <img src={meterPhoto} style={{ width: "100%" }} />
-                  </div>
-                )}
-              </Fragment>
-            )}
-          </Fragment>
-        )}
-
-        <div>
-          <CardLabel>Meter Status *</CardLabel>
-          <Dropdown option={meterStatusOptions} selected={meterStatus} select={setMeterStatus} />
-        </div>
-
-        <div>
-          <CardLabel>Meter Location *</CardLabel>
-          <Dropdown option={meterLocationOptions} selected={meterLocation} select={setMeterLocation} />
-        </div>
-
-        <div>
-          <CardLabel>Last Bill Received *</CardLabel>
-          <Dropdown option={yesNo} selected={lastBillReceived} select={setLastBillReceived} />
-        </div>
-
-        {lastBillReceived?.name === "Yes" && (
-          <div>
-            <CardLabel>When was the last bill received *</CardLabel>
-            <Dropdown option={monthYearOptions} selected={billMonthYear} select={setBillMonthYear} />
-          </div>
-        )}
-
-        {lastBillReceived?.name === "No" && (
-          <div>
-            <CardLabel>Reason *</CardLabel>
-            <TextInput value={reason} onChange={(e) => setReason(e.target.value)} />
-          </div>
-        )}
-
-        <div>
-          <CardLabel>Access to Meter</CardLabel>
-          <Dropdown option={yesNo} selected={accessToMeter} select={setAccessToMeter} />
-        </div>
-
-        <div>
-          <CardLabel>Sewer Connection *</CardLabel>
-          <Dropdown option={yesNo} selected={sewerConnection} select={setSewerConnection} />
-        </div>
-
-        {sewerConnection?.name === "No" && (
-          <div>
-            <CardLabel>Septic Tank *</CardLabel>
-            <Dropdown option={yesNo} selected={septicTank} select={setSepticTank} />
-          </div>
-        )}
-
-        {toast && <Toast label={toast.message} error={toast.type === "error"} onClose={() => setToast(null)} />}
-
-      </FormStep>
+      <FormComposer
+        key={isDataLoaded ? "loaded" : "loading"}
+        isDisabled={!canSubmit}
+        label={t("ES_COMMON_CONTINUE")}
+        config={Config.map((item) => ({
+          ...item,
+          isCollapsible: true,
+          isDefaultOpen: true,
+        }))}
+        onSubmit={onSubmit}
+        defaultValues={defaultValues}
+        onFormValueChange={onFormValueChange}
+        noCard={false}
+        submitInForm={true}
+      />
+      {toast && (
+        <Toast
+          error={toast.type === "error"}
+          label={toast.message}
+          onClose={() => setToast(null)}
+        />
+      )}
     </Fragment>
   );
 };