@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/organism/AccountProfile/components/AccountSetting/AccountSetting.js

@@ -1,38 +1,29 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useRef, useState, forwardRef, memo, } from 'react';
+import axios from 'axios';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import axios from 'axios';
+import { forwardRef, memo, useEffect, useRef, useState } from 'react';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
 import useModal from './useModal';
 // Components
 // import SearchDropdown from 'Components/SearchDropdown';
-import { EditableName, Input, Spin, Button, Radio, Icon, Flex, ModalV2, } from '@antscorp/antsomi-ui/es/components';
+import { Button, EditableName, Flex, Icon, Input, ModalV2, Radio, Spin, } from '@antscorp/antsomi-ui/es';
 import EditableInput from './components/EditableInput';
 import LanguageSelector from './components/LanguageSelector';
 import UploadAvatar from './components/UploadAvatar';
 // Constants
-import { fieldsUI, initialForm, defaultVals, allowChangeFields, VALUE_MAPPING, FILE_UPLOAD_ERROR, ST_URL_UPLOAD_PLATFORM, } from './constants';
+import { allowChangeFields, defaultVals, fieldsUI, FILE_UPLOAD_ERROR, initialForm, ST_URL_UPLOAD_PLATFORM, VALUE_MAPPING, } from './constants';
 // Assets
-import { DrawerHeader, AccountDetail, StyledRadioGroup, StyledDatePicker, StyledCheckbox, } from './styled';
 import Image from './images/img-account-big.png';
+import { AccountDetail, DrawerHeader, StyledCheckbox, StyledDatePicker, StyledRadioGroup, } from './styled';
 import './styles.scss';
 // Utils
-import { getDefaultMessage, getDuplicateMessage, validator, getObjectPropSafely, isPermissionUpdate, handleError, } from './utils';
 import { IAM_API } from '@antscorp/antsomi-ui/es/constants';
