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

package/src/components/PropertyInfo.js

@@ -1,15 +1,8 @@
 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 PropertyInfoConfig from "../config/PropertyInfoConfig";
 
 const PropertyInfo = ({ config, onSelect, formData }) => {
   const { t } = useTranslation();
@@ -17,10 +10,18 @@ const PropertyInfo = ({ config, onSelect, formData }) => {
   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: "PROPERTY" } },
     { enabled: !!searchKno, cacheTime: 0 }
   );
 
@@ -29,129 +30,179 @@ const PropertyInfo = ({ config, onSelect, formData }) => {
   const savedData = formData?.propertyDetails || {};
 
   // 🔹 STATES
-  const [pidNumber, setPidNumber] = useState(savedData.pidNumber || "");
-  const [propertyType, setPropertyType] = useState(savedData.propertyType ? { name: savedData.propertyType } : null);
-  const [subPropertyCategory, setSubPropertyCategory] = useState(savedData.subPropertyCategory ? { name: savedData.subPropertyCategory } : null);
-
-  const [noOfFloors, setNoOfFloors] = useState(savedData.noOfFloors || "");
-  const [floorNo, setFloorNo] = useState(savedData.floorNo || "");
-
-  const [noOfRooms, setNoOfRooms] = useState(savedData.noOfRooms || "");
-  const [noOfBeds, setNoOfBeds] = useState(savedData.noOfBeds || "");
-  const [dwellingUnits, setDwellingUnits] = useState(savedData.dwellingUnits || "");
-
   const [buildingImage, setBuildingImage] = useState(null);
   const [buildingImageId, setBuildingImageId] = useState(savedData.buildingImageId || null);
-
   const [toast, setToast] = useState(null);
-
-  // 🔹 PROPERTY TYPE OPTIONS
-  const propertyTypeOptions = [
-    { name: "Residential" },
-    { name: "Commercial" },
-    { name: "Hotel" },
-    { name: "Hospital" },
-    { name: "Nursing Home" },
-  ];
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const [canSubmit, setCanSubmit] = useState(false);
+
+  const [defaultValues, setDefaultValues] = useState(() => ({
+    pidNumber: savedData.pidNumber || "",
+    propertyType: savedData.propertyType ? { name: savedData.propertyType } : null,
+    subPropertyCategory: savedData.subPropertyCategory ? { name: savedData.subPropertyCategory } : null,
+    noOfFloors: savedData.noOfFloors || "",
+    floorNo: savedData.floorNo || "",
+    noOfRooms: savedData.noOfRooms || "",
+    noOfBeds: savedData.noOfBeds || "",
+    dwellingUnits: savedData.dwellingUnits || "",
+    buildingImage: savedData.buildingImageId ? "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 propertyInfo = rawData?.propertyInfo || rawData?.propertyDetails || {};
+    const appData = extractApplicationData(searchData);
+    const rawData = appData || formData?.connectionDetails;
+    const propertyInfo = rawData?.propertyInfo || rawData?.propertyDetails || rawData || {};
 
-    if (propertyInfo && Object.keys(propertyInfo).length > 0 && !savedData.pidNumber) {
-      if (propertyInfo.pidNumber) setPidNumber(propertyInfo.pidNumber);
-      if (propertyInfo.numberOfFloors || propertyInfo.noOfFloor) setNoOfFloors(String(propertyInfo.numberOfFloors || propertyInfo.noOfFloor));
-      if (propertyInfo.buildingImageFileStoreId) setBuildingImageId(propertyInfo.buildingImageFileStoreId);
+    if (propertyInfo && Object.keys(propertyInfo).length > 0 && !isDataLoaded) {
+      let propType = null;
+      let subPropCat = null;
 
       if (propertyInfo.subPropertyCategory) {
-        const matchingType = propertyTypeOptions.find(type => type.name.toLowerCase() === propertyInfo.subPropertyCategory.toLowerCase());
-        if (matchingType) setPropertyType(matchingType);
-        else setPropertyType({ name: propertyInfo.subPropertyCategory });
-        setSubPropertyCategory({ name: propertyInfo.subPropertyCategory });
+        const matchingType = [
+          { name: "Residential" },
+          { name: "Commercial" },
+          { name: "Hotel" },
+          { name: "Hospital" },
+          { name: "Nursing Home" },
+        ].find((type) => type.name.toLowerCase() === propertyInfo.subPropertyCategory.toLowerCase());
+        if (matchingType) propType = matchingType;
+        else propType = { name: propertyInfo.subPropertyCategory };
+        subPropCat = { name: propertyInfo.subPropertyCategory };
       }
 
       if (propertyInfo.propertyType) {
-        setSubPropertyCategory({ name: propertyInfo.propertyType }); // Just in case, depending on how UI renders it
-        if (!propertyInfo.subPropertyCategory) setPropertyType({ name: propertyInfo.propertyType });
+        subPropCat = { name: propertyInfo.propertyType };
+        if (!propertyInfo.subPropertyCategory) propType = { name: propertyInfo.propertyType };
       }
 
-      if (propertyInfo.floorNo) setFloorNo(propertyInfo.floorNo);
-      if (propertyInfo.numberOfRooms !== null && propertyInfo.numberOfRooms !== undefined) setNoOfRooms(String(propertyInfo.numberOfRooms));
-      if (propertyInfo.numberOfBeds !== null && propertyInfo.numberOfBeds !== undefined) setNoOfBeds(String(propertyInfo.numberOfBeds));
-      if (propertyInfo.numberOfDwellingUnits !== null && propertyInfo.numberOfDwellingUnits !== undefined) setDwellingUnits(String(propertyInfo.numberOfDwellingUnits));
+      const updatedDefaults = {
+        pidNumber: savedData.pidNumber || propertyInfo.pidNumber || "",
+        propertyType: savedData.propertyType ? { name: savedData.propertyType } : propType,
+        subPropertyCategory: savedData.subPropertyCategory
+          ? { name: savedData.subPropertyCategory }
+          : subPropCat,
+        noOfFloors:
+          savedData.noOfFloors ||
+          (propertyInfo.numberOfFloors || propertyInfo.noOfFloor
+            ? String(propertyInfo.numberOfFloors || propertyInfo.noOfFloor)
+            : ""),
+        floorNo: savedData.floorNo || propertyInfo.floorNo || "",
+        noOfRooms:
+          savedData.noOfRooms ||
+          (propertyInfo.numberOfRooms !== null && propertyInfo.numberOfRooms !== undefined
+            ? String(propertyInfo.numberOfRooms)
+            : ""),
+        noOfBeds:
+          savedData.noOfBeds ||
+          (propertyInfo.numberOfBeds !== null && propertyInfo.numberOfBeds !== undefined
+            ? String(propertyInfo.numberOfBeds)
+            : ""),
+        dwellingUnits:
+          savedData.dwellingUnits ||
+          (propertyInfo.numberOfDwellingUnits !== null && propertyInfo.numberOfDwellingUnits !== undefined
+            ? String(propertyInfo.numberOfDwellingUnits)
+            : ""),
+        buildingImage: savedData.buildingImageId || propertyInfo.buildingImageFileStoreId || null,
+      };
+
+      setDefaultValues(updatedDefaults);
+      setLocalFormData(updatedDefaults);
+      if (updatedDefaults.buildingImage) {
+        setBuildingImageId(updatedDefaults.buildingImage);
+      }
+      setIsDataLoaded(true);
     }
-  }, [searchData, formData?.connectionDetails]);
+  }, [searchData, formData?.connectionDetails, isDataLoaded]);
 
   // 🔹 FILE UPLOAD
-  const handleUpload = async (e) => {
+  const handleUpload = async (e, onChange) => {
     const file = e.target.files[0];
     if (!file) return;
 
     if (file.size > 2000000) {
-      setToast({ type: "error", message: "Max size 2MB exceeded" });
+      setToast({ type: "error", message: t("Max size 2MB exceeded") });
       return;
     }
 
     try {
-      const res = await Digit.UploadServices.Filestorage(
-        "EKYC",
-        file,
-        tenantId
-      );
-
+      const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
       const fileStoreId = res?.data?.files?.[0]?.fileStoreId;
 
       if (fileStoreId) {
+        onChange(file.name);
         setBuildingImageId(fileStoreId);
 
         const reader = new FileReader();
         reader.onloadend = () => setBuildingImage(reader.result);
         reader.readAsDataURL(file);
 
-        setToast({ type: "success", message: "Upload successful" });
+        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 (!propertyType) return false;
-    if (!subPropertyCategory) return false;
-    if (!noOfFloors || Number(noOfFloors) < 1) return false;
-    if (!buildingImageId) return false;
+  const onFormValueChange = (setValue, data) => {
+    // Check if propertyType changed to re-evaluate mandatory validation or conditional visibility
+    const propertyTypeChanged =
+      (data?.propertyType?.name || data?.propertyType) !==
+      (localFormData?.propertyType?.name || localFormData?.propertyType);
 
-    if (propertyType?.name === "Hotel" && !noOfRooms) return false;
+    if (propertyTypeChanged) {
+      setLocalFormData((prev) => ({
+        ...prev,
+        ...data,
+      }));
+    }
+
+    // Determine validation
+    const propTypeVal = data?.propertyType;
+    const subPropCatVal = data?.subPropertyCategory;
+    const noOfFloorsVal = data?.noOfFloors;
+    const buildingImgId = buildingImageId || data?.buildingImage;
+    const noOfRoomsVal = data?.noOfRooms;
+    const noOfBedsVal = data?.noOfBeds;
+
+    let valid = true;
+    if (!propTypeVal) valid = false;
+    if (!subPropCatVal) valid = false;
+    if (!noOfFloorsVal || Number(noOfFloorsVal) < 1) valid = false;
+    if (!buildingImgId) valid = false;
+
+    if (propTypeVal?.name === "Hotel" && !noOfRoomsVal) valid = false;
     if (
-      (propertyType?.name === "Hospital" ||
-        propertyType?.name === "Nursing Home") &&
-      !noOfBeds
+      (propTypeVal?.name === "Hospital" || propTypeVal?.name === "Nursing Home") &&
+      !noOfBedsVal
     )
-      return false;
+      valid = false;
 
-    return true;
+    if (valid !== canSubmit) {
+      setCanSubmit(valid);
+    }
   };
 
-  // 🔹 SUBMIT
-  const onStepSelect = async () => {
-    /* Optional validation enforce
-    if (!isValid()) {
-      setToast({ type: "error", message: "Fill all required fields" });
-      return;
-    }
-    */
-
-    const data = {
-      pidNumber,
-      propertyType: propertyType?.name,
-      subPropertyCategory: subPropertyCategory?.name,
-      noOfFloors,
-      floorNo,
-      noOfRooms,
-      noOfBeds,
-      dwellingUnits,
-      buildingImageId,
+  const onSubmit = async (data) => {
+    const submitData = {
+      pidNumber: data.pidNumber,
+      propertyType: data.propertyType?.name || data.propertyType,
+      subPropertyCategory: data.subPropertyCategory?.name || data.subPropertyCategory,
+      noOfFloors: data.noOfFloors,
+      floorNo: data.floorNo,
+      noOfRooms: data.noOfRooms,
+      noOfBeds: data.noOfBeds,
+      dwellingUnits: data.dwellingUnits,
+      buildingImageId: buildingImageId,
     };
 
     try {
@@ -159,12 +210,12 @@ const PropertyInfo = ({ config, onSelect, formData }) => {
         RequestInfo: {},
         updateType: "PROPERTY",
         kno: searchKno,
-        ...data,
+        ...submitData,
       });
-      setToast({ type: "success", message: "Property details updated successfully!" });
-      onSelect(config.key, data);
+      setToast({ type: "success", message: t("Property details updated successfully!") });
+      onSelect(config.key, submitData);
     } catch (error) {
-      setToast({ type: "error", message: "Failed to update property details" });
+      setToast({ type: "error", message: t("Failed to update property details") });
     }
   };
 
@@ -172,130 +223,40 @@ const PropertyInfo = ({ config, onSelect, formData }) => {
     return <Loader />;
   }
 
+  const Config = PropertyInfoConfig(
+    t,
+    localFormData,
+    handleUpload,
+    buildingImage,
+    buildingImageId,
+    setBuildingImage,
+    setBuildingImageId
+  );
+
   return (
     <Fragment>
-      <FormStep
-        t={t}
-        onSelect={onStepSelect}
-        config={config}
+      <FormComposer
+        key={isDataLoaded ? "loaded" : "loading"}
+        isDisabled={!canSubmit}
         label={t("ES_COMMON_CONTINUE")}
-        isDisabled={!isValid()}
-      >
-        <div>
-          <CardLabel>PID Number</CardLabel>
-          <TextInput value={pidNumber} onChange={(e) => setPidNumber(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>Property Type</CardLabel>
-          <Dropdown
-            option={propertyTypeOptions}
-            selected={propertyType}
-            select={setPropertyType}
-          />
-        </div>
-
-        <div>
-          <CardLabel>Sub Property Category</CardLabel>
-          <Dropdown option={[]} selected={subPropertyCategory} select={setSubPropertyCategory} />
-        </div>
-
-        <div>
-          <CardLabel>No. of Floors *</CardLabel>
-          <TextInput
-            type="number"
-            value={noOfFloors}
-            onChange={(e) => setNoOfFloors(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <CardLabel>Floor No. of this KNO</CardLabel>
-          <TextInput value={floorNo} onChange={(e) => setFloorNo(e.target.value)} />
-        </div>
-
-        <div>
-          <CardLabel>No of Beds</CardLabel>
-          <TextInput
-            type="number"
-            value={noOfBeds}
-            onChange={(e) => setNoOfBeds(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <CardLabel>No. of Rooms</CardLabel>
-          <TextInput
-            type="number"
-            value={noOfRooms}
-            onChange={(e) => setNoOfRooms(e.target.value)}
-          />
-        </div>
-
-        {/* HOTEL CONDITION */}
-        {propertyType?.name === "Hotel" && (
-          <div>
-            <CardLabel>No. of Rooms *</CardLabel>
-            <TextInput
-              type="number"
-              value={noOfRooms}
-              onChange={(e) => setNoOfRooms(e.target.value)}
-            />
-          </div>
-        )}
-
-        {/* HOSPITAL CONDITION */}
-        {(propertyType?.name === "Hospital" ||
-          propertyType?.name === "Nursing Home") && (
-            <div>
-              <CardLabel>No. of Beds *</CardLabel>
-              <TextInput
-                type="number"
-                value={noOfBeds}
-                onChange={(e) => setNoOfBeds(e.target.value)}
-              />
-            </div>
-          )}
-
-        <div>
-          <CardLabel>Number of Dwelling Units</CardLabel>
-          <TextInput
-            type="number"
-            value={dwellingUnits}
-            onChange={(e) => setDwellingUnits(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <CardLabel>Building Image *</CardLabel>
-          <UploadFile
-            onUpload={handleUpload}
-            onDelete={() => {
-              setBuildingImage(null);
-              setBuildingImageId(null);
-            }}
-            message={buildingImageId ? "Uploaded" : "No file selected"}
-          />
-        </div>
-
-        {buildingImage && (
-          <div style={{ gridColumn: "span 2" }}>
-            <img
-              src={buildingImage}
-              alt="preview"
-              style={{ width: "100%", marginTop: "10px" }}
-            />
-          </div>
-        )}
-
-        {toast && (
-          <Toast
-            label={toast.message}
-            error={toast.type === "error"}
-            onClose={() => setToast(null)}
-          />
-        )}
-      </FormStep>
+        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>
   );
 };

package/src/components/Review.js

@@ -11,6 +11,8 @@ import {
   LinkButton,
   EditIcon,
   GenericFileIcon,
+  Menu,
+  Toast,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation, useParams } from "react-router-dom";
@@ -34,9 +36,7 @@ const boolToYesNo = (value, t) => {
   if (value === false || value === "false" || String(value).toLowerCase() === "no") return t("CORE_COMMON_NO");
   if (value === "true") return t("CORE_COMMON_YES");
   if (value === "false") return t("CORE_COMMON_NO");
-  return "N/A";
 };
-
 /**
  * Robust data extraction for comparison.
  * The API returns { applicationReviewInfo: { newData: { ... }, oldData: { ... } } }
@@ -172,6 +172,14 @@ const Review = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState("");
+  const [showOptions, setShowOptions] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const [toastData, setToastData] = useState({ error: false, label: "" });
+
+  const options = [
+    { action: t("Approve") },
+    { action: t("Reject") }
+  ];
 
   const flowState = location.state || {};
   const { edits = {} } = flowState;
@@ -373,6 +381,7 @@ const Review = () => {
         apiId: "Rainmaker",
         ver: "1.0",
         msgId: "message-id",
+        tenantId: tenantId,
         authToken: Digit.UserService.getUser()?.access_token,
       },
       kno: activeKno,
@@ -397,6 +406,7 @@ const Review = () => {
         apiId: "Rainmaker",
         ver: "1.0",
         msgId: "message-id",
+        tenantId: tenantId,
         authToken: Digit.UserService.getUser()?.access_token,
       },
       kno: activeKno,
@@ -408,10 +418,22 @@ const Review = () => {
     try {
       const result = await workflowMutation.mutateAsync(payload);
       if (result) {
-        history.push("/digit-ui/employee/ekyc/response", { success: true, result });
+        setToastData({
+          error: false,
+          label: t("EKYC_APPLICATION_APPROVE_SUCCESSFUL") || "Application Approved Successfully",
+        });
+        setShowToast(true);
+        setTimeout(() => {
+          history.push("/digit-ui/employee/ekyc/inbox");
+        }, 2000);
       }
     } catch (err) {
       console.error("Approve Error:", err);
+      setToastData({
+        error: true,
+        label: err?.message || err?.response?.data?.message || "Approve Error",
+      });
+      setShowToast(true);
     }
   };
 
@@ -447,6 +469,15 @@ const Review = () => {
     setShowPreview(true);
   };
 
+  const handleMenuSelect = (option) => {
+    setShowOptions(false); // close menu
+    if (option.action === t("Approve")) {
+      handleApprove();
+    } else if (option.action === t("Reject")) {
+      handleReject();
+    }
+  };
+
   if (isSearchLoading || isSubmitting) return <Loader />;
 
   const baseUrl = "/digit-ui/employee/ekyc";
@@ -461,8 +492,8 @@ const Review = () => {
           newData={connectionData}
           oldData={oldDataRaw?.connection}
           t={t}
-          jumpTo={`${baseUrl}/consumer-details`}
-          state={{ ...flowState, reviewData: searchData, edits }}
+          jumpTo={`${baseUrl}/consumer-details?kno=${kno}`}
+          state={{ ...flowState, kNumber: kno, kno, reviewData: searchData, edits }}
         />
 
         {/* ── 2. Address Details ──────────────────────────────────────── */}
@@ -472,8 +503,8 @@ const Review = () => {
           newData={addressData}
           oldData={oldDataRaw?.address}
           t={t}
-          jumpTo={`${baseUrl}/address-details`}
-          state={{ ...flowState, reviewData: searchData, edits }}
+          jumpTo={`${baseUrl}/address-details?kno=${kno}`}
+          state={{ ...flowState, kNumber: kno, kno, reviewData: searchData, edits }}
         />
 
         {/* ── 3. Property Info ────────────────────────────────────────── */}
@@ -483,8 +514,8 @@ const Review = () => {
           newData={propertyData}
           oldData={oldDataRaw?.property}
           t={t}
-          jumpTo={`${baseUrl}/property-info`}
-          state={{ ...flowState, reviewData: searchData, edits }}
+          jumpTo={`${baseUrl}/property-info?kno=${kno}`}
+          state={{ ...flowState, kNumber: kno, kno, reviewData: searchData, edits }}
         />
 
         {/* ── 4. Meter Details ────────────────────────────────────────── */}
@@ -494,8 +525,8 @@ const Review = () => {
           newData={meterData}
           oldData={oldDataRaw?.meter}
           t={t}
-          jumpTo={`${baseUrl}/meter-details`}
-          state={{ ...flowState, reviewData: searchData, edits }}
+          jumpTo={`${baseUrl}/meter-details?kno=${kno}`}
+          state={{ ...flowState, kNumber: kno, kno, reviewData: searchData, edits }}
         />
 
         {/* ── 5. Documents ────────────────────────────────────────────── */}
@@ -559,10 +590,29 @@ const Review = () => {
           />
         </div>
 
-        <ActionBar>
+        {/* <ActionBar>
           <SubmitBar label={t("EKYC_REJECT")} onSubmit={handleReject} disabled={!agree} />
           <SubmitBar label={t("EKYC_APPROVE")} onSubmit={handleApprove} disabled={!agree} />
-          {/* <SubmitBar label={t("EKYC_SUBMIT_APPLICATION")} onSubmit={handleFinalSubmit} disabled={!agree} /> */}
+          <SubmitBar label={t("EKYC_SUBMIT_APPLICATION")} onSubmit={handleFinalSubmit} disabled={!agree} />
+        </ActionBar> */}
+        <ActionBar>
+          <SubmitBar
+            label={t("TAKE_ACTION_FOR_APPROVE_REJECT")}
+            onSubmit={() => setShowOptions((prev) => !prev)}
+            disabled={!agree}
+          />
+          {showOptions && (
+            <Menu
+              options={options}
+              optionKey={"action"}
+              t={t}
+              onSelect={handleMenuSelect}
+              style={{
+                color: "#FFFFFF",
+                fontSize: "18px",
+              }}
+            />
+          )}
         </ActionBar>
       </Card>
 
@@ -632,6 +682,13 @@ const Review = () => {
           </div>
         </div>
       )}
+      {showToast && (
+        <Toast
+          error={toastData.error}
+          label={toastData.label}
+          onClose={() => setShowToast(false)}
+        />
+      )}
     </Fragment>
   );
 };