@itilite/iui-user-management 0.1.0 → 0.1.2

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
+import { IUITypography, IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
 import React, { useState, useEffect, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import moment from 'moment';
@@ -188,7 +188,7 @@ function toVal(mix) {
   return str;
 }
 
-function clsx () {
+function clsx() {
   var i = 0,
       tmp,
       x,
@@ -311,7 +311,9 @@ var userPanelUrl = {
 var api = configs.api;
 var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref) {
   var page = _ref.page,
-      tabelName = _ref.tabelName;
+      tabelName = _ref.tabelName,
+      placeholder = _ref.placeholder,
+      selectCTA = _ref.selectCTA;
 
   try {
     return Promise.resolve(_catch(function () {
@@ -326,16 +328,25 @@ var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref)
           };
         });
 
-        if (NAoptionConfig.applyFor.includes(tabelName)) {
+        if (page === 1 && NAoptionConfig.applyFor.includes(tabelName)) {
           mappedValue.unshift(NAoptionConfig.option);
         }
 
+        if (response.next === null && selectCTA) {
+          mappedValue.push({
+            value: selectCTA.value,
+            label: ''
+          });
+        }
+
         return {
           options: mappedValue,
           hasMore: !!response.next,
           additional: {
             page: page + 1,
-            tabelName: tabelName
+            tabelName: tabelName,
+            placeholder: placeholder,
+            selectCTA: selectCTA
           }
         };
       });
@@ -345,7 +356,9 @@ var commonLoadOptions = function commonLoadOptions(search, loadedOptions, _ref)
         hasMore: false,
         additional: {
           page: 1,
-          tabelName: tabelName
+          tabelName: tabelName,
+          placeholder: placeholder,
+          selectCTA: selectCTA
         }
       };
     }));
@@ -405,11 +418,15 @@ var approversOptions = function approversOptions(search, loadedOptions, _ref4) {
             label: item.approver
           };
         });