+import { getDefaultMessage, getDuplicateMessage, getObjectPropSafely, handleError, isPermissionUpdate, validator, } from './utils';
 const PATH = 'antsomi-ui/src/components/organism/AccountProfile/components/AccountSettings/index.tsx';
 export const AccountSetting = memo(forwardRef((props, ref) => {
-    var _a;
     const { iamDomain = IAM_API, token, mode = 'update', accountId, open, setDrawerHeader, isDisabledEdit, isAccountProfile = true, } = props;
     const isUpdateMode = mode === 'update';
     const [form, setForm] = useState(initialForm);
@@ -82,28 +73,32 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
     //     }));
     //   }
     // }, [open, isUpdateMode]);
-    const getAccountDetail = () => __awaiter(void 0, void 0, void 0, function* () {
+    const getAccountDetail = async () => {
         if (!accountId)
             return null;
-        const accountInfo = yield axios
+        const accountInfo = await axios
             .get(apiEndpoint)
             .then(res => getObjectPropSafely(() => res.data.data));
         return accountInfo;
-    });
-    const fetchAccountDetail = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const fetchAccountDetail = async () => {
         setLoading(true);
-        const accountInfo = yield getAccountDetail().finally(() => {
+        const accountInfo = await getAccountDetail().finally(() => {
             setLoading(false);
         });
         if (accountInfo) {
-            setForm(Object.assign(Object.assign({}, accountInfo), { birthday: dayjs(accountInfo.birthday), initDone: true }));
+            setForm({
+                ...accountInfo,
+                birthday: dayjs(accountInfo.birthday),
+                initDone: true,
+            });
             setOriginEmail(accountInfo.email);
             setLogo({
                 isDefault: true,
                 url: accountInfo.avatar,
             });
         }
-    });
+    };
     const setValueAndResetError = (fieldName, value, newForm = null) => {
         try {
             let isCharacter = true;
@@ -111,16 +106,29 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                 isCharacter = value.indexOf("'") === -1;
             }
             if (newForm) {
-                setForm(prev => (Object.assign(Object.assign(Object.assign({}, prev), newForm), { [fieldName]: value })));
+                setForm(prev => ({
+                    ...prev,
+                    ...newForm,
+                    [fieldName]: value,
+                }));
             }
             else {
-                setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: value })));
+                setForm(prev => ({
+                    ...prev,
+                    [fieldName]: value,
+                }));
             }
             if (!isCharacter) {
-                setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: ['Invalid full name'] }));
+                setErrors({
+                    ...errors,
+                    [fieldName]: ['Invalid full name'],
+                });
             }
             else {
-                setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: [] }));
+                setErrors({
+                    ...errors,
+                    [fieldName]: [],
+                });
             }
         }
         catch (e) {
@@ -155,10 +163,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
     //   }
     // }, [saveAccountFlag]);
     useEffect(() => {
-        setDrawerHeader(React.createElement(DrawerHeader, null,
-            React.createElement("div", { className: "left-content" },
-                React.createElement("div", { id: "header-journey-name" }, form.full_name && (React.createElement(EditableName, { defaultValue: form.full_name, error: "", onBlur: () => { }, onChange: value => onTextFieldChange('full_name')({ target: { value } }), readonly: isPreview, required: true })))),
-            React.createElement("div", { id: "header-journey-right", className: "right-content" }, isPreview ? (React.createElement(Button, { type: "primary", onClick: () => setIsPreview(false), disabled: isDisabledEdit }, "Edit")) : (React.createElement(Button, { type: "primary", onClick: validateForm, disabled: isUpdateMode && isDisabledEdit }, "Save")))));
+        setDrawerHeader(_jsxs(DrawerHeader, { children: [_jsx("div", { className: "left-content", children: _jsx("div", { id: "header-journey-name", children: form.full_name && (_jsx(EditableName, { defaultValue: form.full_name, error: "", onBlur: () => { }, onChange: value => onTextFieldChange('full_name')({ target: { value } }), readonly: isPreview, required: true })) }) }), _jsx("div", { id: "header-journey-right", className: "right-content", children: isPreview ? (_jsx(Button, { type: "primary", onClick: () => setIsPreview(false), disabled: isDisabledEdit, children: "Edit" })) : (_jsx(Button, { type: "primary", onClick: validateForm, disabled: isUpdateMode && isDisabledEdit, children: "Save" })) })] }));
     }, [form.full_name, isPreview]);
     const onDateFieldChange = fieldName => date => {
         try {
@@ -166,7 +171,10 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             setValueAndResetError(fieldName, date);
         }
         catch (error) {
-            setErrors(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: dayjs() })));
+            setErrors(prev => ({
+                ...prev,
+                [fieldName]: dayjs(),
+            }));
         }
     };
     const onTextFieldChange = fieldName => e => {
@@ -217,13 +225,22 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
     //     }
     // };
     const onRadioFieldChange = fieldName => e => {
-        setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: +e.target.value })));
+        setForm(prev => ({
+            ...prev,
+            [fieldName]: +e.target.value,
+        }));
     };
     const onSelectFieldChange = fieldName => (value, item) => {
-        setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: value })));
+        setForm(prev => ({
+            ...prev,
+            [fieldName]: value,
+        }));
     };
     const onChangeValidateEmail = () => {
-        setForm(prev => (Object.assign(Object.assign({}, prev), { validateEmail: !form.validateEmail })));
+        setForm(prev => ({
+            ...prev,
+            validateEmail: !form.validateEmail,
+        }));
     };
     const buildAvatar = fullName => {
         function generateAvatar(text, foregroundColor = '#fff', backgroundColor = '#005EB8') {
@@ -271,10 +288,16 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                         : '';
             });
             newForm.password = '11111111';
-            setForm(prev => (Object.assign(Object.assign({}, prev), newForm)));
+            setForm(prev => ({
+                ...prev,
+                ...newForm,
+            }));
             setErrors({});
             setIsOverwrite(true);
-            setMessageBox(Object.assign(Object.assign({}, messageBox), { isOpen: false }));
+            setMessageBox({
+                ...messageBox,
+                isOpen: false,
+            });
         }
         catch (err) {
             handleError(err, {
@@ -295,7 +318,11 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         try {
             const fieldValue = event.target.value.trim();
             if (fieldValue) {
-                const checkRequest = config.service(Object.assign(Object.assign({}, config.params), { [config.mapping]: fieldValue, user_id: accountId }));
+                const checkRequest = config.service({
+                    ...config.params,
+                    [config.mapping]: fieldValue,
+                    user_id: accountId,
+                });
                 if (checkRequest) {
                     checkRequest.then(res => {
                         if (mode === 'create' &&
@@ -313,9 +340,12 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                             });
                         }
                         else {
-                            setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: res && res.data && res.data.data && res.data.data.status
+                            setErrors({
+                                ...errors,
+                                [fieldName]: res && res.data && res.data.data && res.data.data.status
                                     ? []
-                                    : [getDuplicateMessage(fieldName)] }));
+                                    : [getDuplicateMessage(fieldName)],
+                            });
                         }
                     });
                 }
