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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +2571 -2246
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/ConnectionDetailsView.js +94 -106
  7. package/src/components/DesktopInbox.js +117 -126
  8. package/src/components/SearchConsumer.js +103 -102
  9. package/src/pages/employee/AadhaarVerification.js +403 -319
  10. package/src/pages/employee/AddressDetails.js +560 -420
  11. package/src/pages/employee/PropertyInfo.js +60 -8
  12. package/src/pages/employee/Review.js +143 -0
  13. package/src/pages/employee/index.js +7 -0
package/src/pages/employee/AddressDetails.js CHANGED
@@ -1,451 +1,591 @@
1
1
  import React, { useState, useRef, Fragment } from "react";
2
- import { Header, Card, LabelFieldPair, CardLabel, TextInput, SubmitBar, CardHeader, RadioButtons, ActionBar, InfoBannerIcon, PropertyHouse, LocationIcon, RemoveableTag, HomeIcon, ConnectingCheckPoints, CheckPoint } from "@djb25/digit-ui-react-components";
2
+ import {
3
+ Header,
4
+ Card,
5
+ LabelFieldPair,
6
+ CardLabel,
7
+ TextInput,
8
+ SubmitBar,
9
+ CardHeader,
10
+ RadioButtons,
11
+ ActionBar,
12
+ InfoBannerIcon,
13
+ PropertyHouse,
14
+ LocationIcon,
15
+ RemoveableTag,
16
+ HomeIcon,
17
+ ConnectingCheckPoints,
18
+ CheckPoint,
19
+ } from "@djb25/digit-ui-react-components";
3
20
  import { useTranslation } from "react-i18next";
4
21
  import { useHistory, useLocation } from "react-router-dom";
5
22
 
6
23
  const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