-        var placeholderLbl = {
-          value: '',
-          label: placeholder
-        };
-        mappedValue.unshift(placeholderLbl);
+
+        if (page === 1) {
+          var placeholderLbl = {
+            value: '',
+            label: placeholder
+          };
+          mappedValue.unshift(placeholderLbl);
+        }
+
         return {
           options: mappedValue,
           hasMore: !!response.next,
@@ -593,7 +610,21 @@ var personalInfo = [{
   disableText: 'Please get in touch with your administrator to change this value.'
 }, {
   id: 8,
-  empty: true
+  label: 'Profile photo',
+  description: 'This will be displayed on your profile',
+  name: 'profile_pic',
+  required: false,
+  multiple: false,
+  fileType: 'image/png,image/jpeg,image/jpg,image/webp',
+  fileSize: 5,
+  title: 'Select Profile',
+  type: 'file',
+  fullWidth: true,
+  visibility: true,
+  readOnly: false,
+  maxNoFiles: 2,
+  buttonType: 'profile',
+  disableText: 'Disable text here.'
 }];
 var workInfo = [{
   id: 1,
@@ -610,7 +641,14 @@ var workInfo = [{
   loadOption: commonLoadOptions,
   tabelName: 'employee_level',
   tooltip: 'This information will be used in creation of policies and approval rules',
-  disableText: 'Please get in touch with your administrator to change this value.'
+  disableText: 'Please get in touch with your administrator to change this value.',
+  selectCTA: {
+    value: 'employee_level',
+    component: /*#__PURE__*/React.createElement(IUITypography, {
+      className: "iui__font--color-link iui__font--weight-500"
+    }, "+ Add Employee Level"),
+    callback: null
+  }
 }, {
   id: 2,
   label: 'Employee ID',
@@ -645,7 +683,14 @@ var workInfo = [{
   loadOption: commonLoadOptions,
   tabelName: 'entity',
   tooltip: 'This information will be used in creation of policies and approval rules',
-  disableText: 'Please get in touch with your administrator to change this value.'
+  disableText: 'Please get in touch with your administrator to change this value.',
+  selectCTA: {
+    value: 'entity',
+    component: /*#__PURE__*/React.createElement(IUITypography, {
+      className: "iui__font--color-link iui__font--weight-500"
+    }, "+ Add Entity"),
+    callback: null
+  }
 }, {
   id: 4,
   label: 'Business unit',
@@ -660,7 +705,14 @@ var workInfo = [{
   placeholder: 'Select unit',
   tabelName: 'business_unit',
   loadOption: commonLoadOptions,
-  disableText: 'Please get in touch with your administrator to change this value.'
+  disableText: 'Please get in touch with your administrator to change this value.',
+  selectCTA: {
+    value: 'business_unit',
+    component: /*#__PURE__*/React.createElement(IUITypography, {
+      className: "iui__font--color-link iui__font--weight-500"
+    }, "+ Add Business Unit"),
+    callback: null
+  }
 }, {
   id: 5,
   label: 'Department',
@@ -675,7 +727,14 @@ var workInfo = [{
   placeholder: 'Select department',
   tabelName: 'department',
   loadOption: commonLoadOptions,
-  disableText: 'Please get in touch with your administrator to change this value.'
+  disableText: 'Please get in touch with your administrator to change this value.',
+  selectCTA: {
+    value: 'department',
+    component: /*#__PURE__*/React.createElement(IUITypography, {
+      className: "iui__font--color-link iui__font--weight-500"
+    }, "+ Add Department"),
+    callback: null
+  }
 }, {
   id: 6,
   label: 'Designation',
@@ -1224,7 +1283,8 @@ function GetInputType(_ref) {
         readOnly: _p.readOnly,
         hasInfoIcon: !!_p.tooltip,
         tooltipText: _p.tooltip,
-        disableText: _p.disableText
+        disableText: _p.disableText,
+        buttonType: _p.buttonType
       }));
 
     case 'async_select':
@@ -1235,7 +1295,8 @@ function GetInputType(_ref) {
           tabelName: _p.tabelName,
           product: _p.product,
           placeholder: _p.placeholder,
-          userId: _p.editUserId
+          userId: _p.editUserId,
+          selectCTA: _p.selectCTA
         },
         label: _p.label,
         secondaryLabel: _p.secondaryLabel,
@@ -1252,7 +1313,8 @@ function GetInputType(_ref) {
         placeHolderCheck: inputState[_p.name] !== undefined && inputState[_p.name].value === '',
         hasInfoIcon: !!_p.tooltip,
         tooltipText: _p.tooltip,
-        disableText: _p.disableText
+        disableText: _p.disableText,
+        selectCTA: _p.selectCTA
       });
 
     default:
@@ -1926,7 +1988,8 @@ var uploadSingleDocumnet = function uploadSingleDocumnet(payload) {
   return function (dispatch) {
     var itemTypes = {
       passport: 'passport',
-      travel_docs: 'travel_docs'
+      travel_docs: 'travel_docs',
+      profile_pic: 'profile_pic'
     };
     return new Promise(function (resolve, reject) {
       api$1.get(userAddEditUrl.preSignedUrl() + "?action=upload&item_type=" + payload.itemType + "&file_name=" + payload.fileName).then(function (res) {
@@ -2127,6 +2190,19 @@ var verifyUserInfo = function verifyUserInfo(userId) {
     });
   };
 };
+var submitAddModalData = function submitAddModalData(tableName, data) {
+  return function (dispatch) {
+    return new Promise(function (resolve, reject) {
+      api$1.post(userAddEditUrl.dropdownList() + ("?action=add&table=" + tableName), data).then(function (res) {
+        resolve(res);
+      })["catch"](function (err) {
+        var _err$response10, _err$response10$data;
+
+        IUIToastMessageService.warningNotify((err === null || err === void 0 ? void 0 : (_err$response10 = err.response) === null || _err$response10 === void 0 ? void 0 : (_err$response10$data = _err$response10.data) === null || _err$response10$data === void 0 ? void 0 : _err$response10$data.message) || 'Opps, Something went wrong.');
+      });
+    });
+  };
+};
 
 var SHOW_LOADER$1 = 'SHOW_LOADER';
 var STOP_LOADER$1 = 'STOP_LOADER';
@@ -4503,6 +4579,53 @@ var ErrorMessages = {
   products: 'Please select atleast one product access.'
 };
 
+function AddPanelDialog(_ref) {
+  var name = _ref.name,
+      isOpen = _ref.isOpen,
+      closeHandler = _ref.closeHandler,
+      submitHandler = _ref.submitHandler,
+      customHandler = _ref.customHandler,
+      isError = _ref.isError,
+      isDisabledSubmitBtn = _ref.isDisabledSubmitBtn,
+      validation = _ref.validation;
+  return /*#__PURE__*/React.createElement(IUIModal, {
+    isDisabledSubmitBtn: isDisabledSubmitBtn,
+    isOpen: isOpen,
+    closeHandler: closeHandler,
+    headerText: "Add " + name.toLowerCase(),
+    cancelLabel: "Cancel",
+    submitLabel: "Add",
+    submitHandler: submitHandler,
+    width: "365px",
+    hideCloseIcon: false,
+    modalBodyStyle: {
+      maxHeight: '600px',
+      overflow: 'auto',
+      margin: '0px'
+    },
+    footerStyle: {
+      justifyContent: 'end'
+    }
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    padding: "8px 20px"
+  }, /*#__PURE__*/React.createElement(IUIInput, {
+    label: name + " name",
+    name: "name",
+    defaultValue: "",
+    customHandler: customHandler,
+    placeholder: "",
+    validation: validation,
+    isError: isError,
+    errorMsg: "Please enter " + name.toLowerCase() + " name.",
+    required: true
+  })));
+}
+
 var IUIToastMessageService$4 = services.IUIToastMessageService;
 var env$4 = configs.env;
 
@@ -4597,7 +4720,8 @@ var UserAddEdit = function UserAddEdit(props) {
     dob: '',
     gender: '',
     country_code: countryCode,
-    contact_country_code: ''
+    contact_country_code: '',
+    profile_pic: []
   }),
       personalInfoInput = _useState2[0],
       setPersonalInfoInput = _useState2[1];
@@ -4747,7 +4871,8 @@ var UserAddEdit = function UserAddEdit(props) {
     passport_photo: '',
     travel_docs: '',
     products: '',
-    userTagType: ''
+    userTagType: '',
+    profile_pic: ''
   }),
       errorMsgs = _useState20[0],
       setErrorMsgs = _useState20[1];
@@ -4776,7 +4901,8 @@ var UserAddEdit = function UserAddEdit(props) {
     nationality: false,
     passport_issue_date: false,
     passport_expiry_date: false,
-    userTagType: false
+    userTagType: false,
+    profile_pic: false
   }),
       inputChangeLog = _useState21[0],
       updateInputChangeLog = _useState21[1];
@@ -4785,44 +4911,197 @@ var UserAddEdit = function UserAddEdit(props) {
       uploadedFiles = _useState22[0],
       setUploadedFiles = _useState22[1];
 
-  var onPersonalInfoChange = function onPersonalInfoChange(_name, _value, _isError, _errorMsg, _obj) {
-    if (_obj === void 0) {
-      _obj = {};
+  var defaultAddModalData = {
+    isOpen: false,
+    isError: false,
+    title: '',
+    value: '',
+    id: ''
+  };
+  var modalValidation = {
+    regexOnChange: /^[A-Za-z]+[A-Za-z0-9()&'\-_. ]*$/,
+    regexOnBlur: null,
+    maxLimit: '',
+    minLimit: '',
+    maxLength: 70,
+    minLength: 0
+  };
+
+  var _useState23 = useState(defaultAddModalData),
+      addModalData = _useState23[0],
+      setAddModalData = _useState23[1];
+
+  var onAddModalClose = function onAddModalClose() {
+    setAddModalData(_extends({}, defaultAddModalData));
+  };
+
+  var onModalOpen = function onModalOpen(e, id) {
+    var title = '';
+
+    if (id === 'entity') {
+      title = 'Entity';
+    } else if (id === 'department') {
+      title = 'Department';
+    } else if (id === 'business_unit') {
+      title = 'Business Unit';
+    } else if (id === 'employee_level') {
+      title = 'Employee Level';
     }
 
-    if (_name === 'contact_number') {
-      setPersonalInfoInput(_extends({}, personalInfoInput, {
-        contact_number: _value.trim(),
-        country_code: _obj.code,
-        contact_country_code: _obj.contact_country_code
+    console.log(_extends({}, addModalData, {
+      isOpen: true,
+      title: title,
+      id: id
+    }));
+    setAddModalData(_extends({}, addModalData, {
+      isOpen: true,
+      title: title,
+      id: id
+    }));
+  };
+
+  var onAddModalSubmit = function onAddModalSubmit() {
+    var validatedValue = addModalData.value.replace(/\s+/g, ' ').trim();
+
+    if (validatedValue === '') {
+      setAddModalData(_extends({}, addModalData, {
+        isError: true
       }));
-      updateError('contact_number', _isError, _errorMsg);
-      updateError('country_code', _isError, _errorMsg);
-      updateError('contact_country_code', _isError, _errorMsg);
     } else {
-      var _extends2;
+      dispatch(showLoader());
+      dispatch(submitAddModalData(addModalData.id, {
+        names: [validatedValue]
+      })).then(function (res) {
+        var _extends2;
 
-      setPersonalInfoInput(_extends({}, personalInfoInput, (_extends2 = {}, _extends2[_name] = _value, _extends2)));
-      updateError(_name, _isError, _errorMsg);
+        console.log(res, "success add " + addModalData.title + " response");
+        setAddModalData(_extends({}, addModalData, {
+          isOpen: false
+        }));
+        IUIToastMessageService$4.sNotify(addModalData.title + " added successfully.");
+        setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends2 = {}, _extends2[addModalData.id] = {
+          value: res.data.value,
+          label: res.data.label
+        }, _extends2)));
+        dispatch(stopLoader());
+      });
     }
+  };
 
-    if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends3;
+  var onFocusOutModalInput = function onFocusOutModalInput(name, value) {
+    var validatedValue = value.replace(/\s+/g, ' ').trim();
+    var error = addModalData.isError;
+    setAddModalData(_extends({}, addModalData, {
+      value: validatedValue,
+      isError: validatedValue === '' ? false : error
+    }));
+  };
 
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends3 = {}, _extends3[_name] = true, _extends3)));
+  var onPersonalInfoChange = function onPersonalInfoChange(_name, _value, _isError, _errorMsg, _obj) {
+    if (_isError === void 0) {
+      _isError = false;
+    }
+
+    if (_errorMsg === void 0) {
+      _errorMsg = '';
+    }
+
+    if (_obj === void 0) {
+      _obj = {};
+    }
+
+    try {
+      var _temp6 = function _temp6() {
+        if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
+          var _extends3;
+
+          updateInputChangeLog(_extends({}, inputChangeLog, (_extends3 = {}, _extends3[_name] = true, _extends3)));
+        }
+      };
+
+      var _temp7 = function () {
+        if (_name === 'contact_number') {
+          setPersonalInfoInput(_extends({}, personalInfoInput, {
+            contact_number: _value.trim(),
+            country_code: _obj.code,
+            contact_country_code: _obj.contact_country_code
+          }));
+          updateError('contact_number', _isError, _errorMsg);
+          updateError('country_code', _isError, _errorMsg);
+          updateError('contact_country_code', _isError, _errorMsg);
+        } else {
+          var _temp8 = function _temp8() {
+            var _extends4;
+
+            setPersonalInfoInput(_extends({}, personalInfoInput, (_extends4 = {}, _extends4[_name] = _value, _extends4)));
+            updateError(_name, _isError, _errorMsg);
+          };
+
+          var _temp9 = function () {
+            if (_name === 'profile_pic') {
+              var _temp10 = function () {
+                if (_isError.isUpload) {
+                  return Promise.resolve(uploadDocs(_value, _name)).then(function (docsData) {
+                    _value = _value.map(function (_val) {
+                      var found = docsData.find(function (doc) {
+                        return doc.user_file_name === _val.name;
+                      });
+
+                      if (found) {
+                        _val.returned_file_name = found.returned_file_name;
+                      }
+
+                      return _val;
+                    });
+                  });
+                } else if (_isError.isDeleted) {
+                  var _deletedFiles = [];
+
+                  var _uploadedFiles = uploadedFiles.filter(function (file) {
+                    if (_name === 'profile_pic' && file.file_type !== 'profile_pic') {
+                      return true;
+                    }
+
+                    var result = !!_value.find(function (_file) {
+                      return _file.name === file.user_file_name;
+                    });
+
+                    if (result === false && file.isExistingFile === true) {
+                      _deletedFiles.push(file.id);
+                    }
+
+                    return result;
+                  });
+
+                  setUploadedFiles(_uploadedFiles);
+                  setFilesForDelete([].concat(filesForDelete, _deletedFiles));
+                }
+              }();
+
+              if (_temp10 && _temp10.then) return _temp10.then(function () {});
+            }
+          }();
+
+          return _temp9 && _temp9.then ? _temp9.then(_temp8) : _temp8(_temp9);
+        }
+      }();
+
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
 
   var onEmployeeInfoChange = function onEmployeeInfoChange(_name, _value, _isError, _errorMsg, _obj) {
-    var _extends4;
+    var _extends5;
 
-    setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends4 = {}, _extends4[_name] = _value, _extends4)));
+    setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends5 = {}, _extends5[_name] = _value, _extends5)));
     updateError(_name, _isError, _errorMsg);
 
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends5;
+      var _extends6;
 
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends5 = {}, _extends5[_name] = true, _extends5)));
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends6 = {}, _extends6[_name] = true, _extends6)));
     }
   };
 