@@ -328,11 +358,15 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             });
         }
     };
-    const validateUniqueField = (_b) => __awaiter(void 0, [_b], void 0, function* ({ fieldName, config }) {
+    const validateUniqueField = async ({ fieldName, config }) => {
         try {
             const fieldValue = form[fieldName].trim();
             if (fieldValue) {
-                const res = yield config.service(Object.assign(Object.assign({}, config.params), { [config.mapping]: fieldValue, user_id: isOverwrite ? form.user_id : accountId }));
+                const res = await config.service({
+                    ...config.params,
+                    [config.mapping]: fieldValue,
+                    user_id: isOverwrite ? form.user_id : accountId,
+                });
                 return res && res.data && res.data.data && res.data.data.status
                     ? null
                     : getDuplicateMessage(fieldName);
@@ -345,7 +379,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                 name: 'setValueAndResetError',
             });
         }
-    });
+    };
     const renderField = (fieldType, inputProps) => {
         try {
             if (isUpdateMode &&
@@ -361,21 +395,21 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             const errorMsg = getObjectPropSafely(() => errors[inputProps.fieldName][0]);
             switch (fieldType) {
                 case 'text':
-                    return (React.createElement(Input, Object.assign({}, inputProps, { showCurrentLenght: false, status: errorMsg ? 'error' : undefined, errorMsg: errorMsg, style: { padding: 5 } })));
+                    return (_jsx(Input, { ...inputProps, showCurrentLenght: false, status: errorMsg ? 'error' : undefined, errorMsg: errorMsg, style: { padding: 5 } }));
                 case 'password':
-                    return (React.createElement(EditableInput, Object.assign({}, inputProps, { iamDomain: iamDomain, token: token, apiEndpoint: apiEndpoint, isPreview: isPreview, errorMsg: errorMsg })));
+                    return (_jsx(EditableInput, { ...inputProps, iamDomain: iamDomain, token: token, apiEndpoint: apiEndpoint, isPreview: isPreview, errorMsg: errorMsg }));
                 case 'textarea':
-                    return React.createElement("textarea", Object.assign({}, inputProps));
+                    return _jsx("textarea", { ...inputProps });
                 case 'date':
                     // {...inputProps} isShowLabel={false} error={errorMsg}
-                    return (React.createElement(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: React.createElement(Icon, { type: "icon-ants-angle-left", size: "11" }), nextIcon: React.createElement(Icon, { type: "icon-ants-angle-right1", size: "11" }), allowClear: false, suffixIcon: React.createElement(Icon, { type: "icon-ants-calendar-picker", size: "24", color: "rgba(0, 0, 0, 0.54)" }) }));
+                    return (_jsx(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: _jsx(Icon, { type: "icon-ants-angle-left", size: "11" }), nextIcon: _jsx(Icon, { type: "icon-ants-angle-right1", size: "11" }), allowClear: false, suffixIcon: _jsx(Icon, { type: "icon-ants-calendar-picker", size: "24", color: "rgba(0, 0, 0, 0.54)" }) }));
                 case 'radio':
                     // return <RadioButtonGroup {...inputProps} />;
-                    return (React.createElement(StyledRadioGroup, { value: +inputProps.value, onChange: inputProps.onChange, name: inputProps.fieldName, disabled: inputProps.disabled }, inputProps.arrRadios.map(item => (React.createElement(Radio, { value: item.value, key: item.value }, item.label)))));
+                    return (_jsx(StyledRadioGroup, { value: +inputProps.value, onChange: inputProps.onChange, name: inputProps.fieldName, disabled: inputProps.disabled, children: inputProps.arrRadios.map(item => (_jsx(Radio, { value: item.value, children: item.label }, item.value))) }));
                 case 'lang':
-                    return React.createElement(LanguageSelector, Object.assign({}, inputProps, { isPreview: isPreview }));
+                    return _jsx(LanguageSelector, { ...inputProps, isPreview: isPreview });
                 default:
-                    return (React.createElement(Input, Object.assign({}, inputProps, { showCurrentLenght: false, status: errorMsg ? 'error' : undefined, errorMsg: errorMsg, style: { padding: 5 } })));
+                    return (_jsx(Input, { ...inputProps, showCurrentLenght: false, status: errorMsg ? 'error' : undefined, errorMsg: errorMsg, style: { padding: 5 } }));
                 // return (
                 //   <div className="dropdown">
                 //     <SearchDropdown {...inputProps} />
@@ -448,27 +482,43 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                     };
                     break;
                 case 'radio':
-                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange[fieldType](fieldName), handleUpdateField, disabled: isDisabled, mode,
+                    inputProps = {
+                        ...fieldsUI[fieldName],
+                        value: form[fieldName],
+                        onChange: onChange[fieldType](fieldName),
+                        handleUpdateField,
+                        disabled: isDisabled,
+                        mode,
                         isUpdate,
                         isEditing,
-                        isDisabledEdit });
+                        isDisabledEdit,
+                    };
                     break;
                 case 'lang':
