@djb25/digit-ui-module-ekyc 1.0.1 → 1.0.3

package/src/pages/employee/PropertyInfo.js

@@ -9,6 +9,11 @@ const PropertyInfo = () => {
     const location = useLocation();
 
     const { kNumber } = location.state || { kNumber: "EKYC-1234567890" };
+    const tenantId = Digit.ULBService.getCurrentTenantId();
+    const { data: dataV0, isLoading: isLoadingV0 } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
+    const { data, isLoading } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
+    const { data: dataV1, isLoading: isLoadingV1 } = Digit.Hooks.ekyc.useGetUserType(tenantId);
+    const { data: dataV2, isLoading: isLoadingV2 } = Digit.Hooks.ekyc.useGetFloorCount(tenantId);
 
     const [ownerType, setOwnerType] = useState("OWNER");
     const [pidNumber, setPidNumber] = useState("");
@@ -22,7 +27,19 @@ const PropertyInfo = () => {
     const cameraRef = useRef(null);
 
     const handleSaveAndContinue = () => {
-        history.push("/digit-ui/employee/ekyc/dashboard");
+        history.push("/digit-ui/employee/ekyc/review", {
+            ...location.state,
+            propertyDetails: {
+                ownerType,
+                pidNumber,
+                connectionType,
+                connectionCategory,
+                userType,
+                noOfFloors,
+                propertyDocument,
+                buildingPhoto
+            }
+        });
     };
 
     const SuitcaseIcon = () => (
@@ -73,7 +90,7 @@ const PropertyInfo = () => {
                 </Card>
 
                 {/* Progress Steps Sidebar */}
-                <div style={{ padding: "8px 16px" }}>
+                <div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
                     <ConnectingCheckPoints>
                         <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
                         <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
@@ -164,17 +181,50 @@ const PropertyInfo = () => {
 
                         {/* Dropdowns */}
                         {[
-                            { label: "Type_of_Connection", state: connectionType, setState: setConnectionType },
-                            { label: "Connection_Category", state: connectionCategory, setState: setConnectionCategory },
-                            { label: "User_Type", state: userType, setState: setUserType },
-                            { label: "No_of_Floor", state: noOfFloors, setState: setNoOfFloors }
+                            {
+                                label: "Type_of_Connection",
+                                state: connectionCategory,
+                                setState: setConnectionCategory,
+                                options: dataV0?.["ws-services-calculation"]?.propertyTypeV2?.map(item => ({
+                                    label: t(item.code),
+                                    value: item.code
+                                })) || []
+                            },
+                            {
+                                label: "Connection_Category",
+                                state: connectionType,
+                                setState: setConnectionType,
+                                options: data?.["ws-services-calculation"]?.connectionTypeV2?.map(item => ({
+                                    label: t(item.code),
+                                    value: item.code
+                                })) || []
+                            },
+                            // { label: "User_Type", state: userType, setState: setUserType },
+                            {
+                                label: "User_Type",
+                                state: userType,
+                                setState: setUserType,
+                                options: dataV1?.["ws-services-calculation"]?.userTypeV2?.map(item => ({
+                                    label: t(item.code),
+                                    value: item.code
+                                })) || []
+                            },
+                            {
+                                label: "No_of_Floor",
+                                state: noOfFloors,
+                                setState: setNoOfFloors,
+                                options: dataV2?.["ws-services-calculation"]?.floorCount?.map(item => ({
+                                    label: t(item.code),
+                                    value: item.code
+                                })) || []
+                            }
                         ].map((item, idx) => (
                             <div key={idx} style={{ marginBottom: "20px" }}>
                                 <CardLabel style={{ fontSize: "14px", fontWeight: "600", color: "#344054", marginBottom: "8px" }}>{t(item.label)}</CardLabel>
                                 <Dropdown
                                     selected={item.state}
                                     select={item.setState}
-                                    option={[{ label: `Select ${item.label}`, value: "" }]}
+                                    option={item.options || [{ label: `Select ${item.label}`, value: "" }]}
                                     optionKey="label"
                                     t={t}
                                     style={{ borderRadius: "12px", border: "1px solid #D0D5DD", height: "48px" }}
@@ -340,7 +390,9 @@ const PropertyInfo = () => {
                                 {t("This_section_is_enabled_only_if_user_is_not_the_owner.")}
                             </div>
                         </div>
-                        <SubmitBar label={t("Save_&_Continue")} onSubmit={handleSaveAndContinue} style={{ borderRadius: "8px", height: "48px", marginTop: "24px", marginRight: "1100px" }} />
+                        <div style={{ display: "flex", justifyContent: "flex-start", marginTop: "24px" }}>
+                            <SubmitBar label={t("Save_&_Continue")} onSubmit={handleSaveAndContinue} style={{ borderRadius: "8px", height: "48px", margin: 0 }} />
+                        </div>
                     </Card>
 
 

package/src/pages/employee/Review.js

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  Header,
+  Card,
+  CardHeader,
+  StatusTable,
+  Row,
+  SubmitBar,
+  HomeIcon,
+  ConnectingCheckPoints,
+  CheckPoint,
+  ActionBar,
+} from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
+
+const Review = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const location = useLocation();
+
+  // Catch data from previous steps via the router state
+  const { kNumber = "NA", aadhaarDetails = {}, addressDetails = {}, propertyDetails = {} } = location.state || {};
+
+  const handleSubmit = () => {
+    // Here to mimic final submit and go to dashboard/inbox
+    history.push("/digit-ui/employee/ekyc/dashboard");
+  };
+
+  const handleEditAadhaar = () => {
+    history.push("/digit-ui/employee/ekyc/aadhaar-verification", location.state);
+  };
+
+  const handleEditAddress = () => {
+    history.push("/digit-ui/employee/ekyc/address-details", location.state);
+  };
+
+  const handleEditProperty = () => {
+    history.push("/digit-ui/employee/ekyc/property-info", location.state);
+  };
+
+  return (
+    <div className="inbox-container">
+      <div className="filters-container">
+        {/* Sidebar Title Card */}
+        <Card
+          className="sidebar-title-card"
+          style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
+        >
+          <div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
+            <HomeIcon style={{ width: "24px", height: "24px" }} />
+          </div>
+          <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROCESS")}</div>
+        </Card>
+
+        {/* Progress Steps Sidebar */}
+        <div
+          style={{
+            backgroundColor: "#FFFFFF",
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #EAECF0",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.02)",
+          }}
+        >
+          <ConnectingCheckPoints>
+            <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
+            <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
+            <CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={true} />
+            <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} isCompleted={false} />
+          </ConnectingCheckPoints>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, marginLeft: "16px" }}>
+        <Card>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
+            <Header>{t("EKYC_REVIEW_DETAILS") || "Review Details"}</Header>
+            <div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
+              {t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{kNumber}</span>
+            </div>
+          </div>
+
+          {/* Aadhaar Details Card */}
+          <Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+              <CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>
+                {t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Details"}
+              </CardHeader>
+              <span onClick={handleEditAadhaar} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
+                {t("CS_COMMON_EDIT")}
+              </span>
+            </div>
+            <StatusTable>
+              <Row label={t("EKYC_NAME")} text={aadhaarDetails.userName || "Rajesh Kumar Singh"} />
+              <Row label={t("EKYC_AADHAAR")} text={aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : t("CS_NA")} />
+              <Row label={t("EKYC_MOBILE_NO")} text={aadhaarDetails.mobileNumber || t("CS_NA")} />
+              <Row label={t("EKYC_EMAIL_ADDRESS")} text={aadhaarDetails.email || t("CS_NA")} />
+            </StatusTable>
+          </Card>
+
+          {/* Address Details Card */}
+          <Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+              <CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>
+                {t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
+              </CardHeader>
+              <span onClick={handleEditAddress} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
+                {t("CS_COMMON_EDIT")}
+              </span>
+            </div>
+            <StatusTable>
+              <Row label={t("EKYC_FULL_ADDRESS")} text={addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini"} />
+              <Row label={t("EKYC_PINCODE")} text={addressDetails.pincode || "110085"} />
+            </StatusTable>
+          </Card>
+
+          {/* Property Details Card */}
+          <Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
+              <CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROPERTY_INFO") || "Property Information"}</CardHeader>
+              <span onClick={handleEditProperty} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
+                {t("CS_COMMON_EDIT")}
+              </span>
+            </div>
+            <StatusTable>
+              <Row label={t("Property_Owner")} text={propertyDetails.ownerType || "OWNER"} />
+              <Row label={t("PID_Number")} text={propertyDetails.pidNumber || t("CS_NA")} />
+              <Row label={t("Type_of_Connection")} text={propertyDetails.connectionType?.label || t("CS_NA")} />
+              <Row label={t("Connection_Category")} text={propertyDetails.connectionCategory?.label || t("CS_NA")} />
+            </StatusTable>
+          </Card>
+
+          <ActionBar>
+            <SubmitBar label={t("ES_COMMON_SUBMIT") || "Submit"} onSubmit={handleSubmit} />
+          </ActionBar>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Review;

package/src/pages/employee/index.js

@@ -7,6 +7,7 @@ import Create from "./Create";
 import AadhaarVerification from "./AadhaarVerification";
 import AddressDetails from "./AddressDetails";
 import PropertyInfo from "./PropertyInfo";
+import Review from "./Review";
 
 const EmployeeApp = ({ path }) => {
     const { t } = useTranslation();
@@ -22,6 +23,7 @@ const EmployeeApp = ({ path }) => {
         if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
         if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
         if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
+        if (pathname.includes("/review")) return "EKYC_REVIEW";
         return "ES_COMMON_INBOX";
     };
 
@@ -76,6 +78,11 @@ const EmployeeApp = ({ path }) => {
                         path={`${path}/property-info`}
                         component={() => <PropertyInfo />}
                     />
+                    
+                    <PrivateRoute
+                        path={`${path}/review`}
+                        component={() => <Review />}
+                    />
 
                     <PrivateRoute
                         path={`${path}/`}