@@ -4834,9 +5113,9 @@ var UserAddEdit = function UserAddEdit(props) {
   };
 
   var onUserTagTypeChange = function onUserTagTypeChange(e) {
-    var _extends6;
+    var _extends7;
 
-    setUserTagType(_extends({}, userTagType, (_extends6 = {}, _extends6[e.target.name] = userTagType[e.target.name] ? false : getUserTagTypeId(e.target.name), _extends6)));
+    setUserTagType(_extends({}, userTagType, (_extends7 = {}, _extends7[e.target.name] = userTagType[e.target.name] ? false : getUserTagTypeId(e.target.name), _extends7)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, 'userTagType')) {
       updateInputChangeLog(_extends({}, inputChangeLog, {
@@ -4846,21 +5125,21 @@ var UserAddEdit = function UserAddEdit(props) {
   };
 
   var onCustomFieldsChange = function onCustomFieldsChange(_name, _value) {
-    var _extends7;
+    var _extends8;
 
-    setCustomFieldsInput(_extends({}, customFieldsInput, (_extends7 = {}, _extends7[_name] = _value, _extends7)));
+    setCustomFieldsInput(_extends({}, customFieldsInput, (_extends8 = {}, _extends8[_name] = _value, _extends8)));
   };
 
   var onTravelApproversInputChange = function onTravelApproversInputChange(_name, _value) {
-    var _extends8;
+    var _extends9;
 
-    setTravelApproversInput(_extends({}, travelApproversInput, (_extends8 = {}, _extends8[_name] = _value, _extends8)));
+    setTravelApproversInput(_extends({}, travelApproversInput, (_extends9 = {}, _extends9[_name] = _value, _extends9)));
   };
 
   var onExpenseApproversInputChange = function onExpenseApproversInputChange(_name, _value) {
-    var _extends9;
+    var _extends10;
 
-    setExpenseApproversInput(_extends({}, expenseApproversInput, (_extends9 = {}, _extends9[_name] = _value, _extends9)));
+    setExpenseApproversInput(_extends({}, expenseApproversInput, (_extends10 = {}, _extends10[_name] = _value, _extends10)));
   };
 
   var onMemInfoInputChange = function onMemInfoInputChange(index, key, val) {
@@ -4890,28 +5169,28 @@ var UserAddEdit = function UserAddEdit(props) {
   };
 
   var travelPreferenceOnChange = function travelPreferenceOnChange(_name, _value, _isError, _errorMsg) {
-    var _extends10;
+    var _extends11;
 
-    settravelPreferenceInfo(_extends({}, travelPreferenceInfo, (_extends10 = {}, _extends10[_name] = _value, _extends10)));
+    settravelPreferenceInfo(_extends({}, travelPreferenceInfo, (_extends11 = {}, _extends11[_name] = _value, _extends11)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends11;
+      var _extends12;
 
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends11 = {}, _extends11[_name] = true, _extends11)));
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends12 = {}, _extends12[_name] = true, _extends12)));
     }
 
     updateError(_name, _isError, _errorMsg);
   };
 
   var onSecureTraveelerInfoInputChange = function onSecureTraveelerInfoInputChange(_name, _value, _isError, _errorMsg) {
-    var _extends12;
+    var _extends13;
 
-    setSecureTravelInputInfo(_extends({}, secureTravelInputInfo, (_extends12 = {}, _extends12[_name] = _value, _extends12)));
+    setSecureTravelInputInfo(_extends({}, secureTravelInputInfo, (_extends13 = {}, _extends13[_name] = _value, _extends13)));
 
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-      var _extends13;
+      var _extends14;
 
-      updateInputChangeLog(_extends({}, inputChangeLog, (_extends13 = {}, _extends13[_name] = true, _extends13)));
+      updateInputChangeLog(_extends({}, inputChangeLog, (_extends14 = {}, _extends14[_name] = true, _extends14)));
     }
 
     updateError(_name, _isError, _errorMsg);
@@ -4931,15 +5210,15 @@ var UserAddEdit = function UserAddEdit(props) {
     }
 
     try {
-      var _temp4 = function _temp4() {
-        var _extends14;
+      var _temp14 = function _temp14() {
+        var _extends15;
 
-        setPassportInfoInput(_extends({}, passportInfoInput, (_extends14 = {}, _extends14[_name] = _value, _extends14)));
+        setPassportInfoInput(_extends({}, passportInfoInput, (_extends15 = {}, _extends15[_name] = _value, _extends15)));
 
         if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
-          var _extends15;
+          var _extends16;
 
-          updateInputChangeLog(_extends({}, inputChangeLog, (_extends15 = {}, _extends15[_name] = true, _extends15)));
+          updateInputChangeLog(_extends({}, inputChangeLog, (_extends16 = {}, _extends16[_name] = true, _extends16)));
         }
 
         updateError(_name, _isError, _errorMsg);
@@ -4973,15 +5252,17 @@ var UserAddEdit = function UserAddEdit(props) {
         return Promise.resolve();
       }
 
-      var _temp5 = function () {
+      var _temp15 = function () {
         if (_name === 'passport_photo' || _name === 'travel_docs') {
-          var _temp6 = function () {
+          var _temp16 = function () {
             if (_obj.isUpload) {
               var checkAlreadyUploadedFiles = uploadedFiles.filter(function (_file) {
                 if (_name === 'passport_photo') {
                   return _file.file_type === 'passport';
-                } else {
+                } else if (_name === 'travel_docs') {
                   return _file.file_type === 'travel_docs';
+                } else {
+                  return false;
                 }
               }).map(function (_file) {
                 return _file.user_file_name;
@@ -5025,11 +5306,11 @@ var UserAddEdit = function UserAddEdit(props) {
             }
           }();
 
-          if (_temp6 && _temp6.then) return _temp6.then(function () {});
+          if (_temp16 && _temp16.then) return _temp16.then(function () {});
         }
       }();
 
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp4) : _temp4(_temp5));
+      return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(_temp14) : _temp14(_temp15));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -5052,9 +5333,9 @@ var UserAddEdit = function UserAddEdit(props) {
       return _errorArray;
     });
     setErrorMsgs(function (prevState) {
-      var _extends16;
+      var _extends17;
 
-      return _extends({}, prevState, (_extends16 = {}, _extends16[_name] = _errorMsg, _extends16));
+      return _extends({}, prevState, (_extends17 = {}, _extends17[_name] = _errorMsg, _extends17));
     });
   };
 
@@ -5100,6 +5381,19 @@ var UserAddEdit = function UserAddEdit(props) {
           })).then(function (res) {
             var _res$user_tags, _res$custom_attribute;
 
+            var profilePic = [];
+
+            if (res && res.profile_pic) {
+              profilePic = [{
+                name: res.profile_pic.user_file_name,
+                id: res.profile_pic.id,
+                isExistingFile: true,
+                file_path: res.profile_pic.file_path,
+                file_type: res.profile_pic.file_type,
+                presigned_url: res.profile_pic.presigned_url
+              }];
+            }
+
             setPersonalInfoInput(_extends({}, personalInfoInput, {
               first_name: res.first_name || '',
               last_name: res.last_name || '',
@@ -5108,7 +5402,8 @@ var UserAddEdit = function UserAddEdit(props) {
               dob: res.personal_info.dob || '',
               gender: res.personal_info.gender || '',
               country_code: res.personal_info.country_code || countryCode,
-              contact_country_code: res.personal_info.contact_country_code || ''
+              contact_country_code: res.personal_info.contact_country_code || '',
+              profile_pic: profilePic || []
             }));
             setEmployeeInfoInput(_extends({}, employeeInfoInput, {
               emp_level: res.employee_info.emp_level ? {
@@ -5240,6 +5535,16 @@ var UserAddEdit = function UserAddEdit(props) {
                   file_type: _file.file_type
                 });
               });
+
+              if (res && res.profile_pic) {
+                _uploadedDocs.push({
+                  user_file_name: res.profile_pic.user_file_name,
+                  id: res.profile_pic.id,
+                  isExistingFile: true,
+                  file_type: res.profile_pic.file_type
+                });
+              }
+
               setPassportInfoInput(_extends({}, passportInfoInput, {
                 passport_issue_country: res !== null && res !== void 0 && (_res$travel_info = res.travel_info) !== null && _res$travel_info !== void 0 && _res$travel_info.passport_issue_country ? {
                   label: res.travel_info.passport_issue_country,
@@ -5360,7 +5665,7 @@ var UserAddEdit = function UserAddEdit(props) {
 
   var uploadDocs = function uploadDocs(docToUpload, type) {
     try {
-      var _temp9 = function _temp9() {
+      var _temp19 = function _temp19() {
         setUploadedFiles([].concat(uploadedFiles, data));
         dispatch(stopLoader());
         return data;
@@ -5373,17 +5678,18 @@ var UserAddEdit = function UserAddEdit(props) {
         docs.push({
           itemType: type,
           fileName: doc.name,
-          file: doc
+          file: doc,
+          userID: editUserId
         });
       });
 
-      var _temp10 = _forTo(docs, function (i) {
+      var _temp20 = _forTo(docs, function (i) {
         return Promise.resolve(dispatch(uploadSingleDocumnet(docs[i]))).then(function (res) {
           data.push(res);
         });
       });
 
-      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+      return Promise.resolve(_temp20 && _temp20.then ? _temp20.then(_temp19) : _temp19(_temp20));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -5769,7 +6075,6 @@ var UserAddEdit = function UserAddEdit(props) {
     if (verifyUserId) {
       dispatch(showLoader());
       dispatch(verifyUserInfo(verifyUserId)).then(function (res) {
-        console.log(res);
         setPersonalInfoInput(function (prevState) {
           return _extends({}, prevState, {
             first_name: res.fname,
@@ -5995,6 +6300,10 @@ var UserAddEdit = function UserAddEdit(props) {
     container: true,
     className: clsx(styles.formFieldsWrapper, styles.firstRowMargin)
   }, renderFields.workInfo.map(function (p, i) {
+    if (p.type === 'async_select' && p.selectCTA) {
+      p.selectCTA.callback = onModalOpen;
+    }
+
     if (!p.visibility) {
       return null;
     }
@@ -6154,6 +6463,14 @@ var UserAddEdit = function UserAddEdit(props) {
   }))) : /*#__PURE__*/React.createElement(VerificationError, {
     config: config,
     errMsg: hasVerificationError
+  }), /*#__PURE__*/React.createElement(AddPanelDialog, {
+    name: addModalData.title,
+    isOpen: addModalData.isOpen,
+    isError: addModalData.isError,
+    closeHandler: onAddModalClose,
+    customHandler: onFocusOutModalInput,
+    submitHandler: onAddModalSubmit,
+    validation: modalValidation
   }));
 };
 
@@ -8577,53 +8894,6 @@ function Listview(_ref) {
   })));
 }
 
-function AddPanelDialog(_ref) {
-  var name = _ref.name,
-      isOpen = _ref.isOpen,
-      closeHandler = _ref.closeHandler,
-      submitHandler = _ref.submitHandler,
-      customHandler = _ref.customHandler,
-      isError = _ref.isError,
-      isDisabledSubmitBtn = _ref.isDisabledSubmitBtn,
-      validation = _ref.validation;
-  return /*#__PURE__*/React.createElement(IUIModal, {
-    isDisabledSubmitBtn: isDisabledSubmitBtn,
-    isOpen: isOpen,
-    closeHandler: closeHandler,
-    headerText: "Add " + name.toLowerCase(),
-    cancelLabel: "Cancel",
-    submitLabel: "Add",
-    submitHandler: submitHandler,
-    width: "365px",
-    hideCloseIcon: false,
-    modalBodyStyle: {
-      maxHeight: '600px',
-      overflow: 'auto',
-      margin: '0px'
-    },
-    footerStyle: {
-      justifyContent: 'end'
-    }
-  }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "column",
-    padding: "8px 20px"
-  }, /*#__PURE__*/React.createElement(IUIInput, {
-    label: name + " name",
-    name: "name",
-    defaultValue: "",
-    customHandler: customHandler,
-    placeholder: "",
-    validation: validation,
-    isError: isError,
-    errorMsg: "Please enter " + name.toLowerCase() + " name.",
-    required: true
-  })));
-}
-
 function DeletePanelModal(_ref) {
   var isOpen = _ref.isOpen,
       closeHandler = _ref.closeHandler,
@@ -8921,7 +9191,7 @@ var UserPanel = function UserPanel(_ref) {
   };
 
   var validation = {
-    regexOnChange: /^[A-Za-z]+[A-Za-z0-9()&'\-_. ]*$/,
+    regexOnChange: /^[(A-Z)(a-z)(0-9)&'\-_.,/: ]*$/,
     regexOnBlur: null,
     maxLimit: '',
     minLimit: '',