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

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 +2092 -1477
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/ConnectionDetailsView.js +83 -79
  7. package/src/components/DesktopInbox.js +117 -126
  8. package/src/components/SearchConsumer.js +103 -102
  9. package/src/pages/employee/AadhaarVerification.js +526 -330
  10. package/src/pages/employee/AddressDetails.js +637 -429
  11. package/src/pages/employee/Create.js +5 -19
  12. package/src/pages/employee/PropertyInfo.js +409 -316
  13. package/src/pages/employee/Review.js +335 -109
package/dist/index.modern.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo, useState, useCallback, useRef, Fragment } from 'react';
2
2
  import { Link, useHistory, useRouteMatch, useLocation, Switch } from 'react-router-dom';
3
- import { PersonIcon, EmployeeModuleCard, Card, HomeIcon, Table, Header, TextInput, SubmitBar, Loader, DetailsCard, FilterForm, FilterFormField, Dropdown, CardHeader, StatusTable, Row, CardLabel, Modal, RadioButtons, Toast, LocationIcon, LabelFieldPair, PropertyHouse, InfoBannerIcon, RemoveableTag, ActionBar, ConnectingCheckPoints, CheckPoint, TickMark, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute } from '@djb25/digit-ui-react-components';
3
+ import { PersonIcon as PersonIcon$1, EmployeeModuleCard, Card, HomeIcon, Table, Header, TextInput, SubmitBar, Loader, DetailsCard, FilterForm, FilterFormField, Dropdown, CardHeader, StatusTable, Row, CardLabel, Modal, RadioButtons, Toast, LocationIcon, PropertyHouse, InfoBannerIcon, ActionBar, LabelFieldPair, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute } from '@djb25/digit-ui-react-components';
4
4
  import { useTranslation } from 'react-i18next';
5
5
 