-                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange.select(fieldName), 
+                    inputProps = {
+                        ...fieldsUI[fieldName],
+                        value: form[fieldName],
+                        onChange: onChange.select(fieldName),
                         // handleUpdateField,
                         isDisabled,
                         mode,
                         isUpdate,
                         isEditing,
-                        isDisabledEdit });
+                        isDisabledEdit,
+                    };
                     break;
                 case 'date':
-                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange[fieldType](fieldName), handleUpdateField,
+                    inputProps = {
+                        ...fieldsUI[fieldName],
+                        value: form[fieldName],
+                        onChange: onChange[fieldType](fieldName),
+                        handleUpdateField,
                         isDisabled,
                         mode,
                         isUpdate,
                         isEditing,
-                        isDisabledEdit });
+                        isDisabledEdit,
+                    };
                     break;
                 default:
                     inputProps = {};
@@ -495,24 +545,16 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         if (isUpdateMode && !form.initDone) {
             inputProps.onChange = () => null;
         }
-        return (React.createElement("div", { className: "form-group", key: `create_${fieldName}_${position}`, style: isPreview
+        return (_jsxs("div", { className: "form-group", style: isPreview
                 ? { marginTop: 20, height: fieldName === 'password' ? 80 : 30 }
-                : { marginTop: 20, height: 'unset' } },
-            React.createElement("label", { className: "field-L", style: { top: isPreview || !inputProps.isUpdate ? 0 : 8 } },
-                fieldLabel,
-                allowNull || React.createElement("span", { className: "other-color" }, "*")),
-            React.createElement("div", { className: clsx('container-field', {
-                    'w-full': fieldName === 'password',
-                }) },
-                renderField(fieldType, inputProps),
-                mode === 'create' && verify && messageVerify ? (React.createElement("div", { className: "checkbox-verify" },
-                    React.createElement(StyledCheckbox, { name: "verify-email", checked: form.validateEmail, onChange: onChangeValidateEmail }, messageVerify))) : null),
-            errors[fieldName] && !['text', 'date', 'password'].includes(fieldType) && (React.createElement("div", { className: "container-field" }, renderFieldErrors(fieldName, fieldType === 'number')))));
+                : { marginTop: 20, height: 'unset' }, children: [_jsxs("label", { className: "field-L", style: { top: isPreview || !inputProps.isUpdate ? 0 : 8 }, children: [fieldLabel, allowNull || _jsx("span", { className: "other-color", children: "*" })] }), _jsxs("div", { className: clsx('container-field', {
+                        'w-full': fieldName === 'password',
+                    }), children: [renderField(fieldType, inputProps), mode === 'create' && verify && messageVerify ? (_jsx("div", { className: "checkbox-verify", children: _jsx(StyledCheckbox, { name: "verify-email", checked: form.validateEmail, onChange: onChangeValidateEmail, children: messageVerify }) })) : null] }), errors[fieldName] && !['text', 'date', 'password'].includes(fieldType) && (_jsx("div", { className: "container-field", children: renderFieldErrors(fieldName, fieldType === 'number') }))] }, `create_${fieldName}_${position}`));
     };
     const renderFieldErrors = (fieldName, textAlignRight = true, padding = true) => {
         try {
             if (errors[fieldName] && errors[fieldName].length) {
-                return (React.createElement("div", { style: padding ? { padding: '0px 5px' } : {} }, errors[fieldName].map((error, index) => (React.createElement("span", { key: `create_company_${fieldName}_error_${index}`, className: `error ${textAlignRight && 'text-right'}`, style: { fontSize: 12 } }, error)))));
+                return (_jsx("div", { style: padding ? { padding: '0px 5px' } : {}, children: errors[fieldName].map((error, index) => (_jsx("span", { className: `error ${textAlignRight && 'text-right'}`, style: { fontSize: 12 }, children: error }, `create_company_${fieldName}_error_${index}`))) }));
             }
             return null;
         }
@@ -523,7 +565,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             });
         }
     };
