@hhgtech/hhg-components 1.29.156 → 1.29.157

package/build/ssoV2.js

@@ -2,50 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-d5bae7d3.js');
+var tslib_es6 = require('./tslib.es6-1f761b7b.js');
 var React = require('react');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var logoIcon = require('./logoIcon-7b4c761d.js');
-var index$2 = require('./index-0d43704f.js');
-var index = require('./index-2fe84859.js');
+var logoIcon = require('./logoIcon-233f7bfe.js');
+var index$2 = require('./index-c31e8fca.js');
+var index = require('./index-8cecc9bc.js');
 var core = require('@mantine/core');
-var index$4 = require('./index-4a77b84b.js');
+var index$5 = require('./index-d18d5a6b.js');
 require('@mantine/dates');
-var index$3 = require('./index-f1ec270f.js');
-require('./index-2ef7016d.js');
-require('./index-2e79b2b3.js');
-var useMantineLocale = require('./useMantineLocale-17ef7576.js');
-var index$1 = require('./index-9ed9890e.js');
-require('./translationsContext-3ed8aa62.js');
+var index$3 = require('./index-209b00c4.js');
+require('./index-79ec597b.js');
+require('./index-e600b4bd.js');
+var useMantineLocale = require('./useMantineLocale-6e091175.js');
+var index$1 = require('./index-6f4795da.js');
+require('./translationsContext-79ae47bc.js');
 require('@mantine/hooks');
-require('./utils-895f9bde.js');
-require('./other-08aaedbd.js');
-require('./index-123a7b80.js');
-var Locale = require('./Locale-85443fad.js');
-var store = require('./store-d6789710.js');
-var Google = require('./Google-22cc11d8.js');
+require('./utils-3469de06.js');
+require('./other-eabbdac8.js');
+require('./index-df3ddff1.js');
+var Locale = require('./Locale-ff23f51a.js');
+var store = require('./store-28b0c00a.js');
+var index$4 = require('./index-5b66c0c0.js');
+var Google = require('./Google-26772450.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-85fdb145.js');
+var utils = require('./utils-1e5a096b.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$5 = require('./index-20866b6a.js');
-require('./index-b041f41b.js');
-require('./index.styles-b90e8ab5.js');
+var index$6 = require('./index-73ccdad1.js');
+require('./index-161ca181.js');
+require('./index.styles-63a50783.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('./miscTheme.js');
 require('classnames');
-require('./useUniqueId-6bdddfb7.js');
+require('./useUniqueId-3c16ab2f.js');
 require('./constantsSite.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
 require('zustand');
-require('./normalizeLink-7362a6a1.js');
+require('./normalizeLink-54693f0e.js');
 require('./miscCookieHelper.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -279,20 +280,111 @@ const verifyByEmailOTP = (email, otpCode) => tslib_es6.__awaiter(void 0, void 0,
     });
 });
 