6
6
  const EKYCCard = () => {
@@ -8,7 +8,7 @@ const EKYCCard = () => {
8
8
  t
9
9
  } = useTranslation();
10
10
  const propsForModuleCard = {
11
- Icon: /*#__PURE__*/React.createElement(PersonIcon, null),
11
+ Icon: /*#__PURE__*/React.createElement(PersonIcon$1, null),
12
12
  moduleName: t("ACTION_TEST_EKYC"),
13
13
  kpis: [{
14
14
  count: "-",
@@ -148,7 +148,7 @@ const DesktopInbox = ({
148
148
  }, /*#__PURE__*/React.createElement("div", {
149
149
  className: "icon-container",
150
150
  style: {
151
- color: "#F47738",
151
+ color: "#3A8DCC",
152
152
  marginRight: "12px"
153
153
  }
154
154
  }, /*#__PURE__*/React.createElement(HomeIcon, {
@@ -259,7 +259,7 @@ const SearchConsumer = ({
259
259
  }, /*#__PURE__*/React.createElement("div", {
260
260
  className: "icon-container",
261
261
  style: {
262
- color: "#F47738",
262
+ color: "#3A8DCC",
263
263
  marginRight: "12px"
264
264
  }
265
265
  }, /*#__PURE__*/React.createElement(HomeIcon, {
@@ -724,27 +724,27 @@ const ConnectionDetailsView = ({
724
724
  style: {
725
725
  marginTop: "24px"
726
726
  }
727
- }, t("EKYC_CONNECTION_DETAILS")), connectionDetails !== null && connectionDetails !== void 0 && connectionDetails.connectionDetailsInfo ? /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
727
+ }, t("EKYC_CONNECTION_DETAILS")), connectionDetails !== null && connectionDetails !== void 0 && connectionDetails.connectionDetails ? /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
728
728
  label: t("EKYC_CONSUMER_NAME"),
729
- text: connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")
729
+ text: connectionDetails.connectionDetails.consumerName || t("CS_NA")
730
730
  }), /*#__PURE__*/React.createElement(Row, {
731
731
  label: t("EKYC_ADDRESS"),
732
- text: connectionDetails.connectionDetailsInfo.address || t("CS_NA")
732
+ text: connectionDetails.connectionDetails.address || t("CS_NA")
733
733
  }), /*#__PURE__*/React.createElement(Row, {
734
734
  label: t("EKYC_CONNECTION_TYPE"),
735
- text: connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")
735
+ text: connectionDetails.connectionDetails.connectionType || t("CS_NA")
736
736
  }), /*#__PURE__*/React.createElement(Row, {
737
737
  label: t("EKYC_METER_NO"),
738
- text: connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")
738
+ text: connectionDetails.connectionDetails.meterNumber || t("CS_NA")
739
739
  }), /*#__PURE__*/React.createElement(Row, {
740
740
  label: t("EKYC_PHONE_NO"),
741
- text: connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")
741
+ text: connectionDetails.connectionDetails.phoneNumber || t("CS_NA")
742
742
  }), /*#__PURE__*/React.createElement(Row, {
743
743
  label: t("EKYC_EMAIL"),
744
- text: connectionDetails.connectionDetailsInfo.email || t("CS_NA")
744
+ text: connectionDetails.connectionDetails.email || t("CS_NA")
745
745
  }), /*#__PURE__*/React.createElement(Row, {
746
746
  label: t("EKYC_STATUS"),
747
- text: connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")
747
+ text: connectionDetails.connectionDetails.statusflag || t("CS_NA")
748
748
  })) : /*#__PURE__*/React.createElement(CardLabel, null, t("EKYC_NO_CONNECTION_DETAILS_FOUND")), /*#__PURE__*/React.createElement("div", {
749
749
  style: {
750
750
  display: "flex",
@@ -816,34 +816,19 @@ const Create = () => {
816
816
  data: connectionDetails,
817
817
  error,
818
818
  revalidate
819
- } = Digit.Hooks.ekyc.useGetConnection({
819
+ } = Digit.Hooks.ekyc.useSearchConnection({
820
820
  tenantId,
821
821
  details: {
822
- kno: searchParams.kNumber
822
+ kno: searchParams.kNumber,
823
+ name: searchParams.kName
823
824
  }
824
825
  }, {
825
- enabled: searchPerformed && !!searchParams.kNumber
826
- });
827
- const {
828
- mutate: validateUser,
829
- isLoading: isValidating
830
- } = Digit.Hooks.ekyc.useValidateUser(tenantId, {
831
- onSuccess: data => {
832
- var _data$responseInfo;
833
- if ((data === null || data === void 0 ? void 0 : (_data$responseInfo = data.responseInfo) === null || _data$responseInfo === void 0 ? void 0 : _data$responseInfo.status) === "successful") ; else {
834
- setShowToast({
835
- error: true,
836
- label: (data === null || data === void 0 ? void 0 : data.message) || t("EKYC_VALIDATION_FAILED")
837
- });
838
- setSearchPerformed(false);
839
- sessionStorage.removeItem("EKYC_CREATE_SEARCH_PERFORMED");
840
- }
841
- },
826
+ enabled: searchPerformed && !!searchParams.kNumber && !!searchParams.kName,
842
827
  onError: error => {
843
828
  var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
844
829
  setShowToast({
845
830
  error: true,
846
- label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || t("EKYC_VALIDATION_ERROR_PLEASE_ENTER_THE_CORRECT_CREDENTIALS")
831
+ label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || t("EKYC_SEARCH_ERROR_PLEASE_ENTER_THE_CORRECT_CREDENTIALS")
847
832
  });
848
833
  setSearchPerformed(false);
849
834
  sessionStorage.removeItem("EKYC_CREATE_SEARCH_PERFORMED");
@@ -871,10 +856,6 @@ const Create = () => {
871
856
  setSearchPerformed(true);
872
857
  sessionStorage.setItem("EKYC_CREATE_SEARCH_PARAMS", JSON.stringify(params));
873
858
  sessionStorage.setItem("EKYC_CREATE_SEARCH_PERFORMED", "true");
874
- validateUser({
875
- kno: params.kNumber,
876
- name: params.kName
877
- });
878
859
  };
879
860
  const closeToast = () => {
880
861
  setShowToast(null);
@@ -886,7 +867,7 @@ const Create = () => {
886
867
  kNumber: searchParams.kNumber,
887
868
  kName: searchParams.kName,
888
869
  connectionDetails: connectionDetails,
889
- isLoading: isSearching || isValidating
870
+ isLoading: isSearching
890
871
  }), !searchPerformed && !isSearching && /*#__PURE__*/React.createElement(Card, {
891
872
  style: {
892
873
  textAlign: "center",
@@ -904,11 +885,203 @@ const Create = () => {
904
885
  }));
905
886
  };
906
887
 
888
+ const FlagIcon = ({
889
+ size: _size = 20
890
+ }) => /*#__PURE__*/React.createElement("svg", {
891
+ width: _size,
892
+ height: _size,
893
+ viewBox: "0 0 24 24",
894
+ fill: "none"
895
+ }, /*#__PURE__*/React.createElement("path", {
896
+ d: "M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z",
897
+ fill: "#0F6E56"
898
+ }));
899
+ const IdCardIcon = ({
900
+ size: _size2 = 20
901
+ }) => /*#__PURE__*/React.createElement("svg", {
902
+ width: _size2,
903
+ height: _size2,
904
+ viewBox: "0 0 24 24",
905
+ fill: "none"
906
+ }, /*#__PURE__*/React.createElement("path", {
907
+ 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",
908
+ fill: "#185FA5"
909
+ }));
910
+ const CameraIcon = ({
911
+ size: _size3 = 28
912
+ }) => /*#__PURE__*/React.createElement("svg", {
913
+ width: _size3,
914
+ height: _size3,
915
+ viewBox: "0 0 24 24",
916
+ fill: "none"
917
+ }, /*#__PURE__*/React.createElement("path", {
918
+ 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",
919
+ fill: "#185FA5"
920
+ }));
921
+ const TargetIcon = ({
922
+ size: _size4 = 20
923
+ }) => /*#__PURE__*/React.createElement("svg", {
924
+ width: _size4,
925
+ height: _size4,
926
+ viewBox: "0 0 24 24",
927
+ fill: "none"
928
+ }, /*#__PURE__*/React.createElement("path", {
929
+ 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",
930
+ fill: "#185FA5"
931
+ }));
932
+ const PincodeIcon = ({
933
+ size: _size5 = 18
934
+ }) => /*#__PURE__*/React.createElement("svg", {
935
+ width: _size5,
936
+ height: _size5,
937
+ viewBox: "0 0 24 24",
938
+ fill: "none"
939
+ }, /*#__PURE__*/React.createElement("path", {
940
+ 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",
941
+ fill: "currentColor"
942
+ }));
943
+ const TrashIcon = ({
944
+ size: _size6 = 16
945
+ }) => /*#__PURE__*/React.createElement("svg", {
946
+ width: _size6,
947
+ height: _size6,
948
+ viewBox: "0 0 24 24",
949
+ fill: "none",
950
+ stroke: "#D92D20",
951
+ strokeWidth: "2",
952
+ strokeLinecap: "round"
953
+ }, /*#__PURE__*/React.createElement("polyline", {
954
+ points: "3 6 5 6 21 6"
955
+ }), /*#__PURE__*/React.createElement("path", {
956
+ d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
957
+ }), /*#__PURE__*/React.createElement("path", {
958
+ d: "M10 11v6M14 11v6"
959
+ }), /*#__PURE__*/React.createElement("path", {
960
+ d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
961
+ }));
962
+ const CheckIcon = ({
963
+ size: _size7 = 11,
964
+ color: _color = "#fff"
965
+ }) => /*#__PURE__*/React.createElement("svg", {
966
+ width: _size7,
967
+ height: _size7,
968
+ viewBox: "0 0 24 24",
969
+ fill: "none",
970
+ stroke: _color,
971
+ strokeWidth: "3",
972
+ strokeLinecap: "round"
973
+ }, /*#__PURE__*/React.createElement("polyline", {
974
+ points: "20 6 9 17 4 12"
975
+ }));
976
+ const IconInput = ({
977
+ icon,
978
+ topAligned: _topAligned = false,
979
+ inputStyle: _inputStyle = {},
980
+ ...props
981
+ }) => /*#__PURE__*/React.createElement("div", {
982
+ style: {
983
+ position: "relative",
984
+ width: "100%"
985
+ }
986
+ }, /*#__PURE__*/React.createElement("div", {
987
+ style: {
988
+ position: "absolute",
989
+ left: "10px",
990
+ ...(_topAligned ? {
991
+ top: "14px"
992
+ } : {
993
+ top: "50%",
994
+ transform: "translateY(-50%)"
995
+ }),
996
+ zIndex: 1,
997
+ opacity: 0.45,
998
+ display: "flex",
999
+ pointerEvents: "none"
1000
+ }
1001
+ }, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
1002
+ textInputStyle: {
1003
+ paddingLeft: "36px",
1004
+ paddingRight: "12px",
1005
+ ..._inputStyle
1006
+ }
1007
+ }, props)));
1008
+ const SectionHead = ({
1009
+ icon,
1010
+ label
1011
+ }) => /*#__PURE__*/React.createElement("div", {
1012
+ style: {
1013
+ display: "flex",
1014
+ alignItems: "center",
1015
+ gap: "8px",
1016
+ marginBottom: "16px",
1017
+ marginTop: "4px"
1018
+ }
1019
+ }, /*#__PURE__*/React.createElement("div", {
1020
+ style: {
1021
+ opacity: 0.5,
1022
+ display: "flex"
1023
+ }
1024
+ }, icon), /*#__PURE__*/React.createElement("span", {
1025
+ style: {
1026
+ fontSize: "15px",
1027
+ fontWeight: "600",
1028
+ color: "#0B0C0C",
1029
+ whiteSpace: "nowrap"
1030
+ }
1031
+ }, label), /*#__PURE__*/React.createElement("div", {
1032
+ style: {
1033
+ flex: 1,
1034
+ height: "1px",
1035
+ background: "#EAECF0"
1036
+ }
1037
+ }));
1038
+ const AdminCard = ({
1039
+ bgColor,
1040
+ iconBg,
1041
+ icon,
1042
+ labelColor,
1043
+ label,
1044
+ value
1045
+ }) => /*#__PURE__*/React.createElement("div", {
1046
+ style: {
1047
+ backgroundColor: bgColor,
1048
+ padding: "14px 16px",
1049
+ borderRadius: "8px",
1050
+ display: "flex",
1051
+ alignItems: "center",
1052
+ gap: "14px",
1053
+ border: "0.5px solid #EAECF0"
1054
+ }
1055
+ }, /*#__PURE__*/React.createElement("div", {
1056
+ style: {
1057
+ backgroundColor: iconBg,
1058
+ padding: "8px",
1059
+ borderRadius: "8px",
1060
+ display: "flex",
1061
+ flexShrink: 0
1062
+ }
1063
+ }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1064
+ style: {
1065
+ color: labelColor,
1066
+ fontSize: "10px",
1067
+ fontWeight: "600",
1068
+ textTransform: "uppercase",
1069
+ letterSpacing: "0.05em",
1070
+ marginBottom: "3px"
1071
+ }
1072
+ }, label), /*#__PURE__*/React.createElement("div", {
1073
+ style: {
1074
+ fontSize: "14px",
1075
+ fontWeight: "600",
1076
+ color: "#101828"
1077
+ }
1078
+ }, value)));
907
1079
  const AddressDetails = ({
908
1080
  isSection: _isSection = false,
909
1081
  onComplete,
910
1082
  parentState
911
1083
  }) => {
1084
+ var _flowState$connection;
912
1085
  const {
913
1086
  t
914
1087
  } = useTranslation();
@@ -922,6 +1095,7 @@ const AddressDetails = ({
922
1095
  },
923
1096
  connectionDetails: null
924
1097
  };
1098
+ const addrDetails = ((_flowState$connection = flowState.connectionDetails) === null || _flowState$connection === void 0 ? void 0 : _flowState$connection.addressDetails) || {};
925
1099
  const [addressType, setAddressType] = useState({
926
1100
  code: "AADHAAR",
927
1101
  name: "EKYC_AADHAAR_ADDRESS"
@@ -930,11 +1104,11 @@ const AddressDetails = ({
930
1104
  code: "NO",
931
1105
  name: "CORE_COMMON_NO"
932
1106
  });
933
- const [fullAddress, setFullAddress] = useState("");
934
- const [flatNo, setFlatNo] = useState("");
935
- const [building, setBuilding] = useState("");
936
- const [landmark, setLandmark] = useState("");
937
- const [pincode, setPincode] = useState("");
1107
+ const [fullAddress, setFullAddress] = useState(addrDetails.fullAddress || "");
1108
+ const [flatNo, setFlatNo] = useState(addrDetails.flatHouseNumber || "");
1109
+ const [building, setBuilding] = useState(addrDetails.buildingTower || "");
1110
+ const [landmark, setLandmark] = useState(addrDetails.landmark || "");
1111
+ const [pincode, setPincode] = useState(addrDetails.pinCode || "");
938
1112
  const [doorPhoto, setDoorPhoto] = useState(null);
939
1113
  const [isLocationFetching, setIsLocationFetching] = useState(false);
940
1114
  const fileInputRef = useRef(null);
@@ -953,16 +1127,17 @@ const AddressDetails = ({
953
1127
  name: "CORE_COMMON_NO"
954
1128
  }];
955
1129
  const handleCompleteVerification = () => {
1130
+ const payload = {
1131
+ addressType,
1132
+ fullAddress,
1133
+ flatNo,
1134
+ building,
1135
+ landmark,
1136
+ pincode,
1137
+ doorPhoto
1138
+ };
956
1139
  if (onComplete) {
957
- onComplete({
958
- addressType,
959
- fullAddress,
960
- flatNo,
961
- building,
962
- landmark,
963
- pincode,
964
- doorPhoto
965
- });
1140
+ onComplete(payload);
966
1141
  } else {
967
1142
  const {
968
1143
  kNumber,
@@ -973,30 +1148,16 @@ const AddressDetails = ({
973
1148
  kNumber,
974
1149
  selectedOption,
975
1150
  connectionDetails,
976
- addressDetails: {
977
- addressType,
978
- fullAddress,
979
- flatNo,
980
- building,
981
- landmark,
982
- pincode,
983
- doorPhoto
984
- }
1151
+ addressDetails: payload
985
1152
  });
986
1153
  }
987
1154
  };
988
1155
  const handleCapture = e => {
989
1156
  const file = e.target.files[0];
990
- if (file) {
991
- const reader = new FileReader();
992
- reader.onloadend = () => {
993
- setDoorPhoto(reader.result);
994
- };
995
- reader.readAsDataURL(file);
996
- }
997
- };
998
- const openGallery = () => {
999
- fileInputRef.current.click();
1157
+ if (!file) return;
1158
+ const reader = new FileReader();
1159
+ reader.onloadend = () => setDoorPhoto(reader.result);
1160
+ reader.readAsDataURL(file);
1000
1161
  };
1001
1162
  const removePhoto = () => {
1002
1163
  setDoorPhoto(null);
@@ -1008,105 +1169,55 @@ const AddressDetails = ({
1008
1169
  return;
1009
1170
  }
1010
1171
  setIsLocationFetching(true);
1011
- navigator.geolocation.getCurrentPosition(async position => {
1012
- const {
1172
+ navigator.geolocation.getCurrentPosition(async ({
1173
+ coords: {
1013
1174
  latitude,
1014
1175
  longitude
1015
- } = position.coords;
1176
+ }
1177
+ }) => {
1016
1178
  try {
1017
- const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`);
1018
- if (!response.ok) throw new Error("Failed to fetch address");
1019
- const data = await response.json();
1020
- if (data && data.address) {
1021
- var _data$address, _data$address2, _data$address3, _data$address4, _data$address5, _data$address6, _data$address7, _data$address8, _data$address9, _data$address0, _data$address1;
1022
- const addr = [(_data$address = data.address) === null || _data$address === void 0 ? void 0 : _data$address.amenity, (_data$address2 = data.address) === null || _data$address2 === void 0 ? void 0 : _data$address2.road, (_data$address3 = data.address) === null || _data$address3 === void 0 ? void 0 : _data$address3.neighbourhood, (_data$address4 = data.address) === null || _data$address4 === void 0 ? void 0 : _data$address4.suburb, (_data$address5 = data.address) === null || _data$address5 === void 0 ? void 0 : _data$address5.city, (_data$address6 = data.address) === null || _data$address6 === void 0 ? void 0 : _data$address6.state, (_data$address7 = data.address) === null || _data$address7 === void 0 ? void 0 : _data$address7.postcode].filter(Boolean).join(", ");
1023
- setFullAddress(addr || "");
1024
- setPincode(((_data$address8 = data.address) === null || _data$address8 === void 0 ? void 0 : _data$address8.postcode) || "");
1025
- setLandmark(((_data$address9 = data.address) === null || _data$address9 === void 0 ? void 0 : _data$address9.suburb) || ((_data$address0 = data.address) === null || _data$address0 === void 0 ? void 0 : _data$address0.neighbourhood) || "");
1026
- setFlatNo(((_data$address1 = data.address) === null || _data$address1 === void 0 ? void 0 : _data$address1.amenity) || "");
1179
+ const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`);
1180
+ if (!res.ok) throw new Error("Geocode failed");
1181
+ const data = await res.json();
1182
+ if (data !== null && data !== void 0 && data.address) {
1183
+ const a = data.address;
1184
+ setFullAddress([a.amenity, a.road, a.neighbourhood, a.suburb, a.city, a.state, a.postcode].filter(Boolean).join(", "));
1185
+ setPincode(a.postcode || "");
1186
+ setLandmark(a.suburb || a.neighbourhood || "");
1187
+ setFlatNo(a.amenity || "");
1027
1188
  }
1028
- } catch (error) {
1029
- console.error("Error reverse geocoding:", error);
1189
+ } catch (err) {
1190
+ console.error("Reverse geocode error:", err);
1030
1191
  } finally {
1031
1192
  setIsLocationFetching(false);
1032
1193
  }
1033
- }, error => {
1034
- console.error("Error getting location:", error);
1194
+ }, err => {
1195
+ console.error("Geolocation error:", err);
1035
1196
  setIsLocationFetching(false);
1036
- alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch your current location. Please ensure location permissions are granted.");
1197
+ alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch location. Please grant location permissions.");
1037
1198
  }, {
1038
1199
  enableHighAccuracy: true,
1039
1200
  timeout: 10000,
1040
1201
  maximumAge: 0
1041
1202
  });
1042
1203
  };
1043
- const FlagIcon = () => /*#__PURE__*/React.createElement("svg", {
1044
- width: "24",
1045
- height: "24",
1046
- viewBox: "0 0 24 24",
1047
- fill: "none",
1048
- xmlns: "http://www.w3.org/2000/svg"
1049
- }, /*#__PURE__*/React.createElement("path", {
1050
- d: "M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z",
1051
- fill: "#00703C"
1052
- }));
1053
- const IdCardIcon = () => /*#__PURE__*/React.createElement("svg", {
1054
- width: "24",
1055
- height: "24",
1056
- viewBox: "0 0 24 24",
1057
- fill: "none",
1058
- xmlns: "http://www.w3.org/2000/svg"
1059
- }, /*#__PURE__*/React.createElement("path", {
1060
- 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",
1061
- fill: "#3D51B0"
1062
- }));
1063
- const CameraIcon = () => /*#__PURE__*/React.createElement("svg", {
1064
- width: "32",
1065
- height: "32",
1066
- viewBox: "0 0 24 24",
1067
- fill: "none",
1068
- xmlns: "http://www.w3.org/2000/svg"
1069
- }, /*#__PURE__*/React.createElement("path", {
1070
- 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",
1071
- fill: "#0068faff"
1072
- }));
1073
- const TargetIcon = () => /*#__PURE__*/React.createElement("svg", {
1074
- width: "24",
1075
- height: "24",
1076
- viewBox: "0 0 24 24",
1077
- fill: "none",
1078
- xmlns: "http://www.w3.org/2000/svg"
1079
- }, /*#__PURE__*/React.createElement("path", {
1080
- 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",
1081
- fill: "#0068faff"
1082
- }));
1083
- const PincodeIcon = () => /*#__PURE__*/React.createElement("svg", {
1084
- width: "24",
1085
- height: "24",
1086
- viewBox: "0 0 24 24",
1087
- fill: "none",
1088
- xmlns: "http://www.w3.org/2000/svg"
1089
- }, /*#__PURE__*/React.createElement("path", {
1090
- 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",
1091
- fill: "#0068faff"
1092
- }));
1093
1204
  const renderContent = () => /*#__PURE__*/React.createElement("div", {
1094
1205
  style: {
1095
1206
  animation: "fadeSlideIn 0.3s ease"
1096
1207
  }
1097
- }, _isSection && /*#__PURE__*/React.createElement("hr", {
1098
- style: {
1099
- margin: "40px 0",
1100
- border: "0",
1101
- borderTop: "2px solid #EAECF0"
1102
- }
1103
- }), /*#__PURE__*/React.createElement(Header, {
1104
- style: {
1105
- marginBottom: "24px"
1106
- }
1107
- }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
1208
+ }, /*#__PURE__*/React.createElement(SectionHead, {
1209
+ icon: /*#__PURE__*/React.createElement(LocationIcon, {
1210
+ className: "icon",
1211
+ styles: {
1212
+ fill: "#0B0C0C",
1213
+ width: "16px",
1214
+ height: "16px"
1215
+ }
1216
+ }),
1217
+ label: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"
1218
+ }), /*#__PURE__*/React.createElement("div", {
1108
1219
  style: {
1109
- marginBottom: "32px"
1220
+ marginBottom: "20px"
1110
1221
  }
1111
1222
  }, /*#__PURE__*/React.createElement(RadioButtons, {
1112
1223
  options: addressOptions,
@@ -1120,56 +1231,61 @@ const AddressDetails = ({
1120
1231
  },
1121
1232
  style: {
1122
1233
  display: "flex",
1123
- gap: "50px",
1124
- justifyContent: "flex-start"
1234
+ gap: "40px"
1125
1235
  }
1126
1236
  })), addressType.code === "AADHAAR" && /*#__PURE__*/React.createElement("div", {
1127
1237
  style: {
1128
- backgroundColor: "#F9FAFB",
1129
- padding: "16px",
1130
- borderRadius: "12px",
1131
- marginBottom: "24px",
1132
- border: "1px solid #EAECF0",
1238
+ backgroundColor: "#E1F5EE",
1239
+ border: "0.5px solid #5DCAA5",
1240
+ borderRadius: "8px",
1241
+ padding: "14px 16px",
1133
1242
  display: "flex",
1134
1243
  alignItems: "flex-start",
1135
1244
  gap: "12px",
1245
+ marginBottom: "20px",
1136
1246
  animation: "fadeSlideIn 0.3s ease"
1137
1247
  }
1138
1248
  }, /*#__PURE__*/React.createElement("div", {
1139
1249
  style: {
1140
- backgroundColor: "#E7F4EE",
1141
- padding: "8px",
1142
- borderRadius: "8px"
1250
+ backgroundColor: "#9FE1CB",
1251
+ padding: "6px",
1252
+ borderRadius: "6px",
1253
+ display: "flex",
1254
+ flexShrink: 0
1143
1255
  }
1144
1256
  }, /*#__PURE__*/React.createElement(LocationIcon, {
1145
1257
  className: "icon",
1146
1258
  styles: {
1147
- fill: "#00703C",
1148
- width: "20px",
1149
- height: "20px"
1259
+ fill: "#085041",
1260
+ width: "16px",
1261
+ height: "16px"
1150
1262
  }
1151
1263
  })), /*#__PURE__*/React.createElement("div", {
1152
1264
  style: {
1153
- fontSize: "16px",
1265
+ fontSize: "14px",
1154
1266
  lineHeight: "1.6",
1155
- color: "#344054",
1267
+ color: "#04342C",
1156
1268
  fontWeight: "500"
1157
1269
  }
1158
- }, "H.No. 123, Sector 15, Rohini", /*#__PURE__*/React.createElement("br", null), "Delhi - 110085")), addressType.code === "OLD" && /*#__PURE__*/React.createElement("div", {
1270
+ }, addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085")), addressType.code === "OLD" && /*#__PURE__*/React.createElement("div", {
1159
1271
  style: {
1160
1272
  animation: "fadeSlideIn 0.3s ease"
1161
1273
  }
1162
1274
  }, /*#__PURE__*/React.createElement("div", {
1163
1275
  style: {
1164
- marginBottom: "24px"
1276
+ display: "flex",
1277
+ alignItems: "center",
1278
+ justifyContent: "space-between",
1279
+ marginBottom: "14px"
1165
1280
  }
1166
1281
  }, /*#__PURE__*/React.createElement(CardLabel, {
1167
1282
  style: {
1168
- marginBottom: "12px",
1169
- fontWeight: "600",
1170
- color: "#344054"
1283
+ fontWeight: "500",
1284
+ marginBottom: 0,
1285
+ fontSize: "13px",
1286
+ color: "#505A5F"
1171
1287
  }
1172
- }, t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Do you want to correct the address?"), /*#__PURE__*/React.createElement(RadioButtons, {
1288
+ }, t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Correct the address?"), /*#__PURE__*/React.createElement(RadioButtons, {
1173
1289
  options: yesNoOptions,
1174
1290
  optionsKey: "name",
1175
1291
  selectedOption: correctAddress,
@@ -1177,31 +1293,32 @@ const AddressDetails = ({
1177
1293
  t: t,
1178
1294
  innerStyles: {
1179
1295
  display: "flex",
1180
- alignItems: "center"
1296
+ gap: "20px"
1181
1297
  },
1182
1298
  style: {
1183
- display: "flex",
1184
- gap: "50px",
1185
- justifyContent: "flex-start"
1299
+ marginBottom: 0
1186
1300
  }
1187
1301
  })), /*#__PURE__*/React.createElement("div", {
1302
+ onClick: !isLocationFetching ? handleUseCurrentLocation : undefined,
1188
1303
  style: {
1189
- border: "1px solid #D0D5DD",
1190
- borderRadius: "12px",
1191
- padding: "14px 16px",
1304
+ border: "0.5px solid #D0D5DD",
1305
+ borderRadius: "8px",
1306
+ padding: "12px 16px",
1192
1307
  display: "flex",
1193
1308
  alignItems: "center",
1194
1309
  justifyContent: "space-between",
1195
- marginBottom: "24px",
1310
+ marginBottom: "20px",
1196
1311
  cursor: isLocationFetching ? "not-allowed" : "pointer",
1197
- backgroundColor: isLocationFetching ? "#F2F4F7" : "#FFFFFF",
1198
- transition: "all 0.2s ease",
1199
- opacity: isLocationFetching ? 0.7 : 1,
1200
- boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
1312
+ backgroundColor: isLocationFetching ? "#F9FAFB" : "#fff",
1313
+ transition: "background 0.15s",
1314
+ opacity: isLocationFetching ? 0.7 : 1
1201
1315
  },
1202
- onClick: !isLocationFetching ? handleUseCurrentLocation : undefined,
1203
- onMouseOver: e => !isLocationFetching ? e.currentTarget.style.backgroundColor = "#F9FAFB" : null,
1204
- onMouseOut: e => !isLocationFetching ? e.currentTarget.style.backgroundColor = "#FFFFFF" : null
1316
+ onMouseOver: e => {
1317
+ if (!isLocationFetching) e.currentTarget.style.background = "#F9FAFB";
1318
+ },
1319
+ onMouseOut: e => {
1320
+ if (!isLocationFetching) e.currentTarget.style.background = "#fff";
1321
+ }
1205
1322
  }, /*#__PURE__*/React.createElement("div", {
1206
1323
  style: {
1207
1324
  display: "flex",
@@ -1210,347 +1327,244 @@ const AddressDetails = ({
1210
1327
  }
1211
1328
  }, /*#__PURE__*/React.createElement("div", {
1212
1329
  style: {
1213
- backgroundColor: "#EEF4FF",
1214
- padding: "8px",
1215
- borderRadius: "8px"
1330
+ backgroundColor: "#E6F1FB",
1331
+ padding: "7px",
1332
+ borderRadius: "7px",
1333
+ display: "flex"
1216
1334
  }
1217
1335
  }, isLocationFetching ? /*#__PURE__*/React.createElement("div", {
1218
- className: "location-loader",
1219
1336
  style: {
1220
- width: "20px",
1221
- height: "20px",
1222
- border: "2px solid #0068faff",
1337
+ width: "18px",
1338
+ height: "18px",
1339
+ border: "2px solid #185FA5",
1223
1340
  borderTopColor: "transparent",
1224
1341
  borderRadius: "50%",
1225
1342
  animation: "spin 1s linear infinite"
1226
1343
  }
1227
- }) : /*#__PURE__*/React.createElement(TargetIcon, null)), /*#__PURE__*/React.createElement("span", {
1344
+ }) : /*#__PURE__*/React.createElement(TargetIcon, {
1345
+ size: 18
1346
+ })), /*#__PURE__*/React.createElement("span", {
1228
1347
  style: {
1229
- fontWeight: "600",
1348
+ fontWeight: "500",
1349
+ fontSize: "14px",
1230
1350
  color: "#344054"
1231
1351
  }
1232
- }, isLocationFetching ? t("EKYC_FETCHING_LOCATION") || "Fetching Location..." : t("EKYC_USE_CURRENT_LOCATION") || "Use Current Location")), !isLocationFetching && /*#__PURE__*/React.createElement("span", {
1233
- style: {
1234
- fontSize: "20px",
1235
- color: "#98A2B3"
1236
- }
1237
- }, "\u203A")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
1352
+ }, isLocationFetching ? t("EKYC_FETCHING_LOCATION") || "Fetching location..." : t("EKYC_USE_CURRENT_LOCATION") || "Use current location")), !isLocationFetching && /*#__PURE__*/React.createElement("span", {
1238
1353
  style: {
1239
- fontWeight: "600"
1354
+ fontSize: "18px",
1355
+ color: "#98A2B3",
1356
+ lineHeight: 1
1240
1357
  }
1241
- }, t("EKYC_FULL_ADDRESS") || "Full Address"), /*#__PURE__*/React.createElement("div", {
1242
- className: "field",
1358
+ }, "\u203A")), /*#__PURE__*/React.createElement("div", {
1243
1359
  style: {
1244
- position: "relative"
1360
+ marginBottom: "14px"
1245
1361
  }
1246
1362
  }, /*#__PURE__*/React.createElement("div", {
1247
1363
  style: {
1248
- position: "absolute",
1249
- left: "12px",
1250
- top: "16px",
1251
- zIndex: 1,
1252
- opacity: 0.6
1253
- }
1254
- }, /*#__PURE__*/React.createElement(PropertyHouse, {
1255
- styles: {
1256
- fill: "#0068faff",
1257
- width: "20px",
1258
- height: "20px"
1259
- }
1260
- })), /*#__PURE__*/React.createElement(TextInput, {
1364
+ fontSize: "11px",
1365
+ fontWeight: "600",
1366
+ color: "#667085",
1367
+ textTransform: "uppercase",
1368
+ letterSpacing: "0.04em",
1369
+ marginBottom: "6px"
1370
+ }
1371
+ }, t("EKYC_FULL_ADDRESS") || "Full address"), /*#__PURE__*/React.createElement(IconInput, {
1372
+ icon: /*#__PURE__*/React.createElement(PropertyHouse, {
1373
+ styles: {
1374
+ fill: "#0068fa",
1375
+ width: "15px",
1376
+ height: "15px"
1377
+ }
1378
+ }),
1379
+ topAligned: true,
1261
1380
  value: fullAddress,
1262
1381
  onChange: e => setFullAddress(e.target.value),
1263
- placeholder: t("EKYC_ENTER_FULL_ADDRESS") || "Enter Full Address",
1264
- textInputStyle: {
1265
- paddingLeft: "40px",
1266
- minHeight: "80px"
1382
+ placeholder: t("EKYC_ENTER_FULL_ADDRESS") || "Enter full address",
1383
+ inputStyle: {
1384
+ minHeight: "72px"
1267
1385
  }
1268
- }))), /*#__PURE__*/React.createElement("div", {
1386
+ })), /*#__PURE__*/React.createElement("div", {
1269
1387
  style: {
1270
1388
  display: "grid",
1271
1389
  gridTemplateColumns: "1fr 1fr",
1272
- gap: "24px"
1273
- }
1274
- }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
1275
- style: {
1276
- fontWeight: "600"
1277
- }
1278
- }, t("EKYC_FLAT_HOUSE_NUMBER") || "Flat/House Number"), /*#__PURE__*/React.createElement("div", {
1279
- className: "field",
1280
- style: {
1281
- position: "relative"
1390
+ gap: "14px",
1391
+ marginBottom: "14px"
1282
1392
  }
1283
- }, /*#__PURE__*/React.createElement("div", {
1393
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1284
1394
  style: {
1285
- position: "absolute",
1286
- left: "12px",
1287
- top: "50%",
1288
- transform: "translateY(-50%)",
1289
- zIndex: 1,
1290
- opacity: 0.6
1291
- }
1292
- }, /*#__PURE__*/React.createElement(PropertyHouse, {
1293
- styles: {
1294
- fill: "#0068faff",
1295
- width: "20px",
1296
- height: "20px"
1297
- }
1298
- })), /*#__PURE__*/React.createElement(TextInput, {
1395
+ fontSize: "11px",
1396
+ fontWeight: "600",
1397
+ color: "#667085",
1398
+ textTransform: "uppercase",
1399
+ letterSpacing: "0.04em",
1400
+ marginBottom: "6px"
1401
+ }
1402
+ }, t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no."), /*#__PURE__*/React.createElement(IconInput, {
1403
+ icon: /*#__PURE__*/React.createElement(PropertyHouse, {
1404
+ styles: {
1405
+ fill: "#0068fa",
1406
+ width: "15px",
1407
+ height: "15px"
1408
+ }
1409
+ }),
1299
1410
  value: flatNo,
1300
1411
  onChange: e => setFlatNo(e.target.value),
1301
- placeholder: t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B",
1302
- textInputStyle: {
1303
- paddingLeft: "40px"
1304
- }
1305
- }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
1306
- style: {
1307
- fontWeight: "600"
1308
- }
1309
- }, t("EKYC_BUILDING_TOWER") || "Building/Tower"), /*#__PURE__*/React.createElement("div", {
1310
- className: "field",
1311
- style: {
1312
- position: "relative"
1313
- }
1314
- }, /*#__PURE__*/React.createElement("div", {
1412
+ placeholder: t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"
1413
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1315
1414
  style: {
1316
- position: "absolute",
1317
- left: "12px",
1318
- top: "50%",
1319
- transform: "translateY(-50%)",
1320
- zIndex: 1,
1321
- opacity: 0.6
1322
- }
1323
- }, /*#__PURE__*/React.createElement(PropertyHouse, {
1324
- styles: {
1325
- fill: "#0068faff",
1326
- width: "20px",
1327
- height: "20px"
1328
- }
1329
- })), /*#__PURE__*/React.createElement(TextInput, {
1415
+ fontSize: "11px",
1416
+ fontWeight: "600",
1417
+ color: "#667085",
1418
+ textTransform: "uppercase",
1419
+ letterSpacing: "0.04em",
1420
+ marginBottom: "6px"
1421
+ }
1422
+ }, t("EKYC_BUILDING_TOWER") || "Building / Tower"), /*#__PURE__*/React.createElement(IconInput, {
1423
+ icon: /*#__PURE__*/React.createElement(PropertyHouse, {
1424
+ styles: {
1425
+ fill: "#0068fa",
1426
+ width: "15px",
1427
+ height: "15px"
1428
+ }
1429
+ }),
1330
1430
  value: building,
1331
1431
  onChange: e => setBuilding(e.target.value),
1332
- placeholder: t("EKYC_ENTER_BUILDING") || "e.g. Tower 4",
1333
- textInputStyle: {
1334
- paddingLeft: "40px"
1335
- }
1336
- })))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
1337
- style: {
1338
- fontWeight: "600"
1339
- }
1340
- }, t("EKYC_LANDMARK") || "Landmark"), /*#__PURE__*/React.createElement("div", {
1341
- className: "field",
1432
+ placeholder: t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"
1433
+ }))), /*#__PURE__*/React.createElement("div", {
1342
1434
  style: {
1343
- position: "relative"
1435
+ display: "grid",
1436
+ gridTemplateColumns: "1fr 1fr",
1437
+ gap: "14px",
1438
+ marginBottom: "4px"
1344
1439
  }
1345
- }, /*#__PURE__*/React.createElement("div", {
1440
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1346
1441
  style: {
1347
- position: "absolute",
1348
- left: "12px",
1349
- top: "50%",
1350
- transform: "translateY(-50%)",
1351
- zIndex: 1,
1352
- opacity: 0.6
1353
- }
1354
- }, /*#__PURE__*/React.createElement(LocationIcon, {
1355
- className: "icon",
1356
- styles: {
1357
- fill: "#0068faff",
1358
- width: "20px",
1359
- height: "20px"
1360
- }
1361
- })), /*#__PURE__*/React.createElement(TextInput, {
1442
+ fontSize: "11px",
1443
+ fontWeight: "600",
1444
+ color: "#667085",
1445
+ textTransform: "uppercase",
1446
+ letterSpacing: "0.04em",
1447
+ marginBottom: "6px"
1448
+ }
1449
+ }, t("EKYC_LANDMARK") || "Landmark"), /*#__PURE__*/React.createElement(IconInput, {
1450
+ icon: /*#__PURE__*/React.createElement(LocationIcon, {
1451
+ className: "icon",
1452
+ styles: {
1453
+ fill: "#0068fa",
1454
+ width: "15px",
1455
+ height: "15px"
1456
+ }
1457
+ }),
1362
1458
  value: landmark,
1363
1459
  onChange: e => setLandmark(e.target.value),
1364
- placeholder: t("EKYC_ENTER_LANDMARK") || "Near Central Park",
1365
- textInputStyle: {
1366
- paddingLeft: "40px"
1367
- }
1368
- }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
1460
+ placeholder: t("EKYC_ENTER_LANDMARK") || "Near Central Park"
1461
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1369
1462
  style: {
1370
- fontWeight: "600"
1371
- }
1372
- }, t("EKYC_PINCODE") || "Pincode"), /*#__PURE__*/React.createElement("div", {
1373
- className: "field",
1374
- style: {
1375
- position: "relative"
1376
- }
1377
- }, /*#__PURE__*/React.createElement("div", {
1378
- style: {
1379
- position: "absolute",
1380
- left: "12px",
1381
- top: "50%",
1382
- transform: "translateY(-50%)",
1383
- zIndex: 1,
1384
- opacity: 0.6
1463
+ fontSize: "11px",
1464
+ fontWeight: "600",
1465
+ color: "#667085",
1466
+ textTransform: "uppercase",
1467
+ letterSpacing: "0.04em",
1468
+ marginBottom: "6px"
1385
1469
  }
1386
- }, /*#__PURE__*/React.createElement(PincodeIcon, null)), /*#__PURE__*/React.createElement(TextInput, {
1470
+ }, t("EKYC_PINCODE") || "Pincode"), /*#__PURE__*/React.createElement(IconInput, {
1471
+ icon: /*#__PURE__*/React.createElement(PincodeIcon, {
1472
+ size: 15
1473
+ }),
1387
1474
  value: pincode,
1388
- onChange: e => setPincode(e.target.value),
1389
- placeholder: t("EKYC_ENTER_PINCODE") || "6-digit pincode",
1390
- textInputStyle: {
1391
- paddingLeft: "40px"
1475
+ onChange: e => {
1476
+ if (/^\d*$/.test(e.target.value)) setPincode(e.target.value);
1392
1477
  },
1478
+ placeholder: t("EKYC_ENTER_PINCODE") || "6-digit pincode",
1393
1479
  maxLength: 6
1394
1480
  })))), /*#__PURE__*/React.createElement("hr", {
1395
1481
  style: {
1396
- margin: "32px 0",
1397
- border: "0",
1482
+ margin: "24px 0",
1483
+ border: 0,
1398
1484
  borderTop: "1px solid #EAECF0"
1399
1485
  }
1486
+ }), /*#__PURE__*/React.createElement(SectionHead, {
1487
+ icon: /*#__PURE__*/React.createElement(PropertyHouse, {
1488
+ styles: {
1489
+ fill: "#0B0C0C",
1490
+ width: "16px",
1491
+ height: "16px"
1492
+ }
1493
+ }),
1494
+ label: t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"
1400
1495
  }), /*#__PURE__*/React.createElement("div", {
1401
1496
  style: {
1402
- display: "flex",
1403
- alignItems: "center",
1404
- gap: "10px",
1405
- marginBottom: "20px"
1497
+ display: "grid",
1498
+ gridTemplateColumns: "1fr 1fr",
1499
+ gap: "14px",
1500
+ marginBottom: "24px"
1406
1501
  }
1407
- }, /*#__PURE__*/React.createElement("div", {
1408
- style: {
1409
- backgroundColor: "#EEF4FF",
1410
- padding: "8px",
1411
- borderRadius: "8px"
1412
- }
1413
- }, /*#__PURE__*/React.createElement(PropertyHouse, {
1414
- styles: {
1415
- fill: "#0068faff",
1416
- width: "24px",
1417
- height: "24px"
1418
- }
1419
- })), /*#__PURE__*/React.createElement(CardHeader, {
1420
- style: {
1421
- margin: 0,
1422
- fontSize: "20px"
1423
- }
1424
- }, t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division")), /*#__PURE__*/React.createElement("div", {
1425
- style: {
1426
- display: "grid",
1427
- gridTemplateColumns: "1fr 1fr",
1428
- gap: "24px",
1429
- marginBottom: "32px"
1430
- }
1431
- }, /*#__PURE__*/React.createElement("div", {
1432
- style: {
1433
- backgroundColor: "#F9FAFB",
1434
- padding: "16px",
1435
- borderRadius: "12px",
1436
- display: "flex",
1437
- alignItems: "center",
1438
- gap: "16px",
1439
- border: "1px solid #EAECF0"
1440
- }
1441
- }, /*#__PURE__*/React.createElement("div", {
1442
- style: {
1443
- backgroundColor: "#E7F4EE",
1444
- padding: "10px",
1445
- borderRadius: "10px",
1446
- display: "flex"
1447
- }
1448
- }, /*#__PURE__*/React.createElement(FlagIcon, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1449
- style: {
1450
- color: "#00703C",
1451
- fontSize: "12px",
1452
- fontWeight: "700",
1453
- textTransform: "uppercase",
1454
- letterSpacing: "0.5px"
1455
- }
1456
- }, t("EKYC_ASSEMBLY") || "ASSEMBLY"), /*#__PURE__*/React.createElement("div", {
1457
- style: {
1458
- fontSize: "15px",
1459
- fontWeight: "700",
1460
- color: "#101828",
1461
- marginTop: "2px"
1462
- }
1463
- }, "AC-12 Chandni Chowk"))), /*#__PURE__*/React.createElement("div", {
1464
- style: {
1465
- backgroundColor: "#F9FAFB",
1466
- padding: "16px",
1467
- borderRadius: "12px",
1468
- display: "flex",
1469
- alignItems: "center",
1470
- gap: "16px",
1471
- border: "1px solid #EAECF0"
1472
- }
1473
- }, /*#__PURE__*/React.createElement("div", {
1474
- style: {
1475
- backgroundColor: "#EEF4FF",
1476
- padding: "10px",
1477
- borderRadius: "10px",
1478
- display: "flex"
1502
+ }, /*#__PURE__*/React.createElement(AdminCard, {
1503
+ bgColor: "#E1F5EE",
1504
+ iconBg: "#9FE1CB",
1505
+ icon: /*#__PURE__*/React.createElement(FlagIcon, {
1506
+ size: 18
1507
+ }),
1508
+ labelColor: "#0F6E56",
1509
+ label: t("EKYC_ASSEMBLY") || "Assembly",
1510
+ value: addrDetails.assembly || "AC-12 Chandni Chowk"
1511
+ }), /*#__PURE__*/React.createElement(AdminCard, {
1512
+ bgColor: "#E6F1FB",
1513
+ iconBg: "#B5D4F4",
1514
+ icon: /*#__PURE__*/React.createElement(IdCardIcon, {
1515
+ size: 18
1516
+ }),
1517
+ labelColor: "#185FA5",
1518
+ label: t("EKYC_WARD") || "Ward",
1519
+ value: addrDetails.ward || "WARD-45 Civil Lines"
1520
+ })), /*#__PURE__*/React.createElement("hr", {
1521
+ style: {
1522
+ margin: "24px 0",
1523
+ border: 0,
1524
+ borderTop: "1px solid #EAECF0"
1479
1525
  }
1480
- }, /*#__PURE__*/React.createElement(IdCardIcon, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1526
+ }), /*#__PURE__*/React.createElement(SectionHead, {
1527
+ icon: /*#__PURE__*/React.createElement(CameraIcon, {
1528
+ size: 16
1529
+ }),
1530
+ label: t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"
1531
+ }), /*#__PURE__*/React.createElement("div", {
1481
1532
  style: {
1482
- color: "#0068faff",
1483
1533
  fontSize: "12px",
1484
- fontWeight: "700",
1485
- textTransform: "uppercase",
1486
- letterSpacing: "0.5px"
1487
- }
1488
- }, t("EKYC_WARD") || "WARD"), /*#__PURE__*/React.createElement("div", {
1489
- style: {
1490
- fontSize: "15px",
1491
- fontWeight: "700",
1492
- color: "#101828",
1493
- marginTop: "2px"
1494
- }
1495
- }, "WARD-45 Civil Lines")))), /*#__PURE__*/React.createElement(CardHeader, {
1496
- style: {
1497
- fontSize: "18px",
1498
- color: "#101828",
1499
- marginBottom: "4px"
1500
- }
1501
- }, t("EKYC_DOOR_PHOTO_HEADER") || "Door Photo with GPS Stamp"), /*#__PURE__*/React.createElement("div", {
1502
- style: {
1503
1534
  color: "#667085",
1504
- fontSize: "14px",
1505
- marginBottom: "16px"
1535
+ marginBottom: "12px"
1506
1536
  }
1507
1537
  }, t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"), /*#__PURE__*/React.createElement("div", {
1508
1538
  style: {
1509
1539
  backgroundColor: "#FFFAEB",
1510
- padding: "14px",
1511
- borderRadius: "12px",
1540
+ border: "0.5px solid #FEDF89",
1541
+ borderRadius: "8px",
1542
+ padding: "12px 14px",
1512
1543
  display: "flex",
1513
- alignItems: "center",
1514
- gap: "12px",
1515
- marginBottom: "20px",
1516
- border: "1px solid #FEDF89"
1544
+ alignItems: "flex-start",
1545
+ gap: "10px",
1546
+ marginBottom: "16px"
1547
+ }
1548
+ }, /*#__PURE__*/React.createElement("div", {
1549
+ style: {
1550
+ flexShrink: 0,
1551
+ marginTop: "1px"
1517
1552
  }
1518
1553
  }, /*#__PURE__*/React.createElement(InfoBannerIcon, {
1519
1554
  fill: "#B54708"
1520
- }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1555
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
1521
1556
  style: {
1522
- fontWeight: "700",
1557
+ fontWeight: "600",
1523
1558
  color: "#B54708",
1524
- fontSize: "14px"
1559
+ fontSize: "13px",
1560
+ marginBottom: "2px"
1525
1561
  }
1526
1562
  }, t("EKYC_IMPORTANT") || "Important"), /*#__PURE__*/React.createElement("div", {
1527
1563
  style: {
1528
- fontSize: "13px",
1529
- color: "#B54708",
1530
- marginTop: "2px"
1564
+ fontSize: "12px",
1565
+ color: "#92400E"
1531
1566
  }
1532
- }, t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"))), /*#__PURE__*/React.createElement("div", {
1533
- style: {
1534
- border: "2px dashed #D0D5DD",
1535
- borderRadius: "16px",
1536
- padding: doorPhoto ? "12px" : "40px 24px",
1537
- textAlign: "center",
1538
- cursor: "pointer",
1539
- position: "relative",
1540
- overflow: "hidden",
1541
- minHeight: "180px",
1542
- display: "flex",
1543
- flexDirection: "column",
1544
- alignItems: "center",
1545
- justifyContent: "center",
1546
- backgroundColor: "#F9FAFB",
1547
- transition: "all 0.2s ease",
1548
- boxShadow: "inset 0px 2px 4px rgba(0, 0, 0, 0.02)"
1549
- },
1550
- onClick: !doorPhoto ? openGallery : undefined,
1551
- onMouseOver: e => !doorPhoto ? e.currentTarget.style.borderColor = "#0068faff" : null,
1552
- onMouseOut: e => !doorPhoto ? e.currentTarget.style.borderColor = "#D0D5DD" : null
1553
- }, /*#__PURE__*/React.createElement("input", {
1567
+ }, t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"))), /*#__PURE__*/React.createElement("input", {
1554
1568
  type: "file",
1555
1569
  ref: fileInputRef,
1556
1570
  onChange: handleCapture,
@@ -1558,135 +1572,232 @@ const AddressDetails = ({
1558
1572
  style: {
1559
1573
  display: "none"
1560
1574
  }
1561
- }), !doorPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
1575
+ }), /*#__PURE__*/React.createElement("div", {
1576
+ onClick: !doorPhoto ? () => fileInputRef.current.click() : undefined,
1577
+ onMouseOver: e => {
1578
+ if (!doorPhoto) e.currentTarget.style.borderColor = "#185FA5";
1579
+ },
1580
+ onMouseOut: e => {
1581
+ if (!doorPhoto) e.currentTarget.style.borderColor = "#D0D5DD";
1582
+ },
1562
1583
  style: {
1563
- backgroundColor: "#FFFFFF",
1564
- width: "64px",
1565
- height: "64px",
1566
- borderRadius: "50%",
1584
+ border: "1.5px dashed #D0D5DD",
1585
+ borderRadius: "10px",
1586
+ minHeight: "160px",
1567
1587
  display: "flex",
1588
+ flexDirection: "column",
1568
1589
  alignItems: "center",
1569
1590
  justifyContent: "center",
1570
- margin: "0 auto 16px",
1571
- boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1)"
1591
+ backgroundColor: "#F9FAFB",
1592
+ cursor: doorPhoto ? "default" : "pointer",
1593
+ overflow: "hidden",
1594
+ transition: "border-color 0.15s",
1595
+ position: "relative",
1596
+ padding: doorPhoto ? "0" : "32px 24px"
1572
1597
  }
1573
- }, /*#__PURE__*/React.createElement(CameraIcon, null)), /*#__PURE__*/React.createElement("div", {
1598
+ }, !doorPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
1574
1599
  style: {
1575
- fontWeight: "700",
1576
- fontSize: "16px",
1577
- marginBottom: "4px",
1578
- color: "#101828"
1600
+ width: "52px",
1601
+ height: "52px",
1602
+ borderRadius: "50%",
1603
+ background: "#E6F1FB",
1604
+ display: "flex",
1605
+ alignItems: "center",
1606
+ justifyContent: "center",
1607
+ marginBottom: "12px"
1579
1608
  }
1580
- }, t("EKYC_TAP_TO_CAPTURE") || "Tap to Capture"), /*#__PURE__*/React.createElement("div", {
1609
+ }, /*#__PURE__*/React.createElement(CameraIcon, {
1610
+ size: 26
1611
+ })), /*#__PURE__*/React.createElement("div", {
1581
1612
  style: {
1582
- color: "#667085",
1583
- fontSize: "14px"
1613
+ fontWeight: "600",
1614
+ fontSize: "14px",
1615
+ color: "#101828",
1616
+ marginBottom: "4px"
1584
1617
  }
1585
- }, t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture Door Image")) : /*#__PURE__*/React.createElement("div", {
1618
+ }, t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"), /*#__PURE__*/React.createElement("div", {
1586
1619
  style: {
1587
- position: "relative",
1588
- width: "100%",
1589
- height: "100%",
1590
- display: "flex",
1591
- justifyContent: "center"
1620
+ fontSize: "12px",
1621
+ color: "#667085"
1592
1622
  }
