@djb25/digit-ui-module-vendor 1.0.1 → 1.0.2

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, PrivateRoute, EmployeeModuleCard, FormComposer, TickMark, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, StatusTable, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, LinkButton, Banner } from '@djb25/digit-ui-react-components';
+import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, PropertyHouse, EmployeeModuleCard, FormComposer, TickMark, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, StatusTable, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, LinkButton, Banner } from '@djb25/digit-ui-react-components';
 import React, { useEffect, useMemo, useCallback, useState, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation, Switch, useHistory, Link, useRouteMatch, Route, Redirect } from 'react-router-dom';
@@ -323,7 +323,6 @@ const EmployeeApp = ({
   const location = useLocation();
   sessionStorage.removeItem("revalidateddone");
   const isMobile = window.Digit.Utils.browser.isMobile();
-  console.log("index page in employee");
   const AddVendor = Digit.ComponentRegistryService.getComponent("AddVendor");
   const SearchVendor = Digit.ComponentRegistryService.getComponent("SearchVendor");
   const AddDriver = Digit.ComponentRegistryService.getComponent("AddDriver");
@@ -332,9 +331,59 @@ const EmployeeApp = ({
   const VendorCreate = Digit.ComponentRegistryService.getComponent("VENDORCreate");
   const DriverDetails = Digit.ComponentRegistryService.getComponent("DriverDetails");
   const VehicleDetails = Digit.ComponentRegistryService.getComponent("VehicleDetails");
+  const getDynamicBreadcrumbs = () => {
+    const pathname = location.pathname;
+    let crumbs = [{
+      icon: HomeIcon,
+      path: "/digit-ui/employee"
+    }, {
+      label: t("ES_COMMON_VENDOR"),
+      path: `/digit-ui/employee/vendor/search-vendor`
+    }];
+    if (pathname.includes("/registry/new-vendor")) {
+      crumbs.push({
+        label: t("VENDOR_CREATE_NEW_VENDOR")
+      });
+    } else if (pathname.includes("/search-vendor")) {
+      crumbs.push({
+        label: t("VENDOR_SEARCH_VENDORS")
+      });
+    } else if (pathname.includes("/registry/new-driver")) {
+      crumbs.push({
+        label: t("VENDOR_CREATE_NEW_DRIVER")
+      });
+    } else if (pathname.includes("/registry/vendor-details") || pathname.includes("/registry/modify-vendor/")) {
+      crumbs.push({
+        label: t("VENDOR_VENDOR_DETAILS")
+      });
+    } else if (pathname.includes("/registry/vehicle-details") || pathname.includes("/registry/modify-vehicle/")) {
+      crumbs.push({
+        label: t("VENDOR_VEHICLE_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-vehicle")) {
+      crumbs.push({
+        label: t("VENDOR_CREATE_NEW_VEHICLE")
+      });
+    } else if (pathname.includes("/registry/driver-details") || pathname.includes("/registry/modify-driver/")) {
+      crumbs.push({
+        label: t("VENDOR_DRIVER_DETAILS")
+      });
+    } else if (pathname.includes("/registry/additionaldetails")) {
+      crumbs.push({
+        label: t("VENDOR_ADDITIONAL_DETAILS")
+      });
+    }
+    return crumbs;
+  };
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container"
-  }, /*#__PURE__*/React.createElement(PrivateRoute, {
+  }, /*#__PURE__*/React.createElement(ModuleHeader, {
+    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
+      className: "icon"
+    }), "Back"),
+    onLeftClick: () => window.history.back(),
+    breadcrumbs: getDynamicBreadcrumbs()
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/registry/new-vendor`,
     component: () => /*#__PURE__*/React.createElement(AddVendor, {
       parentRoute: path
@@ -402,6 +451,7 @@ const VENDORCard = () => {
   }];
   const VENDORRole = Digit.UserService.hasAccess(["VENDOR"]) || false;
   const propsForModuleCard = {
+    Icon: /*#__PURE__*/React.createElement(PropertyHouse, null),
     moduleName: t("TITLE_VENDOR_MANAGEMENT"),
     kpis: [{
       count: total === null || total === void 0 ? void 0 : total.totalCount,
@@ -649,6 +699,16 @@ const VendorConfig = (t, disabled = false) => {
         className: "payment-form-text-input-correction"
       }
     }]
+  }, {
+    head: "ES_FSM_REGISTRY_BANK_DETAILS",
+    body: [{
+      route: "bank-details",
+      component: "BankDetailsComponent",
+      withoutLabel: true,
+      key: "bankDetails",
+      isMandatory: false,
+      type: "component"
+    }]
   }, {
     head: "",
     body: [{
@@ -719,7 +779,7 @@ const AddVendor = ({
     setShowToast(null);
   };
   const onSubmit = data => {
-    var _data$street, _data$doorNo, _data$plotNo, _data$landmark, _data$address, _data$address$city, _data$address2, _data$address2$city, _data$address3, _data$address3$city, _data$address4, _data$address4$city, _data$buildingName, _data$address5, _data$address5$locali, _data$address6, _data$address6$locali, _data$address7, _data$address7$locali, _data$selectGender, _data$serviceType, _data$address8, _data$address9;
+    var _data$street, _data$doorNo, _data$plotNo, _data$landmark, _data$address, _data$address$city, _data$address2, _data$address2$city, _data$address3, _data$address3$city, _data$address4, _data$address4$city, _data$buildingName, _data$address5, _data$address5$locali, _data$address6, _data$address6$locali, _data$address7, _data$address7$locali, _data$selectGender, _data$serviceType, _data$bankDetails, _data$bankDetails2, _data$bankDetails3, _data$bankDetails4, _data$address8, _data$address9;
     console.log("dataaaaaaaa", data);
     const name = data === null || data === void 0 ? void 0 : data.vendorName;
     const pincode = data === null || data === void 0 ? void 0 : data.pincode;
@@ -740,6 +800,10 @@ const AddVendor = ({
     const phone = data === null || data === void 0 ? void 0 : data.phone;
     const dob = new Date(`${data.dob}`).getTime() || new Date(`1/1/1970`).getTime();
     const additionalDetails = data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code;
+    const accountNo = data === null || data === void 0 ? void 0 : (_data$bankDetails = data.bankDetails) === null || _data$bankDetails === void 0 ? void 0 : _data$bankDetails.accountNumber;
+    const ifscCode = data === null || data === void 0 ? void 0 : (_data$bankDetails2 = data.bankDetails) === null || _data$bankDetails2 === void 0 ? void 0 : _data$bankDetails2.ifscCode;
+    const bankName = data === null || data === void 0 ? void 0 : (_data$bankDetails3 = data.bankDetails) === null || _data$bankDetails3 === void 0 ? void 0 : _data$bankDetails3.bankName;
+    const bankBranchName = data === null || data === void 0 ? void 0 : (_data$bankDetails4 = data.bankDetails) === null || _data$bankDetails4 === void 0 ? void 0 : _data$bankDetails4.branchName;
     const formData = {
       vendor: {
         tenantId: tenantId,
@@ -783,6 +847,12 @@ const AddVendor = ({
         additionalDetails: {
           serviceType: additionalDetails
         },
+        bankDetails: [{
+          bankName: bankName,
+          bankBranchName: bankBranchName,
+          ifscCode: ifscCode,
+          accountNumber: accountNo
+        }],
         vehicle: [],
         drivers: [],
         source: "WhatsApp"
@@ -808,6 +878,7 @@ const AddVendor = ({
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_VENDOR"))), /*#__PURE__*/React.createElement("div", {
+    className: "vendor-two-column-form",
     style: !isMobile ? {
       marginLeft: "-15px"
     } : {}
@@ -1050,6 +1121,8 @@ const VendorDetails = ({
     config: config,
     onSelect: goNext,
     t: t
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vendor-details-two-column"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_ID")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
@@ -1059,7 +1132,7 @@ const VendorDetails = ({
     value: VendorId,
     onChange: setvendorid,
     style: {
-      width: "50%"
+      width: "100%"
     },
     maxLength: 11,
     ValidationRequired: false
@@ -1078,7 +1151,7 @@ const VendorDetails = ({
     placeholder: "Enter IFSC Code",
     onChange: setvendorifsc,
     style: {
-      width: "50%"
+      width: "100%"
     },
     maxLength: 11,
     ValidationRequired: true
@@ -1097,7 +1170,7 @@ const VendorDetails = ({
     name: "bankName",
     placeholder: "Bank Name Auto Select",
     style: {
-      width: "50%"
+      width: "100%"
     },
     value: Bank,
     onChange: setvendorbank,
@@ -1112,7 +1185,7 @@ const VendorDetails = ({
     name: "BankbranchName",
     value: BankbranchName,
     style: {
-      width: "50%"
+      width: "100%"
     },
     placeholder: "Bank Branch Name Auto Select",
     onChange: setBankbranch,
@@ -1127,7 +1200,7 @@ const VendorDetails = ({
     name: "MicrNo",
     value: micrNo,
     style: {
-      width: "50%"
+      width: "100%"
     },
     placeholder: "MICR No",
     onChange: setmicrNo,
@@ -1141,7 +1214,7 @@ const VendorDetails = ({
     value: AccountNo,
     onChange: setvendoraccountno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1158,7 +1231,7 @@ const VendorDetails = ({
     value: PhoneNo,
     onChange: setphoneno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1175,7 +1248,7 @@ const VendorDetails = ({
     value: ContactPerson,
     onChange: setcontactperson,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1192,7 +1265,7 @@ const VendorDetails = ({
     value: Company,
     onChange: setcompanyname,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1209,7 +1282,7 @@ const VendorDetails = ({
     value: PanNo,
     onChange: setpanno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1226,7 +1299,7 @@ const VendorDetails = ({
     value: GstNo,
     onChange: setgstno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1243,7 +1316,7 @@ const VendorDetails = ({
     value: GstState,
     onChange: setgststate,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1260,7 +1333,7 @@ const VendorDetails = ({
     value: RegistrationNo,
     onChange: setregistrationno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1277,7 +1350,7 @@ const VendorDetails = ({
     value: EpfNo,
     onChange: setepfno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1294,7 +1367,7 @@ const VendorDetails = ({
     value: EsiNo,
     onChange: setesino,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1425,7 +1498,7 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  }))));
+  })))));
 };
 
 const VendorDocuments = ({
@@ -1696,10 +1769,12 @@ const VendorSelectAddress = ({
     });
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
       className: "card-label-smaller"
     }, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
+      className: "",
       isMandatory: true,
       selected: (cities === null || cities === void 0 ? void 0 : cities.length) === 1 ? cities[0] : selectedCity,
       disable: (cities === null || cities === void 0 ? void 0 : cities.length) === 1,
@@ -1710,7 +1785,7 @@ const VendorSelectAddress = ({
     })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
       className: "card-label-smaller"
     }, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
+      className: "",
       isMandatory: true,
       selected: selectedLocality,
       option: localities,
@@ -9133,6 +9208,7 @@ const AddDriver = ({
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER"))), /*#__PURE__*/React.createElement("div", {
+    className: "vendor-two-column-form",
     style: !isMobile ? {
       marginLeft: "-15px"
     } : {}
@@ -9884,6 +9960,7 @@ const AddVehicle = ({
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE"))), /*#__PURE__*/React.createElement("div", {
+    className: "vendor-two-column-form",
     style: !isMobile ? {
       marginLeft: "-15px"
     } : {}
@@ -11240,6 +11317,113 @@ const SelectVehicleType = ({
   })));
 };
 
+const BankDetailsComponent = ({
+  t,
+  config,
+  onSelect,
+  userType,
+  formData,
+  ...props
+}) => {
+  const [ifsc, setIfsc] = useState((formData === null || formData === void 0 ? void 0 : formData.ifscCode) || "");
+  const [bankName, setBankName] = useState((formData === null || formData === void 0 ? void 0 : formData.bankName) || "");
+  const [branchName, setBranchName] = useState((formData === null || formData === void 0 ? void 0 : formData.branchName) || "");
+  const [accountNumber, setAccountNumber] = useState((formData === null || formData === void 0 ? void 0 : formData.accountNumber) || "");
+  const [showToast, setShowToast] = useState(null);
+  useEffect(() => {
+    if (ifsc.length === 11) {
+      fetch(`https://ifsc.razorpay.com/${ifsc}`).then(response => response.json()).then(data => {
+        if (data && data.BANK && data.BRANCH) {
+          setBankName(data.BANK);
+          setBranchName(data.BRANCH);
+          if (typeof onSelect === 'function') {
+            onSelect(config.key, {
+              bankName: data.BANK,
+              branchName: data.BRANCH,
+              ifscCode: ifsc,
+              accountNumber: accountNumber
+            });
+          }
+          setShowToast({
+            error: false,
+            label: t("VALID_IFSC_CODE")
+          });
+        } else {
+          setShowToast({
+            error: true,
+            label: t("INVALID_IFSC_CODE")
+          });
+        }
+      }).catch(() => {
+        setShowToast({
+          error: true,
+          label: t("INVALID_IFSC_CODE")
+        });
+      });
+    }
+  }, [ifsc]);
+  useEffect(() => {
+    if (typeof onSelect === 'function') {
+      onSelect(config.key, {
+        bankName,
+        branchName,
+        ifscCode: ifsc,
+        accountNumber
+      });
+    }
+  }, [accountNumber, bankName, branchName, ifsc]);
+  const handleIfscChange = e => {
+    const input = e.target.value.replace(/[^a-zA-Z0-9]/g, "");
+    if (input.length <= 11) {
+      setIfsc(input);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_IFSC_CODE")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "ifscCode",
+    value: ifsc,
+    onChange: handleIfscChange,
+    style: {
+      width: "100%"
+    },
+    maxLength: 11
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_ACCOUNT_NUMBER")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "accountNumber",
+    value: accountNumber,
+    onChange: e => setAccountNumber(e.target.value),
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_BANK_NAME")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "bankName",
+    value: bankName,
+    onChange: e => setBankName(e.target.value),
+    disabled: ifsc.length === 11 && bankName,
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_BRANCH_NAME")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "branchName",
+    value: branchName,
+    onChange: e => setBranchName(e.target.value),
+    disabled: ifsc.length === 11 && branchName,
+    style: {
+      width: "100%"
+    }
+  }));
+};
+
 const componentsToRegister = {
   VendorDetails,
   VendorDocuments,
@@ -11250,6 +11434,7 @@ const componentsToRegister = {
   SearchVendor,
   SelectServiceType,
   SelectVehicleType,
+  BankDetailsComponent,
   AddDriver,
   EditVendorDetails,
   AddVehicle,