+// const SSO_ERR_CODE_MOBILE = [
+//   "Some Things Went Wrong" => "SSO_ERR_000",
+//   "The email must be a valid email address." => "SSO_ERR_001",
+//   "The email field is required." => "SSO_ERR_002",
+//   "This member is not exist yet" => "SSO_ERR_003",
+//   "The email may not be greater than 255 characters." => "SSO_ERR_004",
+//   "The phone number field is required." => "SSO_ERR_005",
+//   "The phone number must be at least 9 characters." => "SSO_ERR_006",
+//   "This phone number is already linked to your profile" => "SSO_ERR_007",
+//   "The otp code field is required." => "SSO_ERR_008",
+//   "User don't update" => "SSO_ERR_009",
+//   "Verify OTP failed" => "SSO_ERR_010",
+//   "The name must be a string." => "SSO_ERR_011",
+//   "The name may not be greater than 100 characters." => "SSO_ERR_012",
+//   "The username must be a string." => "SSO_ERR_013",
+//   "The username has already been taken." => "SSO_ERR_014",
+//   "The username may not be greater than 20 characters." => "SSO_ERR_015",
+//   "The birthday does not match the format Y-m-d." => "SSO_ERR_016",
+//   "The avatar field is required." => "SSO_ERR_017",
+//   "The avatar must be an image." => "SSO_ERR_018",
+//   "The avatar must be a file of type: jpeg, jpg, png, gif." => "SSO_ERR_019",
+//   "The avatar may not be greater than 10240 kilobytes." => "SSO_ERR_020",
+//   "The confirm-password field is required." => "SSO_ERR_021",
+//   "The confirm-password must be at least 8 characters." => "SSO_ERR_022",
+//   "The confirm-password format is invalid." => "SSO_ERR_023",
+//   "The confirm-password may not be greater than 50 characters." => "SSO_ERR_024",
+//   "The new-password field is required." => "SSO_ERR_025",
+//   "The new-password must be at least 8 characters." => "SSO_ERR_026",
+//   "The new-password format is invalid." => "SSO_ERR_027",
+//   "The new-password may not be greater than 50 characters." => "SSO_ERR_028",
+//   "Your password doesn\'t match. Please try again." => "SSO_ERR_029",
+//   "Your new password must be different from the current one" => "SSO_ERR_030",
+//   "Mật khẩu mới không được trùng với mật khẩu cũ đang dùng" => "SSO_ERR_030",
+//   "The new password field is required." => "SSO_ERR_031",
+//   "The confirm new password field is required." => "SSO_ERR_032",
+//   "The new password and confirm new password must match." => "SSO_ERR_033",
+//   "The confirm new password must be at least 8 characters." => "SSO_ERR_034",
+//   "The new password must be at least 8 characters." => "SSO_ERR_035",
+//   "The confirm new password may not be greater than 50 characters." => "SSO_ERR_036",
+//   "The new password may not be greater than 50 characters." => "SSO_ERR_037",
+//   "The current password is wrong!" =>  "SSO_ERR_038",
+//   "Mật khẩu bạn vừa nhập không chính xác!" => "SSO_ERR_038",
+//   "The password field is required." => "SSO_ERR_039",
+//   "Token Signature could not be verified." => "SSO_ERR_040",
+//   "Token has expired" => "SSO_ERR_041",
+//   "The refresh token field is required." => "SSO_ERR_042",
+//   "The area code field is required." => "SSO_ERR_043",
+//   "The email has already been taken." => "SSO_ERR_044",
+//   "Verify Email OTP Code Fail" => "SSO_ERR_045",
+//   "The code field is required." => "SSO_ERR_046",
+//   "The phone number has already been taken." => "SSO_ERR_047",
+//   "The Phone is not match phone number that you registered" => "SSO_ERR_048",
+//   "User was exist" => "SSO_ERR_049",
+//   "The website id field is required." => "SSO_ERR_050",
+//   "The name field is required." => "SSO_ERR_051",
+//   "The birthday field is required." => "SSO_ERR_052",
+//   "The gender field is required." => "SSO_ERR_053",
+//   "The provider field is required." => "SSO_ERR_054",
+//   "The token field is required." => "SSO_ERR_055",
+//   "Code has been sent to your email" => "SSO_ERR_056",
+//   "The email does not exist." => "SSO_ERR_057",
+//   "You are verifying a phone number that is not yours" => "SSO_ERR_058",
+//   "The selected phone number is invalid." => "SSO_ERR_059",
+//   "Phone does not member" => "SSO_ERR_60",
+//   "This phone number is already linked to your profile" => "SSO_ERR_61",
+//   "Error ZNS with missing msg_id" => "SSO_ERR_62",
+//   "OTP verify missing" => "SSO_ERR_63",
+//   "The expire at must be a date after 5 mins." => "SSO_ERR_64",
+//   "The selected code is invalid." => "SSO_ERR_65",
+//   "Error when update ZNS tracking" => "SSO_ERR_66",
+//   "Sent Zalo OTP failed" => "SSO_ERR_67",
+//   "The expire at must be a date after 10 mins." => "SSO_ERR_68",
+//   "The code must be at least 6 characters." => "SSO_ERR_69",
+//   "The code may not be greater than 10 characters." => "SSO_ERR_70",
+//   "You’ve reached the limit of 3 verification attempts in 1 hour. Please wait and try again later." => "SSO_ERR_71",
+//   "You’ve reached the limit of 5 verification attempts today. Please try again tomorrow." => "SSO_ERR_72",
+//   "The password must be at least 8 characters." => "SSO_ERR_73",
+//   "The password format is invalid." => "SSO_ERR_74",
+//   "The confirm-password format is invalid." => "SSO_ERR_75",
+//   "The password must contain at least one number." => "SSO_ERR_76",
+//   "The confirm-password must contain at least one number." => "SSO_ERR_77",
+// ]
+const getErrorTextFromCode = (t, code) => {
+    const numberCode = code === null || code === void 0 ? void 0 : code.split('_')[2];
+    if (typeof numberCode !== 'string') {
+        return t('ssov2.error.api');
+    }
+    return t(`ssov2.error.api.${numberCode}`) || t('ssov2.error.api');
+};
+
 const SSOEmailScreen = ({ hidden, }) => {
+    const { t } = index$4.useTranslations();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c;
             e.preventDefault();
             const email = e.currentTarget.email.value;
             const existRes = yield store.checkUserExist({ email });
             if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
                 const provider = (_a = existRes._data) === null || _a === void 0 ? void 0 : _a.provider;
                 if (provider === 'google' || provider === 'facebook') {
-                    setErrMsg('Email này đã được sử dụng, vui lòng chọn Email khác.');
+                    setErrMsg(t('ssov2.email.alreadyUsed'));
                     return;
                 }
                 if ((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.is_pass) {
@@ -322,7 +414,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                         res = yield resendEmailOTP(email);
                     }
                     if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                        setErrMsg(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                         return;
                     }
                     // go to register screen
@@ -338,14 +430,14 @@ const SSOEmailScreen = ({ hidden, }) => {
                 }
             }
             else {
-                setErrMsg(((_e = existRes._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'api error');
+                setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
             }
         }) },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Continue with email"),
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, "S\u1EED d\u1EE5ng email c\u1EE7a b\u1EA1n \u0111\u1EC3 ti\u1EBFp t\u1EE5c \u0111\u0103ng nh\u1EADp ho\u1EB7c \u0111\u0103ng k\u00FD")),
-        React__default["default"].createElement(index$4.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
+            React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.email.description'))),
+        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.email.button'))));
 };
 
 const splitPhone = (phone) => {
@@ -525,7 +617,7 @@ const MailIcon = (props) => (React__default["default"].createElement("svg", Obje
         React__default["default"].createElement("clipPath", { id: "clip0_869_25628" },
             React__default["default"].createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
 
-const StyledPhone = styled__default["default"](index$4.Phone) `
+const StyledPhone = styled__default["default"](index$5.Phone) `
   position: relative;
   .PhoneInputCountry {
     background: unset;
@@ -788,7 +880,7 @@ const SSOFirstScreen = ({ hidden }) => {
             React__default["default"].createElement(index$1.Text, { size: "p4" }, "Continue with your phone number, email or your socials to log in or sign up.")),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 16 },
-                React__default["default"].createElement(index$4.Input.Wrapper, { error: errMsg },
+                React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
                 React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
                 React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
@@ -869,6 +961,7 @@ const verifyUpdateEmailOTP = (otpCode) => tslib_es6.__awaiter(void 0, void 0, vo
 });
 
 const SSOOTPScreen = ({ hidden, index, }) => {
+    const { t } = index$4.useTranslations();
     const { onClose } = useSSOState();
     const { steps, setSteps, addStep, goNext } = store.useSSOSteps();
     const [otp, setOtp] = React__default["default"].useState('');
@@ -907,7 +1000,6 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         setupResendTimer();
     };
     const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e;
         const { areaCode, phoneNumber } = splitPhone(phone);
         // submit otp code logic here
         if (isUpdatePhone) {
@@ -923,7 +1015,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                     const userInfo = yield store.getUserInfo();
                     if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
                         // log error
-                        setError(((_a = userInfo._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
                         return;
                     }
                     addStep({
@@ -943,7 +1035,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                     }
                     else {
                         // log error
-                        setError(((_b = res._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+                        setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     }
                 }
                 else {
@@ -952,7 +1044,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             }
             else {
                 // log error
-                setError(((_c = res._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+                setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
             }
             return;
         }
@@ -972,7 +1064,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
             setOtp('');
             // log error
-            setError(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+            setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
             return;
         }
         store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
@@ -990,7 +1082,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             const userInfo = yield store.getUserInfo();
             if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
                 // log error
-                setError(((_e = userInfo._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+                setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
                 return;
             }
             addStep({
@@ -1049,40 +1141,40 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             submitOtp();
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, isEmail ? 'Verify Email' : 'Verify Phone Number'),
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, isEmail ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                "Enter the 6-digit OTP sent to your email ",
-                React__default["default"].createElement("b", null, email),
-                ".")) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                "Enter the 6-digit OTP sent to the phone number ",
-                React__default["default"].createElement("b", null, phone),
-                " via",
-                ' ',
-                React__default["default"].createElement("b", null, otpType === 'phone-sms' ? 'SMS' : 'Zalo'),
-                ". OTP code will expire in ",
-                React__default["default"].createElement("b", null, "10 mins"))))),
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, isEmail ? t('ssov2.otp.email.title') : t('ssov2.otp.phone.title')),
+            React__default["default"].createElement(index$1.Text, { size: "p4" },
+                React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
+                        __html: t(isEmail
+                            ? 'ssov2.otp.email.description'
+                            : 'ssov2.otp.phone.description', {
+                            email,
+                            phone,
+                            method: otpType === 'phone-sms' ? 'SMS' : 'Zalo',
+                        }),
+                    } }))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$4.Input.Wrapper, { error: error },
-                React__default["default"].createElement(index$4.OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
+            React__default["default"].createElement(index$5.Input.Wrapper, { error: error },
+                React__default["default"].createElement(index$5.OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
-                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Didn\u2019t receive the code?"),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.otp.resendQuestion')),
                 React__default["default"].createElement(index$1.Text, { style: {
                         pointerEvents: resendTime > 0 ? 'none' : 'auto',
                         cursor: resendTime > 0 ? 'not-allowed' : 'pointer',
-                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) },
-                    "Resend (",
-                    resendTime,
-                    ")"))),
-        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Continue"),
-        !isEmail && (React__default["default"].createElement(index$2.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true },
-            "Send OTP Code via ",
-            otpType === 'phone-sms' ? 'Zalo' : 'SMS'))));
+                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) }, (t('ssov2.otp.resendText'),
+                    {
+                        count: resendTime,
+                    })))),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.button.continue')),
+        !isEmail && (React__default["default"].createElement(index$2.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true }, t('ssov2.otp.sendVia', {
+            method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
+        })))));
 };
 
 const SSOPasswordScreen = ({ hidden, index, }) => {
     var _a, _b;
+    const { t } = index$4.useTranslations();
     const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { steps, addStep, goNext, setShareData } = store.useSSOSteps();
@@ -1090,7 +1182,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
     const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
     const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
     const resetPassword = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _c;
         if (phone) {
             addStep({
                 type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
@@ -1107,7 +1199,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                     res = yield resendEmailOTP(email);
                 }
                 if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                    setErrMsg(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     return;
                 }
                 addStep({
@@ -1123,11 +1215,11 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
         goNext();
     });
     const onAuthSuccess = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _e, _f;
+        var _d, _e;
         store.handleAuthSuccess(data);
         if (!phone && !!email) {
             const userInfo = yield store.getUserInfo();
-            if (!((_e = userInfo._data) === null || _e === void 0 ? void 0 : _e.phone_verified_at) || !((_f = userInfo._data) === null || _f === void 0 ? void 0 : _f.phone)) {
+            if (!((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone_verified_at) || !((_e = userInfo._data) === null || _e === void 0 ? void 0 : _e.phone)) {
                 setShareData({
                     authMethod: 'mail',
                     authFlow: 'verify-phone',
@@ -1150,59 +1242,58 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
             if (phone) {
                 loginByPhonePassword(phone, password)
                     .then((res) => {
-                    var _a;
                     if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
                         onAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
                     }
                     else {
-                        setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     }
                 })
                     .catch(() => {
-                    setErrMsg('api error');
+                    setErrMsg(getErrorTextFromCode(t, ''));
                 });
             }
             else {
                 loginByEmailPassword(email, password)
                     .then((res) => {
-                    var _a;
                     if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
                         onAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
                     }
                     else {
-                        setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     }
                 })
                     .catch(() => {
-                    setErrMsg('api error');
+                    setErrMsg(getErrorTextFromCode(t, ''));
                 });
             }
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" },
-                "Welcome back!",
+                t('ssov2.password.title1'),
                 React__default["default"].createElement("br", null),
-                "Enter your password"),
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, "\u0110\u0103ng nh\u1EADp b\u1EB1ng m\u1EADt kh\u1EA9u c\u1EE7a b\u1EA1n.")),
+                t('ssov2.password.title2')),
+            React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$4.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
+            React__default["default"].createElement(index$5.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
-                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Forgot Password?"),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.password.forgotPassword')),
                 React__default["default"].createElement(index$1.Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
-                    }, onClick: resetPassword }, "Reset"))),
-        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Sign In")));
+                    }, onClick: resetPassword }, t('ssov2.password.reset')))),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.password.signIn'))));
 };
 
 const SSOPasswordForgotPhone = ({ hidden, }) => {
+    const { t } = index$4.useTranslations();
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale } = useSSOState();
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
+        var _a;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
@@ -1217,7 +1308,7 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
                 res = yield resendZaloOTP(phoneNumber, areaCode);
             }
             if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                setErrMsg(((_b = res._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+                setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                 return;
             }
             setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
@@ -1232,11 +1323,11 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             goNext();
         }
         else {
-            setErrMsg(((_c = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
     });
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f;
+        var _b;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
@@ -1244,14 +1335,14 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
                 authMethod: 'phone',
             });
             let res;
-            if (!((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider)) {
+            if (!((_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider)) {
                 res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
             }
             else {
                 res = yield resendPhoneOTP(phoneNumber, areaCode);
             }
             if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                setErrMsg(((_e = res._messages) === null || _e === void 0 ? void 0 : _e[0]) || 'API error');
+                setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                 return;
             }
             setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
@@ -1266,20 +1357,20 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             goNext();
         }
         else {
-            setErrMsg(((_f = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _f === void 0 ? void 0 : _f[0]) || 'API error');
+            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
     });
     return (React__default["default"].createElement("div", { style: {
             display: hidden ? 'none' : 'block',
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Reset password"),
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, "Please provide the phone number you used to create your account.")),
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, t('ssov2.resetPassword.title')),
+            React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.resetPassword.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 16 },
             React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
             errMsg && (React__default["default"].createElement(index$1.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS"))));
+            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
+            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS')))));
 };
 
 const CheckGrayIcon = () => (React__default["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1301,7 +1392,7 @@ const SSOPasswordWithConfirm = (_a) => {
         setAtLeastOneUpper(!!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/));
     }, [password]);
     return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: 12 }, props),