1593
- }, /*#__PURE__*/React.createElement("img", {
1623
+ }, t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image")) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("img", {
1594
1624
  src: doorPhoto,
1595
1625
  alt: "Door",
1596
1626
  style: {
1597
1627
  width: "100%",
1598
- maxHeight: "300px",
1628
+ maxHeight: "280px",
1599
1629
  objectFit: "cover",
1600
- borderRadius: "12px",
1601
1630
  display: "block"
1602
1631
  }
1603
- }), /*#__PURE__*/React.createElement("div", {
1604
- style: {
1605
- position: "absolute",
1606
- top: "12px",
1607
- right: "12px"
1608
- }
1609
- }, /*#__PURE__*/React.createElement("button", {
1632
+ }), /*#__PURE__*/React.createElement("button", {
1610
1633
  onClick: e => {
1611
1634
  e.stopPropagation();
1612
1635
  removePhoto();
1613
1636
  },
1614
1637
  style: {
1615
- background: "#FFFFFF",
1616
- border: "1px solid #EAECF0",
1617
- borderRadius: "8px",
1618
- padding: "8px",
1638
+ position: "absolute",
1639
+ top: "10px",
1640
+ right: "10px",
1641
+ background: "#fff",
1642
+ border: "0.5px solid #EAECF0",
1643
+ borderRadius: "7px",
1644
+ padding: "6px 10px",
1619
1645
  display: "flex",
1620
- boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
1621
- cursor: "pointer"
1622
- }
1623
- }, /*#__PURE__*/React.createElement(RemoveableTag, {
1624
- text: "",
1625
- onClick: () => {},
1626
- extraStyles: {
1627
- tagStyles: {
1628
- margin: 0,
1629
- padding: 0
1630
- }
1646
+ alignItems: "center",
1647
+ gap: "5px",
1648
+ cursor: "pointer",
1649
+ fontSize: "12px",
1650
+ color: "#D92D20",
1651
+ fontWeight: "500"
1652
+ }
1653
+ }, /*#__PURE__*/React.createElement(TrashIcon, {
1654
+ size: 13
1655
+ }), " ", t("EKYC_REMOVE") || "Remove"))), _isSection ? /*#__PURE__*/React.createElement("div", {
1656
+ style: {
1657
+ marginTop: "24px"
1631
1658
  }
1632
- }))))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
1633
- label: _isSection ? t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed" : t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification",
1659
+ }, /*#__PURE__*/React.createElement(SubmitBar, {
1660
+ label: t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed",
1634
1661
  onSubmit: handleCompleteVerification
1635
- })));
1636
- if (_isSection) return renderContent();
1662
+ })) : /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
1663
+ label: t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification",
1664
+ onSubmit: handleCompleteVerification
1665
+ })), /*#__PURE__*/React.createElement("div", {
1666
+ style: {
1667
+ display: "flex",
1668
+ alignItems: "center",
1669
+ justifyContent: "center",
1670
+ gap: "5px",
1671
+ marginTop: "16px",
1672
+ fontSize: "11px",
1673
+ color: "#98A2B3"
1674
+ }
1675
+ }, /*#__PURE__*/React.createElement("svg", {
1676
+ width: "11",
1677
+ height: "11",
1678
+ viewBox: "0 0 24 24",
1679
+ fill: "none",
1680
+ stroke: "currentColor",
1681
+ strokeWidth: "2",
1682
+ strokeLinecap: "round"
1683
+ }, /*#__PURE__*/React.createElement("rect", {
1684
+ x: "3",
1685
+ y: "11",
1686
+ width: "18",
1687
+ height: "11",
1688
+ rx: "2"
1689
+ }), /*#__PURE__*/React.createElement("path", {
1690
+ d: "M7 11V7a5 5 0 0 1 10 0v4"
1691
+ })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"));
1692
+ if (_isSection) {
1693
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("hr", {
1694
+ style: {
1695
+ margin: "32px 0",
1696
+ border: 0,
1697
+ borderTop: "2px solid #EAECF0"
1698
+ }
1699
+ }), renderContent());
1700
+ }
1637
1701
  return /*#__PURE__*/React.createElement("div", {
1638
1702
  className: "inbox-container"
1639
1703
  }, /*#__PURE__*/React.createElement("style", null, `
1640
- @keyframes spin { to { transform: rotate(360deg); } }
1641
- @keyframes fadeSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
1642
- `), /*#__PURE__*/React.createElement("div", {
1704
+ @keyframes spin { to { transform: rotate(360deg); } }
1705
+ @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
1706
+ `), /*#__PURE__*/React.createElement("div", {
1643
1707
  className: "filters-container"
1644
1708
  }, /*#__PURE__*/React.createElement(Card, {
1645
- className: "sidebar-title-card",
1646
1709
  style: {
1647
1710
  display: "flex",
1648
1711
  alignItems: "center",
1649
- padding: "16px",
1650
- marginBottom: "16px",
1651
- borderRadius: "4px"
1712
+ padding: "12px 16px",
1713
+ marginBottom: "12px",
1714
+ borderRadius: "8px"
1652
1715
  }
1653
1716
  }, /*#__PURE__*/React.createElement("div", {
1654
- className: "icon-container",
1655
1717
  style: {
1656
- color: "#0068faff",
1657
- marginRight: "12px"
1718
+ color: "#185FA5",
1719
+ marginRight: "10px",
1720
+ display: "flex"
1658
1721
  }
1659
1722
  }, /*#__PURE__*/React.createElement(HomeIcon, {
1660
1723
  style: {
1661
- width: "24px",
1662
- height: "24px"
1724
+ width: "20px",
1725
+ height: "20px"
1663
1726
  }
1664
1727
  })), /*#__PURE__*/React.createElement("div", {
1665
1728
  style: {
1666
- fontWeight: "700",
1667
- fontSize: "18px",
1729
+ fontWeight: "600",
1730
+ fontSize: "15px",
1668
1731
  color: "#0B0C0C"
1669
1732
  }
1670
- }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
1733
+ }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
1671
1734
  style: {
1672
- backgroundColor: "#FFFFFF",
1673
- padding: "16px",
1735
+ background: "#fff",
1736
+ padding: "16px 14px",
1674
1737
  borderRadius: "8px",
1675
- border: "1px solid #EAECF0",
1676
- boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
1738
+ border: "1px solid #EAECF0"
1677
1739
  }
1678
- }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
1740
+ }, [{
1679
1741
  label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
1680
- isCompleted: true
1681
- }), /*#__PURE__*/React.createElement(CheckPoint, {
1742
+ done: true,
1743
+ active: false
1744
+ }, {
1682
1745
  label: t("EKYC_STEP_ADDRESS") || "Address",
1683
- isCompleted: true
1684
- }), /*#__PURE__*/React.createElement(CheckPoint, {
1746
+ done: false,
1747
+ active: true
1748
+ }, {
1685
1749
  label: t("EKYC_STEP_PROPERTY") || "Property",
1686
- isCompleted: false
1687
- }), /*#__PURE__*/React.createElement(CheckPoint, {
1688
- label: t("EKYC_STEP_REVIEW") || "Review"
1689
- })))), /*#__PURE__*/React.createElement("div", {
1750
+ done: false,
1751
+ active: false
1752
+ }, {
1753
+ label: t("EKYC_STEP_REVIEW") || "Review",
1754
+ done: false,
1755
+ active: false
1756
+ }].map((step, i) => /*#__PURE__*/React.createElement("div", {
1757
+ key: i,
1758
+ style: {
1759
+ display: "flex",
1760
+ gap: "10px",
1761
+ alignItems: "flex-start",
1762
+ position: "relative",
1763
+ paddingBottom: i < 3 ? "18px" : 0
1764
+ }
1765
+ }, i < 3 && /*#__PURE__*/React.createElement("div", {
1766
+ style: {
1767
+ position: "absolute",
1768
+ left: "10px",
1769
+ top: "22px",
1770
+ width: "1px",
1771
+ height: "calc(100% - 10px)",
1772
+ background: "#EAECF0"
1773
+ }
1774
+ }), /*#__PURE__*/React.createElement("div", {
1775
+ style: {
1776
+ width: "20px",
1777
+ height: "20px",
1778
+ borderRadius: "50%",
1779
+ flexShrink: 0,
1780
+ marginTop: "1px",
1781
+ border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
1782
+ background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
1783
+ display: "flex",
1784
+ alignItems: "center",
1785
+ justifyContent: "center",
1786
+ fontSize: "10px",
1787
+ fontWeight: "500",
1788
+ color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3"
1789
+ }
1790
+ }, step.done ? /*#__PURE__*/React.createElement(CheckIcon, {
1791
+ size: 11,
1792
+ color: "#fff"
1793
+ }) : i + 1), /*#__PURE__*/React.createElement("div", {
1794
+ style: {
1795
+ fontSize: "12px",
1796
+ paddingTop: "2px",
1797
+ color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
1798
+ fontWeight: step.done || step.active ? "600" : "400"
1799
+ }
1800
+ }, step.label))))), /*#__PURE__*/React.createElement("div", {
1690
1801
  style: {
1691
1802
  flex: 1,
1692
1803
  marginLeft: "16px"
@@ -1696,69 +1807,80 @@ const AddressDetails = ({
1696
1807
  display: "flex",
1697
1808
  justifyContent: "space-between",
1698
1809
  alignItems: "center",
1699
- marginBottom: "24px"
1810
+ marginBottom: "20px"
1700
1811
  }
1701
- }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
1812
+ }, /*#__PURE__*/React.createElement(CardHeader, {
1702
1813
  style: {
1703
- fontSize: "14px",
1704
- fontWeight: "700",
1705
- color: "#505A5F"
1814
+ margin: 0,
1815
+ fontSize: "18px"
1706
1816
  }
1707
- }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
1817
+ }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
1708
1818
  style: {
1709
- color: "#0B0C0C"
1819
+ background: "#F9FAFB",
1820
+ border: "0.5px solid #EAECF0",
1821
+ borderRadius: "20px",
1822
+ padding: "4px 14px",
1823
+ fontSize: "12px",
1824
+ color: "#667085"
1825
+ }
1826
+ }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
1827
+ style: {
1828
+ color: "#0B0C0C",
1829
+ fontWeight: "600"
1710
1830
  }
1711
1831
  }, flowState === null || flowState === void 0 ? void 0 : flowState.kNumber))), renderContent())));
1712
1832
  };
1713
1833
 
1714
- const FingerprintIcon = ({
1715
- size: _size = 22,
1716
- color: _color = "#6366f1"
1834
+ const LockIcon = ({
1835
+ size: _size = 16
1717
1836
  }) => /*#__PURE__*/React.createElement("svg", {
1718
1837
  width: _size,
1719
1838
  height: _size,
1720
1839
  viewBox: "0 0 24 24",
1721
- fill: "none"
1722
- }, /*#__PURE__*/React.createElement("path", {
1723
- d: "M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.67-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.96.46 5.57 1.41.24.13.33.43.2.67-.09.13-.24.39-.39.39zM12 21c-.28 0-.5-.22-.5-.5v-4.42c-2.33-.21-4.44-1.35-5.94-3.21-1.5-1.86-2.22-4.18-2.02-6.52.05-.59.55-1.03 1.14-.98s1.03.55.98 1.14c-.15 1.76.39 3.51 1.52 4.91 1.12 1.4 2.7 2.26 4.45 2.42.21.02.37.19.37.4v6.26c0 .28-.22.5-.5.5z",
1724
- fill: _color
1840
+ fill: "none",
1841
+ stroke: "currentColor",
1842
+ strokeWidth: "1.8",
1843
+ strokeLinecap: "round"
1844
+ }, /*#__PURE__*/React.createElement("rect", {
1845
+ x: "3",
1846
+ y: "11",
1847
+ width: "18",
1848
+ height: "11",
1849
+ rx: "2"
1725
1850
  }), /*#__PURE__*/React.createElement("path", {
1726
- d: "M12 11c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z",
1727
- fill: _color
1851
+ d: "M7 11V7a5 5 0 0 1 10 0v4"
1728
1852
  }));
1729
1853
  const UserIcon = ({
1730
1854
  size: _size2 = 16,
1731
- color: _color2 = "#64748b"
1855
+ color: _color = "currentColor"
1732
1856
  }) => /*#__PURE__*/React.createElement("svg", {
1733
1857
  width: _size2,
1734
1858
  height: _size2,
1735
1859
  viewBox: "0 0 24 24",
1736
- fill: "none"
1737
- }, /*#__PURE__*/React.createElement("path", {
1738
- d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2",
1739
- stroke: _color2,
1740
- strokeWidth: "2",
1860
+ fill: "none",
1861
+ stroke: _color,
1862
+ strokeWidth: "1.8",
1741
1863
  strokeLinecap: "round"
1864
+ }, /*#__PURE__*/React.createElement("path", {
1865
+ d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
1742
1866
  }), /*#__PURE__*/React.createElement("circle", {
1743
1867
  cx: "12",
1744
1868
  cy: "7",
1745
- r: "4",
1746
- stroke: _color2,
1747
- strokeWidth: "2"
1869
+ r: "4"
1748
1870
  }));
1749
1871
  const PhoneIcon = ({
1750
1872
  size: _size3 = 16,
1751
- color: _color3 = "#64748b"
1873
+ color: _color2 = "currentColor"
1752
1874
  }) => /*#__PURE__*/React.createElement("svg", {
1753
1875
  width: _size3,
1754
1876
  height: _size3,
1755
1877
  viewBox: "0 0 24 24",
1756
- fill: "none"
1757
- }, /*#__PURE__*/React.createElement("path", {
1758
- d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.6 19.79 19.79 0 0 0 3 1.82C3 .72 3.72 0 4.82 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z",
1759
- stroke: _color3,
1760
- strokeWidth: "2",
1878
+ fill: "none",
1879
+ stroke: _color2,
1880
+ strokeWidth: "1.8",
1761
1881
  strokeLinecap: "round"
1882
+ }, /*#__PURE__*/React.createElement("path", {
1883
+ d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-5.37-5.37 19.79 19.79 0 01-3.07-8.63A2 2 0 014.82 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
1762
1884
  }));
1763
1885
  const WhatsappIcon = ({
1764
1886
  size: _size4 = 16
@@ -1768,65 +1890,166 @@ const WhatsappIcon = ({
1768
1890
  viewBox: "0 0 24 24",
1769
1891
  fill: "none"
1770
1892
  }, /*#__PURE__*/React.createElement("path", {
1771
- d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z",
1893
+ d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z",
1772
1894
  fill: "#25D366"
1773
1895
  }), /*#__PURE__*/React.createElement("path", {
1774
1896
  d: "M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z",
1775
1897
  stroke: "#25D366",
1776
- strokeWidth: "2",
1898
+ strokeWidth: "1.8",
1777
1899
  strokeLinecap: "round"
1778
1900
  }));
1779
1901
  const MailIcon = ({
1780
1902
  size: _size5 = 16,
1781
- color: _color4 = "#64748b"
1903
+ color: _color3 = "currentColor"
1782
1904
  }) => /*#__PURE__*/React.createElement("svg", {
1783
1905
  width: _size5,
1784
1906
  height: _size5,
1785
1907
  viewBox: "0 0 24 24",
1786
- fill: "none"
1787
- }, /*#__PURE__*/React.createElement("path", {
1788
- d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
1789
- stroke: _color4,
1790
- strokeWidth: "2",
1908
+ fill: "none",
1909
+ stroke: _color3,
1910
+ strokeWidth: "1.8",
1791
1911
  strokeLinecap: "round"
1912
+ }, /*#__PURE__*/React.createElement("path", {
1913
+ d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
1792
1914
  }), /*#__PURE__*/React.createElement("path", {
1793
- d: "M22 6l-10 7L2 6",
1794
- stroke: _color4,
1795
- strokeWidth: "2",
1796
- strokeLinecap: "round"
1915
+ d: "M22 6l-10 7L2 6"
1797
1916
  }));
1798
1917
  const UsersIcon = ({
1799
1918
  size: _size6 = 16,
1800
- color: _color5 = "#64748b"
1919
+ color: _color4 = "currentColor"
1801
1920
  }) => /*#__PURE__*/React.createElement("svg", {
1802
1921
  width: _size6,
1803
1922
  height: _size6,
1804
1923
  viewBox: "0 0 24 24",
1805
- fill: "none"
1806
- }, /*#__PURE__*/React.createElement("path", {
1807
- d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2",
1808
- stroke: _color5,
1809
- strokeWidth: "2",
1924
+ fill: "none",
1925
+ stroke: _color4,
1926
+ strokeWidth: "1.8",
1810
1927
  strokeLinecap: "round"
1928
+ }, /*#__PURE__*/React.createElement("path", {
1929
+ d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
1811
1930
  }), /*#__PURE__*/React.createElement("circle", {
1812
1931
  cx: "9",
1813
1932
  cy: "7",
1814
- r: "4",
1815
- stroke: _color5,
1816
- strokeWidth: "2"
1933
+ r: "4"
1817
1934
  }), /*#__PURE__*/React.createElement("path", {
1818
- d: "M23 21v-2a4 4 0 0 0-3-3.87",
1819
- stroke: _color5,
1820
- strokeWidth: "2",
1821
- strokeLinecap: "round"
1822
- }), /*#__PURE__*/React.createElement("path", {
1823
- d: "M16 3.13a4 4 0 0 1 0 7.75",
1935
+ d: "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"
1936
+ }));
1937
+ const CheckIcon$1 = ({
1938
+ size: _size7 = 15,
1939
+ color: _color5 = "#1D9E75"
1940
+ }) => /*#__PURE__*/React.createElement("svg", {
1941
+ width: _size7,
1942
+ height: _size7,
1943
+ viewBox: "0 0 24 24",
1944
+ fill: "none",
1824
1945
  stroke: _color5,
1825
- strokeWidth: "2",
1946
+ strokeWidth: "2.8",
1826
1947
  strokeLinecap: "round"
1948
+ }, /*#__PURE__*/React.createElement("polyline", {
1949
+ points: "20 6 9 17 4 12"
1950
+ }));
1951
+ const IconInput$1 = ({
1952
+ icon,
1953
+ rightIcon,
1954
+ inputStyle: _inputStyle = {},
1955
+ ...props
1956
+ }) => /*#__PURE__*/React.createElement("div", {
1957
+ style: {
1958
+ position: "relative",
1959
+ width: "100%"
1960
+ }
1961
+ }, /*#__PURE__*/React.createElement("div", {
1962
+ style: {
1963
+ position: "absolute",
1964
+ left: "10px",
1965
+ top: "50%",
1966
+ transform: "translateY(-50%)",
1967
+ zIndex: 1,
1968
+ opacity: 0.45,
1969
+ display: "flex",
1970
+ pointerEvents: "none"
1971
+ }
1972
+ }, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
1973
+ textInputStyle: {
1974
+ paddingLeft: "36px",
1975
+ paddingRight: rightIcon ? "36px" : "12px",
1976
+ ..._inputStyle
1977
+ }
1978
+ }, props)), rightIcon && /*#__PURE__*/React.createElement("div", {
1979
+ style: {
1980
+ position: "absolute",
1981
+ right: "10px",
1982
+ top: "50%",
1983
+ transform: "translateY(-50%)",
1984
+ display: "flex"
1985
+ }
1986
+ }, rightIcon));
1987
+ const SectionHead$1 = ({
1988
+ icon,
1989
+ label
1990
+ }) => /*#__PURE__*/React.createElement("div", {
1991
+ style: {
1992
+ display: "flex",
1993
+ alignItems: "center",
1994
+ gap: "8px",
1995
+ marginBottom: "16px",
1996
+ marginTop: "4px"
1997
+ }
1998
+ }, /*#__PURE__*/React.createElement("div", {
1999
+ style: {
2000
+ opacity: 0.5,
2001
+ display: "flex"
2002
+ }
2003
+ }, icon), /*#__PURE__*/React.createElement("span", {
2004
+ style: {
2005
+ fontSize: "15px",
2006
+ fontWeight: "600",
2007
+ color: "#0B0C0C",
2008
+ whiteSpace: "nowrap"
2009
+ }
2010
+ }, label), /*#__PURE__*/React.createElement("div", {
2011
+ style: {
2012
+ flex: 1,
2013
+ height: "1px",
2014
+ background: "#EAECF0"
2015
+ }
2016
+ }));
2017
+ const RadioToggleRow = ({
2018
+ label,
2019
+ selected,
2020
+ onSelect,
2021
+ t,
2022
+ options
2023
+ }) => /*#__PURE__*/React.createElement("div", {
2024
+ style: {
2025
+ display: "flex",
2026
+ alignItems: "center",
2027
+ justifyContent: "space-between",
2028
+ marginBottom: "8px"
2029
+ }
2030
+ }, /*#__PURE__*/React.createElement(CardLabel, {
2031
+ style: {
2032
+ fontWeight: "500",
2033
+ marginBottom: 0,
2034
+ fontSize: "13px",
2035
+ color: "#505A5F"
2036
+ }
2037
+ }, label), /*#__PURE__*/React.createElement(RadioButtons, {
2038
+ options: options,
2039
+ optionsKey: "name",
2040
+ selectedOption: selected,
2041
+ onSelect: onSelect,
2042
+ t: t,
2043
+ innerStyles: {
2044
+ display: "flex",
2045
+ gap: "20px"
2046
+ },
2047
+ style: {
2048
+ marginBottom: 0
2049
+ }
1827
2050
  }));
1828
2051
  const AadhaarVerification = () => {
1829
- var _connectionDetails$co, _connectionDetails$co2, _connectionDetails$co3, _connectionDetails$co4;
2052
+ var _connectionDetails$ad;
1830
2053
  const {
1831
2054
  t
1832
2055
  } = useTranslation();
@@ -1852,6 +2075,7 @@ const AadhaarVerification = () => {
1852
2075
  }
1853
2076
  }
1854
2077
  };
2078
+ const details = (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.connectionDetails) || (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.connectionDetailsInfo) || {};
1855
2079
  const [aadhaarLastFour, setAadhaarLastFour] = useState("");
1856
2080
  const [isAadhaarVerified, setIsAadhaarVerified] = useState(false);
1857
2081
  const [isVerifying, setIsVerifying] = useState(false);
@@ -1859,15 +2083,15 @@ const AadhaarVerification = () => {
1859
2083
  code: "NO",
1860
2084
  name: "CORE_COMMON_NO"
1861
2085
  });
1862
- const [userName, setUserName] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co === void 0 ? void 0 : _connectionDetails$co.consumerName) || "");
2086
+ const [userName, setUserName] = useState(details.consumerName || "");
1863
2087
  const [mobileChange, setMobileChange] = useState({
1864
2088
  code: "NO",
1865
2089
  name: "CORE_COMMON_NO"
1866
2090
  });
1867
- const [mobileNumber, setMobileNumber] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co2 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co2 === void 0 ? void 0 : _connectionDetails$co2.phoneNumber) || "");
1868
- const [whatsappNumber, setWhatsappNumber] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co3 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co3 === void 0 ? void 0 : _connectionDetails$co3.phoneNumber) || "");
1869
- const [email, setEmail] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co4 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co4 === void 0 ? void 0 : _connectionDetails$co4.email) || "");
1870
- const [noOfPersons, setNoOfPersons] = useState("");
2091
+ const [mobileNumber, setMobileNumber] = useState(details.phoneNumber || "");
2092
+ const [whatsappNumber, setWhatsappNumber] = useState(details.phoneNumber || "");
2093
+ const [email, setEmail] = useState(details.email || "");
2094
+ const [noOfPersons, setNoOfPersons] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$ad = connectionDetails.addressDetails) === null || _connectionDetails$ad === void 0 ? void 0 : _connectionDetails$ad.noOfPerson) || "");
1871
2095
  const [showAddressSection, setShowAddressSection] = useState(false);
1872
2096
  const [addressData, setAddressData] = useState(null);
1873
2097
  const yesNoOptions = [{
@@ -1878,19 +2102,26 @@ const AadhaarVerification = () => {
1878
2102
  name: "CORE_COMMON_NO"
1879
2103
  }];
1880
2104
  const handleVerifyAadhaar = () => {
1881
- if (aadhaarLastFour.length === 4) {
1882
- setIsVerifying(true);
2105
+ if (aadhaarLastFour.length !== 4 || isVerifying) return;
2106
+ setIsVerifying(true);
2107
+ setTimeout(() => {
2108
+ setIsVerifying(false);
2109
+ setIsAadhaarVerified(true);
2110
+ setShowAddressSection(true);
1883
2111
  setTimeout(() => {
1884
- setIsVerifying(false);
1885
- setIsAadhaarVerified(true);
1886
- }, 1200);
1887
- }
2112
+ var _addressSectionRef$cu;
2113
+ (_addressSectionRef$cu = addressSectionRef.current) === null || _addressSectionRef$cu === void 0 ? void 0 : _addressSectionRef$cu.scrollIntoView({
2114
+ behavior: "smooth",
2115
+ block: "start"
2116
+ });
2117
+ }, 100);
2118
+ }, 1200);
1888
2119
  };
1889
- const handleSaveAndContinueAadhaar = () => {
2120
+ const handleSaveAndContinue = () => {
1890
2121
  setShowAddressSection(true);
1891
2122
  setTimeout(() => {
1892
- var _addressSectionRef$cu;
1893
- (_addressSectionRef$cu = addressSectionRef.current) === null || _addressSectionRef$cu === void 0 ? void 0 : _addressSectionRef$cu.scrollIntoView({
2123
+ var _addressSectionRef$cu2;
2124
+ (_addressSectionRef$cu2 = addressSectionRef.current) === null || _addressSectionRef$cu2 === void 0 ? void 0 : _addressSectionRef$cu2.scrollIntoView({
1894
2125
  behavior: "smooth",
1895
2126
  block: "start"
1896
2127
  });
@@ -1914,60 +2145,135 @@ const AadhaarVerification = () => {
1914
2145
  addressDetails
1915
2146
  });
1916
2147
  };
2148
+ const styles = {
2149
+ verifiedInput: {
2150
+ borderColor: "#1D9E75",
2151
+ backgroundColor: "#E1F5EE"
2152
+ },
2153
+ verifiedCard: {
2154
+ backgroundColor: "#E1F5EE",
2155
+ border: "0.5px solid #5DCAA5",
2156
+ borderRadius: "8px",
2157
+ padding: "16px",
2158
+ marginTop: "14px",
2159
+ marginBottom: "4px",
2160
+ animation: "fadeSlideIn 0.35s ease"
2161
+ },
2162
+ infoLabel: {
2163
+ fontSize: "11px",
2164
+ fontWeight: "600",
2165
+ color: "#1D9E75",
2166
+ textTransform: "uppercase",
2167
+ letterSpacing: "0.05em",
2168
+ marginBottom: "3px"
2169
+ },
2170
+ infoValue: {
2171
+ fontSize: "14px",
2172
+ fontWeight: "500",
2173
+ color: "#04342C"
2174
+ },
2175
+ twoCol: {
2176
+ display: "grid",
2177
+ gridTemplateColumns: "1fr 1fr",
2178
+ gap: "14px",
2179
+ marginBottom: "4px"
2180
+ },
2181
+ optionalTag: {
2182
+ display: "inline-block",
2183
+ fontSize: "10px",
2184
+ background: "#F1EFE8",
2185
+ color: "#5F5E5A",
2186
+ border: "0.5px solid #D3D1C7",
2187
+ borderRadius: "10px",
2188
+ padding: "1px 7px",
2189
+ marginLeft: "6px",
2190
+ fontWeight: "400"
2191
+ }
2192
+ };
1917
2193
  return /*#__PURE__*/React.createElement("div", {
1918
2194
  className: "inbox-container"
1919
2195
  }, /*#__PURE__*/React.createElement("style", null, `
1920
- @keyframes spin { to { transform: rotate(360deg); } }
1921
- @keyframes fadeSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
1922
- @keyframes pulseGreen { 0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,0.4); } 50% { box-shadow:0 0 0 8px rgba(22,163,74,0); } }
1923
- `), /*#__PURE__*/React.createElement("div", {
2196
+ @keyframes fadeSlideIn {
2197
+ from { opacity: 0; transform: translateY(6px); }
2198
+ to { opacity: 1; transform: translateY(0); }
2199
+ }
2200
+ @keyframes pulseGreen {
2201
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.35); }
2202
+ 50% { box-shadow: 0 0 0 6px rgba(29,158,117,0); }
2203
+ }
2204
+ .ekyc-sidebar-step { display: flex; gap: 10px; align-items: flex-start; position: relative; padding-bottom: 18px; }
2205
+ .ekyc-sidebar-step:last-child { padding-bottom: 0; }
2206
+ .ekyc-step-line { position: absolute; left: 10px; top: 22px; width: 1px; height: calc(100% - 10px); background: #EAECF0; }
2207
+ .ekyc-step-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #D0D5DD; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: #98A2B3; background: #fff; flex-shrink: 0; margin-top: 1px; }
2208
+ .ekyc-step-dot.active { border-color: #185FA5; color: #185FA5; background: #E6F1FB; }
2209
+ .ekyc-step-dot.done { border-color: #0F6E56; background: #0F6E56; color: #fff; }
2210
+ .ekyc-step-label { font-size: 12px; color: #667085; padding-top: 2px; }
2211
+ .ekyc-step-label.active { color: #0B0C0C; font-weight: 600; }
2212
+ .ekyc-step-label.done { color: #0F6E56; }
2213
+ .ekyc-field-label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
2214
+ `), /*#__PURE__*/React.createElement("div", {
1924
2215
  className: "filters-container"
1925
2216
  }, /*#__PURE__*/React.createElement(Card, {
1926
- className: "sidebar-title-card",
1927
2217
  style: {
1928
2218
  display: "flex",
1929
2219
  alignItems: "center",
1930
- padding: "16px",
1931
- marginBottom: "16px",
1932
- borderRadius: "4px"
2220
+ padding: "12px 16px",
2221
+ marginBottom: "12px",
2222
+ borderRadius: "8px"
1933
2223
  }
1934
2224
  }, /*#__PURE__*/React.createElement("div", {
1935
- className: "icon-container",
1936
2225
  style: {
1937
- color: "#0068faff",
1938
- marginRight: "12px"
2226
+ color: "#185FA5",
2227
+ marginRight: "10px",
2228
+ display: "flex"
1939
2229
  }
1940
2230
  }, /*#__PURE__*/React.createElement(HomeIcon, {
1941
2231
  style: {
1942
- width: "24px",
1943
- height: "24px"
2232
+ width: "20px",
2233
+ height: "20px"
1944
2234
  }
1945
2235
  })), /*#__PURE__*/React.createElement("div", {
1946
2236
  style: {
1947
- fontWeight: "700",
1948
- fontSize: "18px",
2237
+ fontWeight: "600",
2238
+ fontSize: "15px",
1949
2239
  color: "#0B0C0C"
1950
2240
  }
1951
- }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
2241
+ }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
1952
2242
  style: {
1953
- backgroundColor: "#FFFFFF",
1954
- padding: "16px",
2243
+ background: "#fff",
2244
+ padding: "16px 14px",
1955
2245
  borderRadius: "8px",
1956
- border: "1px solid #EAECF0",
1957
- boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
2246
+ border: "1px solid #EAECF0"
1958
2247
  }
1959
- }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
2248
+ }, [{
1960
2249
  label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
1961
- isCompleted: showAddressSection
1962
- }), /*#__PURE__*/React.createElement(CheckPoint, {
2250
+ done: showAddressSection,
2251
+ active: !showAddressSection
2252
+ }, {
1963
2253
  label: t("EKYC_STEP_ADDRESS") || "Address",
1964
- isCompleted: addressData !== null
1965
- }), /*#__PURE__*/React.createElement(CheckPoint, {
2254
+ done: addressData !== null,
2255
+ active: showAddressSection && addressData === null
2256
+ }, {
1966
2257
  label: t("EKYC_STEP_PROPERTY") || "Property",
1967
- isCompleted: false
1968
- }), /*#__PURE__*/React.createElement(CheckPoint, {
1969
- label: t("EKYC_STEP_REVIEW") || "Review"
1970
- })))), /*#__PURE__*/React.createElement("div", {
2258
+ done: false,
2259
+ active: false
2260
+ }, {
2261
+ label: t("EKYC_STEP_REVIEW") || "Review",
2262
+ done: false,
2263
+ active: false
2264
+ }].map((step, i) => /*#__PURE__*/React.createElement("div", {
2265
+ className: "ekyc-sidebar-step",
2266
+ key: i
2267
+ }, /*#__PURE__*/React.createElement("div", {
2268
+ className: `ekyc-step-dot${step.done ? " done" : step.active ? " active" : ""}`
2269
+ }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$1, {
2270
+ size: 11,
2271
+ color: "#fff"
2272
+ }) : i + 1), i < 3 && /*#__PURE__*/React.createElement("div", {
2273
+ className: "ekyc-step-line"
2274
+ }), /*#__PURE__*/React.createElement("div", {
2275
+ className: `ekyc-step-label${step.done ? " done" : step.active ? " active" : ""}`
2276
+ }, step.label))))), /*#__PURE__*/React.createElement("div", {
1971
2277
  style: {
1972
2278
  flex: 1,
1973
2279
  marginLeft: "16px"
@@ -1975,394 +2281,208 @@ const AadhaarVerification = () => {
1975
2281
  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
1976
2282
  style: {
1977
2283
  display: "flex",
1978
- justifyContent: "space-between",
1979
- alignItems: "center",
1980
- marginBottom: "24px"
1981
- }
1982
- }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Verification"), /*#__PURE__*/React.createElement("div", {
1983
- style: {
1984
- fontSize: "14px",
1985
- fontWeight: "700",
1986
- color: "#505A5F"
1987
- }
1988
- }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
1989
- style: {
1990
- color: "#0B0C0C"
2284
+ justifyContent: "flex-end",
2285
+ marginBottom: "20px"
1991
2286
  }
1992
- }, kNumber))), /*#__PURE__*/React.createElement(CardHeader, {
2287
+ }, /*#__PURE__*/React.createElement("div", {
1993
2288
  style: {
1994
- fontSize: "20px",
1995
- marginBottom: "16px"
2289
+ background: "#F9FAFB",
2290
+ border: "0.5px solid #EAECF0",
2291
+ borderRadius: "20px",
2292
+ padding: "4px 14px",
2293
+ fontSize: "12px",
2294
+ color: "#667085"
1996
2295
  }
1997
- }, t("EKYC_AADHAAR_NUMBER_HEADER") || "Aadhaar Number"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
2296
+ }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
1998
2297
  style: {
2298
+ color: "#0B0C0C",
1999
2299
  fontWeight: "600"
2000
2300
  }
2001
- }, t("EKYC_LAST_4_DIGIT_AADHAAR") || "Last 4-digit Aadhaar Number"), /*#__PURE__*/React.createElement("div", {
2002
- className: "field",
2003
- style: {
2004
- position: "relative"
2005
- }
2006
- }, /*#__PURE__*/React.createElement("div", {
2007
- style: {
2008
- position: "absolute",
2009
- left: "12px",
2010
- top: "50%",
2011
- transform: "translateY(-50%)",
2012
- zIndex: 1,
2013
- opacity: 0.6
2014
- }
2015
- }, /*#__PURE__*/React.createElement(FingerprintIcon, {
2016
- size: 20
2017
- })), /*#__PURE__*/React.createElement(TextInput, {
2301
+ }, kNumber))), /*#__PURE__*/React.createElement(SectionHead$1, {
2302
+ icon: /*#__PURE__*/React.createElement(LockIcon, {
2303
+ size: 16
2304
+ }),
2305
+ label: t("EKYC_AADHAAR_NUMBER_HEADER") || "Aadhaar Number"
2306
+ }), /*#__PURE__*/React.createElement("div", {
2307
+ className: "ekyc-field-label"
2308
+ }, t("EKYC_LAST_4_DIGIT_AADHAAR") || "Enter 12 digits of Aadhaar"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
2309
+ className: "field"
2310
+ }, /*#__PURE__*/React.createElement(IconInput$1, {
2311
+ icon: /*#__PURE__*/React.createElement(LockIcon, {
2312
+ size: 15
2313
+ }),
2314
+ rightIcon: isAadhaarVerified ? /*#__PURE__*/React.createElement(CheckIcon$1, {
2315
+ size: 15
2316
+ }) : null,
2018
2317
  value: aadhaarLastFour,
2019
2318
  onChange: e => {
2020
2319
  const val = e.target.value;
2021
- if (val.length <= 4 && /^\d*$/.test(val)) setAadhaarLastFour(val);
2320
+ if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
2022
2321
  },
2023
- placeholder: t("EKYC_ENTER_LAST_4_DIGIT") || "Enter last 4 digits",
2024
- textInputStyle: {
2025
- paddingLeft: "40px"
2026
- },
2027
- maxLength: 4
2028
- }), isAadhaarVerified && /*#__PURE__*/React.createElement("div", {
2029
- style: {
2030
- position: "absolute",
2031
- right: "12px",
2032
- top: "50%",
2033
- transform: "translateY(-50%)"
2034
- }
2035
- }, /*#__PURE__*/React.createElement(TickMark, {
2036
- fillColor: "#00703C"
2037
- })))), !isAadhaarVerified && /*#__PURE__*/React.createElement(SubmitBar, {
2322
+ placeholder: t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits",
2323
+ maxLength: 4,
2324
+ disabled: isAadhaarVerified,
2325
+ inputStyle: isAadhaarVerified ? styles.verifiedInput : {}
2326
+ }))), !isAadhaarVerified && /*#__PURE__*/React.createElement(SubmitBar, {
2038
2327
  label: isVerifying ? t("EKYC_VERIFYING") || "Verifying..." : t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar",
2039
2328
  onSubmit: handleVerifyAadhaar,
2040
2329
  disabled: aadhaarLastFour.length !== 4 || isVerifying,
2041
2330
  style: {
2042
- marginTop: "16px",
2043
- opacity: aadhaarLastFour.length !== 4 ? 0.6 : 1
2331
+ marginTop: "12px"
2044
2332
  }
2045
2333
  }), isAadhaarVerified && /*#__PURE__*/React.createElement("div", {
2046
- style: {
2047
- backgroundColor: "#E7F4EE",
2048
- padding: "20px",
2049
- borderRadius: "8px",
2050
- marginTop: "24px",
2051
- marginBottom: "24px",
2052
- border: "1px solid #D1E9DB",
2053
- animation: "fadeSlideIn 0.4s ease"
2054
- }
2334
+ style: styles.verifiedCard
2055
2335
  }, /*#__PURE__*/React.createElement("div", {
2056
2336
  style: {
2057
2337
  display: "flex",
2058
2338
  alignItems: "center",
2059
- gap: "10px",
2060
- marginBottom: "16px"
2339
+ gap: "8px",
2340
+ marginBottom: "14px"
2061
2341
  }
2062
2342
  }, /*#__PURE__*/React.createElement("div", {
2063
2343
  style: {
2064
- backgroundColor: "#D1E9DB",
2065
- padding: "4px",
2344
+ width: "24px",
2345
+ height: "24px",
2066
2346
  borderRadius: "50%",
2347
+ background: "#9FE1CB",
2067
2348
  display: "flex",
2068
- animation: "pulseGreen 2s ease infinite"
2349
+ alignItems: "center",
2350
+ justifyContent: "center",
2351
+ animation: "pulseGreen 2s ease infinite",
2352
+ flexShrink: 0
2069
2353
  }
2070
- }, /*#__PURE__*/React.createElement(TickMark, {
2071
- fillColor: "#00703C"
2354
+ }, /*#__PURE__*/React.createElement(CheckIcon$1, {
2355
+ size: 13,
2356
+ color: "#085041"
2072
2357
  })), /*#__PURE__*/React.createElement("span", {
2073
2358
  style: {
2074
- fontWeight: "700",
2075
- color: "#00703C",
2076
- fontSize: "18px"
2359
+ fontWeight: "600",
2360
+ color: "#085041",
2361
+ fontSize: "14px"
2077
2362
  }
2078
2363
  }, t("EKYC_AADHAAR_VERIFIED_SUCCESS") || "Aadhaar Verified Successfully")), /*#__PURE__*/React.createElement("div", {
2079
2364
  style: {
2080
2365
  display: "grid",
2081
2366
  gridTemplateColumns: "1fr 1fr",
2082
- gap: "16px"
2083
- }
2084
- }, /*#__PURE__*/React.createElement("div", {
2085
- style: {
2086
- display: "flex",
2087
- flexDirection: "column"
2088
- }
2089
- }, /*#__PURE__*/React.createElement("span", {
2090
- style: {
2091
- color: "#667085",
2092
- fontSize: "12px",
2093
- fontWeight: "700",
2094
- textTransform: "uppercase"
2095
- }
2096
- }, t("EKYC_NAME")), /*#__PURE__*/React.createElement("span", {
2097
- style: {
2098
- fontWeight: "700",
2099
- fontSize: "16px",
2100
- color: "#101828"
2101
- }
2102
- }, "Rajesh Kumar Singh")), /*#__PURE__*/React.createElement("div", {
2103
- style: {
2104
- display: "flex",
2105
- flexDirection: "column"
2106
- }
2107
- }, /*#__PURE__*/React.createElement("span", {
2108
- style: {
2109
- color: "#667085",
2110
- fontSize: "12px",
2111
- fontWeight: "700",
2112
- textTransform: "uppercase"
2113
- }
2114
- }, t("EKYC_AADHAAR")), /*#__PURE__*/React.createElement("span", {
2115
- style: {
2116
- fontWeight: "700",
2117
- fontSize: "16px",
2118
- color: "#101828"
2367
+ gap: "12px"
2119
2368
  }
2369
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2370
+ style: styles.infoLabel
2371
+ }, t("EKYC_NAME") || "Name"), /*#__PURE__*/React.createElement("div", {
2372
+ style: styles.infoValue
2373
+ }, details.consumerName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2374
+ style: styles.infoLabel
2375
+ }, t("EKYC_AADHAAR") || "Aadhaar"), /*#__PURE__*/React.createElement("div", {
2376
+ style: styles.infoValue
2120
2377
  }, "XXXX XXXX ", aadhaarLastFour)), /*#__PURE__*/React.createElement("div", {
2121
2378
  style: {
2122
- display: "flex",
2123
- flexDirection: "column",
2124
2379
  gridColumn: "span 2"
2125
2380
  }
2126
- }, /*#__PURE__*/React.createElement("span", {
2127
- style: {
2128
- color: "#667085",
2129
- fontSize: "12px",
2130
- fontWeight: "700",
2131
- textTransform: "uppercase"
2132
- }
2133
- }, t("EKYC_ADDRESS")), /*#__PURE__*/React.createElement("span", {
2134
- style: {
2135
- fontWeight: "500",
2136
- fontSize: "15px",
2137
- color: "#344054"
2138
- }
2139
- }, "House No. 45, Sector 12, New Delhi - 110001")))), /*#__PURE__*/React.createElement("hr", {
2140
- style: {
2141
- margin: "32px 0",
2142
- border: "0",
2143
- borderTop: "1px solid #EAECF0"
2144
- }
2145
- }), /*#__PURE__*/React.createElement(CardHeader, {
2146
- style: {
2147
- fontSize: "20px",
2148
- marginBottom: "16px"
2149
- }
2150
- }, t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"), /*#__PURE__*/React.createElement(LabelFieldPair, {
2151
- style: {
2152
- animation: "fadeSlideIn 0.3s ease"
2153
- }
2154
2381
  }, /*#__PURE__*/React.createElement("div", {
2382
+ style: styles.infoLabel
2383
+ }, t("EKYC_ADDRESS") || "Address"), /*#__PURE__*/React.createElement("div", {
2155
2384
  style: {
2156
- display: "flex",
2157
- alignItems: "center",
2158
- gap: "20px"
2385
+ ...styles.infoValue,
2386
+ fontSize: "13px"
2159
2387
  }
2160
- }, /*#__PURE__*/React.createElement(CardLabel, {
2388
+ }, details.address)))), /*#__PURE__*/React.createElement("hr", {
2161
2389
  style: {
2162
- fontWeight: "600",
2163
- marginBottom: "0"
2390
+ margin: "24px 0",
2391
+ border: 0,
2392
+ borderTop: "1px solid #EAECF0"
2164
2393
  }
2165
- }, t("EKYC_USER_NAME") || "Corrected Name"), /*#__PURE__*/React.createElement(RadioButtons, {
2166
- options: yesNoOptions,
2167
- optionsKey: "name",
2168
- selectedOption: nameCorrect,
2394
+ }), /*#__PURE__*/React.createElement(SectionHead$1, {
2395
+ icon: /*#__PURE__*/React.createElement(UserIcon, {
2396
+ size: 16
2397
+ }),
2398
+ label: t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"
2399
+ }), /*#__PURE__*/React.createElement(RadioToggleRow, {
2400
+ label: `${t("EKYC_USER_NAME")} (${t("EKYC_NAME_CORRECT_HINT")})`,
2401
+ selected: nameCorrect,
2169
2402
  onSelect: setNameCorrect,
2170
- t: t,
2171
- innerStyles: {
2172
- display: "flex",
2173
- gap: "24px"
2174
- },
2175
- style: {
2176
- display: "flex",
2177
- gap: "50px",
2178
- marginBottom: "0"
2179
- }
2180
- })), /*#__PURE__*/React.createElement("div", {
2181
- className: "field",
2182
- style: {
2183
- position: "relative"
2184
- }
2185
- }, /*#__PURE__*/React.createElement("div", {
2186
- style: {
2187
- position: "absolute",
2188
- left: "12px",
2189
- top: "50%",
2190
- transform: "translateY(-50%)",
2191
- zIndex: 1,
2192
- opacity: nameCorrect.code === "YES" ? 0.6 : 0.3
2193
- }
2194
- }, /*#__PURE__*/React.createElement(UserIcon, {
2195
- size: 18,
2196
- color: nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"
2197
- })), /*#__PURE__*/React.createElement(TextInput, {
2403
+ options: yesNoOptions,
2404
+ t: t
2405
+ }), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
2406
+ className: "field"
2407
+ }, /*#__PURE__*/React.createElement(IconInput$1, {
2408
+ icon: /*#__PURE__*/React.createElement(UserIcon, {
2409
+ size: 15,
2410
+ color: nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"
2411
+ }),
2198
2412
  value: userName,
2199
2413
  onChange: e => setUserName(e.target.value),
2200
2414
  placeholder: t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name",
2201
- textInputStyle: {
2202
- paddingLeft: "40px"
2203
- },
2204
2415
  disabled: nameCorrect.code !== "YES"
2205
- }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
2206
- style: {
2207
- display: "flex",
2208
- alignItems: "center",
2209
- gap: "20px",
2210
- padding: "10px"
2211
- }
2212
- }, /*#__PURE__*/React.createElement(CardLabel, {
2213
- style: {
2214
- fontWeight: "600",
2215
- marginBottom: "0"
2216
- }
2217
- }, t("EKYC_USER_MOBILE_NUMBER") || "User Mobile Number"), /*#__PURE__*/React.createElement(RadioButtons, {
2218
- options: yesNoOptions,
2219
- optionsKey: "name",
2220
- selectedOption: mobileChange,
2416
+ }))), /*#__PURE__*/React.createElement(RadioToggleRow, {
2417
+ label: `${t("EKYC_USER_MOBILE_NUMBER")} (${t("EKYC_UPDATE_MOBILE_HINT")})`,
2418
+ selected: mobileChange,
2221
2419
  onSelect: setMobileChange,
2222
- t: t,
2223
- innerStyles: {
2224
- display: "flex",
2225
- gap: "24px"
2226
- },
2227
- style: {
2228
- display: "flex",
2229
- gap: "50px",
2230
- marginBottom: "0"
2231
- }
2232
- })), /*#__PURE__*/React.createElement("div", {
2233
- className: "field",
2234
- style: {
2235
- position: "relative"
2236
- }
2237
- }, /*#__PURE__*/React.createElement("div", {
2238
- style: {
2239
- position: "absolute",
2240
- left: "12px",
2241
- top: "50%",
2242
- transform: "translateY(-50%)",
2243
- zIndex: 1,
2244
- opacity: mobileChange.code === "YES" ? 0.6 : 0.3
2245
- }
2246
- }, /*#__PURE__*/React.createElement(PhoneIcon, {
2247
- size: 18,
2248
- color: mobileChange.code === "YES" ? "#64748b" : "#94a3b8"
2249
- })), /*#__PURE__*/React.createElement(TextInput, {
2420
+ options: yesNoOptions,
2421
+ t: t
2422
+ }), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
2423
+ className: "field"
2424
+ }, /*#__PURE__*/React.createElement(IconInput$1, {
2425
+ icon: /*#__PURE__*/React.createElement(PhoneIcon, {
2426
+ size: 15,
2427
+ color: mobileChange.code === "YES" ? "#64748b" : "#94a3b8"
2428
+ }),
2250
2429
  value: mobileNumber,
2251
2430
  onChange: e => setMobileNumber(e.target.value),
2252
2431
  placeholder: "+91 XXXXX XXXXX",
2253
- textInputStyle: {
2254
- paddingLeft: "40px"
2255
- },
2256
2432
  disabled: mobileChange.code !== "YES"
2257
2433
  }))), /*#__PURE__*/React.createElement("div", {
2258
- style: {
2259
- display: "grid",
2260
- gridTemplateColumns: "1fr 1fr",
2261
- gap: "24px",
2262
- marginTop: "24px"
2263
- }
2264
- }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
2265
- style: {
2266
- fontWeight: "600"
2267
- }
2268
- }, t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"), /*#__PURE__*/React.createElement("div", {
2269
- className: "field",
2270
- style: {
2271
- position: "relative"
2272
- }
2273
- }, /*#__PURE__*/React.createElement("div", {
2274
- style: {
2275
- position: "absolute",
2276
- left: "12px",
2277
- top: "50%",
2278
- transform: "translateY(-50%)",
2279
- zIndex: 1,
2280
- opacity: 0.6
2281
- }
2282
- }, /*#__PURE__*/React.createElement(WhatsappIcon, {
2283
- size: 18
2284
- })), /*#__PURE__*/React.createElement(TextInput, {
2434
+ style: styles.twoCol
2435
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2436
+ className: "ekyc-field-label"
2437
+ }, t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"), /*#__PURE__*/React.createElement(IconInput$1, {
2438
+ icon: /*#__PURE__*/React.createElement(WhatsappIcon, {
2439
+ size: 15
2440
+ }),
2285
2441
  value: whatsappNumber,
2286
2442
  onChange: e => setWhatsappNumber(e.target.value),
2287
- placeholder: "+91 XXXXX XXXXX",
2288
- textInputStyle: {
2289
- paddingLeft: "40px"
2290
- }
2291
- }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
2443
+ placeholder: "+91 XXXXX XXXXX"
2444
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2445
+ className: "ekyc-field-label"
2446
+ }, t("EKYC_EMAIL_ADDRESS") || "Email Address", /*#__PURE__*/React.createElement("span", {
2447
+ style: styles.optionalTag
2448
+ }, t("EKYC_OPTIONAL") || "Optional")), /*#__PURE__*/React.createElement(IconInput$1, {
2449
+ icon: /*#__PURE__*/React.createElement(MailIcon, {
2450
+ size: 15
2451
+ }),
2452
+ value: email,
2453
+ onChange: e => setEmail(e.target.value),
2454
+ placeholder: t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com"
2455
+ }))), /*#__PURE__*/React.createElement("hr", {
2292
2456
  style: {
2293
- fontWeight: "600"
2457
+ margin: "24px 0",
2458
+ border: 0,
2459
+ borderTop: "1px solid #EAECF0"
2294
2460
  }
2295
- }, t("EKYC_EMAIL_ADDRESS") || "Email Address", " ", /*#__PURE__*/React.createElement("span", {
2296
- style: {
2297
- fontWeight: "400",
2298
- color: "#667085"
2299
- }
2300
- }, "(", t("EKYC_OPTIONAL") || "Optional", ")")), /*#__PURE__*/React.createElement("div", {
2301
- className: "field",
2302
- style: {
2303
- position: "relative"
2304
- }
2305
- }, /*#__PURE__*/React.createElement("div", {
2306
- style: {
2307
- position: "absolute",
2308
- left: "12px",
2309
- top: "50%",
2310
- transform: "translateY(-50%)",
2311
- zIndex: 1,
2312
- opacity: 0.6
2313
- }
2314
- }, /*#__PURE__*/React.createElement(MailIcon, {
2315
- size: 18
2316
- })), /*#__PURE__*/React.createElement(TextInput, {
2317
- value: email,
2318
- onChange: e => setEmail(e.target.value),
2319
- placeholder: t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com",
2320
- textInputStyle: {
2321
- paddingLeft: "40px"
2322
- }
2323
- })))), /*#__PURE__*/React.createElement("hr", {
2324
- style: {
2325
- margin: "32px 0",
2326
- border: "0",
2327
- borderTop: "1px solid #EAECF0"
2328
- }
2329
- }), /*#__PURE__*/React.createElement(CardHeader, {
2330
- style: {
2331
- fontSize: "20px",
2332
- marginBottom: "16px"
2333
- }
2334
- }, t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
2335
- style: {
2336
- fontWeight: "600"
2337
- }
2338
- }, t("EKYC_NO_OF_PERSONS") || "Number of Family Members"), /*#__PURE__*/React.createElement("div", {
2339
- className: "field",
2340
- style: {
2341
- position: "relative"
2342
- }
2343
- }, /*#__PURE__*/React.createElement("div", {
2344
- style: {
2345
- position: "absolute",
2346
- left: "12px",
2347
- top: "50%",
2348
- transform: "translateY(-50%)",
2349
- zIndex: 1,
2350
- opacity: 0.6
2351
- }
2352
- }, /*#__PURE__*/React.createElement(UsersIcon, {
2353
- size: 18
2354
- })), /*#__PURE__*/React.createElement(TextInput, {
2461
+ }), /*#__PURE__*/React.createElement(SectionHead$1, {
2462
+ icon: /*#__PURE__*/React.createElement(UsersIcon, {
2463
+ size: 16
2464
+ }),
2465
+ label: t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"
2466
+ }), /*#__PURE__*/React.createElement("div", {
2467
+ className: "ekyc-field-label"
2468
+ }, t("EKYC_NO_OF_PERSONS") || "Number of Family Members"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
2469
+ className: "field"
2470
+ }, /*#__PURE__*/React.createElement(IconInput$1, {
2471
+ icon: /*#__PURE__*/React.createElement(UsersIcon, {
2472
+ size: 15
2473
+ }),
2355
2474
  value: noOfPersons,
2356
2475
  onChange: e => {
2357
2476
  if (/^\d*$/.test(e.target.value)) setNoOfPersons(e.target.value);
2358
2477
  },
2359
- placeholder: t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons",
2360
- textInputStyle: {
2361
- paddingLeft: "40px"
2478
+ placeholder: t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons"
2479
+ }))), !showAddressSection && /*#__PURE__*/React.createElement("div", {
2480
+ style: {
2481
+ marginTop: "24px"
2362
2482
  }
2363
- }))), !showAddressSection && /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
2483
+ }, /*#__PURE__*/React.createElement(SubmitBar, {
2364
2484
  label: t("ES_COMMON_SAVE_CONTINUE") || "Save & Continue",
2365
- onSubmit: handleSaveAndContinueAadhaar
2485
+ onSubmit: handleSaveAndContinue
2366
2486
  })), showAddressSection && /*#__PURE__*/React.createElement("div", {
2367
2487
  ref: addressSectionRef
2368
2488
  }, /*#__PURE__*/React.createElement(AddressDetails, {
@@ -2375,66 +2495,196 @@ const AadhaarVerification = () => {
2375
2495
  }
2376
2496
  })), /*#__PURE__*/React.createElement("div", {
2377
2497
  style: {
2378
- textAlign: "center",
2379
- marginTop: "24px"
2380
- }
2381
- }, /*#__PURE__*/React.createElement("p", {
2382
- style: {
2383
- fontSize: "12px",
2384
- color: "#667085",
2385
2498
  display: "flex",
2386
2499
  alignItems: "center",
2387
2500
  justifyContent: "center",
2388
- gap: "4px"
2501
+ gap: "5px",
2502
+ marginTop: "20px",
2503
+ fontSize: "11px",
2504
+ color: "#98A2B3"
2389
2505
  }
2390
- }, /*#__PURE__*/React.createElement("svg", {
2391
- width: "12",
2392
- height: "12",
2393
- viewBox: "0 0 24 24",
2394
- fill: "none",
2395
- stroke: "currentColor",
2396
- strokeWidth: "2"
2397
- }, /*#__PURE__*/React.createElement("path", {
2398
- d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
2399
- }), /*#__PURE__*/React.createElement("path", {
2400
- d: "M12 11V17M12 7H12.01",
2401
- strokeLinecap: "round"
2402
- })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure")))));
2506
+ }, /*#__PURE__*/React.createElement(LockIcon, {
2507
+ size: 11
2508
+ }), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
2403
2509
  };
2404
2510
 
2511
+ const CheckIcon$2 = ({
2512
+ size: _size = 11,
2513
+ color: _color = "#fff"
2514
+ }) => /*#__PURE__*/React.createElement("svg", {
2515
+ width: _size,
2516
+ height: _size,
2517
+ viewBox: "0 0 24 24",
2518
+ fill: "none",
2519
+ stroke: _color,
2520
+ strokeWidth: "3",
2521
+ strokeLinecap: "round"
2522
+ }, /*#__PURE__*/React.createElement("polyline", {
2523
+ points: "20 6 9 17 4 12"
2524
+ }));
2525
+ const BuildingIcon = ({
2526
+ size: _size2 = 16
2527
+ }) => /*#__PURE__*/React.createElement("svg", {
2528
+ width: _size2,
2529
+ height: _size2,
2530
+ viewBox: "0 0 24 24",
2531
+ fill: "currentColor"
2532
+ }, /*#__PURE__*/React.createElement("path", {
2533
+ d: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8V9h8v10zm-2-8h-4v2h4v-2zm0 4h-4v2h4v-2z"
2534
+ }));
2535
+ const BriefcaseIcon = ({
2536
+ size: _size3 = 16
2537
+ }) => /*#__PURE__*/React.createElement("svg", {
2538
+ width: _size3,
2539
+ height: _size3,
2540
+ viewBox: "0 0 24 24",
2541
+ fill: "currentColor"
2542
+ }, /*#__PURE__*/React.createElement("path", {
2543
+ d: "M20 6H16V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6-2v2h-4V4h4z"
2544
+ }));
2545
+ const DocumentIcon = ({
2546
+ size: _size4 = 16
2547
+ }) => /*#__PURE__*/React.createElement("svg", {
2548
+ width: _size4,
2549
+ height: _size4,
2550
+ viewBox: "0 0 24 24",
2551
+ fill: "currentColor"
2552
+ }, /*#__PURE__*/React.createElement("path", {
2553
+ 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"
2554
+ }));
2555
+ const CameraIcon$1 = ({
2556
+ size: _size5 = 24
2557
+ }) => /*#__PURE__*/React.createElement("svg", {
2558
+ width: _size5,
2559
+ height: _size5,
2560
+ viewBox: "0 0 24 24",
2561
+ fill: "currentColor"
2562
+ }, /*#__PURE__*/React.createElement("path", {
2563
+ d: "M9 2L7.17 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L13 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
2564
+ }));
2565
+ const TrashIcon$1 = ({
2566
+ size: _size6 = 14
2567
+ }) => /*#__PURE__*/React.createElement("svg", {
2568
+ width: _size6,
2569
+ height: _size6,
2570
+ viewBox: "0 0 24 24",
2571
+ fill: "none",
2572
+ stroke: "#D92D20",
2573
+ strokeWidth: "2",
2574
+ strokeLinecap: "round"
2575
+ }, /*#__PURE__*/React.createElement("polyline", {
2576
+ points: "3 6 5 6 21 6"
2577
+ }), /*#__PURE__*/React.createElement("path", {
2578
+ d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
2579
+ }), /*#__PURE__*/React.createElement("path", {
2580
+ d: "M10 11v6M14 11v6"
2581
+ }), /*#__PURE__*/React.createElement("path", {
2582
+ d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
2583
+ }));
2584
+ const PidIcon = ({
2585
+ size: _size7 = 16
2586
+ }) => /*#__PURE__*/React.createElement("svg", {
2587
+ width: _size7,
2588
+ height: _size7,
2589
+ viewBox: "0 0 24 24",
2590
+ fill: "none",
2591
+ stroke: "currentColor",
2592
+ strokeWidth: "2",
2593
+ strokeLinecap: "round"
2594
+ }, /*#__PURE__*/React.createElement("rect", {
2595
+ x: "3",
2596
+ y: "4",
2597
+ width: "18",
2598
+ height: "16",
2599
+ rx: "2"
2600
+ }), /*#__PURE__*/React.createElement("path", {
2601
+ d: "M7 8h5M7 12h8M7 16h4"
2602
+ }));
2603
+ const SectionHead$2 = ({
2604
+ icon,
2605
+ label
2606
+ }) => /*#__PURE__*/React.createElement("div", {
2607
+ style: {
2608
+ display: "flex",
2609
+ alignItems: "center",
2610
+ gap: "8px",
2611
+ marginBottom: "16px",
2612
+ marginTop: "4px"
2613
+ }
2614
+ }, /*#__PURE__*/React.createElement("div", {
2615
+ style: {
2616
+ opacity: 0.5,
2617
+ display: "flex"
2618
+ }
2619
+ }, icon), /*#__PURE__*/React.createElement("span", {
2620
+ style: {
2621
+ fontSize: "15px",
2622
+ fontWeight: "600",
2623
+ color: "#0B0C0C",
2624
+ whiteSpace: "nowrap"
2625
+ }
2626
+ }, label), /*#__PURE__*/React.createElement("div", {
2627
+ style: {
2628
+ flex: 1,
2629
+ height: "1px",
2630
+ background: "#EAECF0"
2631
+ }
2632
+ }));
2633
+ const IconInput$2 = ({
2634
+ icon,
2635
+ ...props
2636
+ }) => /*#__PURE__*/React.createElement("div", {
2637
+ style: {
2638
+ position: "relative",
2639
+ width: "100%"
2640
+ }
2641
+ }, /*#__PURE__*/React.createElement("div", {
2642
+ style: {
2643
+ position: "absolute",
2644
+ left: "10px",
2645
+ top: "50%",
2646
+ transform: "translateY(-50%)",
2647
+ zIndex: 1,
2648
+ opacity: 0.45,
2649
+ display: "flex",
2650
+ pointerEvents: "none"
2651
+ }
2652
+ }, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
2653
+ textInputStyle: {
2654
+ paddingLeft: "36px",
2655
+ paddingRight: "12px"
2656
+ }
2657
+ }, props)));
2405
2658
  const PropertyInfo = () => {
2406
- var _dataV0$wsServicesC, _dataV0$wsServicesC$p, _data$wsServicesCal, _data$wsServicesCal$c, _dataV1$wsServicesC, _dataV1$wsServicesC$u, _dataV2$wsServicesC, _dataV2$wsServicesC$f;
2659
+ var _dataV0$wsServicesC, _dataV0$wsServicesC$p, _dataConn$wsServices, _dataConn$wsServices$, _dataV1$wsServicesC, _dataV1$wsServicesC$u, _dataV2$wsServicesC, _dataV2$wsServicesC$f;
2407
2660
  const {
2408
2661
  t
2409
2662
  } = useTranslation();
2410
2663
  const history = useHistory();
2411
2664
  const location = useLocation();
2412
- const {
2413
- kNumber
2414
- } = location.state || {
2665
+ const flowState = location.state || {
2415
2666
  kNumber: "EKYC-1234567890"
2416
2667
  };
2668
+ const {
2669
+ kNumber
2670
+ } = flowState;
2417
2671
  const tenantId = Digit.ULBService.getCurrentTenantId();
2418
2672
  const {
2419
- data: dataV0,
2420
- isLoading: isLoadingV0
2673
+ data: dataV0
2421
2674
  } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
2422
2675
  const {
2423
- data,
2424
- isLoading
2676
+ data: dataConn
2425
2677
  } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
2426
2678
  const {
2427
- data: dataV1,
2428
- isLoading: isLoadingV1
2679
+ data: dataV1
2429
2680
  } = Digit.Hooks.ekyc.useGetUserType(tenantId);
2430
2681
  const {
2431
- data: dataV2,
2432
- isLoading: isLoadingV2
2682
+ data: dataV2
2433
2683
  } = Digit.Hooks.ekyc.useGetFloorCount(tenantId);
2434
2684
  const [ownerType, setOwnerType] = useState("OWNER");
2435
2685
  const [pidNumber, setPidNumber] = useState("");
2436
- const [connectionType, setConnectionType] = useState(null);
2437
2686
  const [connectionCategory, setConnectionCategory] = useState(null);
2687
+ const [connectionType, setConnectionType] = useState(null);
2438
2688
  const [userType, setUserType] = useState(null);
2439
2689
  const [noOfFloors, setNoOfFloors] = useState(null);
2440
2690
  const [propertyDocument, setPropertyDocument] = useState(null);
@@ -2443,7 +2693,7 @@ const PropertyInfo = () => {
2443
2693
  const cameraRef = useRef(null);
2444
2694
  const handleSaveAndContinue = () => {
2445
2695
  history.push("/digit-ui/employee/ekyc/review", {
2446
- ...location.state,
2696
+ ...flowState,
2447
2697
  propertyDetails: {
2448
2698
  ownerType,
2449
2699
  pidNumber,
@@ -2456,132 +2706,136 @@ const PropertyInfo = () => {
2456
2706
  }
2457
2707
  });
2458
2708
  };
2459
- const SuitcaseIcon = () => /*#__PURE__*/React.createElement("div", {
2460
- style: {
2461
- backgroundColor: "#E8EAF6",
2462
- padding: "8px",
2463
- borderRadius: "8px",
2464
- display: "flex",
2465
- alignItems: "center",
2466
- justifyContent: "center"
2467
- }
2468
- }, /*#__PURE__*/React.createElement("svg", {
2469
- width: "24",
2470
- height: "24",
2471
- viewBox: "0 0 24 24",
2472
- fill: "none",
2473
- xmlns: "http://www.w3.org/2000/svg"
2474
- }, /*#__PURE__*/React.createElement("path", {
2475
- d: "M20 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H4C2.89 6 2 6.89 2 8V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V8C22 6.89 21.11 6 20 6ZM10 4H14V6H10V4ZM20 19H4V8H20V19ZM13 13V10H11V13H8L12 17L16 13H13Z",
2476
- fill: "#3D51B0"
2477
- })));
2478
- const BuildingIcon = () => /*#__PURE__*/React.createElement("div", {
2479
- style: {
2480
- backgroundColor: "#E8EAF6",
2481
- padding: "8px",
2482
- borderRadius: "8px",
2483
- display: "flex",
2484
- alignItems: "center",
2485
- justifyContent: "center"
2486
- }
2487
- }, /*#__PURE__*/React.createElement("svg", {
2488
- width: "24",
2489
- height: "24",
2490
- viewBox: "0 0 24 24",
2491
- fill: "none",
2492
- xmlns: "http://www.w3.org/2000/svg"
2493
- }, /*#__PURE__*/React.createElement("path", {
2494
- d: "M12 7V3H2V21H22V7H12ZM6 19H4V17H6V19ZM6 15H4V13H6V15ZM6 11H4V9H6V11ZM6 7H4V5H6V7ZM10 19H8V17H10V19ZM10 15H8V13H10V15ZM10 11H8V9H10V11ZM10 7H8V5H10V7ZM20 19H12V9H20V19ZM18 11H14V13H18V11ZM18 15H14V17H18V15Z",
2495
- fill: "#3D51B0"
2496
- })));
2497
- const PdfIcon = () => /*#__PURE__*/React.createElement("svg", {
2498
- width: "48",
2499
- height: "48",
2500
- viewBox: "0 0 24 24",
2501
- fill: "none",
2502
- xmlns: "http://www.w3.org/2000/svg"
2503
- }, /*#__PURE__*/React.createElement("path", {
2504
- d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM13 9V3.5L18.5 9H13Z",
2505
- fill: "#1976D2"
2506
- }), /*#__PURE__*/React.createElement("path", {
2507
- d: "M11 14H13V18H11V14ZM11 12H13V13H11V12Z",
2508
- fill: "white"
2509
- }), /*#__PURE__*/React.createElement("path", {
2510
- d: "M8 16H9V17H8V16Z",
2511
- fill: "white"
2512
- }), /*#__PURE__*/React.createElement("path", {
2513
- d: "M15 16H16V17H15V16Z",
2514
- fill: "white"
2515
- }), /*#__PURE__*/React.createElement("path", {
2516
- d: "M12 15.5L14 13.5H10L12 15.5Z",
2517
- fill: "white"
2518
- }), /*#__PURE__*/React.createElement("path", {
2519
- d: "M12 18V14M12 14L10 16M12 14L14 16",
2520
- stroke: "white",
2521
- strokeWidth: "2",
2522
- strokeLinecap: "round",
2523
- strokeLinejoin: "round"
2524
- }));
2525
- const CameraIcon = () => /*#__PURE__*/React.createElement("svg", {
2526
- width: "32",
2527
- height: "32",
2528
- viewBox: "0 0 24 24",
2529
- fill: "none",
2530
- xmlns: "http://www.w3.org/2000/svg"
2531
- }, /*#__PURE__*/React.createElement("path", {
2532
- 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",
2533
- fill: "#3D51B0"
2534
- }));
2709
+ const handleFileUpload = e => {
2710
+ const file = e.target.files[0];
2711
+ if (!file) return;
2712
+ setPropertyDocument(file);
2713
+ };
2714
+ const handlePhotoCapture = e => {
2715
+ const file = e.target.files[0];
2716
+ if (!file) return;
2717
+ const reader = new FileReader();
2718
+ reader.onloadend = () => setBuildingPhoto(reader.result);
2719
+ reader.readAsDataURL(file);
2720
+ };
2721
+ const connectionCategoryOptions = (dataV0 === null || dataV0 === void 0 ? void 0 : (_dataV0$wsServicesC = dataV0["ws-services-calculation"]) === null || _dataV0$wsServicesC === void 0 ? void 0 : (_dataV0$wsServicesC$p = _dataV0$wsServicesC.propertyTypeV2) === null || _dataV0$wsServicesC$p === void 0 ? void 0 : _dataV0$wsServicesC$p.map(item => ({
2722
+ label: t(item.code),
2723
+ value: item.code
2724
+ }))) || [];
2725
+ const connectionTypeOptions = (dataConn === null || dataConn === void 0 ? void 0 : (_dataConn$wsServices = dataConn["ws-services-calculation"]) === null || _dataConn$wsServices === void 0 ? void 0 : (_dataConn$wsServices$ = _dataConn$wsServices.connectionTypeV2) === null || _dataConn$wsServices$ === void 0 ? void 0 : _dataConn$wsServices$.map(item => ({
2726
+ label: t(item.code),
2727
+ value: item.code
2728
+ }))) || [];
2729
+ const userTypeOptions = (dataV1 === null || dataV1 === void 0 ? void 0 : (_dataV1$wsServicesC = dataV1["ws-services-calculation"]) === null || _dataV1$wsServicesC === void 0 ? void 0 : (_dataV1$wsServicesC$u = _dataV1$wsServicesC.userTypeV2) === null || _dataV1$wsServicesC$u === void 0 ? void 0 : _dataV1$wsServicesC$u.map(item => ({
2730
+ label: t(item.code),
2731
+ value: item.code
2732
+ }))) || [];
2733
+ const floorOptions = (dataV2 === null || dataV2 === void 0 ? void 0 : (_dataV2$wsServicesC = dataV2["ws-services-calculation"]) === null || _dataV2$wsServicesC === void 0 ? void 0 : (_dataV2$wsServicesC$f = _dataV2$wsServicesC.floorCount) === null || _dataV2$wsServicesC$f === void 0 ? void 0 : _dataV2$wsServicesC$f.map(item => ({
2734
+ label: t(item.code),
2735
+ value: item.code
2736
+ }))) || [];
2535
2737
  return /*#__PURE__*/React.createElement("div", {
2536
2738
  className: "inbox-container"
2537
- }, /*#__PURE__*/React.createElement("div", {
2739
+ }, /*#__PURE__*/React.createElement("style", null, `
2740
+ @keyframes fadeSlideIn {
2741
+ from { opacity: 0; transform: translateY(8px); }
2742
+ to { opacity: 1; transform: translateY(0); }
2743
+ }
2744
+ `), /*#__PURE__*/React.createElement("div", {
2538
2745
  className: "filters-container"
2539
2746
  }, /*#__PURE__*/React.createElement(Card, {
2540
- className: "sidebar-title-card",
2541
2747
  style: {
2542
2748
  display: "flex",
2543
2749
  alignItems: "center",
2544
- padding: "16px",
2545
- marginBottom: "16px",
2546
- borderRadius: "4px"
2750
+ padding: "12px 16px",
2751
+ marginBottom: "12px",
2752
+ borderRadius: "8px"
2547
2753
  }
2548
2754
  }, /*#__PURE__*/React.createElement("div", {
2549
- className: "icon-container",
2550
2755
  style: {
2551
- color: "#0068faff",
2552
- marginRight: "12px"
2756
+ color: "#185FA5",
2757
+ marginRight: "10px",
2758
+ display: "flex"
2553
2759
  }
2554
2760
  }, /*#__PURE__*/React.createElement(HomeIcon, {
2555
2761
  style: {
2556
- width: "24px",
2557
- height: "24px"
2762
+ width: "20px",
2763
+ height: "20px"
2558
2764
  }
2559
2765
  })), /*#__PURE__*/React.createElement("div", {
2560
2766
  style: {
2561
- fontWeight: "700",
2562
- fontSize: "18px",
2767
+ fontWeight: "600",
2768
+ fontSize: "15px",
2563
2769
  color: "#0B0C0C"
2564
2770
  }
2565
- }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
2771
+ }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
2566
2772
  style: {
2567
- backgroundColor: "#FFFFFF",
2568
- padding: "16px",
2773
+ background: "#fff",
2774
+ padding: "16px 14px",
2569
2775
  borderRadius: "8px",
2570
- border: "1px solid #EAECF0",
2571
- boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
2776
+ border: "1px solid #EAECF0"
2572
2777
  }
2573
- }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
2778
+ }, [{
2574
2779
  label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
2575
- isCompleted: true
2576
- }), /*#__PURE__*/React.createElement(CheckPoint, {
2780
+ done: true,
2781
+ active: false
2782
+ }, {
2577
2783
  label: t("EKYC_STEP_ADDRESS") || "Address",
2578
- isCompleted: true
2579
- }), /*#__PURE__*/React.createElement(CheckPoint, {
2784
+ done: true,
2785
+ active: false
2786
+ }, {
2580
2787
  label: t("EKYC_STEP_PROPERTY") || "Property",
2581
- isCompleted: false
2582
- }), /*#__PURE__*/React.createElement(CheckPoint, {
2583
- label: t("EKYC_STEP_REVIEW") || "Review"
2584
- })))), /*#__PURE__*/React.createElement("div", {
2788
+ done: false,
2789
+ active: true
2790
+ }, {
2791
+ label: t("EKYC_STEP_REVIEW") || "Review",
2792
+ done: false,
2793
+ active: false
2794
+ }].map((step, i) => /*#__PURE__*/React.createElement("div", {
2795
+ key: i,
2796
+ style: {
2797
+ display: "flex",
2798
+ gap: "10px",
2799
+ alignItems: "flex-start",
2800
+ position: "relative",
2801
+ paddingBottom: i < 3 ? "18px" : 0
2802
+ }
2803
+ }, i < 3 && /*#__PURE__*/React.createElement("div", {
2804
+ style: {
2805
+ position: "absolute",
2806
+ left: "10px",
2807
+ top: "22px",
2808
+ width: "1px",
2809
+ height: "calc(100% - 10px)",
2810
+ background: "#EAECF0"
2811
+ }
2812
+ }), /*#__PURE__*/React.createElement("div", {
2813
+ style: {
2814
+ width: "20px",
2815
+ height: "20px",
2816
+ borderRadius: "50%",
2817
+ flexShrink: 0,
2818
+ marginTop: "1px",
2819
+ border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
2820
+ background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
2821
+ display: "flex",
2822
+ alignItems: "center",
2823
+ justifyContent: "center",
2824
+ fontSize: "10px",
2825
+ fontWeight: "500",
2826
+ color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3"
2827
+ }
2828
+ }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$2, {
2829
+ size: 11,
2830
+ color: "#fff"
2831
+ }) : i + 1), /*#__PURE__*/React.createElement("div", {
2832
+ style: {
2833
+ fontSize: "12px",
2834
+ paddingTop: "2px",
2835
+ color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
2836
+ fontWeight: step.done || step.active ? "600" : "400"
2837
+ }
2838
+ }, step.label))))), /*#__PURE__*/React.createElement("div", {
2585
2839
  style: {
2586
2840
  flex: 1,
2587
2841
  marginLeft: "16px"
@@ -2591,379 +2845,623 @@ const PropertyInfo = () => {
2591
2845
  display: "flex",
2592
2846
  justifyContent: "space-between",
2593
2847
  alignItems: "center",
2594
- marginBottom: "24px"
2848
+ marginBottom: "20px"
2595
2849
  }
2596
- }, /*#__PURE__*/React.createElement(Header, null, t("Property Details")), /*#__PURE__*/React.createElement("div", {
2850
+ }, /*#__PURE__*/React.createElement(CardHeader, {
2597
2851
  style: {
2598
- fontSize: "14px",
2599
- fontWeight: "700",
2600
- color: "#505A5F"
2852
+ margin: 0,
2853
+ fontSize: "18px"
2601
2854
  }
2602
- }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
2855
+ }, t("EKYC_PROPERTY_DETAILS_HEADER") || "Property Details"), /*#__PURE__*/React.createElement("div", {
2603
2856
  style: {
2604
- color: "#0B0C0C"
2857
+ background: "#F9FAFB",
2858
+ border: "0.5px solid #EAECF0",
2859
+ borderRadius: "20px",
2860
+ padding: "4px 14px",
2861
+ fontSize: "12px",
2862
+ color: "#667085"
2605
2863
  }
2606
- }, kNumber))), /*#__PURE__*/React.createElement("div", {
2864
+ }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
2607
2865
  style: {
2608
- display: "flex",
2609
- alignItems: "center",
2610
- gap: "12px",
2611
- marginBottom: "24px"
2866
+ color: "#0B0C0C",
2867
+ fontWeight: "600"
2612
2868
  }
2613
- }, /*#__PURE__*/React.createElement(SuitcaseIcon, null), /*#__PURE__*/React.createElement("span", {
2869
+ }, kNumber))), /*#__PURE__*/React.createElement("div", {
2614
2870
  style: {
2615
- fontSize: "20px",
2616
- fontWeight: "700",
2617
- color: "#101828"
2871
+ animation: "fadeSlideIn 0.3s ease"
2618
2872
  }
2619
- }, t("Property Details"))), /*#__PURE__*/React.createElement(Card, {
2873
+ }, /*#__PURE__*/React.createElement(SectionHead$2, {
2874
+ icon: /*#__PURE__*/React.createElement(BriefcaseIcon, {
2875
+ size: 16
2876
+ }),
2877
+ label: t("EKYC_PROPERTY_DETAILS") || "Property details"
2878
+ }), /*#__PURE__*/React.createElement("div", {
2620
2879
  style: {
2621
- padding: "20px",
2622
- borderRadius: "16px",
2623
- border: "1px solid #EAECF0",
2624
- marginBottom: "24px"
2880
+ marginBottom: "20px"
2625
2881
  }
2626
2882
  }, /*#__PURE__*/React.createElement("div", {
2627
2883
  style: {
2628
- marginBottom: "24px"
2629
- }
2630
- }, /*#__PURE__*/React.createElement(CardLabel, {
2631
- style: {
2632
- fontSize: "14px",
2884
+ fontSize: "11px",
2633
2885
  fontWeight: "600",
2634
2886
  color: "#667085",
2635
- marginBottom: "12px"
2887
+ textTransform: "uppercase",
2888
+ letterSpacing: "0.04em",
2889
+ marginBottom: "8px"
2636
2890
  }
2637
- }, t("Property_Owner")), /*#__PURE__*/React.createElement("div", {
2891
+ }, t("EKYC_PROPERTY_OWNER") || "Property owner"), /*#__PURE__*/React.createElement("div", {
2638
2892
  style: {
2639
2893
  display: "flex",
2640
2894
  backgroundColor: "#F2F4F7",
2641
2895
  padding: "4px",
2642
- borderRadius: "12px"
2643
- }
2644
- }, /*#__PURE__*/React.createElement("button", {
2645
- onClick: () => setOwnerType("OWNER"),
2646
- style: {
2647
- flex: 1,
2648
- padding: "10px",
2649
2896
  borderRadius: "10px",
2650
- border: "none",
2651
- backgroundColor: ownerType === "OWNER" ? "#3D51B0" : "transparent",
2652
- color: ownerType === "OWNER" ? "#FFFFFF" : "#667085",
2653
- fontWeight: "600",
2654
- cursor: "pointer",
2655
- transition: "all 0.2s"
2897
+ gap: "4px"
2656
2898
  }
2657
- }, t("Owner")), /*#__PURE__*/React.createElement("button", {
2658
- onClick: () => setOwnerType("TENANT"),
2899
+ }, ["OWNER", "TENANT"].map(type => /*#__PURE__*/React.createElement("button", {
2900
+ key: type,
2901
+ onClick: () => setOwnerType(type),
2659
2902
  style: {
2660
2903
  flex: 1,
2661
- padding: "10px",
2662
- borderRadius: "10px",
2904
+ padding: "9px 12px",
2905
+ borderRadius: "7px",
2663
2906
  border: "none",
2664
- backgroundColor: ownerType === "TENANT" ? "#3D51B0" : "transparent",
2665
- color: ownerType === "TENANT" ? "#FFFFFF" : "#667085",
2666
- fontWeight: "600",
2667
2907
  cursor: "pointer",
2668
- transition: "all 0.2s"
2908
+ fontSize: "13px",
2909
+ fontWeight: "600",
2910
+ transition: "all 0.15s",
2911
+ background: ownerType === type ? "#185FA5" : "transparent",
2912
+ color: ownerType === type ? "#fff" : "#667085"
2669
2913
  }
2670
- }, t("Tenant")))), /*#__PURE__*/React.createElement("div", {
2914
+ }, t(`EKYC_${type}`) || (type === "OWNER" ? "Owner" : "Tenant"))))), /*#__PURE__*/React.createElement("div", {
2671
2915
  style: {
2672
- marginBottom: "8px"
2916
+ marginBottom: "20px"
2673
2917
  }
2674
- }, /*#__PURE__*/React.createElement(CardLabel, {
2918
+ }, /*#__PURE__*/React.createElement("div", {
2675
2919
  style: {
2676
- fontSize: "14px",
2920
+ fontSize: "11px",
2677
2921
  fontWeight: "600",
2678
2922
  color: "#667085",
2679
- marginBottom: "12px"
2923
+ textTransform: "uppercase",
2924
+ letterSpacing: "0.04em",
2925
+ marginBottom: "6px"
2680
2926
  }
2681
- }, t("PID_Number"), " ", /*#__PURE__*/React.createElement("span", {
2927
+ }, t("EKYC_PID_NUMBER") || "PID number", " ", /*#__PURE__*/React.createElement("span", {
2682
2928
  style: {
2683
2929
  fontStyle: "italic",
2684
2930
  fontWeight: "400",
2931
+ textTransform: "none",
2685
2932
  color: "#98A2B3"
2686
2933
  }
2687
- }, t("Optional"))), /*#__PURE__*/React.createElement("div", {
2688
- className: "field",
2689
- style: {
2690
- position: "relative"
2691
- }
2692
- }, /*#__PURE__*/React.createElement(TextInput, {
2934
+ }, "\u2014 ", t("EKYC_OPTIONAL") || "optional")), /*#__PURE__*/React.createElement(IconInput$2, {
2935
+ icon: /*#__PURE__*/React.createElement(PidIcon, {
2936
+ size: 15
2937
+ }),
2693
2938
  value: pidNumber,
2694
2939
  onChange: e => setPidNumber(e.target.value),
2695
- placeholder: t("Enter_PID_Number"),
2696
- textInputStyle: {
2697
- paddingLeft: "44px",
2698
- borderRadius: "12px",
2699
- border: "1px solid #D0D5DD",
2700
- height: "56px"
2940
+ placeholder: t("EKYC_ENTER_PID_NUMBER") || "Enter PID number"
2941
+ })), /*#__PURE__*/React.createElement("hr", {
2942
+ style: {
2943
+ margin: "24px 0",
2944
+ border: 0,
2945
+ borderTop: "1px solid #EAECF0"
2701
2946
  }
2947
+ }), /*#__PURE__*/React.createElement(SectionHead$2, {
2948
+ icon: /*#__PURE__*/React.createElement(BuildingIcon, {
2949
+ size: 16
2950
+ }),
2951
+ label: t("EKYC_BUILDING_INFO") || "Building info"
2702
2952
  }), /*#__PURE__*/React.createElement("div", {
2703
2953
  style: {
2704
- position: "absolute",
2705
- left: "16px",
2706
- top: "50%",
2707
- transform: "translateY(-50%)",
2708
- color: "#3D51B0",
2709
- fontSize: "20px",
2710
- fontWeight: "600"
2954
+ display: "grid",
2955
+ gridTemplateColumns: "1fr 1fr",
2956
+ gap: "14px",
2957
+ marginBottom: "14px"
2711
2958
  }
2712
- }, "#")))), /*#__PURE__*/React.createElement("div", {
2959
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2713
2960
  style: {
2714
- display: "flex",
2715
- alignItems: "center",
2716
- gap: "12px",
2717
- marginBottom: "24px"
2961
+ fontSize: "11px",
2962
+ fontWeight: "600",
2963
+ color: "#667085",
2964
+ textTransform: "uppercase",
2965
+ letterSpacing: "0.04em",
2966
+ marginBottom: "6px"
2718
2967
  }
2719
- }, /*#__PURE__*/React.createElement(BuildingIcon, null), /*#__PURE__*/React.createElement("span", {
2968
+ }, t("EKYC_TYPE_OF_CONNECTION") || "Type of connection"), /*#__PURE__*/React.createElement(Dropdown, {
2969
+ selected: connectionCategory,
2970
+ select: setConnectionCategory,
2971
+ option: connectionCategoryOptions,
2972
+ optionKey: "label",
2973
+ t: t,
2974
+ placeholder: t("EKYC_SELECT") || "Select"
2975
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2720
2976
  style: {
2721
- fontSize: "20px",
2722
- fontWeight: "700",
2723
- color: "#101828"
2977
+ fontSize: "11px",
2978
+ fontWeight: "600",
2979
+ color: "#667085",
2980
+ textTransform: "uppercase",
2981
+ letterSpacing: "0.04em",
2982
+ marginBottom: "6px"
2724
2983
  }
2725
- }, t("Building_Info"))), /*#__PURE__*/React.createElement(Card, {
2984
+ }, t("EKYC_CONNECTION_CATEGORY") || "Connection category"), /*#__PURE__*/React.createElement(Dropdown, {
2985
+ selected: connectionType,
2986
+ select: setConnectionType,
2987
+ option: connectionTypeOptions,
2988
+ optionKey: "label",
2989
+ t: t,
2990
+ placeholder: t("EKYC_SELECT") || "Select"
2991
+ }))), /*#__PURE__*/React.createElement("div", {
2726
2992
  style: {
2727
- padding: "20px",
2728
- borderRadius: "16px",
2729
- border: "1px solid #EAECF0",
2993
+ display: "grid",
2994
+ gridTemplateColumns: "1fr 1fr",
2995
+ gap: "14px",
2730
2996
  marginBottom: "24px"
2731
2997
  }
2732
- }, [{
2733
- label: "Type_of_Connection",
2734
- state: connectionCategory,
2735
- setState: setConnectionCategory,
2736
- options: (dataV0 === null || dataV0 === void 0 ? void 0 : (_dataV0$wsServicesC = dataV0["ws-services-calculation"]) === null || _dataV0$wsServicesC === void 0 ? void 0 : (_dataV0$wsServicesC$p = _dataV0$wsServicesC.propertyTypeV2) === null || _dataV0$wsServicesC$p === void 0 ? void 0 : _dataV0$wsServicesC$p.map(item => ({
2737
- label: t(item.code),
2738
- value: item.code
2739
- }))) || []
2740
- }, {
2741
- label: "Connection_Category",
2742
- state: connectionType,
2743
- setState: setConnectionType,
2744
- options: (data === null || data === void 0 ? void 0 : (_data$wsServicesCal = data["ws-services-calculation"]) === null || _data$wsServicesCal === void 0 ? void 0 : (_data$wsServicesCal$c = _data$wsServicesCal.connectionTypeV2) === null || _data$wsServicesCal$c === void 0 ? void 0 : _data$wsServicesCal$c.map(item => ({
2745
- label: t(item.code),
2746
- value: item.code
2747
- }))) || []
2748
- }, {
2749
- label: "User_Type",
2750
- state: userType,
2751
- setState: setUserType,
2752
- options: (dataV1 === null || dataV1 === void 0 ? void 0 : (_dataV1$wsServicesC = dataV1["ws-services-calculation"]) === null || _dataV1$wsServicesC === void 0 ? void 0 : (_dataV1$wsServicesC$u = _dataV1$wsServicesC.userTypeV2) === null || _dataV1$wsServicesC$u === void 0 ? void 0 : _dataV1$wsServicesC$u.map(item => ({
2753
- label: t(item.code),
2754
- value: item.code
2755
- }))) || []
2756
- }, {
2757
- label: "No_of_Floor",
2758
- state: noOfFloors,
2759
- setState: setNoOfFloors,
2760
- options: (dataV2 === null || dataV2 === void 0 ? void 0 : (_dataV2$wsServicesC = dataV2["ws-services-calculation"]) === null || _dataV2$wsServicesC === void 0 ? void 0 : (_dataV2$wsServicesC$f = _dataV2$wsServicesC.floorCount) === null || _dataV2$wsServicesC$f === void 0 ? void 0 : _dataV2$wsServicesC$f.map(item => ({
2761
- label: t(item.code),
2762
- value: item.code
2763
- }))) || []
2764
- }].map((item, idx) => /*#__PURE__*/React.createElement("div", {
2765
- key: idx,
2766
- style: {
2767
- marginBottom: "20px"
2768
- }
2769
- }, /*#__PURE__*/React.createElement(CardLabel, {
2998
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2770
2999
  style: {
2771
- fontSize: "14px",
3000
+ fontSize: "11px",
2772
3001
  fontWeight: "600",
2773
- color: "#344054",
2774
- marginBottom: "8px"
3002
+ color: "#667085",
3003
+ textTransform: "uppercase",
3004
+ letterSpacing: "0.04em",
3005
+ marginBottom: "6px"
2775
3006
  }
2776
- }, t(item.label)), /*#__PURE__*/React.createElement(Dropdown, {
2777
- selected: item.state,
2778
- select: item.setState,
2779
- option: item.options || [{
2780
- label: `Select ${item.label}`,
2781
- value: ""
2782
- }],
3007
+ }, t("EKYC_USER_TYPE") || "User type"), /*#__PURE__*/React.createElement(Dropdown, {
3008
+ selected: userType,
3009
+ select: setUserType,
3010
+ option: userTypeOptions,
2783
3011
  optionKey: "label",
2784
3012
  t: t,
3013
+ placeholder: t("EKYC_SELECT") || "Select"
3014
+ })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2785
3015
  style: {
2786
- borderRadius: "12px",
2787
- border: "1px solid #D0D5DD",
2788
- height: "48px"
3016
+ fontSize: "11px",
3017
+ fontWeight: "600",
3018
+ color: "#667085",
3019
+ textTransform: "uppercase",
3020
+ letterSpacing: "0.04em",
3021
+ marginBottom: "6px"
2789
3022
  }
2790
- }))), /*#__PURE__*/React.createElement("div", {
3023
+ }, t("EKYC_NO_OF_FLOORS") || "No. of floors"), /*#__PURE__*/React.createElement(Dropdown, {
3024
+ selected: noOfFloors,
3025
+ select: setNoOfFloors,
3026
+ option: floorOptions,
3027
+ optionKey: "label",
3028
+ t: t,
3029
+ placeholder: t("EKYC_SELECT") || "Select"
3030
+ }))), /*#__PURE__*/React.createElement("hr", {
2791
3031
  style: {
2792
- display: "flex",
2793
- gap: "24px",
2794
- alignItems: "stretch",
2795
- flexWrap: "wrap"
3032
+ margin: "24px 0",
3033
+ border: 0,
3034
+ borderTop: "1px solid #EAECF0"
2796
3035
  }
2797
- }, /*#__PURE__*/React.createElement("div", {
3036
+ }), /*#__PURE__*/React.createElement(SectionHead$2, {
3037
+ icon: /*#__PURE__*/React.createElement(DocumentIcon, {
3038
+ size: 16
3039
+ }),
3040
+ label: t("EKYC_DOCUMENTS_PHOTO") || "Documents & photo"
3041
+ }), /*#__PURE__*/React.createElement("div", {
2798
3042
  style: {
2799
- flex: 1,
2800
- minWidth: "300px",
2801
- display: "flex",
2802
- flexDirection: "column"
3043
+ display: "grid",
3044
+ gridTemplateColumns: "1fr 1fr",
3045
+ gap: "14px",
3046
+ marginBottom: "20px"
2803
3047
  }
2804
- }, /*#__PURE__*/React.createElement(CardLabel, {
3048
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
2805
3049
  style: {
2806
- fontSize: "14px",
3050
+ fontSize: "11px",
2807
3051
  fontWeight: "600",
2808
- color: "#344054",
3052
+ color: "#667085",
3053
+ textTransform: "uppercase",
3054
+ letterSpacing: "0.04em",
2809
3055
  marginBottom: "8px"
2810
3056
  }
2811
- }, t("Upload_Property_Document")), /*#__PURE__*/React.createElement("div", {
2812
- style: {
2813
- flex: 1,
2814
- backgroundColor: "#EBF5FF",
2815
- border: "1px solid #B2DDFF",
2816
- borderRadius: "16px",
2817
- padding: "32px 24px",
2818
- textAlign: "center",
2819
- cursor: "pointer",
2820
- display: "flex",
2821
- flexDirection: "column",
2822
- justifyContent: "center"
2823
- },
2824
- onClick: () => fileRef.current.click()
2825
- }, /*#__PURE__*/React.createElement("input", {
3057
+ }, t("EKYC_UPLOAD_PROPERTY_DOC") || "Upload property document"), /*#__PURE__*/React.createElement("input", {
2826
3058
  type: "file",
2827
3059
  ref: fileRef,
3060
+ accept: ".pdf",
2828
3061
  style: {
2829
3062
  display: "none"
2830
3063
  },
2831
- accept: ".pdf"
3064
+ onChange: handleFileUpload
2832
3065
  }), /*#__PURE__*/React.createElement("div", {
3066
+ onClick: () => fileRef.current.click(),
3067
+ onMouseOver: e => e.currentTarget.style.borderColor = "#185FA5",
3068
+ onMouseOut: e => e.currentTarget.style.borderColor = "#B5D4F4",
2833
3069
  style: {
2834
- color: "#1570EF",
2835
- fontWeight: "600",
2836
- fontSize: "16px",
2837
- marginBottom: "20px",
2838
- lineHeight: "1.5"
2839
- }
2840
- }, t("Upload_your_property_document_in_PDF_Only")), /*#__PURE__*/React.createElement("div", {
2841
- style: {
3070
+ border: "1.5px dashed #B5D4F4",
3071
+ borderRadius: "10px",
3072
+ padding: "28px 20px",
3073
+ textAlign: "center",
3074
+ cursor: "pointer",
3075
+ backgroundColor: "#E6F1FB",
3076
+ minHeight: "160px",
2842
3077
  display: "flex",
2843
- justifyContent: "center"
3078
+ flexDirection: "column",
3079
+ alignItems: "center",
3080
+ justifyContent: "center",
3081
+ gap: "10px",
3082
+ transition: "border-color 0.15s"
2844
3083
  }
2845
3084
  }, /*#__PURE__*/React.createElement("div", {
2846
3085
  style: {
2847
- backgroundColor: "#FFFFFF",
2848
- padding: "12px",
2849
- borderRadius: "12px",
2850
- boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
3086
+ background: "#fff",
3087
+ padding: "10px",
3088
+ borderRadius: "10px",
3089
+ display: "flex"
2851
3090
  }
2852
- }, /*#__PURE__*/React.createElement(PdfIcon, null))))), /*#__PURE__*/React.createElement("div", {
3091
+ }, /*#__PURE__*/React.createElement("svg", {
3092
+ width: "32",
3093
+ height: "32",
3094
+ viewBox: "0 0 24 24",
3095
+ fill: "#185FA5"
3096
+ }, /*#__PURE__*/React.createElement("path", {
3097
+ 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"
3098
+ }), /*#__PURE__*/React.createElement("path", {
3099
+ d: "M12 18v-4M12 14l-2 2M12 14l2 2",
3100
+ stroke: "#fff",
3101
+ strokeWidth: "1.5",
3102
+ strokeLinecap: "round"
3103
+ }))), propertyDocument ? /*#__PURE__*/React.createElement("div", {
2853
3104
  style: {
2854
- flex: 1,
2855
- minWidth: "300px",
2856
- display: "flex",
2857
- flexDirection: "column"
3105
+ fontSize: "13px",
3106
+ fontWeight: "600",
3107
+ color: "#0F6E56"
2858
3108
  }
2859
- }, /*#__PURE__*/React.createElement(CardLabel, {
3109
+ }, "\u2713 ", propertyDocument.name) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
2860
3110
  style: {
2861
- fontSize: "14px",
3111
+ fontSize: "13px",
2862
3112
  fontWeight: "600",
2863
- color: "#344054",
2864
- marginBottom: "8px"
3113
+ color: "#185FA5"
2865
3114
  }
2866
- }, t("Capture_Building_Image")), /*#__PURE__*/React.createElement("div", {
3115
+ }, t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload"), /*#__PURE__*/React.createElement("div", {
2867
3116
  style: {
2868
- flex: 1,
2869
- border: "1px solid #D0D5DD",
2870
- borderRadius: "16px",
2871
- padding: "40px 24px",
2872
- textAlign: "center",
2873
- cursor: "pointer",
2874
- backgroundColor: "#FFFFFF",
2875
- display: "flex",
2876
- flexDirection: "column",
2877
- justifyContent: "center"
2878
- },
2879
- onClick: () => cameraRef.current.click()
2880
- }, /*#__PURE__*/React.createElement("input", {
3117
+ fontSize: "12px",
3118
+ color: "#378ADD"
3119
+ }
3120
+ }, "PDF only")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
3121
+ style: {
3122
+ fontSize: "11px",
3123
+ fontWeight: "600",
3124
+ color: "#667085",
3125
+ textTransform: "uppercase",
3126
+ letterSpacing: "0.04em",
3127
+ marginBottom: "8px"
3128
+ }
3129
+ }, t("EKYC_CAPTURE_BUILDING_IMAGE") || "Capture building image"), /*#__PURE__*/React.createElement("input", {
2881
3130
  type: "file",
2882
3131
  ref: cameraRef,
3132
+ accept: "image/*",
3133
+ capture: "environment",
2883
3134
  style: {
2884
3135
  display: "none"
2885
3136
  },
2886
- accept: "image/*",
2887
- capture: "environment"
3137
+ onChange: handlePhotoCapture
2888
3138
  }), /*#__PURE__*/React.createElement("div", {
3139
+ onClick: !buildingPhoto ? () => cameraRef.current.click() : undefined,
3140
+ onMouseOver: e => {
3141
+ if (!buildingPhoto) e.currentTarget.style.borderColor = "#185FA5";
3142
+ },
3143
+ onMouseOut: e => {
3144
+ if (!buildingPhoto) e.currentTarget.style.borderColor = "#D0D5DD";
3145
+ },
2889
3146
  style: {
2890
- backgroundColor: "#EEF4FF",
2891
- width: "56px",
2892
- height: "56px",
3147
+ border: "1.5px dashed #D0D5DD",
3148
+ borderRadius: "10px",
3149
+ minHeight: "160px",
3150
+ display: "flex",
3151
+ flexDirection: "column",
3152
+ alignItems: "center",
3153
+ justifyContent: "center",
3154
+ backgroundColor: "#F9FAFB",
3155
+ cursor: buildingPhoto ? "default" : "pointer",
3156
+ overflow: "hidden",
3157
+ transition: "border-color 0.15s",
3158
+ position: "relative",
3159
+ padding: buildingPhoto ? "0" : "28px 20px"
3160
+ }
3161
+ }, !buildingPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
3162
+ style: {
3163
+ background: "#E6F1FB",
3164
+ width: "52px",
3165
+ height: "52px",
2893
3166
  borderRadius: "50%",
2894
3167
  display: "flex",
2895
3168
  alignItems: "center",
2896
3169
  justifyContent: "center",
2897
- margin: "0 auto 16px"
3170
+ marginBottom: "10px"
2898
3171
  }
2899
- }, /*#__PURE__*/React.createElement(CameraIcon, null)), /*#__PURE__*/React.createElement("div", {
3172
+ }, /*#__PURE__*/React.createElement(CameraIcon$1, {
3173
+ size: 26
3174
+ })), /*#__PURE__*/React.createElement("div", {
2900
3175
  style: {
3176
+ fontSize: "13px",
2901
3177
  fontWeight: "600",
2902
- color: "#101828",
2903
- fontSize: "16px",
2904
- marginBottom: "4px"
3178
+ color: "#101828"
2905
3179
  }
2906
- }, t("Tap_to_Capture")), /*#__PURE__*/React.createElement("div", {
3180
+ }, t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"), /*#__PURE__*/React.createElement("div", {
2907
3181
  style: {
3182
+ fontSize: "12px",
2908
3183
  color: "#667085",
2909
- fontSize: "14px"
3184
+ marginTop: "2px"
2910
3185
  }
2911
- }, t("Building_Photo"))))), /*#__PURE__*/React.createElement("div", {
3186
+ }, t("EKYC_BUILDING_PHOTO") || "Building photo with GPS")) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("img", {
3187
+ src: buildingPhoto,
3188
+ alt: "Building",
2912
3189
  style: {
2913
- marginTop: "24px",
2914
- backgroundColor: "#EFF8FF",
2915
- padding: "16px",
2916
- borderRadius: "12px",
3190
+ width: "100%",
3191
+ maxHeight: "200px",
3192
+ objectFit: "cover",
3193
+ display: "block"
3194
+ }
3195
+ }), /*#__PURE__*/React.createElement("button", {
3196
+ onClick: e => {
3197
+ e.stopPropagation();
3198
+ setBuildingPhoto(null);
3199
+ if (cameraRef.current) cameraRef.current.value = "";
3200
+ },
3201
+ style: {
3202
+ position: "absolute",
3203
+ top: "8px",
3204
+ right: "8px",
3205
+ background: "#fff",
3206
+ border: "0.5px solid #EAECF0",
3207
+ borderRadius: "7px",
3208
+ padding: "5px 10px",
2917
3209
  display: "flex",
2918
- gap: "12px",
2919
- border: "1px solid #B2DDFF"
3210
+ alignItems: "center",
3211
+ gap: "5px",
3212
+ cursor: "pointer",
3213
+ fontSize: "12px",
3214
+ color: "#D92D20",
3215
+ fontWeight: "500"
3216
+ }
3217
+ }, /*#__PURE__*/React.createElement(TrashIcon$1, {
3218
+ size: 13
3219
+ }), " ", t("EKYC_REMOVE") || "Remove"))))), /*#__PURE__*/React.createElement("div", {
3220
+ style: {
3221
+ backgroundColor: "#E6F1FB",
3222
+ border: "0.5px solid #B5D4F4",
3223
+ borderRadius: "8px",
3224
+ padding: "12px 14px",
3225
+ display: "flex",
3226
+ alignItems: "flex-start",
3227
+ gap: "10px",
3228
+ marginBottom: "4px"
2920
3229
  }
2921
3230
  }, /*#__PURE__*/React.createElement("div", {
2922
3231
  style: {
2923
- color: "#1570EF"
3232
+ flexShrink: 0,
3233
+ marginTop: "1px"
2924
3234
  }
2925
- }, /*#__PURE__*/React.createElement("svg", {
2926
- width: "20",
2927
- height: "20",
2928
- viewBox: "0 0 20 20",
2929
- fill: "none",
2930
- xmlns: "http://www.w3.org/2000/svg"
2931
- }, /*#__PURE__*/React.createElement("path", {
2932
- d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z",
2933
- fill: "currentColor"
2934
- }))), /*#__PURE__*/React.createElement("div", {
3235
+ }, /*#__PURE__*/React.createElement(InfoBannerIcon, {
3236
+ fill: "#185FA5"
3237
+ })), /*#__PURE__*/React.createElement("div", {
2935
3238
  style: {
2936
- color: "#175CD3",
2937
- fontSize: "14px",
2938
- fontWeight: "500",
2939
- lineHeight: "1.4"
3239
+ fontSize: "13px",
3240
+ color: "#185FA5",
3241
+ lineHeight: "1.5"
2940
3242
  }
2941
- }, t("This_section_is_enabled_only_if_user_is_not_the_owner."))), /*#__PURE__*/React.createElement("div", {
3243
+ }, t("EKYC_TENANT_INFO_NOTICE") || "This section is enabled only if the user is not the owner. Tenant details will be required if tenant is selected."))), /*#__PURE__*/React.createElement("div", {
2942
3244
  style: {
2943
- display: "flex",
2944
- justifyContent: "flex-start",
2945
3245
  marginTop: "24px"
2946
3246
  }
2947
3247
  }, /*#__PURE__*/React.createElement(SubmitBar, {
2948
- label: t("Save_&_Continue"),
2949
- onSubmit: handleSaveAndContinue,
3248
+ label: t("EKYC_SAVE_AND_CONTINUE") || "Save & Continue",
3249
+ onSubmit: handleSaveAndContinue
3250
+ })), /*#__PURE__*/React.createElement("div", {
2950
3251
  style: {
2951
- borderRadius: "8px",
2952
- height: "48px",
2953
- margin: 0
3252
+ display: "flex",
3253
+ alignItems: "center",
3254
+ justifyContent: "center",
3255
+ gap: "5px",
3256
+ marginTop: "16px",
3257
+ fontSize: "11px",
3258
+ color: "#98A2B3"
2954
3259
  }
2955
- }))))));
3260
+ }, /*#__PURE__*/React.createElement("svg", {
3261
+ width: "11",
3262
+ height: "11",
3263
+ viewBox: "0 0 24 24",
3264
+ fill: "none",
3265
+ stroke: "currentColor",
3266
+ strokeWidth: "2",
3267
+ strokeLinecap: "round"
3268
+ }, /*#__PURE__*/React.createElement("rect", {
3269
+ x: "3",
3270
+ y: "11",
3271
+ width: "18",
3272
+ height: "11",
3273
+ rx: "2"
3274
+ }), /*#__PURE__*/React.createElement("path", {
3275
+ d: "M7 11V7a5 5 0 0 1 10 0v4"
3276
+ })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
2956
3277
  };
