@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,64 @@
+export declare const appConfig: {
+    FILE_UPLOAD_ERROR: {
+        INVALID_FILE_TYPE: string;
+        INVALID_FILE_SIZE: string;
+        INVALID_FILE_DIMENSION: string;
+    };
+    DEFAULT_KEY: {
+        ID: string;
+        FULL_NAME: string;
+        ADDRESS: string;
+        PHONE: string;
+        EMAIL: string;
+        GENDER: string;
+        BIRTHDAY: string;
+        PASSWORD: string;
+        LANGUAGE: string;
+        CHANGE_AVATAR: string;
+        CHANGE_PASSWORD: string;
+        TWO_STEP_AUTHENTICATION: string;
+        EDIT_FULL_NAME: string;
+        EDIT: string;
+        EDIT_ADDRESS: string;
+        EDIT_PHONE: string;
+        EDIT_EMAIL: string;
+        SAVE: string;
+        CANCEL: string;
+        CURRENT: string;
+        NEW_PASSWORD: string;
+        CONFIRM_PASSWORD: string;
+        MALE: string;
+        FEMALE: string;
+        ENTER_PASSWORD_TO_SAVE_CHANGE: string;
+        SETUP_GOOGLE_AUTHENTICATOR: string;
+        SEARCH_AND_INSTALL_GOOGLE_AUTHENTICATOR_ON_PHONE: string;
+        OPEN_AUTHENTICATOR_AND_SCAN_BARCODE: string;
+        INPUT_CODE_AND_CLICK_CONFIRM_TO_FINISH: string;
+        AUTHENTICATION_CODE: string;
+        SUCCESS: string;
+        CHANGE_LANGUAGE_SUCCESSFULLY: string;
+        CLOSE: string;
+        CHANGE_PASSWORD_SUCCESSFULLY: string;
+        WARNING: string;
+        ARE_YOU_SURE_TO_STOP_USING_2STEPS_AUTHENTICATION: string;
+        YES: string;
+        NO: string;
+        REQUIRED: string;
+        INVALID_NAME: string;
+        INVALID_FULL_NAME: string;
+        INVALID_ADDRESS: string;
+        INVALID_PHONE: string;
+        INVALID_EMAIL: string;
+        EMAIL_NOT_CHANGE: string;
+        INVALID: string;
+        INVALID_PASSWORD: string;
+        CONFIRM_PASSWORD_NOT_MATCHED: string;
+        FILE_TYPE_IS_NOT_SUPPORTED_PLEASE_USE_PNG_OR_JPG: string;
+        FILE_SIZE_IS_TOO_BIG_PLEASE_USE_UNDER_3MB_FILE: string;
+        FILE_DIMENSION_IS_TOO_BIG_PLEASE_USE_DIMENSIONS_UNDER_5000: string;
+        'g2fa code invalid': string;
+        'Password is wrong': string;
+        'Invalid password': string;
+        NO_FILE_CHOSEN: string;
+    };
+};

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

