@djb25/digit-ui-module-ekyc 1.0.4 → 1.0.6

package/src/pages/employee/Inbox.js

@@ -4,13 +4,7 @@ import DesktopInbox from "../../components/DesktopInbox";
 import MobileInbox from "../../components/MobileInbox";
 import Filter from "../../components/Filter";
 
-const MOCK_DATA_ITEMS = [
-    { applicationNumber: "EKYC-2024-001", citizenName: "Rahul Sharma", mobileNumber: "9876543210", status: "COMPLETED" },
-    { applicationNumber: "EKYC-2024-002", citizenName: "Anjali Devi", mobileNumber: "9123456789", status: "PENDING" },
-    { applicationNumber: "EKYC-2024-003", citizenName: "Amit Kumar", mobileNumber: "8888888888", status: "REJECTED" },
-    { applicationNumber: "EKYC-2024-004", citizenName: "Priya Singh", mobileNumber: "7777777777", status: "COMPLETED" },
-    { applicationNumber: "EKYC-2024-005", citizenName: "Suresh Gupta", mobileNumber: "6666666666", status: "PENDING" },
-];
+// Mock data removed in favor of API integration
 
 const Inbox = ({
     parentRoute,
@@ -33,28 +27,40 @@ const Inbox = ({
     // Maintain the full search objects for the Search component
     const [searchParams, setSearchParams] = useState(initialStates.searchParams || { status: defaultStatusOption });
 
-    // 2. Local Filtering Logic for Static Data
-    const filteredStaticData = useMemo(() => {
-        return MOCK_DATA_ITEMS.filter((item) => {
-            let match = true;
-            // Extract the string value from the status object if it exists
-            const currentStatus = searchParams.status?.value !== undefined ? searchParams.status.value : searchParams.status;
-
-            if (currentStatus && item.status !== currentStatus) {
-                match = false;
-            }
-            return match;
-        });
-    }, [searchParams]);
-
-    const staticCountData = useMemo(() => {
+    // 2. API Data Fetching
+    const { isLoading, data: dashboardData, isFetching } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
+        {}, 
+        { 
+            tenantId, 
+            offset: pageOffset, 
+            limit: pageSize,
+            status: searchParams.status?.value || ""
+        },
+        {
+            enabled: !!tenantId,
+        }
+    );
+
+    const filteredData = useMemo(() => {
+        const items = dashboardData?.dashboardInfo?.consumerList || [];
+        return items.map(item => ({
+            ...item,
+            applicationNumber: item.kno || item.applicationNumber,
+            citizenName: item.consumerName || item.citizenName,
+        }));
+    }, [dashboardData]);
+
+    const countData = useMemo(() => {
+        const info = dashboardData?.dashboardInfo || {};
         return {
-            total: MOCK_DATA_ITEMS.length,
-            completed: MOCK_DATA_ITEMS.filter(i => i.status === "COMPLETED").length,
-            pending: MOCK_DATA_ITEMS.filter(i => i.status === "PENDING").length,
-            rejected: MOCK_DATA_ITEMS.filter(i => i.status === "REJECTED").length
+            total: info.total || 0,
+            completed: info.completed || 0,
+            pending: info.pending || 0,
+            rejected: info.rejected || 0
         };
-    }, []);
+    }, [dashboardData]);
+
+    const totalRecords = dashboardData?.dashboardInfo?.totalRecords || dashboardData?.totalCount || 0;
 
     // 3. Handlers
     const handleSearch = useCallback((filterParam) => {
@@ -84,10 +90,9 @@ const Inbox = ({
             name: "status",
             type: "dropdown",
             options: [
-                { label: t("CHOOSE_STATUS"), value: "" },
-                { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
-                { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
-                { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                { label: t("EKYC_STATUS_ALL"), value: "" },
+                { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+                { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
             ],
             optionsKey: "label"
         },
@@ -98,19 +103,19 @@ const Inbox = ({
             <div className="inbox-main-container">
                 {Digit.Utils.browser.isMobile() ? (
                     <MobileInbox
-                        data={{ items: filteredStaticData, totalCount: filteredStaticData.length }}
-                        isLoading={false}
+                        data={{ items: filteredData, totalCount: totalRecords }}
+                        isLoading={isLoading || isFetching}
                         onSearch={handleSearch}
                         searchFields={searchFields}
                         searchParams={searchParams}
                         parentRoute={parentRoute}
-                        countData={staticCountData}
+                        countData={countData}
                     />
                 ) : (
                     <DesktopInbox
                         businessService={businessService}
-                        data={{ items: filteredStaticData, totalCount: filteredStaticData.length }}
-                        isLoading={false}
+                        data={{ items: filteredData, totalCount: totalRecords }}
+                        isLoading={isLoading || isFetching}
                         searchFields={searchFields}
                         onSearch={handleSearch}
                         onSort={handleSort}
@@ -122,8 +127,8 @@ const Inbox = ({
                         parentRoute={parentRoute}
                         searchParams={searchParams}
                         sortParams={sortParams}
-                        totalRecords={filteredStaticData.length}
-                        countData={staticCountData}
+                        totalRecords={totalRecords}
+                        countData={countData}
                         filterComponent="EKYC_INBOX_FILTER"
                     />
                 )}

package/src/pages/employee/PropertyInfo.js

@@ -366,20 +366,34 @@ const PropertyInfo = () => {
                                 </div>
                                 <input type="file" ref={fileRef} accept=".pdf" style={{ display: "none" }} onChange={handleFileUpload} />
                                 <div
-                                    onClick={() => fileRef.current.click()}
-                                    onMouseOver={(e) => e.currentTarget.style.borderColor = "#185FA5"}
-                                    onMouseOut={(e) => e.currentTarget.style.borderColor = "#B5D4F4"}
+                                    onClick={() => pidNumber && fileRef.current.click()}
+                                    onMouseOver={(e) => { if (pidNumber) e.currentTarget.style.borderColor = "#185FA5"; }}
+                                    onMouseOut={(e) => { if (pidNumber) e.currentTarget.style.borderColor = "#B5D4F4"; }}
                                     style={{
-                                        border: "1.5px dashed #B5D4F4", borderRadius: "10px",
-                                        padding: "28px 20px", textAlign: "center", cursor: "pointer",
-                                        backgroundColor: "#E6F1FB", minHeight: "160px",
-                                        display: "flex", flexDirection: "column",
-                                        alignItems: "center", justifyContent: "center", gap: "10px",
-                                        transition: "border-color 0.15s",
+                                        border: pidNumber ? "1.5px dashed #B5D4F4" : "1.5px dashed #D0D5DD",
+                                        borderRadius: "10px",
+                                        padding: "28px 20px",
+                                        textAlign: "center",
+                                        cursor: pidNumber ? "pointer" : "not-allowed",
+                                        backgroundColor: pidNumber ? "#E6F1FB" : "#F9FAFB",
+                                        minHeight: "160px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "10px",
+                                        transition: "all 0.15s",
+                                        opacity: pidNumber ? 1 : 0.6,
                                     }}
                                 >
-                                    <div style={{ background: "#fff", padding: "10px", borderRadius: "10px", display: "flex" }}>
-                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="#185FA5">
+                                    <div style={{
+                                        background: pidNumber ? "#fff" : "#EAECF0",
+                                        padding: "10px",
+                                        borderRadius: "10px",
+                                        display: "flex",
+                                        filter: pidNumber ? "none" : "grayscale(100%)"
+                                    }}>
+                                        <svg width="32" height="32" viewBox="0 0 24 24" fill={pidNumber ? "#185FA5" : "#98A2B3"}>
                                             <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z" />
                                             <path d="M12 18v-4M12 14l-2 2M12 14l2 2" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" />
                                         </svg>
@@ -390,10 +404,10 @@ const PropertyInfo = () => {
                                         </div>
                                     ) : (
                                         <>
-                                            <div style={{ fontSize: "13px", fontWeight: "600", color: "#185FA5" }}>
-                                                {t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload"}
+                                            <div style={{ fontSize: "13px", fontWeight: "600", color: pidNumber ? "#185FA5" : "#98A2B3" }}>
+                                                {pidNumber ? (t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload") : (t("EKYC_ENTER_PID_FIRST_CTA") || "Enter PID to upload")}
                                             </div>
-                                            <div style={{ fontSize: "12px", color: "#378ADD" }}>PDF only</div>
+                                            <div style={{ fontSize: "12px", color: pidNumber ? "#378ADD" : "#98A2B3" }}>{pidNumber ? "PDF | Max 5MB" : "Requires PID"}</div>
                                         </>
                                     )}
                                 </div>
@@ -431,6 +445,9 @@ const PropertyInfo = () => {
                                             <div style={{ fontSize: "12px", color: "#667085", marginTop: "2px" }}>
                                                 {t("EKYC_BUILDING_PHOTO") || "Building photo with GPS"}
                                             </div>
+                                            <div style={{ fontSize: "11px", color: "#98A2B3", marginTop: "2px" }}>
+                                                JPG, PNG | Max 2MB
+                                            </div>
                                         </>
                                     ) : (
                                         <>

package/src/pages/employee/Review.js

@@ -1,10 +1,11 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import {
   Card,
   CardHeader,
   SubmitBar,
   HomeIcon,
   ActionBar,
+  Toast,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -133,8 +134,89 @@ const Review = () => {
     propertyDetails = {},
   } = location.state || {};
 
-  const handleSubmit = () => {
-    history.push("/digit-ui/employee/ekyc/dashboard");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  // ── Helper: upload a File object to Filestore ──────────────────────────────
+  const uploadFile = async (file, tenantId) => {
+    if (!file) return null;
+    const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+    return res?.data?.files?.[0]?.fileStoreId || null;
+  };
+
+  // ── Helper: convert a data-URL (base64 string) to a File blob ─────────────
+  const dataUrlToFile = (dataUrl, filename) => {
+    const arr = dataUrl.split(",");
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) u8arr[n] = bstr.charCodeAt(n);
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    setToast(null);
+    try {
+      const tenantId = Digit.ULBService.getCurrentTenantId() || "dl.djb";
+      const userInfo = Digit.UserService.getUser()?.info || {};
+
+      // ── 1. Upload property document (PDF File object) ──────────────────────
+      const propertyDocFile = propertyDetails.propertyDocument || null; // File object from <input>
+      const propertyDocFileStoreId = await uploadFile(propertyDocFile, tenantId);
+
+      // ── 2. Upload building photo (data-URL string from camera capture) ─────
+      let buildingImageFileStoreId = null;
+      if (propertyDetails.buildingPhoto) {
+        const photoFile = dataUrlToFile(propertyDetails.buildingPhoto, "building_photo.jpg");
+        buildingImageFileStoreId = await uploadFile(photoFile, tenantId);
+      }
+
+      // ── 3. Build request payload ───────────────────────────────────────────
+      const requestBody = {
+        RequestInfo: {
+          apiId: "Rainmaker",
+          ver: "1.0",
+          msgId: `${Date.now()}|${navigator.language || "en_IN"}`,
+          tenantId,
+          authToken: userInfo.access_token || Digit.UserService.getUser()?.access_token || "",
+        },
+        updateType: "PROPERTY",
+        kno: kNumber,
+        pidNumber: propertyDetails.pidNumber || null,
+        propertyDocumentFileStoreId: propertyDocFileStoreId,
+        buildingImageFileStoreId: buildingImageFileStoreId,
+        userType: propertyDetails.userType?.value || null,
+        noOfFloor: propertyDetails.noOfFloors?.value ? parseInt(propertyDetails.noOfFloors.value, 10) : null,
+        typeOfConnection: propertyDetails.connectionCategory?.value || null,
+        connectionCategory: propertyDetails.connectionType?.value || null,
+        modifiedBy: userInfo.name || userInfo.userName || null,
+      };
+
+      // ── 4. Call the update API ─────────────────────────────────────────────
+      await Digit.CustomService.getResponse({
+        url: "/ekyc-service/user/application/_update",
+        params: { tenantId },
+        body: requestBody,
+        useCache: false,
+        method: "POST",
+      });
+
+      setToast({ type: "success", message: t("EKYC_SUBMIT_SUCCESS") || "Application submitted successfully!" });
+      setTimeout(() => {
+        history.push("/digit-ui/employee/ekyc/dashboard");
+      }, 1800);
+    } catch (err) {
+      console.error("eKYC Submit Error:", err);
+      setToast({
+        type: "error",
+        message: err?.response?.data?.Errors?.[0]?.message ||
+          t("EKYC_SUBMIT_ERROR") || "Submission failed. Please try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const handleEditAadhaar = () => {
@@ -150,6 +232,7 @@ const Review = () => {
   };
 
   return (
+    <Fragment>
     <div className="inbox-container">
       <style>{`
         @keyframes fadeSlideIn {
@@ -259,7 +342,7 @@ const Review = () => {
               editLabel={t("CS_COMMON_EDIT") || "Edit"}
               rows={[
                 { label: t("EKYC_NAME") || "Name", value: aadhaarDetails.userName || "Rajesh Kumar Singh" },
-                { label: t("EKYC_AADHAAR") || "Aadhaar no.", value: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234" },
+                { label: t("EKYC_AADHAAR") || "Aadhaar no.", value: aadhaarDetails.aadhaarLastFour ? `${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234" },
                 { label: t("EKYC_MOBILE_NO") || "Mobile no.", value: aadhaarDetails.mobileNumber || "XXXXXXXXXX" },
                 { label: t("EKYC_EMAIL_ADDRESS") || "Email", value: aadhaarDetails.email || null },
               ]}
@@ -317,8 +400,12 @@ const Review = () => {
           {/* Submit (Non-sticky, at form end) */}
           <div style={{ marginTop: "24px" }}>
             <SubmitBar
-              label={t("ES_COMMON_SUBMIT") || "Submit"}
+              label={isSubmitting
+                ? (t("EKYC_SUBMITTING") || "Submitting...")
+                : (t("ES_COMMON_SUBMIT") || "Submit")
+              }
               onSubmit={handleSubmit}
+              disabled={isSubmitting}
             />
           </div>
 
@@ -338,6 +425,17 @@ const Review = () => {
         </Card>
       </div>
     </div>
+
+    {/* Toast notification */}
+    {toast && (
+      <Toast
+        label={toast.message}
+        error={toast.type === "error"}
+        success={toast.type === "success"}
+        onClose={() => setToast(null)}
+      />
+    )}
+    </Fragment>
   );
 };