-        React__default["default"].createElement(index$4.PasswordInput, Object.assign({ name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", label: "Password", required: true, withAsterisk: true }, form.getInputProps('password'))),
+        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", label: "Password", required: true, withAsterisk: true }, form.getInputProps('password'))),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$1.Text, { size: "n1" },
                 atLeast8Chars ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
@@ -1311,7 +1402,7 @@ const SSOPasswordWithConfirm = (_a) => {
                 atLeastOneUpper ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
                 ' ',
                 "At least one uppercase letter, one lowercase letter, and one number.")),
-        React__default["default"].createElement(index$4.PasswordInput, Object.assign({ name: "confirm-password", placeholder: "X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u", label: "Confirm Password", required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
+        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "confirm-password", placeholder: "X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u", label: "Confirm Password", required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
 };
 
 const SSOPasswordForgotSetup = ({ hidden }) => {
@@ -1384,6 +1475,7 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
 };
 
 const SSOPhoneVerify = ({ hidden, index, }) => {
+    const { t } = index$4.useTranslations();
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale } = useSSOState();
@@ -1391,14 +1483,13 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
     const currentStep = steps[index];
     const { afterAction } = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.config) || {};
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
             if (!userExist._data) {
                 const res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
                 if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                    setErrMsg(((_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     return;
                 }
                 addStep({
@@ -1413,22 +1504,21 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
                 goNext();
             }
             else {
-                setErrMsg('User with this phone number Already Exist');
+                setErrMsg(t('ssov2.phone.alreadyUsed'));
             }
         }
         else {
-            setErrMsg(((_b = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'API error');
+            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
     });
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
         const { areaCode, phoneNumber } = splitPhone(phone);
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
             if (!userExist._data) {
                 const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
                 if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                    setErrMsg(((_c = res === null || res === void 0 ? void 0 : res._messages) === null || _c === void 0 ? void 0 : _c[0]) || 'API error');
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                     return;
                 }
                 addStep({
@@ -1447,7 +1537,7 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
             }
         }
         else {
-            setErrMsg(((_d = userExist === null || userExist === void 0 ? void 0 : userExist._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
+            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
     });
     return (React__default["default"].createElement("div", { style: {
@@ -1455,13 +1545,13 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
         } },
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 8 },
-                React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
-                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
+                React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, t('ssov2.phoneVerify.title')),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.phoneVerify.description'))),
             React__default["default"].createElement(core.Stack, { spacing: 16 },
-                React__default["default"].createElement(index$4.Input.Wrapper, { error: errMsg },
+                React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")))));
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS'))))));
 };
 
 const FemaleIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1495,16 +1585,17 @@ const MaleIcon = () => (React__default["default"].createElement("svg", { width:
 
 // always has name, gender dob
 const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
+    const { t } = index$4.useTranslations();
     const { locale = 'vi-VN' } = useSSOState();
     return (React__default["default"].createElement(core.Stack, { spacing: 12 },
         needPhone && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(index$4.Input.Wrapper, Object.assign({ label: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i", withAsterisk: true }, form.getInputProps('phone')),
+            React__default["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.phone.label'), withAsterisk: true }, form.getInputProps('phone')),
                 React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
                         form.setFieldValue('phone', value);
                     }, isError: !!form.getInputProps('phone').error, required: true, name: "phone" })),
             React__default["default"].createElement(core.Group, { spacing: 24 },
-                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Nh\u1EADn OTP qua"),
-                React__default["default"].createElement(index$4.Radio.Group, Object.assign({ name: "otpMethod", styles: {
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.setup.field.otp.label')),
+                React__default["default"].createElement(index$5.Radio.Group, Object.assign({ name: "otpMethod", styles: {
                         root: {
                             display: 'flex',
                             flexDirection: 'row',
@@ -1512,19 +1603,19 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                             gap: 24,
                         },
                     } }, form.getInputProps('otpMethod')),
-                    React__default["default"].createElement(index$4.Radio, { value: "zalo", label: "Zalo", styles: {
+                    React__default["default"].createElement(index$5.Radio, { value: "zalo", label: "Zalo", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
                         } }),
-                    React__default["default"].createElement(index$4.Radio, { value: "sms", label: "SMS", styles: {
+                    React__default["default"].createElement(index$5.Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
                         } }))))),
-        needEmail && (React__default["default"].createElement(index$4.Input, Object.assign({ name: "email", type: "email", label: "Email", disabled: isEmailDisable }, form.getInputProps('email')))),
-        React__default["default"].createElement(index$4.Input, Object.assign({ name: "name", label: "Name", withAsterisk: true, required: true, placeholder: "Enter your name" }, form.getInputProps('name'))),
-        React__default["default"].createElement(index$4.Input.Wrapper, Object.assign({ label: "Gender", withAsterisk: true }, form.getInputProps('gender')),
+        needEmail && (React__default["default"].createElement(index$5.Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable }, form.getInputProps('email')))),
+        React__default["default"].createElement(index$5.Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder') }, form.getInputProps('name'))),
+        React__default["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.gender.label'), withAsterisk: true }, form.getInputProps('gender')),
             React__default["default"].createElement(core.Group, null,
                 React__default["default"].createElement(index$2.Button, { type: "button", styles: {
                         root: {
@@ -1540,7 +1631,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null) }, "Female"),
+                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null) }, t('ssov2.setup.field.gender.female')),
                 React__default["default"].createElement(index$2.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -1555,12 +1646,13 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default["default"].createElement(MaleIcon, null) }, "Male"))),
-        React__default["default"].createElement(index$5.DatePicker, Object.assign({ name: "dob", label: "Birthday", withAsterisk: true, required: true, placeholder: "Enter your birthday", maxDate: new Date() }, form.getInputProps('dob')))));
+                    }, leftIcon: React__default["default"].createElement(MaleIcon, null) }, t('ssov2.setup.field.gender.male')))),
+        React__default["default"].createElement(index$6.DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date() }, form.getInputProps('dob')))));
 };
 
 const SSOSetupScreen = ({ hidden, index, }) => {
     const { onClose } = useSSOState();
+    const { t } = index$4.useTranslations();
     const { goNext, steps, addStep, shareData } = store.useSSOSteps();
     const { setupSource } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
@@ -1733,25 +1825,25 @@ const SSOSetupScreen = ({ hidden, index, }) => {
         }, onSubmit: form$1.onSubmit(onSubmit) },
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 8 },
-                React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Almost done!"),
-                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
+                React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.setup.description'))),
             needPass && React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
             React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1 }),
             errMsg && (React__default["default"].createElement(index$1.Text, { color: "red.6", size: "p4" }, errMsg)),
             React__default["default"].createElement(index$2.Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone
-                ? 'Verify Phone Number'
+                ? t('ssov2.setup.button.veriyPhone')
                 : authFlow === 'register'
-                    ? 'Create new account'
-                    : 'Save'))));
+                    ? t('ssov2.setup.button.createAccount')
+                    : t('ssov2.button.save')))));
 };
 
 const SSOUpdateEmailScreen = ({ hidden, }) => {
+    const { t } = index$4.useTranslations();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b;
             e.preventDefault();
             const email = e.currentTarget.email.value;
             const existRes = yield store.checkUserExist({ email });
@@ -1763,7 +1855,7 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
                     });
                     const res = yield initSendUpdateEmailOtp(email);
                     if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                        setErrMsg(((_a = res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                         return;
                     }
                     addStep({
@@ -1776,18 +1868,18 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
                     goNext();
                 }
                 else {
-                    setErrMsg('Email đã tồn tại');
+                    setErrMsg(t('ssov2.email.alreadyUsed'));
                 }
             }
             else {
-                setErrMsg(((_b = existRes._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'api error');
+                setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
             }
         }) },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Update Your Email"),
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, "Please update and verify your email to continue using our services.")),
-        React__default["default"].createElement(index$4.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
+            React__default["default"].createElement(index$1.Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
+        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.updateEmail.button'))));
 };
 
 const SSOScreenRenderer = () => {