@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,864 @@
+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());
+    });
+};
+// Libraries
+import React, { useEffect, useRef, useState, forwardRef, memo, } from 'react';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import axios from 'axios';
+// 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 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';
+// Assets
+import { DrawerHeader, AccountDetail, StyledRadioGroup, StyledDatePicker, StyledCheckbox, } from './styled';
+import Image from './images/img-account-big.png';
+import './styles.scss';
+// Utils
+import { getDefaultMessage, getDuplicateMessage, validator, getObjectPropSafely, isPermissionUpdate, handleError, } from './utils';
+import { IAM_API } from '@antscorp/antsomi-ui/es/constants';
+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);
+    const [originEmail, setOriginEmail] = useState('');
+    const [isPreview, setIsPreview] = useState(isUpdateMode);
+    const [tempAccountInfo, setTempAccountInfo] = useState({});
+    const [isOverwrite, setIsOverwrite] = useState(false);
+    const [errors, setErrors] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [isUploadLogo, setIsUploadLogo] = useState(false);
+    const [logo, setLogo] = useState({ url: '' });
+    const [logoManual, setLogoManual] = useState({ url: '' });
+    const [openChangeEmail, setOpenChangeEmail] = useState(null);
+    const [apiEndpoint] = useState(`${iamDomain}/api/account/index/${accountId}?_token=${token}&_user_id=${accountId}&_account_id=${accountId}`);
+    const saveRef = useRef(false);
+    const tempAccountRef = useRef({});
+    const readyCheckRef = useRef(false);
+    const confirmingRef = useRef(false);
+    const passwordRef = useRef(null);
+    const updateDataRef = useRef(null);
+    const formRef = useRef();
+    formRef.current = form;
+    const [debounceEmail] = useDebounce(form.email, 700);
+    const { showSuccess, showError, showConfirm, contextHolder } = useModal();
+    const [messageBox, setMessageBox] = useState({
+        isOpen: false,
+        icon: 'icon-success-green',
+        title: 'Success',
+        message: 'Success',
+        id: '',
+    });
+    // useImperativeHandle(ref, () => ({
+    //   onCloseDrawer() {
+    // console.log('closed from Account Settings');
+    //   },
+    // }));
+    // useEffect(() => {
+    //   setIsPreview(false);
+    //   if (!open) {
+    //     setForm(initialForm);
+    //     setOriginEmail(initialForm.email!);
+    //   }
+    //   if (open && !isUpdateMode && !form.full_name) {
+    //     setForm(prev => ({
+    //       ...prev,
+    //       full_name: `Untitled Account#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
+    //     }));
+    //   }
+    // }, [open, isUpdateMode]);
+    const getAccountDetail = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!accountId)
+            return null;
+        const accountInfo = yield axios
+            .get(apiEndpoint)
+            .then(res => getObjectPropSafely(() => res.data.data));
+        return accountInfo;
+    });
+    const fetchAccountDetail = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const accountInfo = yield getAccountDetail().finally(() => {
+            setLoading(false);
+        });
+        if (accountInfo) {
+            setForm(Object.assign(Object.assign({}, 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;
+            if (fieldName === 'full_name') {
+                isCharacter = value.indexOf("'") === -1;
+            }
+            if (newForm) {
+                setForm(prev => (Object.assign(Object.assign(Object.assign({}, prev), newForm), { [fieldName]: value })));
+            }
+            else {
+                setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: value })));
+            }
+            if (!isCharacter) {
+                setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: ['Invalid full name'] }));
+            }
+            else {
+                setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: [] }));
+            }
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'setValueAndResetError',
+            });
+        }
+    };
+    useEffect(() => {
+        if (isUpdateMode && accountId) {
+            fetchAccountDetail();
+        }
+    }, [accountId]);
+    // useEffect(() => {
+    //   if (
+    //     readyCheckRef.current &&
+    //     debounceEmail &&
+    //     debounceEmail.trim() &&
+    //     validateEmail(debounceEmail)
+    //   ) {
+    //     checkUniqueField({
+    //       fieldName: 'email',
+    //       config: fieldsUI.email.checkUnique,
+    //     })({ target: { value: debounceEmail } });
+    //   }
+    // }, [debounceEmail]);
+    // useEffect(() => {
+    //   if (saveRef.current || saveAccountFlag) {
+    //     validateForm();
+    //     saveRef.current = true;
+    //   }
+    // }, [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")))));
+    }, [form.full_name, isPreview]);
+    const onDateFieldChange = fieldName => date => {
+        try {
+            // const value = dayjs(date).format('YYYY-MM-DD');
+            setValueAndResetError(fieldName, date);
+        }
+        catch (error) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: dayjs() })));
+        }
+    };
+    const onTextFieldChange = fieldName => e => {
+        const { value } = e.target;
+        let isDone = false;
+        if (fieldName === 'email') {
+            readyCheckRef.current = true;
+            if (isOverwrite) {
+                setIsOverwrite(false);
+                setValueAndResetError(fieldName, value, initialForm);
+                isDone = true;
+            }
+        }
+        if (fieldName === 'full_name' && mode === 'create') {
+            if (!isUploadLogo) {
+                buildAvatar(value);
+            }
+        }
+        if (!isDone) {
+            setValueAndResetError(fieldName, value);
+        }
+    };
+    const onNumberFieldChange = fieldName => event => {
+        try {
+            const number = event.target.value.replace(/[,. ]/g, '').trim();
+            if (+number >= 0) {
+                setValueAndResetError(fieldName, number);
+            }
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'onNumberFieldChange',
+            });
+        }
+    };
+    // const onSelectFieldChange = (fieldName) => (newState) => {
+    //     try {
+    //         setValueAndResetError(fieldName, {
+    //             id: newState.object_id,
+    //             label: newState.object_name
+    //         });
+    //     } catch (e) {
+    //         handleError(e, {
+    //             path: PATH,
+    //             name: 'onSelectFieldChange'
+    //         });
+    //     }
+    // };
+    const onRadioFieldChange = fieldName => e => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: +e.target.value })));
+    };
+    const onSelectFieldChange = fieldName => (value, item) => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { [fieldName]: value })));
+    };
+    const onChangeValidateEmail = () => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { validateEmail: !form.validateEmail })));
+    };
+    const buildAvatar = fullName => {
+        function generateAvatar(text, foregroundColor = '#fff', backgroundColor = '#005EB8') {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            canvas.width = 150;
+            canvas.height = 150;
+            // Draw background
+            if (context) {
+                context.fillStyle = backgroundColor;
+                context.fillRect(0, 0, canvas.width, canvas.height);
+                // Draw text
+                context.font = "70px 'sans serif'";
+                context.fillStyle = foregroundColor;
+                context.textAlign = 'center';
+                context.textBaseline = 'middle';
+                // context.textDrawingMode = 'glyph';
+                // context.patternQuality = 'nearest';
+                context.fillText(text, canvas.width / 2, canvas.height / 2, canvas.height / 2);
+                return canvas.toDataURL('image/png');
+            }
+            return '';
+        }
+        if (fullName) {
+            const url = generateAvatar(fullName.charAt(0).toUpperCase());
+            setLogoManual({
+                isDefault: false,
+                url,
+            });
+        }
+        else {
+            setLogoManual({
+                isDefault: false,
+                url: '',
+            });
+        }
+    };
+    const onConfirmMessageBox = () => {
+        try {
+            const newForm = {};
+            Object.keys(form).forEach(field => {
+                newForm[field] =
+                    tempAccountRef.current[field] || defaultVals[field]
+                        ? tempAccountRef.current[field] || defaultVals[field]
+                        : '';
+            });
+            newForm.password = '11111111';
+            setForm(prev => (Object.assign(Object.assign({}, prev), newForm)));
+            setErrors({});
+            setIsOverwrite(true);
+            setMessageBox(Object.assign(Object.assign({}, messageBox), { isOpen: false }));
+        }
+        catch (err) {
+            handleError(err, {
+                path: PATH,
+                name: 'closeMessageBox',
+            });
+        }
+    };
+    const onChange = {
+        number: onNumberFieldChange,
+        textarea: onTextFieldChange,
+        text: onTextFieldChange,
+        radio: onRadioFieldChange,
+        select: onSelectFieldChange,
+        date: onDateFieldChange,
+    };
+    const checkUniqueField = ({ fieldName, config }) => event => {
+        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 }));
+                if (checkRequest) {
+                    checkRequest.then(res => {
+                        if (mode === 'create' &&
+                            res &&
+                            res.data &&
+                            res.data.code === 105 &&
+                            res.data.data &&
+                            res.data.data.user) {
+                            setTempAccountInfo(res.data.data.user);
+                            tempAccountRef.current = res.data.data.user;
+                            showConfirm({
+                                title: "This account's profile has already existed.",
+                                content: 'Do you want to add this account to this portal?',
+                                onOk: onConfirmMessageBox,
+                            });
+                        }
+                        else {
+                            setErrors(Object.assign(Object.assign({}, errors), { [fieldName]: res && res.data && res.data.data && res.data.data.status
+                                    ? []
+                                    : [getDuplicateMessage(fieldName)] }));
+                        }
+                    });
+                }
+            }
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'setValueAndResetError',
+            });
+        }
+    };
+    const validateUniqueField = (_b) => __awaiter(void 0, [_b], void 0, function* ({ 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 }));
+                return res && res.data && res.data.data && res.data.data.status
+                    ? null
+                    : getDuplicateMessage(fieldName);
+            }
+            return null;
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'setValueAndResetError',
+            });
+        }
+    });
+    const renderField = (fieldType, inputProps) => {
+        try {
+            if (isUpdateMode &&
+                (isPreview || !inputProps.isUpdate || isDisabledEdit) &&
+                !['lang', 'password'].includes(fieldType)) {
+                if (fieldType === 'date') {
+                    return inputProps.value ? dayjs(inputProps.value).format('DD-MM-YYYY') : '';
+                }
+                return VALUE_MAPPING[inputProps.fieldName]
+                    ? VALUE_MAPPING[inputProps.fieldName][inputProps.value]
+                    : inputProps.value;
+            }
+            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 } })));
+                case 'password':
+                    return (React.createElement(EditableInput, Object.assign({}, inputProps, { iamDomain: iamDomain, token: token, apiEndpoint: apiEndpoint, isPreview: isPreview, errorMsg: errorMsg })));
+                case 'textarea':
+                    return React.createElement("textarea", Object.assign({}, 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)" }) }));
+                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)))));
+                case 'lang':
+                    return React.createElement(LanguageSelector, Object.assign({}, inputProps, { isPreview: isPreview }));
+                default:
+                    return (React.createElement(Input, Object.assign({}, inputProps, { showCurrentLenght: false, status: errorMsg ? 'error' : undefined, errorMsg: errorMsg, style: { padding: 5 } })));
+                // return (
+                //   <div className="dropdown">
+                //     <SearchDropdown {...inputProps} />
+                //   </div>
+                // );
+            }
+        }
+        catch (error) {
+            return null;
+        }
+    };
+    const renderFieldUI = item => {
+        const [fieldName, { fieldLabel, fieldType = 'text', type = 'text', maxLength, minLength, allowNull, position, placeholder, fontBold, checkUnique, isUpdate: isUpdateField, isEditing: isEditingField, verify, messageVerify, autoComplete, },] = item;
+        let inputProps = {};
+        const isUpdate = isUpdateField !== undefined ? isUpdateField : isUpdateMode;
+        const isEditing = isEditingField !== undefined ? isEditingField : mode === 'create';
+        const isDisabled = allowChangeFields.includes(fieldName)
+            ? false
+            : isOverwrite || (isUpdateMode && !isUpdate);
+        try {
+            switch (fieldType) {
+                case 'text':
+                    inputProps = {
+                        fieldName,
+                        type,
+                        maxLength: maxLength || 255,
+                        minLength: minLength || 0,
+                        value: form[fieldName],
+                        onChange: onChange[fieldType](fieldName),
+                        placeholder: placeholder || fieldLabel,
+                        className: `form-control ${fieldType === 'number' && 'text-right'}`,
+                        style: fontBold ? { fontWeight: 'bold', width: 300 } : { width: 300 },
+                        // ...checkUnique && {onBlur: checkUniqueField({fieldName, config: checkUnique})},
+                        handleUpdateField,
+                        disabled: isDisabled,
+                        mode,
+                        allowNull,
+                        isUpdate,
+                        isEditing,
+                        isDisabledEdit,
+                        autoComplete,
+                        componentKey: form[fieldName],
+                    };
+                    break;
+                case 'password':
+                    inputProps = {
+                        fieldName,
+                        type,
+                        maxLength: maxLength || 255,
+                        minLength: minLength || 0,
+                        value: form[fieldName],
+                        lastChangePass: form.last_change_pass,
+                        onChange: onChange.text(fieldName),
+                        placeholder: placeholder || fieldLabel,
+                        className: `form-control ${fieldType === 'number' && 'text-right'}`,
+                        style: fontBold ? { fontWeight: 'bold', width: 300 } : { width: 300 },
+                        // ...checkUnique && {onBlur: checkUniqueField({fieldName, config: checkUnique})},
+                        handleUpdatePassword,
+                        accountId,
+                        g2fa: !!+form.g2fa,
+                        handleUpdateField,
+                        setLoading,
+                        disabled: isDisabled,
+                        mode,
+                        allowNull,
+                        isUpdate,
+                        isEditing,
+                        isDisabledEdit,
+                        autoComplete,
+                    };
+                    break;
+                case 'radio':
+                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange[fieldType](fieldName), handleUpdateField, disabled: isDisabled, mode,
+                        isUpdate,
+                        isEditing,
+                        isDisabledEdit });
+                    break;
+                case 'lang':
+                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange.select(fieldName), 
+                        // handleUpdateField,
+                        isDisabled,
+                        mode,
+                        isUpdate,
+                        isEditing,
+                        isDisabledEdit });
+                    break;
+                case 'date':
+                    inputProps = Object.assign(Object.assign({}, fieldsUI[fieldName]), { value: form[fieldName], onChange: onChange[fieldType](fieldName), handleUpdateField,
+                        isDisabled,
+                        mode,
+                        isUpdate,
+                        isEditing,
+                        isDisabledEdit });
+                    break;
+                default:
+                    inputProps = {};
+                //     inputProps = {
+                //         style: {width: '100%'},
+                //         modeSearch: 'SERVER',
+                //         onClick: onSelectFieldChange(fieldName),
+                //         default: form[fieldName],
+                //         autoLoad: true,
+                //         flip: false,
+                //         ...fieldType,
+                //         isUpdate,
+                //         isEditing,
+                //         isDisabledEdit
+                //     };
+            }
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'renderBlock',
+            });
+        }
+        if (isUpdateMode && !form.initDone) {
+            inputProps.onChange = () => null;
+        }
+        return (React.createElement("div", { className: "form-group", key: `create_${fieldName}_${position}`, 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')))));
+    };
+    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 null;
+        }
+        catch (err) {
+            handleError(err, {
+                path: PATH,
+                name: 'renderFieldErrors',
+            });
+        }
+    };
+    const validateField = (_c) => __awaiter(void 0, [_c], void 0, function* ([fieldName, value]) {
+        try {
+            value = typeof value === 'string' ? value.trim() : value;
+            const fieldUI = fieldsUI[fieldName];
+            const fieldErrors = [];
+            if (fieldName === 'password' && form.validateEmail) {
+                return [fieldName, fieldErrors];
+            }
+            const defaultMessage = getDefaultMessage(fieldName);
+            let isCharacter = true;
+            if (fieldUI) {
+                if (value) {
+                    const { validate } = fieldUI;
+                    const { minLength, maxLength } = fieldUI;
+                    if (minLength && value.trim().length < minLength) {
+                        fieldErrors.push(`${fieldUI.fieldLabel} too short`);
+                    }
+                    if (maxLength && value.trim().length > maxLength) {
+                        fieldErrors.push(`${fieldUI.fieldLabel} too long`);
+                    }
+                    // if (fieldUI.fieldType === 'date' && !value) {
+                    //   fieldErrors.push('Invalid date');
+                    // }
+                    if (fieldName === 'full_name') {
+                        isCharacter = value.indexOf("'") === -1;
+                        if (!isCharacter) {
+                            fieldErrors.push('Invalid full name');
+                        }
+                    }
+                    if (validate && validate.length) {
+                        validate.forEach(validate => {
+                            const { method, message } = validator[validate];
+                            if (typeof method === 'function') {
+                                if (!method(value)) {
+                                    fieldErrors.push(message || defaultMessage);
+                                }
+                            }
+                        });
+                    }
+                    if (!fieldErrors.length && fieldUI.checkUnique) {
+                        const resultUnique = yield validateUniqueField({
+                            fieldName,
+                            config: fieldUI.checkUnique,
+                        });
+                        if (resultUnique) {
+                            fieldErrors.push(resultUnique);
+                        }
+                    }
+                }
+                else if (!fieldUI.allowNull) {
+                    fieldErrors.push(defaultMessage);
+                }
+            }
+            return [fieldName, fieldErrors];
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'validateField',
+            });
+        }
+    });
+    const validateForm = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            // do things when no errors
+            if (formRef.current) {
+                const arrErrs = yield Promise.all(Object.entries(formRef.current).map(validateField));
+                const errs = Object.fromEntries(arrErrs);
+                setErrors(Object.assign(Object.assign({}, errors), errs));
+                if (Object.values(errs).every(fieldErrors => !fieldErrors.length)) {
+                    saveAccount();
+                }
+            }
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'validateForm',
+            });
+        }
+    });
+    const renderBlock = (group, position = null) => {
+        try {
+            return Object.entries(fieldsUI)
+                .filter(([fieldName, obj]) => obj.position &&
+                group === obj.position[0] &&
+                ((position === null && obj.position[1]) || position === obj.position[1]) &&
+                (fieldName !== 'password' || !form.validateEmail))
+                .map(item => renderFieldUI(item));
+        }
+        catch (e) {
+            handleError(e, {
+                path: PATH,
+                name: 'renderBlock',
+            });
+        }
+    };
+    const doSaveAccount = (updateData) => __awaiter(void 0, void 0, void 0, function* () {
+        setOpenChangeEmail(false);
+        setLoading(true);
+        let result = null;
+        // loadingCompleteRef.current = false;
+        // setTimeout(() => {
+        //   if (loadingCompleteRef.current === true) {
+        //     if (callback && typeof callback === 'function') {
+        //       callback();
+        //     }
+        //   } else {
+        //     loadingCompleteRef.current = true;
+        //   }
+        // }, 2000);
+        result = yield axios.put(apiEndpoint, updateData);
+        setLoading(false);
+        const modeLabel = isUpdateMode ? 'Update' : 'Create';
+        if (result && result.data && result.data.data && result.data.data.userId) {
+            // if (loadingCompleteRef.current) {
+            //   if (callback && typeof callback === 'function') {
+            //     callback();
+            //   }
+            //   return true;
+            // } else {
+            //   loadingCompleteRef.current = true;
+            // }
+            showSuccess({ content: `${modeLabel} account successfully!` });
+            if (updateData.email) {
+                setOriginEmail(updateData.email);
+                updateDataRef.current = null;
+            }
+        }
+        else if (result &&
+            result.data &&
+            result.data.message &&
+            result.data.message.includes('Email already exists')) {
+            showError({
+                content: result.data.message,
+            });
+        }
+        else {
+            showError({
+                content: `${modeLabel} account fail, please try again later!`,
+            });
+        }
+    });
+    const saveAccount = () => __awaiter(void 0, void 0, void 0, function* () {
+        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(),
+            gender,
+            birthday: birthday === null || birthday === void 0 ? void 0 : birthday.format('YYYY-MM-DD'),
+            phone: phone && phone.trim(),
+            address: address && address.trim(),
+            // email: email && email.trim(),
+            language,
+            // 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() });
+            setOpenChangeEmail(true);
+            // showConfirm({
+            //   title: 'Change email',
+            //   content: (
+            //     <Flex vertical gap="15px">
+            //       <p>Are you sure you want to change your email to {email?.trim()}?</p>
+            //       <Input ref={passwordRef} placeholder="Enter your password to save change" />
+            //     </Flex>
+            //   ),
+            //   onOk: () =>
+            //     doSaveAccount({
+            //       ...updateData,
+            //       email,
+            //       password: passwordRef.current?.value.trim(),
+            //     }),
+            // });
+        }
+        else {
+            doSaveAccount(updateData);
+        }
+        return false;
+    });
+    const handleUpdatePassword = (oldPassword, newPassword) => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield axios.put(apiEndpoint, {
+            id: accountId,
+            new_password: newPassword,
+            re_password: newPassword,
+            old_password: oldPassword,
+            // 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) {
+        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 }));
+                if ((fieldErrors && fieldErrors.length) || (errors[field] && errors[field].length)) {
+                    return false;
+                }
+            }
+            const result = yield axios.put(apiEndpoint, {
+                [field]: fieldValue,
+                // source: 'aacm',
+            });
+            if (isPermissionUpdate(result)) {
+                return;
+            }
+            if (result && result.data && result.data.data && result.data.data.userId) {
+                if (field === 'language') {
+                    showSuccess({
+                        content: 'Change language successfully',
+                        title: 'Success',
+                    });
+                }
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            handleError(error, {});
+        }
+    });
+    const onFileUploading = () => {
+        try {
+            // props.onProgressLoadingActive();
+        }
+        catch (error) {
+            handleError(error, {
+                component: PATH,
+                action: 'onFileUploading',
+                args: {},
+            });
+        }
+    };
+    const handleChangeLogo = newProps => {
+        try {
+            // props.onProgressLoadingDeactive();
+            if (newProps.url) {
+                setIsUploadLogo(true);
+                setLogo(newProps);
+                setErrors(Object.assign(Object.assign({}, errors), { avatar: null }));
+                if (mode === 'update') {
+                    handleUpdateField('avatar', newProps.url);
+                }
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                component: PATH,
+                action: 'handleChangeMainLogo',
+                args: { newProps },
+            });
+        }
+    };
+    const showFileError = error => {
+        let fileError = '';
+        switch (error) {
+            case FILE_UPLOAD_ERROR.INVALID_FILE_TYPE:
+                fileError = 'File type is not supported.||Please use .png or .jpg file.';
+                break;
+            case FILE_UPLOAD_ERROR.INVALID_FILE_SIZE:
+                fileError = 'File size is too big.||Please use under 3MB file.';
+                break;
+            case FILE_UPLOAD_ERROR.INVALID_FILE_DIMENSION:
+                fileError = 'File dimension is too big.||Please use dimensions under 5000 px.';
+                break;
+            default:
+                fileError = '';
+        }
+        setErrors(Object.assign(Object.assign({}, 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" })))));
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            action: 'Menu',
+            args: {},
+        });
+    }
+}));