7
- const { t } = useTranslation();
8
- const history = useHistory();
9
- const location = useLocation();
10
-
11
- // Use parent state if provided, otherwise fallback to location state or defaults
12
- const flowState = parentState || location.state || {
13
- kNumber: "EKYC-1234567890",
14
- selectedOption: { code: "SELF", name: "EKYC_SELF" },
15
- connectionDetails: null
24
+ const { t } = useTranslation();
25
+ const history = useHistory();
26
+ const location = useLocation();
27
+
28
+ // Use parent state if provided, otherwise fallback to location state or defaults
29
+ const flowState = parentState ||
30
+ location.state || {
31
+ kNumber: "EKYC-1234567890",
32
+ selectedOption: { code: "SELF", name: "EKYC_SELF" },
33
+ connectionDetails: null,
16
34
  };
17
35
 
18
- const [addressType, setAddressType] = useState({ code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" });
19
- const [correctAddress, setCorrectAddress] = useState({ code: "NO", name: "CORE_COMMON_NO" });
20
- const [fullAddress, setFullAddress] = useState("");
21
- const [flatNo, setFlatNo] = useState("");
22
- const [building, setBuilding] = useState("");
23
- const [landmark, setLandmark] = useState("");
24
- const [pincode, setPincode] = useState("");
25
- const [doorPhoto, setDoorPhoto] = useState(null);
26
- const [isLocationFetching, setIsLocationFetching] = useState(false);
27
- const fileInputRef = useRef(null);
28
-
29
- const addressOptions = [
30
- { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
31
- { code: "OLD", name: "EKYC_OLD_ADDRESS" }
32
- ];
33
-
34
- const yesNoOptions = [
35
- { code: "YES", name: "CORE_COMMON_YES" },
36
- { code: "NO", name: "CORE_COMMON_NO" }
37
- ];
38
-
39
- const handleCompleteVerification = () => {
40
- if (onComplete) {
41
- onComplete({ addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto });
42
- } else {
43
- const { kNumber, selectedOption, connectionDetails } = flowState;
44
- history.push("/digit-ui/employee/ekyc/property-info", {
45
- kNumber,
46
- selectedOption,
47
- connectionDetails,
48
- addressDetails: { addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto }
49
- });
36
+ const [addressType, setAddressType] = useState({ code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" });
37
+ const [correctAddress, setCorrectAddress] = useState({ code: "NO", name: "CORE_COMMON_NO" });
38
+ const [fullAddress, setFullAddress] = useState("");
39
+ const [flatNo, setFlatNo] = useState("");
40
+ const [building, setBuilding] = useState("");
41
+ const [landmark, setLandmark] = useState("");
42
+ const [pincode, setPincode] = useState("");
43
+ const [doorPhoto, setDoorPhoto] = useState(null);
44
+ const [isLocationFetching, setIsLocationFetching] = useState(false);
45
+ const fileInputRef = useRef(null);
46
+
47
+ const addressOptions = [
48
+ { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
49
+ { code: "OLD", name: "EKYC_OLD_ADDRESS" },
50
+ ];
51
+
52
+ const yesNoOptions = [
53
+ { code: "YES", name: "CORE_COMMON_YES" },
54
+ { code: "NO", name: "CORE_COMMON_NO" },
55
+ ];
56
+
57
+ const handleCompleteVerification = () => {
58
+ if (onComplete) {
59
+ onComplete({ addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto });
60
+ } else {
61
+ const { kNumber, selectedOption, connectionDetails } = flowState;
62
+ history.push("/digit-ui/employee/ekyc/property-info", {
63
+ kNumber,
64
+ selectedOption,
65
+ connectionDetails,
66
+ addressDetails: { addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto },
67
+ });
68
+ }
69
+ };
70
+
71
+ const handleCapture = (e) => {
72
+ const file = e.target.files[0];
73
+ if (file) {
74
+ const reader = new FileReader();
75
+ reader.onloadend = () => {
76
+ setDoorPhoto(reader.result);
77
+ };
78
+ reader.readAsDataURL(file);
79
+ }
80
+ };
81
+
82
+ const openGallery = () => {
83
+ fileInputRef.current.click();
84
+ };
85
+
86
+ const removePhoto = () => {
87
+ setDoorPhoto(null);
88
+ if (fileInputRef.current) fileInputRef.current.value = "";
89
+ };
90
+
91
+ const handleUseCurrentLocation = () => {
92
+ if (!("geolocation" in navigator)) {
93
+ alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
94
+ return;
95
+ }
96
+
97
+ setIsLocationFetching(true);
98
+ navigator.geolocation.getCurrentPosition(
99
+ async (position) => {
100
+ const { latitude, longitude } = position.coords;
101
+ try {
102
+ const response = await fetch(
103
+ `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`
104
+ );
105
+ if (!response.ok) throw new Error("Failed to fetch address");
106
+ const data = await response.json();
107
+
108
+ if (data && data.address) {
109
+ const addr = [
110
+ data.address?.amenity,
111
+ data.address?.road,
112
+ data.address?.neighbourhood,
113
+ data.address?.suburb,
114
+ data.address?.city,
115
+ data.address?.state,
116
+ data.address?.postcode,
117
+ ]
118
+ .filter(Boolean)
119
+ .join(", ");
120
+
121
+ setFullAddress(addr || "");
122
+ setPincode(data.address?.postcode || "");
123
+ setLandmark(data.address?.suburb || data.address?.neighbourhood || "");
124
+ setFlatNo(data.address?.amenity || "");
125
+ }
126
+ } catch (error) {
127
+ console.error("Error reverse geocoding:", error);
128
+ } finally {
129
+ setIsLocationFetching(false);
50
130
  }
51
- };
52
-
53
- const handleCapture = (e) => {
54
- const file = e.target.files[0];
55
- if (file) {
56
- const reader = new FileReader();
57
- reader.onloadend = () => {
58
- setDoorPhoto(reader.result);
59
- };
60
- reader.readAsDataURL(file);
61
- }
62
- };
63
-
64
- const openGallery = () => {
65
- fileInputRef.current.click();
66
- };
67
-
68
- const removePhoto = () => {
69
- setDoorPhoto(null);
70
- if (fileInputRef.current) fileInputRef.current.value = "";
71
- };
72
-
73
- const handleUseCurrentLocation = () => {
74
- if (!("geolocation" in navigator)) {
75
- alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
76
- return;
77
- }
78
-
79
- setIsLocationFetching(true);
80
- navigator.geolocation.getCurrentPosition(
81
- async (position) => {
82
- const { latitude, longitude } = position.coords;
83
- try {
84
- const response = await fetch(
85
- `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`
86
- );
87
- if (!response.ok) throw new Error("Failed to fetch address");
88
- const data = await response.json();
89
-
90
- if (data && data.address) {
91
- const addr = [
92
- data.address?.amenity,
93
- data.address?.road,
94
- data.address?.neighbourhood,
95
- data.address?.suburb,
96
- data.address?.city,
97
- data.address?.state,
98
- data.address?.postcode
99
- ].filter(Boolean).join(", ");
100
-
101
- setFullAddress(addr || "");
102
- setPincode(data.address?.postcode || "");
103
- setLandmark(data.address?.suburb || data.address?.neighbourhood || "");
104
- setFlatNo(data.address?.amenity || "");
105
- }
106
- } catch (error) {
107
- console.error("Error reverse geocoding:", error);
108
- } finally {
109
- setIsLocationFetching(false);
110
- }
111
- },
112
- (error) => {
113
- console.error("Error getting location:", error);
114
- setIsLocationFetching(false);
115
- alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch your current location. Please ensure location permissions are granted.");
116
- },
117
- { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
118
- );
119
- };
120
-
121
- const FlagIcon = () => (
122
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
123
- <path d="M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z" fill="#00703C" />
124
- </svg>
125
- );
126
-
127
- const IdCardIcon = () => (
128
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
129
- <path d="M2 7V17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5H4C2.9 5 2 5.9 2 7ZM12 11H14V13H12V11ZM12 7H14V9H12V7ZM16 11H20V13H16V11ZM16 7H20V9H16V7ZM4 7H10V15H4V7ZM20 17H4V16H20V17Z" fill="#3D51B0" />
130
- </svg>
131
- );
132
-
133
- const CameraIcon = () => (
134
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
135
- <path d="M9 2L7.17 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16.83L15 2H9ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#0068faff" />
136
- </svg>
137
- );
138
-
139
- const TargetIcon = () => (
140
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
141
- <path d="M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z" fill="#0068faff" />
142
- </svg>
143
- );
144
-
145
- const PincodeIcon = () => (
146
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
147
- <path d="M13 13V11H15V13H13ZM13 9V7H15V9H13ZM17 13V11H19V13H17ZM17 9V7H19V9H17ZM11 13V11H9V13H11ZM11 9V7H9V9H11ZM7 13V11H5V13H7ZM7 9V7H5V9H7ZM21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19Z" fill="#0068faff" />
148
- </svg>
131
+ },
132
+ (error) => {
133
+ console.error("Error getting location:", error);
134
+ setIsLocationFetching(false);
135
+ alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch your current location. Please ensure location permissions are granted.");
136
+ },
137
+ { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
149
138
  );
139
+ };
140
+
141
+ const FlagIcon = () => (
142
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
143
+ <path d="M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z" fill="#2E9E8F" />
144
+ </svg>
145
+ );
146
+
147
+ const IdCardIcon = () => (
148
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
149
+ <path
150
+ d="M2 7V17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5H4C2.9 5 2 5.9 2 7ZM12 11H14V13H12V11ZM12 7H14V9H12V7ZM16 11H20V13H16V11ZM16 7H20V9H16V7ZM4 7H10V15H4V7ZM20 17H4V16H20V17Z"
151
+ fill="#3D51B0"
152
+ />
153
+ </svg>
154
+ );
155
+
156
+ const CameraIcon = () => (
157
+ <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
158
+ <path
159
+ d="M9 2L7.17 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16.83L15 2H9ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"
160
+ fill="#0068faff"
161
+ />
162
+ </svg>
163
+ );
164
+
165
+ const TargetIcon = () => (
166
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
167
+ <path
168
+ d="M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z"
169
+ fill="#0068faff"
170
+ />
171
+ </svg>
172
+ );
173
+
174
+ const PincodeIcon = () => (
175
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
176
+ <path
177
+ d="M13 13V11H15V13H13ZM13 9V7H15V9H13ZM17 13V11H19V13H17ZM17 9V7H19V9H17ZM11 13V11H9V13H11ZM11 9V7H9V9H11ZM7 13V11H5V13H7ZM7 9V7H5V9H7ZM21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19Z"
178
+ fill="#0068faff"
179
+ />
180
+ </svg>
181
+ );
182
+
183
+ const renderContent = () => (
184
+ <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
185
+ {isSection && <hr style={{ margin: "40px 0", border: "0", borderTop: "2px solid #EAECF0" }} />}
186
+ <Header style={{ marginBottom: "24px" }}>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
187
+ <div style={{ marginBottom: "32px" }}>
188
+ <RadioButtons
189
+ options={addressOptions}
190
+ optionsKey="name"
191
+ selectedOption={addressType}
192
+ onSelect={setAddressType}
193
+ t={t}
194
+ innerStyles={{ display: "flex", alignItems: "center" }}
195
+ style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
196
+ />
197
+ </div>
198
+
199
+ {addressType.code === "AADHAAR" && (
200
+ <div
201
+ style={{
202
+ backgroundColor: "#F9FAFB",
203
+ padding: "16px",
204
+ borderRadius: "12px",
205
+ marginBottom: "24px",
206
+ border: "1px solid #EAECF0",
207
+ display: "flex",
208
+ alignItems: "flex-start",
209
+ gap: "12px",
210
+ animation: "fadeSlideIn 0.3s ease",
211
+ }}
212
+ >
213
+ <div style={{ backgroundColor: "#E7F4EE", padding: "8px", borderRadius: "8px" }}>
214
+ <LocationIcon className="icon" styles={{ fill: "#2E9E8F", width: "20px", height: "20px" }} />
215
+ </div>
216
+ <div style={{ fontSize: "16px", lineHeight: "1.6", color: "#344054", fontWeight: "500" }}>
217
+ H.No. 123, Sector 15, Rohini
218
+ <br />
219
+ Delhi - 110085
220
+ </div>
221
+ </div>
222
+ )}
150
223
 
151
- const renderContent = () => (
224
+ {addressType.code === "OLD" && (
152
225
  <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
153
- {isSection && <hr style={{ margin: "40px 0", border: "0", borderTop: "2px solid #EAECF0" }} />}
154
- <Header style={{ marginBottom: "24px" }}>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
155
- <div style={{ marginBottom: "32px" }}>
156
- <RadioButtons
157
- options={addressOptions}
158
- optionsKey="name"
159
- selectedOption={addressType}
160
- onSelect={setAddressType}
161
- t={t}
162
- innerStyles={{ display: "flex", alignItems: "center" }}
163
- style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
164
- />
226
+ <div style={{ marginBottom: "24px" }}>
227
+ <CardLabel style={{ marginBottom: "12px", fontWeight: "600", color: "#344054" }}>
228
+ {t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Do you want to correct the address?"}
229
+ </CardLabel>
230
+ <RadioButtons
231
+ options={yesNoOptions}
232
+ optionsKey="name"
233
+ selectedOption={correctAddress}
234
+ onSelect={setCorrectAddress}
235
+ t={t}
236
+ innerStyles={{ display: "flex", alignItems: "center" }}
237
+ style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
238
+ />
239
+ </div>
240
+
241
+ <div
242
+ style={{
243
+ border: "1px solid #D0D5DD",
244
+ borderRadius: "12px",
245
+ padding: "14px 16px",
246
+ display: "flex",
247
+ alignItems: "center",
248
+ justifyContent: "space-between",
249
+ marginBottom: "24px",
250
+ cursor: isLocationFetching ? "not-allowed" : "pointer",
251
+ backgroundColor: isLocationFetching ? "#F2F4F7" : "#FFFFFF",
252
+ transition: "all 0.2s ease",
253
+ opacity: isLocationFetching ? 0.7 : 1,
254
+ boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
255
+ }}
256
+ onClick={!isLocationFetching ? handleUseCurrentLocation : undefined}
257
+ onMouseOver={(e) => (!isLocationFetching ? (e.currentTarget.style.backgroundColor = "#F9FAFB") : null)}
258
+ onMouseOut={(e) => (!isLocationFetching ? (e.currentTarget.style.backgroundColor = "#FFFFFF") : null)}
259
+ >
260
+ <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
261
+ <div style={{ backgroundColor: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
262
+ {isLocationFetching ? (
263
+ <div
264
+ className="location-loader"
265
+ style={{
266
+ width: "20px",
267
+ height: "20px",
268
+ border: "2px solid #0068faff",
269
+ borderTopColor: "transparent",
270
+ borderRadius: "50%",
271
+ animation: "spin 1s linear infinite",
272
+ }}
273
+ ></div>
274
+ ) : (
275
+ <TargetIcon />
276
+ )}
277
+ </div>
278
+ <span style={{ fontWeight: "600", color: "#344054" }}>
279
+ {isLocationFetching
280
+ ? t("EKYC_FETCHING_LOCATION") || "Fetching Location..."
281
+ : t("EKYC_USE_CURRENT_LOCATION") || "Use Current Location"}
282
+ </span>
165
283
  </div>
166
-
167
- {addressType.code === "AADHAAR" && (
168
- <div style={{ backgroundColor: "#F9FAFB", padding: "16px", borderRadius: "12px", marginBottom: "24px", border: "1px solid #EAECF0", display: "flex", alignItems: "flex-start", gap: "12px", animation: "fadeSlideIn 0.3s ease" }}>
169
- <div style={{ backgroundColor: "#E7F4EE", padding: "8px", borderRadius: "8px" }}>
170
- <LocationIcon className="icon" styles={{ fill: "#00703C", width: "20px", height: "20px" }} />
171
- </div>
172
- <div style={{ fontSize: "16px", lineHeight: "1.6", color: "#344054", fontWeight: "500" }}>
173
- H.No. 123, Sector 15, Rohini<br />
174
- Delhi - 110085
175
- </div>
176
- </div>
177
- )}
178
-
179
- {addressType.code === "OLD" && (
180
- <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
181
- <div style={{ marginBottom: "24px" }}>
182
- <CardLabel style={{ marginBottom: "12px", fontWeight: "600", color: "#344054" }}>{t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Do you want to correct the address?"}</CardLabel>
183
- <RadioButtons
184
- options={yesNoOptions}
185
- optionsKey="name"
186
- selectedOption={correctAddress}
187
- onSelect={setCorrectAddress}
188
- t={t}
189
- innerStyles={{ display: "flex", alignItems: "center" }}
190
- style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
191
- />
192
- </div>
193
-
194
- <div
195
- style={{
196
- border: "1px solid #D0D5DD",
197
- borderRadius: "12px",
198
- padding: "14px 16px",
199
- display: "flex",
200
- alignItems: "center",
201
- justifyContent: "space-between",
202
- marginBottom: "24px",
203
- cursor: isLocationFetching ? "not-allowed" : "pointer",
204
- backgroundColor: isLocationFetching ? "#F2F4F7" : "#FFFFFF",
205
- transition: "all 0.2s ease",
206
- opacity: isLocationFetching ? 0.7 : 1,
207
- boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
208
- }}
209
- onClick={!isLocationFetching ? handleUseCurrentLocation : undefined}
210
- onMouseOver={(e) => !isLocationFetching ? (e.currentTarget.style.backgroundColor = "#F9FAFB") : null}
211
- onMouseOut={(e) => !isLocationFetching ? (e.currentTarget.style.backgroundColor = "#FFFFFF") : null}
212
- >
213
- <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
214
- <div style={{ backgroundColor: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
215
- {isLocationFetching ? (
216
- <div className="location-loader" style={{ width: "20px", height: "20px", border: "2px solid #0068faff", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" }}></div>
217
- ) : (
218
- <TargetIcon />
219
- )}
220
- </div>
221
- <span style={{ fontWeight: "600", color: "#344054" }}>
222
- {isLocationFetching ? (t("EKYC_FETCHING_LOCATION") || "Fetching Location...") : (t("EKYC_USE_CURRENT_LOCATION") || "Use Current Location")}
223
- </span>
224
- </div>
225
- {!isLocationFetching && <span style={{ fontSize: "20px", color: "#98A2B3" }}>›</span>}
226
- </div>
227
-
228
- <LabelFieldPair>
229
- <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FULL_ADDRESS") || "Full Address"}</CardLabel>
230
- <div className="field" style={{ position: "relative" }}>
231
- <div style={{ position: "absolute", left: "12px", top: "16px", zIndex: 1, opacity: 0.6 }}>
232
- <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
233
- </div>
234
- <TextInput
235
- value={fullAddress}
236
- onChange={(e) => setFullAddress(e.target.value)}
237
- placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter Full Address"}
238
- textInputStyle={{ paddingLeft: "40px", minHeight: "80px" }}
239
- />
240
- </div>
241
- </LabelFieldPair>
242
-
243
- <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }}>
244
- <LabelFieldPair>
245
- <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FLAT_HOUSE_NUMBER") || "Flat/House Number"}</CardLabel>
246
- <div className="field" style={{ position: "relative" }}>
247
- <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
248
- <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
249
- </div>
250
- <TextInput
251
- value={flatNo}
252
- onChange={(e) => setFlatNo(e.target.value)}
253
- placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
254
- textInputStyle={{ paddingLeft: "40px" }}
255
- />
256
- </div>
257
- </LabelFieldPair>
258
- <LabelFieldPair>
259
- <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_BUILDING_TOWER") || "Building/Tower"}</CardLabel>
260
- <div className="field" style={{ position: "relative" }}>
261
- <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
262
- <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
263
- </div>
264
- <TextInput
265
- value={building}
266
- onChange={(e) => setBuilding(e.target.value)}
267
- placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
268
- textInputStyle={{ paddingLeft: "40px" }}
269
- />
270
- </div>
271
- </LabelFieldPair>
272
- </div>
273
-
274
- <LabelFieldPair>
275
- <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_LANDMARK") || "Landmark"}</CardLabel>
276
- <div className="field" style={{ position: "relative" }}>
277
- <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
278
- <LocationIcon className="icon" styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
279
- </div>
280
- <TextInput
281
- value={landmark}
282
- onChange={(e) => setLandmark(e.target.value)}
283
- placeholder={t("EKYC_ENTER_LANDMARK") || "Near Central Park"}
284
- textInputStyle={{ paddingLeft: "40px" }}
285
- />
286
- </div>
287
- </LabelFieldPair>
288
-
289
- <LabelFieldPair>
290
- <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_PINCODE") || "Pincode"}</CardLabel>
291
- <div className="field" style={{ position: "relative" }}>
292
- <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
293
- <PincodeIcon />
294
- </div>
295
- <TextInput
296
- value={pincode}
297
- onChange={(e) => setPincode(e.target.value)}
298
- placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
299
- textInputStyle={{ paddingLeft: "40px" }}
300
- maxLength={6}
301
- />
302
- </div>
303
- </LabelFieldPair>
304
- </div>
305
- )}
306
-
307
- <hr style={{ margin: "32px 0", border: "0", borderTop: "1px solid #EAECF0" }} />
308
-
309
- <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px" }}>
310
- <div style={{ backgroundColor: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
311
- <PropertyHouse styles={{ fill: "#0068faff", width: "24px", height: "24px" }} />
312
- </div>
313
- <CardHeader style={{ margin: 0, fontSize: "20px" }}>{t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}</CardHeader>
284
+ {!isLocationFetching && <span style={{ fontSize: "20px", color: "#98A2B3" }}>›</span>}
285
+ </div>
286
+
287
+ <LabelFieldPair>
288
+ <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FULL_ADDRESS") || "Full Address"}</CardLabel>
289
+ <div className="field" style={{ position: "relative" }}>
290
+ <div style={{ position: "absolute", left: "12px", top: "16px", zIndex: 1, opacity: 0.6 }}>
291
+ <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
292
+ </div>
293
+ <TextInput
294
+ value={fullAddress}
295
+ onChange={(e) => setFullAddress(e.target.value)}
296
+ placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter Full Address"}
297
+ textInputStyle={{ paddingLeft: "40px", minHeight: "80px" }}
298
+ />
314
299
  </div>
315
-
316
- <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginBottom: "32px" }}>
317
- <div style={{ backgroundColor: "#F9FAFB", padding: "16px", borderRadius: "12px", display: "flex", alignItems: "center", gap: "16px", border: "1px solid #EAECF0" }}>
318
- <div style={{ backgroundColor: "#E7F4EE", padding: "10px", borderRadius: "10px", display: "flex" }}>
319
- <FlagIcon />
320
- </div>
321
- <div>
322
- <div style={{ color: "#00703C", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>{t("EKYC_ASSEMBLY") || "ASSEMBLY"}</div>
323
- <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>AC-12 Chandni Chowk</div>
324
- </div>
300
+ </LabelFieldPair>
301
+
302
+ <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }}>
303
+ <LabelFieldPair>
304
+ <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FLAT_HOUSE_NUMBER") || "Flat/House Number"}</CardLabel>
305
+ <div className="field" style={{ position: "relative" }}>
306
+ <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
307
+ <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
325
308
  </div>
326
- <div style={{ backgroundColor: "#F9FAFB", padding: "16px", borderRadius: "12px", display: "flex", alignItems: "center", gap: "16px", border: "1px solid #EAECF0" }}>
327
- <div style={{ backgroundColor: "#EEF4FF", padding: "10px", borderRadius: "10px", display: "flex" }}>
328
- <IdCardIcon />
329
- </div>
330
- <div>
331
- <div style={{ color: "#0068faff", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>{t("EKYC_WARD") || "WARD"}</div>
332
- <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>WARD-45 Civil Lines</div>
333
- </div>
309
+ <TextInput
310
+ value={flatNo}
311
+ onChange={(e) => setFlatNo(e.target.value)}
312
+ placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
313
+ textInputStyle={{ paddingLeft: "40px" }}
314
+ />
315
+ </div>
316
+ </LabelFieldPair>
317
+ <LabelFieldPair>
318
+ <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_BUILDING_TOWER") || "Building/Tower"}</CardLabel>
319
+ <div className="field" style={{ position: "relative" }}>
320
+ <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
321
+ <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
334
322
  </div>
323
+ <TextInput
324
+ value={building}
325
+ onChange={(e) => setBuilding(e.target.value)}
326
+ placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
327
+ textInputStyle={{ paddingLeft: "40px" }}
328
+ />
329
+ </div>
330
+ </LabelFieldPair>
331
+ </div>
332
+
333
+ <LabelFieldPair>
334
+ <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_LANDMARK") || "Landmark"}</CardLabel>
335
+ <div className="field" style={{ position: "relative" }}>
336
+ <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
337
+ <LocationIcon className="icon" styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
338
+ </div>
339
+ <TextInput
340
+ value={landmark}
341
+ onChange={(e) => setLandmark(e.target.value)}
342
+ placeholder={t("EKYC_ENTER_LANDMARK") || "Near Central Park"}
343
+ textInputStyle={{ paddingLeft: "40px" }}
344
+ />
345
+ </div>
346
+ </LabelFieldPair>
347
+
348
+ <LabelFieldPair>
349
+ <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_PINCODE") || "Pincode"}</CardLabel>
350
+ <div className="field" style={{ position: "relative" }}>
351
+ <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
352
+ <PincodeIcon />
353
+ </div>
354
+ <TextInput
355
+ value={pincode}
356
+ onChange={(e) => setPincode(e.target.value)}
357
+ placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
358
+ textInputStyle={{ paddingLeft: "40px" }}
359
+ maxLength={6}
360
+ />
335
361
  </div>
362
+ </LabelFieldPair>
363
+ </div>
364
+ )}
336
365
 
337
- <CardHeader style={{ fontSize: "18px", color: "#101828", marginBottom: "4px" }}>{t("EKYC_DOOR_PHOTO_HEADER") || "Door Photo with GPS Stamp"}</CardHeader>
338
- <div style={{ color: "#667085", fontSize: "14px", marginBottom: "16px" }}>{t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}</div>
366
+ <hr style={{ margin: "32px 0", border: "0", borderTop: "1px solid #EAECF0" }} />
339
367
 
340
- <div style={{ backgroundColor: "#FFFAEB", padding: "14px", borderRadius: "12px", display: "flex", alignItems: "center", gap: "12px", marginBottom: "20px", border: "1px solid #FEDF89" }}>
341
- <InfoBannerIcon fill="#B54708" />
342
- <div>
343
- <div style={{ fontWeight: "700", color: "#B54708", fontSize: "14px" }}>{t("EKYC_IMPORTANT") || "Important"}</div>
344
- <div style={{ fontSize: "13px", color: "#B54708", marginTop: "2px" }}>{t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"}</div>
345
- </div>
368
+ <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px" }}>
369
+ <div style={{ backgroundColor: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
370
+ <PropertyHouse styles={{ fill: "#0068faff", width: "24px", height: "24px" }} />
371
+ </div>
372
+ <CardHeader style={{ margin: 0, fontSize: "20px" }}>{t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}</CardHeader>
373
+ </div>
374
+
375
+ <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginBottom: "32px" }}>
376
+ <div
377
+ style={{
378
+ backgroundColor: "#F9FAFB",
379
+ padding: "16px",
380
+ borderRadius: "12px",
381
+ display: "flex",
382
+ alignItems: "center",
383
+ gap: "16px",
384
+ border: "1px solid #EAECF0",
385
+ }}
386
+ >
387
+ <div style={{ backgroundColor: "#E7F4EE", padding: "10px", borderRadius: "10px", display: "flex" }}>
388
+ <FlagIcon />
389
+ </div>
390
+ <div>
391
+ <div style={{ color: "#2E9E8F", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>
392
+ {t("EKYC_ASSEMBLY") || "ASSEMBLY"}
346
393
  </div>
347
-
394
+ <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>AC-12 Chandni Chowk</div>
395
+ </div>
396
+ </div>
397
+ <div
398
+ style={{
399
+ backgroundColor: "#F9FAFB",
400
+ padding: "16px",
401
+ borderRadius: "12px",
402
+ display: "flex",
403
+ alignItems: "center",
404
+ gap: "16px",
405
+ border: "1px solid #EAECF0",
406
+ }}
407
+ >
408
+ <div style={{ backgroundColor: "#EEF4FF", padding: "10px", borderRadius: "10px", display: "flex" }}>
409
+ <IdCardIcon />
410
+ </div>
411
+ <div>
412
+ <div style={{ color: "#0068faff", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>
413
+ {t("EKYC_WARD") || "WARD"}
414
+ </div>
415
+ <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>WARD-45 Civil Lines</div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <CardHeader style={{ fontSize: "18px", color: "#101828", marginBottom: "4px" }}>
421
+ {t("EKYC_DOOR_PHOTO_HEADER") || "Door Photo with GPS Stamp"}
422
+ </CardHeader>
423
+ <div style={{ color: "#667085", fontSize: "14px", marginBottom: "16px" }}>
424
+ {t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}
425
+ </div>
426
+
427
+ <div
428
+ style={{
429
+ backgroundColor: "#FFFAEB",
430
+ padding: "14px",
431
+ borderRadius: "12px",
432
+ display: "flex",
433
+ alignItems: "center",
434
+ gap: "12px",
435
+ marginBottom: "20px",
436
+ border: "1px solid #FEDF89",
437
+ }}
438
+ >
439
+ <InfoBannerIcon fill="#B54708" />
440
+ <div>
441
+ <div style={{ fontWeight: "700", color: "#B54708", fontSize: "14px" }}>{t("EKYC_IMPORTANT") || "Important"}</div>
442
+ <div style={{ fontSize: "13px", color: "#B54708", marginTop: "2px" }}>
443
+ {t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"}
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <div
449
+ style={{
450
+ border: "2px dashed #D0D5DD",
451
+ borderRadius: "16px",
452
+ padding: doorPhoto ? "12px" : "40px 24px",
453
+ textAlign: "center",
454
+ cursor: "pointer",
455
+ position: "relative",
456
+ overflow: "hidden",
457
+ minHeight: "180px",
458
+ display: "flex",
459
+ flexDirection: "column",
460
+ alignItems: "center",
461
+ justifyContent: "center",
462
+ backgroundColor: "#F9FAFB",
463
+ transition: "all 0.2s ease",
464
+ boxShadow: "inset 0px 2px 4px rgba(0, 0, 0, 0.02)",
465
+ }}
466
+ onClick={!doorPhoto ? openGallery : undefined}
467
+ onMouseOver={(e) => (!doorPhoto ? (e.currentTarget.style.borderColor = "#0068faff") : null)}
468
+ onMouseOut={(e) => (!doorPhoto ? (e.currentTarget.style.borderColor = "#D0D5DD") : null)}
469
+ >
470
+ <input type="file" ref={fileInputRef} onChange={handleCapture} accept="image/*" style={{ display: "none" }} />
471
+ {!doorPhoto ? (
472
+ <>
348
473
  <div
474
+ style={{
475
+ backgroundColor: "#FFFFFF",
476
+ width: "64px",
477
+ height: "64px",
478
+ borderRadius: "50%",
479
+ display: "flex",
480
+ alignItems: "center",
481
+ justifyContent: "center",
482
+ margin: "0 auto 16px",
483
+ boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1)",
484
+ }}
485
+ >
486
+ <CameraIcon />
487
+ </div>
488
+ <div style={{ fontWeight: "700", fontSize: "16px", marginBottom: "4px", color: "#101828" }}>
489
+ {t("EKYC_TAP_TO_CAPTURE") || "Tap to Capture"}
490
+ </div>
491
+ <div style={{ color: "#667085", fontSize: "14px" }}>{t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture Door Image"}</div>
492
+ </>
493
+ ) : (
494
+ <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", justifyContent: "center" }}>
495
+ <img
496
+ src={doorPhoto}
497
+ alt="Door"
498
+ style={{ width: "100%", maxHeight: "300px", objectFit: "cover", borderRadius: "12px", display: "block" }}
499
+ />
500
+ <div style={{ position: "absolute", top: "12px", right: "12px" }}>
501
+ <button
502
+ onClick={(e) => {
503
+ e.stopPropagation();
504
+ removePhoto();
505
+ }}
349
506
  style={{
350
- border: "2px dashed #D0D5DD",
351
- borderRadius: "16px",
352
- padding: doorPhoto ? "12px" : "40px 24px",
353
- textAlign: "center",
354
- cursor: "pointer",
355
- position: "relative",
356
- overflow: "hidden",
357
- minHeight: "180px",
358
- display: "flex",
359
- flexDirection: "column",
360
- alignItems: "center",
361
- justifyContent: "center",
362
- backgroundColor: "#F9FAFB",
363
- transition: "all 0.2s ease",
364
- boxShadow: "inset 0px 2px 4px rgba(0, 0, 0, 0.02)"
507
+ background: "#FFFFFF",
508
+ border: "1px solid #EAECF0",
509
+ borderRadius: "8px",
510
+ padding: "8px",
511
+ display: "flex",
512
+ boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
513
+ cursor: "pointer",
365
514
  }}
366
- onClick={!doorPhoto ? openGallery : undefined}
367
- onMouseOver={(e) => !doorPhoto ? e.currentTarget.style.borderColor = "#0068faff" : null}
368
- onMouseOut={(e) => !doorPhoto ? e.currentTarget.style.borderColor = "#D0D5DD" : null}
369
- >
370
- <input
371
- type="file"
372
- ref={fileInputRef}
373
- onChange={handleCapture}
374
- accept="image/*"
375
- style={{ display: "none" }}
376
- />
377
- {!doorPhoto ? (
378
- <>
379
- <div style={{ backgroundColor: "#FFFFFF", width: "64px", height: "64px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px", boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1)" }}>
380
- <CameraIcon />
381
- </div>
382
- <div style={{ fontWeight: "700", fontSize: "16px", marginBottom: "4px", color: "#101828" }}>{t("EKYC_TAP_TO_CAPTURE") || "Tap to Capture"}</div>
383
- <div style={{ color: "#667085", fontSize: "14px" }}>{t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture Door Image"}</div>
384
- </>
385
- ) : (
386
- <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", justifyContent: "center" }}>
387
- <img src={doorPhoto} alt="Door" style={{ width: "100%", maxHeight: "300px", objectFit: "cover", borderRadius: "12px", display: "block" }} />
388
- <div style={{ position: "absolute", top: "12px", right: "12px" }}>
389
- <button
390
- onClick={(e) => { e.stopPropagation(); removePhoto(); }}
391
- style={{ background: "#FFFFFF", border: "1px solid #EAECF0", borderRadius: "8px", padding: "8px", display: "flex", boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)", cursor: "pointer" }}
392
- >
393
- <RemoveableTag text="" onClick={() => { }} extraStyles={{ tagStyles: { margin: 0, padding: 0 } }} />
394
- </button>
395
- </div>
396
- </div>
397
- )}
515
+ >
516
+ <RemoveableTag text="" onClick={() => {}} extraStyles={{ tagStyles: { margin: 0, padding: 0 } }} />
517
+ </button>
398
518
  </div>
399
-
400
- <ActionBar>
401
- <SubmitBar label={isSection ? t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed" : t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"} onSubmit={handleCompleteVerification} />
402
- </ActionBar>
403
- </div>
404
- );
405
-
406
- if (isSection) return renderContent();
407
-
408
- return (
409
- <div className="inbox-container">
410
- <style>{`
519
+ </div>
520
+ )}
521
+ </div>
522
+
523
+ <ActionBar>
524
+ <SubmitBar
525
+ label={
526
+ isSection
527
+ ? t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"
528
+ : t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"
529
+ }
530
+ onSubmit={handleCompleteVerification}
531
+ />
532
+ </ActionBar>
533
+ </div>
534
+ );
535
+
536
+ if (isSection) return renderContent();
537
+
538
+ return (
539
+ <div className="inbox-container">
540
+ <style>{`
411
541
  @keyframes spin { to { transform: rotate(360deg); } }
412
542
  @keyframes fadeSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
413
543
  `}</style>
414
544
 
415
- <div className="filters-container">
416
- {/* Sidebar Title Card */}
417
- <Card className="sidebar-title-card" style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}>
418
- <div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
419
- <HomeIcon style={{ width: "24px", height: "24px" }} />
420
- </div>
421
- <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
422
- {t("EKYC_PROCESS")}
423
- </div>
424
- </Card>
425
-
426
- {/* Progress Steps Sidebar */}
427
- <div style={{ padding: "8px 16px" }}>
428
- <ConnectingCheckPoints>
429
- <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
430
- <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
431
- <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
432
- </ConnectingCheckPoints>
433
- </div>
434
- </div>
435
-
436
- <div style={{ flex: 1, marginLeft: "16px" }}>
437
- <Card>
438
- <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
439
- <Header>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
440
- <div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
441
- {t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{flowState?.kNumber}</span>
442
- </div>
443
- </div>
444
- {renderContent()}
445
- </Card>
446
- </div>
545
+ <div className="filters-container">
546
+ {/* Sidebar Title Card */}
547
+ <Card
548
+ className="sidebar-title-card"
549
+ style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
550
+ >
551
+ <div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
552
+ <HomeIcon style={{ width: "24px", height: "24px" }} />
553
+ </div>
554
+ <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROCESS")}</div>
555
+ </Card>
556
+
557
+ {/* Progress Steps Sidebar */}
558
+ <div
559
+ style={{
560
+ backgroundColor: "#FFFFFF",
561
+ padding: "16px",
562
+ borderRadius: "8px",
563
+ border: "1px solid #EAECF0",
564
+ boxShadow: "0 2px 4px rgba(0,0,0,0.02)",
565
+ }}
566
+ >
567
+ <ConnectingCheckPoints>
568
+ <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
569
+ <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
570
+ <CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={false} />
571
+ <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
572
+ </ConnectingCheckPoints>
447
573
  </div>
448
- );
574
+ </div>
575
+
576
+ <div style={{ flex: 1, marginLeft: "16px" }}>
577
+ <Card>
578
+ <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
579
+ <Header>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
580
+ <div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
581
+ {t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{flowState?.kNumber}</span>
582
+ </div>
583
+ </div>
584
+ {renderContent()}
585
+ </Card>
586
+ </div>
587
+ </div>
588
+ );
449
589
  };
450
590
 
451
591
  export default AddressDetails;