2957
3278
 
3279
+ const CheckIcon$3 = ({
3280
+ size: _size = 11,
3281
+ color: _color = "#fff"
3282
+ }) => /*#__PURE__*/React.createElement("svg", {
3283
+ width: _size,
3284
+ height: _size,
3285
+ viewBox: "0 0 24 24",
3286
+ fill: "none",
3287
+ stroke: _color,
3288
+ strokeWidth: "3",
3289
+ strokeLinecap: "round"
3290
+ }, /*#__PURE__*/React.createElement("polyline", {
3291
+ points: "20 6 9 17 4 12"
3292
+ }));
3293
+ const PersonIcon = ({
3294
+ size: _size2 = 16
3295
+ }) => /*#__PURE__*/React.createElement("svg", {
3296
+ width: _size2,
3297
+ height: _size2,
3298
+ viewBox: "0 0 24 24",
3299
+ fill: "currentColor"
3300
+ }, /*#__PURE__*/React.createElement("path", {
3301
+ d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
3302
+ }));
3303
+ const LocationIcon2 = ({
3304
+ size: _size3 = 16
3305
+ }) => /*#__PURE__*/React.createElement("svg", {
3306
+ width: _size3,
3307
+ height: _size3,
3308
+ viewBox: "0 0 24 24",
3309
+ fill: "currentColor"
3310
+ }, /*#__PURE__*/React.createElement("path", {
3311
+ d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
3312
+ }));
3313
+ const BuildingIcon$1 = ({
3314
+ size: _size4 = 16
3315
+ }) => /*#__PURE__*/React.createElement("svg", {
3316
+ width: _size4,
3317
+ height: _size4,
3318
+ viewBox: "0 0 24 24",
3319
+ fill: "currentColor"
3320
+ }, /*#__PURE__*/React.createElement("path", {
3321
+ d: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8V9h8v10zm-2-8h-4v2h4v-2zm0 4h-4v2h4v-2z"
3322
+ }));
3323
+ const EditIcon = ({
3324
+ size: _size5 = 14
3325
+ }) => /*#__PURE__*/React.createElement("svg", {
3326
+ width: _size5,
3327
+ height: _size5,
3328
+ viewBox: "0 0 24 24",
3329
+ fill: "none",
3330
+ stroke: "currentColor",
3331
+ strokeWidth: "2",
3332
+ strokeLinecap: "round"
3333
+ }, /*#__PURE__*/React.createElement("path", {
3334
+ d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
3335
+ }), /*#__PURE__*/React.createElement("path", {
3336
+ d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
3337
+ }));
3338
+ const SectionHead$3 = ({
3339
+ icon,
3340
+ label
3341
+ }) => /*#__PURE__*/React.createElement("div", {
3342
+ style: {
3343
+ display: "flex",
3344
+ alignItems: "center",
3345
+ gap: "8px",
3346
+ marginBottom: "16px",
3347
+ marginTop: "4px"
3348
+ }
3349
+ }, /*#__PURE__*/React.createElement("div", {
3350
+ style: {
3351
+ opacity: 0.5,
3352
+ display: "flex"
3353
+ }
3354
+ }, icon), /*#__PURE__*/React.createElement("span", {
3355
+ style: {
3356
+ fontSize: "15px",
3357
+ fontWeight: "600",
3358
+ color: "#0B0C0C",
3359
+ whiteSpace: "nowrap"
3360
+ }
3361
+ }, label), /*#__PURE__*/React.createElement("div", {
3362
+ style: {
3363
+ flex: 1,
3364
+ height: "1px",
3365
+ background: "#EAECF0"
3366
+ }
3367
+ }));
3368
+ const ReviewCard = ({
3369
+ icon,
3370
+ title,
3371
+ onEdit,
3372
+ editLabel,
3373
+ rows
3374
+ }) => /*#__PURE__*/React.createElement("div", {
3375
+ style: {
3376
+ border: "0.5px solid #EAECF0",
3377
+ borderRadius: "10px",
3378
+ overflow: "hidden",
3379
+ marginBottom: "16px",
3380
+ animation: "fadeSlideIn 0.3s ease"
3381
+ }
3382
+ }, /*#__PURE__*/React.createElement("div", {
3383
+ style: {
3384
+ display: "flex",
3385
+ justifyContent: "space-between",
3386
+ alignItems: "center",
3387
+ padding: "14px 16px",
3388
+ background: "#F9FAFB",
3389
+ borderBottom: "0.5px solid #EAECF0"
3390
+ }
3391
+ }, /*#__PURE__*/React.createElement("div", {
3392
+ style: {
3393
+ display: "flex",
3394
+ alignItems: "center",
3395
+ gap: "8px"
3396
+ }
3397
+ }, /*#__PURE__*/React.createElement("div", {
3398
+ style: {
3399
+ opacity: 0.5,
3400
+ display: "flex"
3401
+ }
3402
+ }, icon), /*#__PURE__*/React.createElement("span", {
3403
+ style: {
3404
+ fontSize: "14px",
3405
+ fontWeight: "600",
3406
+ color: "#0B0C0C"
3407
+ }
3408
+ }, title)), /*#__PURE__*/React.createElement("button", {
3409
+ onClick: onEdit,
3410
+ style: {
3411
+ display: "flex",
3412
+ alignItems: "center",
3413
+ gap: "5px",
3414
+ background: "none",
3415
+ border: "0.5px solid #D0D5DD",
3416
+ borderRadius: "6px",
3417
+ padding: "5px 12px",
3418
+ fontSize: "12px",
3419
+ fontWeight: "600",
3420
+ color: "#185FA5",
3421
+ cursor: "pointer"
3422
+ }
3423
+ }, /*#__PURE__*/React.createElement(EditIcon, {
3424
+ size: 12
3425
+ }), editLabel)), /*#__PURE__*/React.createElement("div", {
3426
+ style: {
3427
+ padding: "4px 0"
3428
+ }
3429
+ }, rows.map((row, i) => row.value ? /*#__PURE__*/React.createElement("div", {
3430
+ key: i,
3431
+ style: {
3432
+ display: "flex",
3433
+ alignItems: "flex-start",
3434
+ padding: "10px 16px",
3435
+ borderBottom: i < rows.length - 1 ? "0.5px solid #F2F4F7" : "none"
3436
+ }
3437
+ }, /*#__PURE__*/React.createElement("div", {
3438
+ style: {
3439
+ flex: "0 0 180px",
3440
+ fontSize: "12px",
3441
+ fontWeight: "600",
3442
+ color: "#667085",
3443
+ textTransform: "uppercase",
3444
+ letterSpacing: "0.04em",
3445
+ paddingTop: "1px"
3446
+ }
3447
+ }, row.label), /*#__PURE__*/React.createElement("div", {
3448
+ style: {
3449
+ flex: 1,
3450
+ fontSize: "14px",
3451
+ color: "#101828",
3452
+ fontWeight: "500",
3453
+ wordBreak: "break-word"
3454
+ }
3455
+ }, row.value)) : null)));
2958
3456
  const Review = () => {
2959
- var _propertyDetails$conn, _propertyDetails$conn2;
3457
+ var _propertyDetails$conn, _propertyDetails$conn2, _propertyDetails$user, _propertyDetails$noOf;
2960
3458
  const {
2961
3459
  t
2962
3460
  } = useTranslation();
2963
3461
  const history = useHistory();
2964
3462
  const location = useLocation();
2965
3463
  const {
2966
- kNumber = "NA",
3464
+ kNumber = "EKYC-1234567890",
2967
3465
  aadhaarDetails = {},
2968
3466
  addressDetails = {},
2969
3467
  propertyDetails = {}
@@ -2982,194 +3480,311 @@ const Review = () => {
2982
3480
  };
2983
3481
  return /*#__PURE__*/React.createElement("div", {
2984
3482
  className: "inbox-container"
2985
- }, /*#__PURE__*/React.createElement("div", {
3483
+ }, /*#__PURE__*/React.createElement("style", null, `
3484
+ @keyframes fadeSlideIn {
3485
+ from { opacity: 0; transform: translateY(8px); }
3486
+ to { opacity: 1; transform: translateY(0); }
3487
+ }
3488
+ `), /*#__PURE__*/React.createElement("div", {
2986
3489
  className: "filters-container"
2987
3490
  }, /*#__PURE__*/React.createElement(Card, {
2988
- className: "sidebar-title-card",
2989
3491
  style: {
2990
3492
  display: "flex",
2991
3493
  alignItems: "center",
2992
- padding: "16px",
2993
- marginBottom: "16px",
2994
- borderRadius: "4px"
3494
+ padding: "12px 16px",
3495
+ marginBottom: "12px",
3496
+ borderRadius: "8px"
2995
3497
  }
2996
3498
  }, /*#__PURE__*/React.createElement("div", {
2997
- className: "icon-container",
2998
3499
  style: {
2999
- color: "#0068faff",
3000
- marginRight: "12px"
3500
+ color: "#185FA5",
3501
+ marginRight: "10px",
3502
+ display: "flex"
3001
3503
  }
3002
3504
  }, /*#__PURE__*/React.createElement(HomeIcon, {
3003
3505
  style: {
3004
- width: "24px",
3005
- height: "24px"
3506
+ width: "20px",
3507
+ height: "20px"
3006
3508
  }
3007
3509
  })), /*#__PURE__*/React.createElement("div", {
3008
3510
  style: {
3009
- fontWeight: "700",
3010
- fontSize: "18px",
3511
+ fontWeight: "600",
3512
+ fontSize: "15px",
3011
3513
  color: "#0B0C0C"
3012
3514
  }
3013
- }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
3515
+ }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
3014
3516
  style: {
3015
- backgroundColor: "#FFFFFF",
3016
- padding: "16px",
3517
+ background: "#fff",
3518
+ padding: "16px 14px",
3017
3519
  borderRadius: "8px",
3018
- border: "1px solid #EAECF0",
3019
- boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
3520
+ border: "1px solid #EAECF0"
3020
3521
  }
3021
- }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
3522
+ }, [{
3022
3523
  label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
3023
- isCompleted: true
3024
- }), /*#__PURE__*/React.createElement(CheckPoint, {
3524
+ done: true,
3525
+ active: false
3526
+ }, {
3025
3527
  label: t("EKYC_STEP_ADDRESS") || "Address",
3026
- isCompleted: true
3027
- }), /*#__PURE__*/React.createElement(CheckPoint, {
3528
+ done: true,
3529
+ active: false
3530
+ }, {
3028
3531
  label: t("EKYC_STEP_PROPERTY") || "Property",
3029
- isCompleted: true
3030
- }), /*#__PURE__*/React.createElement(CheckPoint, {
3532
+ done: true,
3533
+ active: false
3534
+ }, {
3031
3535
  label: t("EKYC_STEP_REVIEW") || "Review",
3032
- isCompleted: false
3033
- })))), /*#__PURE__*/React.createElement("div", {
3536
+ done: false,
3537
+ active: true
3538
+ }].map((step, i) => /*#__PURE__*/React.createElement("div", {
3539
+ key: i,
3034
3540
  style: {
3035
- flex: 1,
3036
- marginLeft: "16px"
3541
+ display: "flex",
3542
+ gap: "10px",
3543
+ alignItems: "flex-start",
3544
+ position: "relative",
3545
+ paddingBottom: i < 3 ? "18px" : 0
3037
3546
  }
3038
- }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
3547
+ }, i < 3 && /*#__PURE__*/React.createElement("div", {
3039
3548
  style: {
3040
- display: "flex",
3041
- justifyContent: "space-between",
3042
- alignItems: "center",
3043
- marginBottom: "24px"
3549
+ position: "absolute",
3550
+ left: "10px",
3551
+ top: "22px",
3552
+ width: "1px",
3553
+ height: "calc(100% - 10px)",
3554
+ background: "#EAECF0"
3044
3555
  }
3045
- }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_REVIEW_DETAILS") || "Review Details"), /*#__PURE__*/React.createElement("div", {
3556
+ }), /*#__PURE__*/React.createElement("div", {
3046
3557
  style: {
3047
- fontSize: "14px",
3048
- fontWeight: "700",
3049
- color: "#505A5F"
3558
+ width: "20px",
3559
+ height: "20px",
3560
+ borderRadius: "50%",
3561
+ flexShrink: 0,
3562
+ marginTop: "1px",
3563
+ border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
3564
+ background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
3565
+ display: "flex",
3566
+ alignItems: "center",
3567
+ justifyContent: "center",
3568
+ fontSize: "10px",
3569
+ fontWeight: "500",
3570
+ color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3"
3050
3571
  }
3051
- }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
3572
+ }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$3, {
3573
+ size: 11,
3574
+ color: "#fff"
3575
+ }) : i + 1), /*#__PURE__*/React.createElement("div", {
3052
3576
  style: {
3053
- color: "#0B0C0C"
3577
+ fontSize: "12px",
3578
+ paddingTop: "2px",
3579
+ color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
3580
+ fontWeight: step.done || step.active ? "600" : "400"
3054
3581
  }
3055
- }, kNumber))), /*#__PURE__*/React.createElement(Card, {
3582
+ }, step.label))))), /*#__PURE__*/React.createElement("div", {
3056
3583
  style: {
3057
- padding: "24px",
3058
- marginBottom: "24px",
3059
- borderRadius: "12px",
3060
- border: "1px solid #EAECF0"
3584
+ flex: 1,
3585
+ marginLeft: "16px"
3061
3586
  }
3062
- }, /*#__PURE__*/React.createElement("div", {
3587
+ }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
3063
3588
  style: {
3064
3589
  display: "flex",
3065
3590
  justifyContent: "space-between",
3066
3591
  alignItems: "center",
3067
- marginBottom: "16px"
3592
+ marginBottom: "20px"
3068
3593
  }
3069
3594
  }, /*#__PURE__*/React.createElement(CardHeader, {
3070
3595
  style: {
3071
3596
  margin: 0,
3072
- fontSize: "18px",
3073
- color: "#0B0C0C"
3597
+ fontSize: "18px"
3074
3598
  }
3075
- }, t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Details"), /*#__PURE__*/React.createElement("span", {
3076
- onClick: handleEditAadhaar,
3599
+ }, t("EKYC_REVIEW_DETAILS") || "Review Details"), /*#__PURE__*/React.createElement("div", {
3077
3600
  style: {
3078
- color: "#F47738",
3079
- fontWeight: "600",
3080
- cursor: "pointer",
3081
- fontSize: "14px"
3601
+ background: "#F9FAFB",
3602
+ border: "0.5px solid #EAECF0",
3603
+ borderRadius: "20px",
3604
+ padding: "4px 14px",
3605
+ fontSize: "12px",
3606
+ color: "#667085"
3082
3607
  }
3083
- }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
3084
- label: t("EKYC_NAME"),
3085
- text: aadhaarDetails.userName || "Rajesh Kumar Singh"
3086
- }), /*#__PURE__*/React.createElement(Row, {
3087
- label: t("EKYC_AADHAAR"),
3088
- text: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : t("CS_NA")
3089
- }), /*#__PURE__*/React.createElement(Row, {
3090
- label: t("EKYC_MOBILE_NO"),
3091
- text: aadhaarDetails.mobileNumber || t("CS_NA")
3092
- }), /*#__PURE__*/React.createElement(Row, {
3093
- label: t("EKYC_EMAIL_ADDRESS"),
3094
- text: aadhaarDetails.email || t("CS_NA")
3095
- }))), /*#__PURE__*/React.createElement(Card, {
3608
+ }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
3096
3609
  style: {
3097
- padding: "24px",
3098
- marginBottom: "24px",
3099
- borderRadius: "12px",
3100
- border: "1px solid #EAECF0"
3610
+ color: "#0B0C0C",
3611
+ fontWeight: "600"
3101
3612
  }
3102
- }, /*#__PURE__*/React.createElement("div", {
3613
+ }, kNumber))), /*#__PURE__*/React.createElement("div", {
3103
3614
  style: {
3615
+ backgroundColor: "#E1F5EE",
3616
+ border: "0.5px solid #5DCAA5",
3617
+ borderRadius: "8px",
3618
+ padding: "12px 16px",
3104
3619
  display: "flex",
3105
- justifyContent: "space-between",
3106
3620
  alignItems: "center",
3107
- marginBottom: "16px"
3621
+ gap: "10px",
3622
+ marginBottom: "24px"
3108
3623
  }
3109
- }, /*#__PURE__*/React.createElement(CardHeader, {
3624
+ }, /*#__PURE__*/React.createElement("div", {
3110
3625
  style: {
3111
- margin: 0,
3112
- fontSize: "18px",
3113
- color: "#0B0C0C"
3626
+ backgroundColor: "#9FE1CB",
3627
+ padding: "5px",
3628
+ borderRadius: "6px",
3629
+ display: "flex",
3630
+ flexShrink: 0
3114
3631
  }
3115
- }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("span", {
3116
- onClick: handleEditAddress,
3632
+ }, /*#__PURE__*/React.createElement("svg", {
3633
+ width: "14",
3634
+ height: "14",
3635
+ viewBox: "0 0 24 24",
3636
+ fill: "none",
3637
+ stroke: "#085041",
3638
+ strokeWidth: "3",
3639
+ strokeLinecap: "round"
3640
+ }, /*#__PURE__*/React.createElement("polyline", {
3641
+ points: "20 6 9 17 4 12"
3642
+ }))), /*#__PURE__*/React.createElement("div", {
3117
3643
  style: {
3118
- color: "#F47738",
3119
- fontWeight: "600",
3120
- cursor: "pointer",
3121
- fontSize: "14px"
3644
+ fontSize: "13px",
3645
+ color: "#04342C",
3646
+ fontWeight: "500"
3122
3647
  }
3123
- }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
3124
- label: t("EKYC_FULL_ADDRESS"),
3125
- text: addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini"
3126
- }), /*#__PURE__*/React.createElement(Row, {
3127
- label: t("EKYC_PINCODE"),
3128
- text: addressDetails.pincode || "110085"
3129
- }))), /*#__PURE__*/React.createElement(Card, {
3648
+ }, t("EKYC_REVIEW_NOTICE") || "Please review all details carefully before submitting. You can edit any section by clicking Edit.")), /*#__PURE__*/React.createElement("div", {
3130
3649
  style: {
3131
- padding: "24px",
3132
- marginBottom: "24px",
3133
- borderRadius: "12px",
3134
- border: "1px solid #EAECF0"
3650
+ animation: "fadeSlideIn 0.3s ease"
3135
3651
  }
3136
- }, /*#__PURE__*/React.createElement("div", {
3652
+ }, /*#__PURE__*/React.createElement(SectionHead$3, {
3653
+ icon: /*#__PURE__*/React.createElement(PersonIcon, {
3654
+ size: 16
3655
+ }),
3656
+ label: t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details"
3657
+ }), /*#__PURE__*/React.createElement(ReviewCard, {
3658
+ icon: /*#__PURE__*/React.createElement(PersonIcon, {
3659
+ size: 16
3660
+ }),
3661
+ title: t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details",
3662
+ onEdit: handleEditAadhaar,
3663
+ editLabel: t("CS_COMMON_EDIT") || "Edit",
3664
+ rows: [{
3665
+ label: t("EKYC_NAME") || "Name",
3666
+ value: aadhaarDetails.userName || "Rajesh Kumar Singh"
3667
+ }, {
3668
+ label: t("EKYC_AADHAAR") || "Aadhaar no.",
3669
+ value: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234"
3670
+ }, {
3671
+ label: t("EKYC_MOBILE_NO") || "Mobile no.",
3672
+ value: aadhaarDetails.mobileNumber || "XXXXXXXXXX"
3673
+ }, {
3674
+ label: t("EKYC_EMAIL_ADDRESS") || "Email",
3675
+ value: aadhaarDetails.email || null
3676
+ }]
3677
+ }), /*#__PURE__*/React.createElement("hr", {
3137
3678
  style: {
3138
- display: "flex",
3139
- justifyContent: "space-between",
3140
- alignItems: "center",
3141
- marginBottom: "16px"
3679
+ margin: "20px 0",
3680
+ border: 0,
3681
+ borderTop: "1px solid #EAECF0"
3142
3682
  }
3143
- }, /*#__PURE__*/React.createElement(CardHeader, {
3683
+ }), /*#__PURE__*/React.createElement(SectionHead$3, {
3684
+ icon: /*#__PURE__*/React.createElement(LocationIcon2, {
3685
+ size: 16
3686
+ }),
3687
+ label: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details"
3688
+ }), /*#__PURE__*/React.createElement(ReviewCard, {
3689
+ icon: /*#__PURE__*/React.createElement(LocationIcon2, {
3690
+ size: 16
3691
+ }),
3692
+ title: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details",
3693
+ onEdit: handleEditAddress,
3694
+ editLabel: t("CS_COMMON_EDIT") || "Edit",
3695
+ rows: [{
3696
+ label: t("EKYC_FULL_ADDRESS") || "Full address",
3697
+ value: addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"
3698
+ }, {
3699
+ label: t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no.",
3700
+ value: addressDetails.flatNo || null
3701
+ }, {
3702
+ label: t("EKYC_BUILDING_TOWER") || "Building",
3703
+ value: addressDetails.building || null
3704
+ }, {
3705
+ label: t("EKYC_LANDMARK") || "Landmark",
3706
+ value: addressDetails.landmark || null
3707
+ }, {
3708
+ label: t("EKYC_PINCODE") || "Pincode",
3709
+ value: addressDetails.pincode || "110085"
3710
+ }, {
3711
+ label: t("EKYC_ASSEMBLY") || "Assembly",
3712
+ value: addressDetails.assembly || "AC-12 Chandni Chowk"
3713
+ }, {
3714
+ label: t("EKYC_WARD") || "Ward",
3715
+ value: addressDetails.ward || "WARD-45 Civil Lines"
3716
+ }]
3717
+ }), /*#__PURE__*/React.createElement("hr", {
3144
3718
  style: {
3145
- margin: 0,
3146
- fontSize: "18px",
3147
- color: "#0B0C0C"
3719
+ margin: "20px 0",
3720
+ border: 0,
3721
+ borderTop: "1px solid #EAECF0"
3148
3722
  }
3149
- }, t("EKYC_PROPERTY_INFO") || "Property Information"), /*#__PURE__*/React.createElement("span", {
3150
- onClick: handleEditProperty,
3723
+ }), /*#__PURE__*/React.createElement(SectionHead$3, {
3724
+ icon: /*#__PURE__*/React.createElement(BuildingIcon$1, {
3725
+ size: 16
3726
+ }),
3727
+ label: t("EKYC_PROPERTY_INFO") || "Property details"
3728
+ }), /*#__PURE__*/React.createElement(ReviewCard, {
3729
+ icon: /*#__PURE__*/React.createElement(BuildingIcon$1, {
3730
+ size: 16
3731
+ }),
3732
+ title: t("EKYC_PROPERTY_INFO") || "Property details",
3733
+ onEdit: handleEditProperty,
3734
+ editLabel: t("CS_COMMON_EDIT") || "Edit",
3735
+ rows: [{
3736
+ label: t("EKYC_PROPERTY_OWNER") || "Property owner",
3737
+ value: propertyDetails.ownerType || "Owner"
3738
+ }, {
3739
+ label: t("EKYC_PID_NUMBER") || "PID number",
3740
+ value: propertyDetails.pidNumber || null
3741
+ }, {
3742
+ label: t("EKYC_TYPE_OF_CONNECTION") || "Type of connection",
3743
+ value: ((_propertyDetails$conn = propertyDetails.connectionCategory) === null || _propertyDetails$conn === void 0 ? void 0 : _propertyDetails$conn.label) || null
3744
+ }, {
3745
+ label: t("EKYC_CONNECTION_CATEGORY") || "Connection category",
3746
+ value: ((_propertyDetails$conn2 = propertyDetails.connectionType) === null || _propertyDetails$conn2 === void 0 ? void 0 : _propertyDetails$conn2.label) || null
3747
+ }, {
3748
+ label: t("EKYC_USER_TYPE") || "User type",
3749
+ value: ((_propertyDetails$user = propertyDetails.userType) === null || _propertyDetails$user === void 0 ? void 0 : _propertyDetails$user.label) || null
3750
+ }, {
3751
+ label: t("EKYC_NO_OF_FLOORS") || "No. of floors",
3752
+ value: ((_propertyDetails$noOf = propertyDetails.noOfFloors) === null || _propertyDetails$noOf === void 0 ? void 0 : _propertyDetails$noOf.label) || null
3753
+ }]
3754
+ })), /*#__PURE__*/React.createElement("div", {
3151
3755
  style: {
3152
- color: "#F47738",
3153
- fontWeight: "600",
3154
- cursor: "pointer",
3155
- fontSize: "14px"
3756
+ marginTop: "24px"
3156
3757
  }
3157
- }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
3158
- label: t("Property_Owner"),
3159
- text: propertyDetails.ownerType || "OWNER"
3160
- }), /*#__PURE__*/React.createElement(Row, {
3161
- label: t("PID_Number"),
3162
- text: propertyDetails.pidNumber || t("CS_NA")
3163
- }), /*#__PURE__*/React.createElement(Row, {
3164
- label: t("Type_of_Connection"),
3165
- text: ((_propertyDetails$conn = propertyDetails.connectionType) === null || _propertyDetails$conn === void 0 ? void 0 : _propertyDetails$conn.label) || t("CS_NA")
3166
- }), /*#__PURE__*/React.createElement(Row, {
3167
- label: t("Connection_Category"),
3168
- text: ((_propertyDetails$conn2 = propertyDetails.connectionCategory) === null || _propertyDetails$conn2 === void 0 ? void 0 : _propertyDetails$conn2.label) || t("CS_NA")
3169
- }))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
3758
+ }, /*#__PURE__*/React.createElement(SubmitBar, {
3170
3759
  label: t("ES_COMMON_SUBMIT") || "Submit",
3171
3760
  onSubmit: handleSubmit
3172
- })))));
3761
+ })), /*#__PURE__*/React.createElement("div", {
3762
+ style: {
3763
+ display: "flex",
3764
+ alignItems: "center",
3765
+ justifyContent: "center",
3766
+ gap: "5px",
3767
+ marginTop: "16px",
3768
+ fontSize: "11px",
3769
+ color: "#98A2B3"
3770
+ }
3771
+ }, /*#__PURE__*/React.createElement("svg", {
3772
+ width: "11",
3773
+ height: "11",
3774
+ viewBox: "0 0 24 24",
3775
+ fill: "none",
3776
+ stroke: "currentColor",
3777
+ strokeWidth: "2",
3778
+ strokeLinecap: "round"
3779
+ }, /*#__PURE__*/React.createElement("rect", {
3780
+ x: "3",
3781
+ y: "11",
3782
+ width: "18",
3783
+ height: "11",
3784
+ rx: "2"
3785
+ }), /*#__PURE__*/React.createElement("path", {
3786
+ d: "M7 11V7a5 5 0 0 1 10 0v4"
3787
+ })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
3173
3788
  };
3174
3789
 
3175
3790
  const EmployeeApp = ({