-    const validateField = (_c) => __awaiter(void 0, [_c], void 0, function* ([fieldName, value]) {
+    const validateField = async ([fieldName, value]) => {
         try {
             value = typeof value === 'string' ? value.trim() : value;
             const fieldUI = fieldsUI[fieldName];
@@ -563,7 +605,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                         });
                     }
                     if (!fieldErrors.length && fieldUI.checkUnique) {
-                        const resultUnique = yield validateUniqueField({
+                        const resultUnique = await validateUniqueField({
                             fieldName,
                             config: fieldUI.checkUnique,
                         });
@@ -584,14 +626,17 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                 name: 'validateField',
             });
         }
-    });
-    const validateForm = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const validateForm = async () => {
         try {
             // do things when no errors
             if (formRef.current) {
-                const arrErrs = yield Promise.all(Object.entries(formRef.current).map(validateField));
+                const arrErrs = await Promise.all(Object.entries(formRef.current).map(validateField));
                 const errs = Object.fromEntries(arrErrs);
-                setErrors(Object.assign(Object.assign({}, errors), errs));
+                setErrors({
+                    ...errors,
+                    ...errs,
+                });
                 if (Object.values(errs).every(fieldErrors => !fieldErrors.length)) {
                     saveAccount();
                 }
@@ -603,7 +648,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                 name: 'validateForm',
             });
         }
-    });
+    };
     const renderBlock = (group, position = null) => {
         try {
             return Object.entries(fieldsUI)
@@ -620,7 +665,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             });
         }
     };