@@ -0,0 +1,64 @@
+export const appConfig = {
+    FILE_UPLOAD_ERROR: {
+        INVALID_FILE_TYPE: 'INVALID_FILE_TYPE',
+        INVALID_FILE_SIZE: 'INVALID_FILE_SIZE',
+        INVALID_FILE_DIMENSION: 'INVALID_FILE_DIMENSION'
+    },
+    DEFAULT_KEY: {
+        ID: 'ID',
+        FULL_NAME: 'Full Name',
+        ADDRESS: 'Address',
+        PHONE: 'Phone',
+        EMAIL: 'Email',
+        GENDER: 'Gender',
+        BIRTHDAY: 'Birthday',
+        PASSWORD: 'Password',
+        LANGUAGE: 'Language',
+        CHANGE_AVATAR: 'Change avatar',
+        CHANGE_PASSWORD: 'Change password',
+        TWO_STEP_AUTHENTICATION: '2 steps authentication',
+        EDIT_FULL_NAME: 'Edit full name',
+        EDIT: 'Edit',
+        EDIT_ADDRESS: 'Edit Address',
+        EDIT_PHONE: 'Edit Phone',
+        EDIT_EMAIL: 'Edit email',
+        SAVE: 'Save',
+        CANCEL: 'Cancel',
+        CURRENT: 'Current',
+        NEW_PASSWORD: 'New password',
+        CONFIRM_PASSWORD: 'Confirm password',
+        MALE: 'Male',
+        FEMALE: 'Female',
+        ENTER_PASSWORD_TO_SAVE_CHANGE: 'Enter your password to save changes',
+        SETUP_GOOGLE_AUTHENTICATOR: 'Setup Google Authenticator',
+        SEARCH_AND_INSTALL_GOOGLE_AUTHENTICATOR_ON_PHONE: 'Search and install Google Authenticator in your phone',
+        OPEN_AUTHENTICATOR_AND_SCAN_BARCODE: 'Open Authenticator and scan this barcode',
+        INPUT_CODE_AND_CLICK_CONFIRM_TO_FINISH: 'Input Code and click Confirm to finish this setup',
+        AUTHENTICATION_CODE: 'Authentication Code',
+        SUCCESS: 'Success',
+        CHANGE_LANGUAGE_SUCCESSFULLY: 'Change language successfully',
+        CLOSE: 'Close',
+        CHANGE_PASSWORD_SUCCESSFULLY: 'Change password successfully',
+        WARNING: 'Warning',
+        ARE_YOU_SURE_TO_STOP_USING_2STEPS_AUTHENTICATION: 'Are you sure to stop using 2 steps authentication?',
+        YES: 'Yes',
+        NO: 'No',
+        REQUIRED: 'Required',
+        INVALID_NAME: 'Invalid name',
+        INVALID_FULL_NAME: 'Invalid name',
+        INVALID_ADDRESS: 'Invalid address',
+        INVALID_PHONE: 'Invalid phone',
+        INVALID_EMAIL: 'Invalid email',
+        EMAIL_NOT_CHANGE: 'Email not change',
+        INVALID: 'Invalid',
+        INVALID_PASSWORD: 'Invalid password',
+        CONFIRM_PASSWORD_NOT_MATCHED: 'Confirm password not matched',
+        FILE_TYPE_IS_NOT_SUPPORTED_PLEASE_USE_PNG_OR_JPG: 'File type is not supported.||Please use .png or .jpg file.',
+        FILE_SIZE_IS_TOO_BIG_PLEASE_USE_UNDER_3MB_FILE: 'File size is too big.||Please use under 3MB file.',
+        FILE_DIMENSION_IS_TOO_BIG_PLEASE_USE_DIMENSIONS_UNDER_5000: 'File dimension is too big.||Please use dimensions under 5000px.',
+        'g2fa code invalid': 'g2fa code invalid',
+        'Password is wrong': 'Password is wrong',
+        'Invalid password': 'Invalid password',
+        NO_FILE_CHOSEN: 'No file chosen'
+    }
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const EditableInput: {
+    (props: any): React.JSX.Element;
+    defaultProps: {
+        fieldName: string;
+        value: string;
+        isUpdate: boolean;
+        isEditing: boolean;
+        isPreview: boolean;
+    };
+    propTypes: {};
+};
+export default EditableInput;

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

@@ -0,0 +1,293 @@
+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());
+    });
+};
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import axios from 'axios';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+import useModal from '../../useModal';
+// Components
+import { Input, ModalV2, Spin, Switch, Button, Icon } from '@antscorp/antsomi-ui/es/components';
+import { appConfig } from './constant';
+import { StyledEditableInput, StyledChangePass, LastChangeWrapper, TwoStepAuthenWrapper, } from './styles';
+dayjs.extend(isToday);
+const PATH = 'src/components/EditableInput/index.jsx';
+const propTypes = {};
+const defaultProps = {
+    fieldName: '',
+    value: '',
+    isUpdate: false,
+    isEditing: true,
+    isPreview: false,
+};
+const EditableInput = props => {
+    const [isEditing, setIsEditting] = useState(props.isEditing);
+    const { iamDomain, fieldName, type = 'text', value, maxLength = 1000, minLength = 0, placeholder, isUpdate, onChange, onBlur, handleUpdateField, handleUpdatePassword, isDisabled, isDisabledEdit, autoComplete, accountId, token, apiEndpoint, g2fa, style, isPreview: isPreviewInput, lastChangePass, errorMsg, setLoading: setLoadingPage } = props;
+    const isPreview = isPreviewInput || isDisabledEdit;
+    const [loading, setLoading] = useState(false);
+    const [openChangePass, setOpenChangePass] = useState(false);
+    const [originValue, setOriginValue] = useState();
+    const [curPassword, setCurPassword] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [valid, setValid] = useState(true);
+    const [isOpenSwitch, setIsOpenSwitch] = useState(false);
+    const [isShowQR, setIsShowQR] = useState(false);
+    const [objectError, setObjectError] = useState({});
+    const [g2faInput, setG2faInput] = useState('');
+    const [qrCode, setQRCode] = useState('');
+    const debounceCheckPass = useDebounce(password + confirmPassword + curPassword, 500);
+    const { contextHolder, showConfirm, showSuccess, showError } = useModal();
+    const translateLang = (key = '') => appConfig.DEFAULT_KEY[key] || key;
+    useEffect(() => {
+        if (!originValue && value) {
+            setOriginValue(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        setIsOpenSwitch(g2fa);
+    }, [g2fa]);
+    useEffect(() => {
+        if (!openChangePass) {
+            setValid(false);
+            setPassword('');
+            setCurPassword('');
+            setConfirmPassword('');
+        }
+    }, [openChangePass]);
+    const validatePasswordForm = () => {
+        const result = password &&
+            password.trim().length >= 8 &&
+            curPassword &&
+            curPassword.trim().length >= 8 &&
+            confirmPassword &&
+            confirmPassword === password;
+        setValid(!!result);
+        return result;
+    };
+    useEffect(() => {
+        validatePasswordForm();
+    }, [debounceCheckPass]);
+    const handleChangePass = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!validatePasswordForm()) {
+            return;
+        }
+        setLoading(true);
+        if (handleUpdatePassword && typeof handleUpdatePassword === 'function') {
+            const result = yield handleUpdatePassword(curPassword.trim(), password.trim());
+            if (result) {
+                setOpenChangePass(false);
+                showSuccess({ content: 'Change password successfully!' });
+            }
+            else {
+                showError({ content: 'Change password failed, please try again later!' });
+            }
+            setLoading(false);
+        }
+    });
+    const showPopupPassword = e => {
+        setOpenChangePass(true);
+    };
+    const cancelEdit = () => {
+        if (onChange && typeof onChange === 'function') {
+            onChange({ target: { value: originValue } });
+        }
+        setIsEditting(prev => !prev);
+    };
+    const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (handleUpdateField && typeof handleUpdateField === 'function') {
+            const result = yield handleUpdateField(fieldName);
+            if (result) {
+                setOriginValue(value);
+                setIsEditting(prev => !prev);
+            }
+        }
+    });
+    // const checkPasswordSave = () => {
+    //     if (!oldPassword || oldPassword.trim().length < 8) {
+    //         return false;
+    //     }
+    //     if (!newPassword || newPassword.trim().length < 8) {
+    //         return false;
+    //     }
+    //     if (!newPassword || newPassword !== confirmPassword) {
+    //         return false;
+    //     }
+    //     if (errorInvalidOldPassword && errorInvalidOldPassword.length) {
+    //         return false;
+    //     }
+    //     return true;
+    // };
+    const getQRCode = () => {
+        axios
+            .get(`${iamDomain}/api/account/info`, {
+            params: {
+                type: 'get-qr-code',
+                _user_id: accountId,
+                _account_id: accountId,
+                _token: token,
+            },
+        })
+            .then(res => {
+            if (res && res.data && res.data.data) {
+                setQRCode(res.data.data);
+            }
+        });
+    };
+    const handleChangeAuthen = useTwoStep => {
+        if (useTwoStep) {
+            setIsOpenSwitch(useTwoStep);
+            setIsShowQR(true);
+            getQRCode();
+        }
+        else if (isShowQR) {
+            setIsOpenSwitch(useTwoStep);
+            setIsShowQR(false);
+            setQRCode('');
+            setObjectError(Object.assign(Object.assign({}, objectError), { g2fa_code: '' }));
+        }
+        else {
+            showConfirm({
+                title: translateLang('ARE_YOU_SURE_TO_STOP_USING_2STEPS_AUTHENTICATION'),
+                onOk: handleOffAuthen,
+            });
+        }
+    };
+    const handleOnAuthen = () => {
+        if (!g2faInput || !g2faInput.trim()) {
+            setObjectError(Object.assign(Object.assign({}, objectError), { g2fa_code: 'REQUIRED' }));
+        }
+        else {
+            setLoadingPage(true);
+            axios
+                .put(apiEndpoint, {
+                g2fa: 1,
+                g2fa_code: g2faInput,
+            })
+                .then(res => {
+                if (res && res.data && res.data.data && JSON.stringify(res.data.data) !== '{}') {
+                    setIsOpenSwitch(true);
+                    setIsShowQR(false);
+                    showSuccess('Update successfully');
+                }
+                else {
+                    setObjectError(Object.assign(Object.assign({}, objectError), { g2fa_code: res.data.message }));
+                }
+            })
+                .finally(() => setLoadingPage(false));
+        }
+    };
+    const handleOffAuthen = () => {
+        setLoadingPage(true);
+        axios
+            .put(apiEndpoint, {
+            g2fa: 0,
+        })
+            .then(res => {
+            if (res && res.data && res.data.code === 200) {
+                setIsOpenSwitch(false);
+                setIsShowQR(false);
+                showSuccess('Update successfully');
+            }
+            else {
+                showError('Update failed, Please try again later !');
+            }
+        })
+            .finally(() => setLoadingPage(false));
+    };
+    const renderTwoStepAuthen = () => {
+        const authenText = isOpenSwitch ? 'Enabled' : 'Disabled';
+        return (React.createElement(TwoStepAuthenWrapper, { style: isPreview ? { marginTop: 28, height: 22 } : { marginTop: 20, height: 'unset' } },
+            React.createElement("span", { className: "two-step-label", style: isPreview ? { top: 0 } : undefined }, translateLang('TWO_STEP_AUTHENTICATION')),
+            isPreview ? (authenText) : (React.createElement(Switch, { disabled: isDisabledEdit, checked: isOpenSwitch, onChange: handleChangeAuthen }))));
+    };
+    const renderLastChange = () => {
+        const lastChangeDate = dayjs(lastChangePass);
+        return (React.createElement(LastChangeWrapper, { style: isPreview ? { marginTop: 0 } : undefined },
+            React.createElement(Icon, { type: "icon-ants-material-done", className: "tick-icon" }),
+            lastChangePass && (React.createElement("span", { className: "last-change-time" },
+                "Last changed:",
+                ' ',
+                lastChangeDate.isToday()
+                    ? ` Today at ${lastChangeDate.format('HH:mm A')}`
+                    : lastChangeDate.format('MMM DD, YYYY HH:mm A')))));
+    };
+    if (isPreview) {
+        return (React.createElement(React.Fragment, null,
+            renderLastChange(),
+            renderTwoStepAuthen()));
+    }
+    return (React.createElement(StyledEditableInput, null,
+        !isEditing ? (fieldName !== 'password' ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "text-conversion mt-5" }, value || ''),
+            isUpdate ? (isDisabledEdit ? null : (React.createElement("i", { className: "icon-edit", onClick: () => setIsEditting(prev => !prev) }))) : null)) : (React.createElement("div", null,
+            React.createElement(Button, { type: "link", onClick: isDisabledEdit ? undefined : showPopupPassword, disabled: isDisabledEdit, style: { padding: 0 } }, "Change password"),
+            renderLastChange(),
+            renderTwoStepAuthen(),
+            isShowQR && isOpenSwitch ? (React.createElement("div", { className: "qr-form-wrapper" },
+                qrCode ? (React.createElement("img", { src: `data:image/gif;base64,${qrCode}`, className: "qr-form__img", alt: "qr-code" })) : (React.createElement(Spin, null)),
+                React.createElement("div", { className: "qr-form" },
+                    React.createElement("p", { className: "qr-form__header" }, translateLang('SETUP_GOOGLE_AUTHENTICATOR')),
+                    React.createElement("p", { className: "qr-form__description" },
+                        "1. ",
+                        translateLang('SEARCH_AND_INSTALL_GOOGLE_AUTHENTICATOR_ON_PHONE'),
+                        React.createElement("br", null),
+                        "2. ",
+                        translateLang('OPEN_AUTHENTICATOR_AND_SCAN_BARCODE'),
+                        " ",
+                        React.createElement("br", null),
+                        "3. ",
+                        translateLang('INPUT_CODE_AND_CLICK_CONFIRM_TO_FINISH'),
+                        " ",
+                        React.createElement("br", null)),
+                    React.createElement(Input, { type: "text", placeholder: translateLang('AUTHENTICATION_CODE'), className: "qr-form__input", value: g2faInput, onChange: e => {
+                            setG2faInput(e.target.value);
+                            if (e.target.value.trim().length) {
+                                setObjectError(Object.assign(Object.assign({}, objectError), { g2fa_code: null }));
+                            }
+                        }, autoComplete: "new-password", status: objectError.g2fa_code ? 'error' : undefined, errorMsg: translateLang(objectError.g2fa_code) }),
+                    React.createElement("div", { className: "qr-form__action" },
+                        React.createElement(Button, { type: "primary", onClick: () => handleOnAuthen() }, translateLang('SAVE')),
+                        React.createElement(Button, { type: "default", onClick: () => handleChangeAuthen(false) }, translateLang('CANCEL')))))) : null))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "box-input inline" },
+                React.createElement(Input, { type: type, disabled: isDisabled, className: isDisabled ? 'form-control disabled' : 'form-control', placeholder: "", value: value, onChange: onChange, onBlur: onBlur, minLength: minLength, maxLength: maxLength, style: style, autoComplete: autoComplete || 'on', status: errorMsg ? 'error' : undefined, errorMsg: errorMsg })),
+            isUpdate ? (React.createElement("div", { className: "inline align-top ml-10" },
+                React.createElement("button", { type: "submit", className: "btn btn-green", onClick: handleSave }, "Save"),
+                React.createElement("button", { type: "button", className: "btn btn-grey", onClick: cancelEdit }, "Cancel"))) : null)),
+        React.createElement(ModalV2, { open: openChangePass, onCancel: () => setOpenChangePass(false), onOk: loading ? undefined : handleChangePass, okText: "Change password", okButtonProps: {
+                disabled: !valid,
+                loading,
+            } },
+            React.createElement(StyledChangePass, null,
+                React.createElement("div", { className: "row-input" },
+                    React.createElement("label", { htmlFor: "input-cur-password" },
+                        "Current password",
+                        React.createElement("span", { className: "required-mark" }, "*")),
+                    React.createElement("div", { className: "field-container" },
+                        React.createElement(Input, { id: "input-cur-password", type: "password", value: curPassword, onChange: e => setCurPassword(e.target.value) }))),
+                React.createElement("div", { className: "row-input" },
+                    React.createElement("label", { htmlFor: "input-password" },
+                        "New Password",
+                        React.createElement("span", { className: "required-mark" }, "*")),
+                    React.createElement("div", { className: "field-container" },
+                        React.createElement(Input, { id: "input-password", type: "password", value: password, onChange: e => setPassword(e.target.value) }))),
+                React.createElement("div", { className: "row-input" },
+                    React.createElement("label", { htmlFor: "input-confirm-password" },
+                        "Confirm Password",
+                        React.createElement("span", { className: "required-mark" }, "*")),
+                    React.createElement("div", { className: "field-container" },
+                        React.createElement(Input, { id: "input-confirm-password", type: "password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value) }))))),
+        contextHolder));
+};
+EditableInput.defaultProps = defaultProps;
+EditableInput.propTypes = propTypes;
+export default EditableInput;

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

@@ -0,0 +1,4 @@
+export declare const StyledEditableInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledChangePass: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LastChangeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TwoStepAuthenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+export const StyledEditableInput = styled.div `
+  font-size: 12px;
+  color: #000;
+
+  .clickable-text {
+    font-weight: 700;
+    color: #005eb8;
+    cursor: pointer;
+  }
+
+  .qr-form-wrapper {
+    display: flex;
+    gap: 30px;
+    margin-top: 25px;
+
+    .qr-form__img {
+      width: 165px;
+      height: 165px;
+      object-fit: contain;
+    }
+    .qr-form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .qr-form__header {
+      font-size: 14px;
+      font-weight: 700;
+      margin: 0;
+    }
+    .qr-form__description {
+      margin: 0;
+    }
+    .qr-form__input {
+    }
+    .qr-form__error {
+      color: #ef3340;
+    }
+    .qr-form__action {
+      display: flex;
+      gap: 10px;
+    }
+  }
+`;
+export const StyledChangePass = styled.div `
+  font-size: 12px;
+  color: #000000;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .row-input {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+
+    label {
+      width: 150px;
+      text-align: left;
+      position: relative;
+      top: 14px;
+    }
+    .required-mark {
+      color: #ef3340;
+      margin-left: 5px;
+    }
+    .error {
+      position: absolute;
+      color: #ef3340;
+      font-size: 11px;
+    }
+    .field-container {
+      width: 300px;
+      .MuiFormControl-root {
+        width: 100%;
+      }
+    }
+  }
+`;
+export const LastChangeWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+
+  .tick-icon {
+    color: #12b800;
+  }
+  .last-change-time {
+    color: #7f7f7f;
+  }
+`;
+export const TwoStepAuthenWrapper = styled.div `
+  position: relative;
+  margin-top: 20px;
+
+  .two-step-label {
+    position: absolute;
+    left: -150px;
+    top: 4px;
+  }
+`;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const LanguageSelector: {
+    (props: any): React.JSX.Element | null;
+    defaultProps: {
+        fieldName: string;
+        value: string;
+        options: {
+            value: string;
+            label: string;
+            icon: string;
+        }[];
+        isUpdate: boolean;
+        isEditing: boolean;
+        isPreview: boolean;
+    };
+    propTypes: {};
+};
+export default LanguageSelector;

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

@@ -0,0 +1,77 @@
+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());
+    });
+};
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState, useEffect } from 'react';
+import langEngImg from './images/english.png';
+import langViImg from './images/vietnam.png';
+import { StyledSelect, StyledSelectOption } from './styles';
+const propTypes = {};
+const defaultProps = {
+    fieldName: '',
+    value: '',
+    options: [
+        {
+            value: 'en',
+            label: 'English',
+            icon: 'img-lang-en',
+        },
+        {
+            value: 'vi',
+            label: 'Vietnamese',
+            icon: 'img-lang-vi',
+        },
+    ],
+    isUpdate: false,
+    isEditing: true,
+    isPreview: false,
+};
+const LanguageSelector = props => {
+    const [isEditing, setIsEditting] = useState(props.isEditing);
+    const { fieldName, value, isUpdate, onChange, handleUpdateField, mode, isDisabled, options, isPreview, isDisabledEdit, } = props;
+    const [selectedValue, setSelectedValue] = useState();
+    const [originValue, setOriginValue] = useState();
+    useEffect(() => {
+        if (value) {
+            setSelectedValue(options.find(lang => lang.value === value));
+            if (!originValue) {
+                setOriginValue(value);
+            }
+        }
+    }, [value]);
+    const handleChange = (lang, item) => __awaiter(void 0, void 0, void 0, function* () {
+        if (onChange && typeof onChange === 'function') {
+            onChange(lang, item);
+            if (mode === 'update' && handleUpdateField && typeof handleUpdateField === 'function') {
+                const result = yield handleUpdateField(fieldName, lang);
+                if (result) {
+                    setOriginValue(value);
+                    setIsEditting(prev => !prev);
+                }
+            }
+        }
+    });
+    const renderItem = lang => (React.createElement(StyledSelectOption, { key: lang.value },
+        React.createElement("img", { src: lang.value === 'en' ? langEngImg : langViImg, alt: "" }),
+        lang.label));
+    if (isPreview || isDisabledEdit) {
+        const selectedItem = options.find(item => item.value === value);
+        if (!selectedItem)
+            return null;
+        return renderItem(selectedItem);
+    }
+    return (React.createElement(StyledSelect, { options: options.map(lang => ({
+            value: lang.value,
+            label: renderItem(lang),
+        })), value: value, onChange: handleChange, disabled: isDisabled }));
+};
+LanguageSelector.defaultProps = defaultProps;
+LanguageSelector.propTypes = propTypes;
+export default LanguageSelector;

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-select").BaseSelectRef>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: import("rc-select/lib/Option").OptionFC;
+    OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+} & import("react").FC<import("@antscorp/antsomi-ui/es/components").SelectProps>, any, {}, never>;
+export declare const StyledSelectOption: import("styled-components").StyledComponent<import("antd").TypographyProps, any, {}, never>;