-    const doSaveAccount = (updateData) => __awaiter(void 0, void 0, void 0, function* () {
+    const doSaveAccount = async (updateData) => {
         setOpenChangeEmail(false);
         setLoading(true);
         let result = null;
@@ -634,7 +679,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         //     loadingCompleteRef.current = true;
         //   }
         // }, 2000);
-        result = yield axios.put(apiEndpoint, updateData);
+        result = await axios.put(apiEndpoint, updateData);
         setLoading(false);
         const modeLabel = isUpdateMode ? 'Update' : 'Create';
         if (result && result.data && result.data.data && result.data.data.userId) {
@@ -665,15 +710,15 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                 content: `${modeLabel} account fail, please try again later!`,
             });
         }
-    });
-    const saveAccount = () => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const saveAccount = async () => {
         if (!formRef.current)
             return;
         const { user_id: userId, full_name: fullName, gender, birthday, phone, address, email, password, account_type: accountType, language, validateEmail, } = formRef.current;
         const updateData = {
-            full_name: fullName === null || fullName === void 0 ? void 0 : fullName.trim(),
+            full_name: fullName?.trim(),
             gender,
-            birthday: birthday === null || birthday === void 0 ? void 0 : birthday.format('YYYY-MM-DD'),
+            birthday: birthday?.format('YYYY-MM-DD'),
             phone: phone && phone.trim(),
             address: address && address.trim(),
             // email: email && email.trim(),
@@ -681,8 +726,11 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             // validate_email: !!validateEmail,
             // source: 'aacm',
         };
-        if ((email === null || email === void 0 ? void 0 : email.trim()) !== originEmail) {
-            updateDataRef.current = Object.assign(Object.assign({}, updateData), { email: email === null || email === void 0 ? void 0 : email.trim() });
+        if (email?.trim() !== originEmail) {
+            updateDataRef.current = {
+                ...updateData,
+                email: email?.trim(),
+            };
             setOpenChangeEmail(true);
             // showConfirm({
             //   title: 'Change email',
@@ -704,9 +752,9 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             doSaveAccount(updateData);
         }
         return false;
-    });
-    const handleUpdatePassword = (oldPassword, newPassword) => __awaiter(void 0, void 0, void 0, function* () {
-        const result = yield axios.put(apiEndpoint, {
+    };
+    const handleUpdatePassword = async (oldPassword, newPassword) => {
+        const result = await axios.put(apiEndpoint, {
             id: accountId,
             new_password: newPassword,
             re_password: newPassword,
@@ -714,21 +762,24 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             // source: 'aacm',
         });
         return !!(result && result.data && result.data.data && result.data.data.userId);
-    });
-    const handleUpdateField = (field_1, ...args_1) => __awaiter(void 0, [field_1, ...args_1], void 0, function* (field, value = undefined) {
+    };
+    const handleUpdateField = async (field, value = undefined) => {
         try {
             const fieldValue = value === undefined ? form[field] : value;
             if (field !== 'avatar') {
                 if (!field || fieldsUI[field] === undefined) {
                     return false;
                 }
-                const [fieldName, fieldErrors] = (yield validateField([field, fieldValue])) || [];
-                setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: fieldErrors }));
+                const [fieldName, fieldErrors] = (await validateField([field, fieldValue])) || [];
+                setErrors({
+                    ...errors,
+                    [fieldName]: fieldErrors,
+                });
                 if ((fieldErrors && fieldErrors.length) || (errors[field] && errors[field].length)) {
                     return false;
                 }
             }
-            const result = yield axios.put(apiEndpoint, {
+            const result = await axios.put(apiEndpoint, {
                 [field]: fieldValue,
                 // source: 'aacm',
             });
@@ -749,7 +800,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         catch (error) {
             handleError(error, {});
         }
-    });
+    };
     const onFileUploading = () => {
         try {
             // props.onProgressLoadingActive();
@@ -768,7 +819,10 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             if (newProps.url) {
                 setIsUploadLogo(true);
                 setLogo(newProps);
-                setErrors(Object.assign(Object.assign({}, errors), { avatar: null }));
+                setErrors({
+                    ...errors,
+                    avatar: null,
+                });
                 if (mode === 'update') {
                     handleUpdateField('avatar', newProps.url);
                 }
@@ -797,62 +851,44 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
             default:
                 fileError = '';
         }
-        setErrors(Object.assign(Object.assign({}, errors), { avatar: fileError }));
+        setErrors({
+            ...errors,
+            avatar: fileError,
+        });
     };
     const avatarUrl = (logo && logo.url && (logo.isDefault ? '' : ST_URL_UPLOAD_PLATFORM) + logo.url) ||
         (logoManual && logoManual.url) ||
         (!loading ? Image : '');
     try {
-        return (React.createElement(Spin, { spinning: loading },
-            React.createElement(AccountDetail, { className: "wrap-table" },
-                React.createElement("div", { className: "form-profile" },
-                    React.createElement("div", { className: "left-profile" },
-                        logo && React.createElement("img", { src: avatarUrl, alt: "" }),
-                        React.createElement("div", { className: "preview mt-10" },
-                            isDisabledEdit || isPreview ? null : (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: "block-choose-input-file" },
-                                    React.createElement(UploadAvatar
-                                    // ref={input => {
-                                    //   this.fileInput = input;
-                                    // }}
-                                    , { 
-                                        // ref={input => {
-                                        //   this.fileInput = input;
-                                        // }}
-                                        onFileUploading: onFileUploading, onFileUploaded: handleChangeLogo, callbackFileError: showFileError, dimensions: { width: 5000, height: 5000 }, extensions: ['png', 'jpg', 'PNG', 'JPG'], maxFileSize: 3072, iamDomain: iamDomain, authStr: `?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`, setLoading: setLoading })),
-                                React.createElement("span", { className: "choose-file-text" }, "Change avatar"))),
-                            errors.avatar ? (React.createElement("div", { className: "error", style: {
-                                    width: 'fit-content',
-                                    textAlign: 'left',
-                                    margin: '0 auto',
-                                } },
-                                React.createElement("div", { className: "error" }, errors.avatar && errors.avatar.includes('||')
-                                    ? errors.avatar.split('||')[0]
-                                    : null),
-                                React.createElement("div", { className: "error" }, errors.avatar && errors.avatar.includes('||')
-                                    ? errors.avatar.split('||')[1]
-                                    : null))) : null)),
-                    React.createElement("div", { className: "right-profile" },
-                        mode === 'update' ? renderBlock(1, 0) : null,
-                        renderBlock(2, null),
-                        renderBlock(1, null),
-                        renderBlock(3, null),
-                        renderBlock(4, null))),
-                contextHolder),
-            React.createElement(ModalV2, { title: "Change email", open: !!openChangeEmail, okText: "Confirm", onOk: () => {
-                    var _a, _b;
-                    if (!((_a = form.password) === null || _a === void 0 ? void 0 : _a.trim())) {
-                        setErrors(Object.assign(Object.assign({}, errors), { password: 'Please input password!' }));
-                        return;
-                    }
-                    doSaveAccount(Object.assign(Object.assign({}, updateDataRef.current), { password: (_b = form.password) === null || _b === void 0 ? void 0 : _b.trim() }));
-                }, onCancel: () => setOpenChangeEmail(false), width: 330 },
-                React.createElement(Flex, { vertical: true, gap: "15px" },
-                    React.createElement("p", null,
-                        "Are you sure you want to change your email to ",
-                        React.createElement("strong", null, (_a = updateDataRef.current) === null || _a === void 0 ? void 0 : _a.email.trim()),
-                        "?"),
-                    React.createElement(Input, { value: form.password, onChange: e => setForm(p => (Object.assign(Object.assign({}, p), { password: e.target.value.trim() }))), status: errors.password ? 'error' : undefined, errorMsg: errors.password, placeholder: "Enter your password to save change" })))));
+        return (_jsxs(Spin, { spinning: loading, children: [_jsxs(AccountDetail, { className: "wrap-table", children: [_jsxs("div", { className: "form-profile", children: [_jsxs("div", { className: "left-profile", children: [logo && _jsx("img", { src: avatarUrl, alt: "" }), _jsxs("div", { className: "preview mt-10", children: [isDisabledEdit || isPreview ? null : (_jsxs("div", { className: "block-choose-input-file", children: [_jsx(UploadAvatar
+                                                        // ref={input => {
+                                                        //   this.fileInput = input;
+                                                        // }}
+                                                        , { 
+                                                            // ref={input => {
+                                                            //   this.fileInput = input;
+                                                            // }}
+                                                            onFileUploading: onFileUploading, onFileUploaded: handleChangeLogo, callbackFileError: showFileError, dimensions: { width: 5000, height: 5000 }, extensions: ['png', 'jpg', 'PNG', 'JPG'], maxFileSize: 3072, iamDomain: iamDomain, authStr: `?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`, setLoading: setLoading }), _jsx("span", { className: "choose-file-text", children: "Change avatar" })] })), errors.avatar ? (_jsxs("div", { className: "error", style: {
+                                                        width: 'fit-content',
+                                                        textAlign: 'left',
+                                                        margin: '0 auto',
+                                                    }, children: [_jsx("div", { className: "error", children: errors.avatar && errors.avatar.includes('||')
+                                                                ? errors.avatar.split('||')[0]
+                                                                : null }), _jsx("div", { className: "error", children: errors.avatar && errors.avatar.includes('||')
+                                                                ? errors.avatar.split('||')[1]
+                                                                : null })] })) : null] })] }), _jsxs("div", { className: "right-profile", children: [mode === 'update' ? renderBlock(1, 0) : null, renderBlock(2, null), renderBlock(1, null), renderBlock(3, null), renderBlock(4, null)] })] }), contextHolder] }), _jsx(ModalV2, { title: "Change email", open: !!openChangeEmail, okText: "Confirm", onOk: () => {
+                        if (!form.password?.trim()) {
+                            setErrors({
+                                ...errors,
+                                password: 'Please input password!',
+                            });
+                            return;
+                        }
+                        doSaveAccount({
+                            ...updateDataRef.current,
+                            password: form.password?.trim(),
+                        });
+                    }, onCancel: () => setOpenChangeEmail(false), width: 330, children: _jsxs(Flex, { vertical: true, gap: "15px", children: [_jsxs("p", { children: ["Are you sure you want to change your email to", ' ', _jsx("strong", { children: updateDataRef.current?.email.trim() }), "?"] }), _jsx(Input, { value: form.password, onChange: e => setForm(p => ({ ...p, password: e.target.value.trim() })), status: errors.password ? 'error' : undefined, errorMsg: errors.password, placeholder: "Enter your password to save change" })] }) })] }));
     }
     catch (error) {
         handleError(error, {

package/es/components/organism/AccountProfile/components/AccountSetting/components/EditableInput/index.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const EditableInput: {
-    (props: any): React.JSX.Element;
+    (props: any): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         fieldName: string;
         value: string;