@hhgtech/hhg-components 1.29.155 → 1.29.157

package/build/ssoV2.js

@@ -2,52 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-633df9f4.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-f97d2a1e.js');
-var index$2 = require('./index-ce8ad75d.js');
-var index$1 = require('./index-8e15e099.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 throttle = require('lodash/throttle');
-var index$4 = require('./index-9fdbe073.js');
+var index$5 = require('./index-d18d5a6b.js');
 require('@mantine/dates');
-var index$5 = require('./index-197e3f3f.js');
-require('./index-c4e13080.js');
-require('./index-44d736a8.js');
-var useMantineLocale = require('./useMantineLocale-489f1064.js');
-var index$3 = require('./index-03516021.js');
-var index = require('./index-10f823af.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-2efad268.js');
-require('./other-d71cfa3a.js');
-require('./index-e22b80c9.js');
-var Locale = require('./Locale-f7c38758.js');
-require('./translationsContext-1e5ddada.js');
-var store = require('./store-d83a1d4e.js');
-var Google = require('./Google-a63f9dad.js');
-var other = require('@hhgtech/icons/other');
-require('./index.styles-76ace5ab.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-79f65c03.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$6 = require('./index-c5615393.js');
-require('./index-b2122be2.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-c373b313.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-b31db0de.js');
+require('./normalizeLink-54693f0e.js');
 require('./miscCookieHelper.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -71,315 +70,12 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 
-const SSOStateContext = React.createContext({
-    locale: Locale.LOCALE.Vietnam,
-    onClose: () => false,
-});
-const SSOStateProvider = ({ children, locale = Locale.LOCALE.Vietnam, onClose, }) => {
-    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default["default"].useState(false);
-    return (React__default["default"].createElement(SSOStateContext.Provider, { value: {
-            locale,
-            onClose,
-            openCollectInfoPopup,
-            setOpenCollectInfoPopup,
-        } }, children));
-};
-const useSSOState = () => {
-    return React__default["default"].useContext(SSOStateContext);
-};
-
-const BackgroundHeader$1 = () => (React__default["default"].createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
-        position: 'absolute',
-        top: 0,
-        left: '50%',
-        zIndex: 0,
-        transform: 'translateX(-50%)',
-        pointerEvents: 'none',
-    } },
-    React__default["default"].createElement("circle", { opacity: ".2", cx: "146", cy: "109", r: "146", fill: "url(#paint0_linear_908_34610)" }),
-    React__default["default"].createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_34610)" }),
-    React__default["default"].createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_34610)" }),
-    React__default["default"].createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_34610)" }),
-    React__default["default"].createElement("path", { d: "M163.327 94.716c-.522-3.187-7.981-5.714-17.11-5.714s-16.589 2.527-17.111 5.714h-.032v26.428h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032V94.716z", fill: "#545E73" }),
-    React__default["default"].createElement("path", { d: "M146.217 118.286c-9.468 0-17.143-2.718-17.143-6.071v8.928h.032c.522 3.187 7.982 5.714 17.111 5.714 9.128 0 16.588-2.527 17.11-5.714h.032v-8.928c0 3.353-7.675 6.071-17.142 6.071", fill: "#2B62CD" }),
-    React__default["default"].createElement("path", { d: "M129.074 111.859v.358q.002-.18.032-.358zm34.25 0q.031.178.032.358v-.358z", fill: "#38454F" }),
-    React__default["default"].createElement("path", { d: "M146.217 109.714c-9.468 0-17.143-2.719-17.143-6.071v8.928h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.928c0 3.352-7.675 6.071-17.142 6.071", fill: "#2D87F3" }),
-    React__default["default"].createElement("path", { d: "M129.074 103.287v.357q.002-.18.032-.357zm34.25 0q.031.178.032.357v-.357z", fill: "#556080" }),
-    React__default["default"].createElement("path", { d: "M146.217 101.145c9.467 0 17.142-2.719 17.142-6.072s-7.675-6.071-17.142-6.071c-9.468 0-17.143 2.718-17.143 6.071s7.675 6.072 17.143 6.072", fill: "#91CAFF" }),
-    React__default["default"].createElement("path", { d: "M146.217 101.144c-9.468 0-17.143-2.719-17.143-6.072v8.929h.032c.522 3.186 7.982 5.714 17.111 5.714 9.128 0 16.588-2.528 17.11-5.714h.032v-8.929c0 3.353-7.675 6.072-17.142 6.072", fill: "#45A4FF" }),
-    React__default["default"].createElement("path", { d: "M129.074 94.717v.357q.002-.18.032-.357zm34.25 0q.031.177.032.357v-.357z", fill: "#8697CB" }),
-    React__default["default"].createElement("path", { d: "M156.36 129.002a8.57 8.57 0 0 0 8.571-8.571 8.571 8.571 0 1 0-8.571 8.571", fill: "#00B16A" }),
-    React__default["default"].createElement("path", { d: "M161.054 116.273a.714.714 0 0 0-.995.178l-3.997 5.743-2.82-2.316a.714.714 0 0 0-.906 1.105l3.418 2.806a.72.72 0 0 0 1.04-.144l4.438-6.377a.716.716 0 0 0-.178-.995", fill: "#fff" }),
-    React__default["default"].createElement("defs", null,
-        React__default["default"].createElement("linearGradient", { id: "paint0_linear_908_34610", x1: "147.5", y1: "141", x2: "36.5", y2: "30", gradientUnits: "userSpaceOnUse" },
-            React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
-            React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })),
-        React__default["default"].createElement("linearGradient", { id: "paint1_linear_908_34610", x1: "218.376", y1: "63.134", x2: "61", y2: "109", gradientUnits: "userSpaceOnUse" },
-            React__default["default"].createElement("stop", { stopColor: "#fff" }),
-            React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
-        React__default["default"].createElement("linearGradient", { id: "paint2_linear_908_34610", x1: "146.5", y1: "61", x2: "146.5", y2: "156", gradientUnits: "userSpaceOnUse" },
-            React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: ".6" }),
-            React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
-        React__default["default"].createElement("linearGradient", { id: "paint3_linear_908_34610", x1: "178.979", y1: "98.35", x2: "108.338", y2: "98.35", gradientUnits: "userSpaceOnUse" },
-            React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
-            React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })))));
-
-const CustomerSupportIcon = () => {
-    return (React__default["default"].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("g", { clipPath: "url(#clip0_911_24123)" },
-            React__default["default"].createElement("path", { d: "M23.3 16.625c-.042-1.1.166-4.401.166-4.401.073-.27.15-.594.205-.854C25.33 3.783 20.246.75 16 .75c-1.133 0-2.488.413-3.13 1.203a.82.82 0 0 1-.503.307c-2.862.46-4.742 4.183-4.062 8.77q.087.586.23 1.19v.002c.183 1.009.231 3.303.165 4.403-.271 4.482-5.173 8.453-1.985 11.608 8.41 1.974 10.202 2.142 18.57 0 3.187-3.155-1.81-7.122-1.985-11.608", fill: "#9B4E4E" }),
-            React__default["default"].createElement("path", { d: "M24.675 14.972a3.2 3.2 0 0 0-.64-.718.25.25 0 1 0-.302.399q.308.261.53.6a1.41 1.41 0 0 1 .177 1.562c-.465.892-1.84 1.63-3.614 2.043q.139.221.264.451c1.85-.457 3.275-1.267 3.794-2.263a1.89 1.89 0 0 0-.21-2.074", fill: "#473049" }),
-            React__default["default"].createElement("path", { d: "M18.545 22.798c-.35.41-2.09 4.555-2.535 5.29-.448-.735-2.198-4.89-2.545-5.3.351-.358.597-.808.707-1.297q.096-.405.115-.82c.365.137 3.063.134 3.428-.003v.003q.018.4.11.79c.107.505.357.969.72 1.337", fill: "#FF977B" }),
-            React__default["default"].createElement("path", { d: "M17.824 21.46a3.39 3.39 0 0 1-3.652.03q.095-.404.115-.82c.365.138 3.062.135 3.427-.002v.003q.018.4.11.79", fill: "#FF7364" }),
-            React__default["default"].createElement("path", { d: "M25.284 28.233c.153.66-.362 1.082-1.08 1.472-.917.5-3.717 1.55-8.205 1.55s-7.287-1.05-8.205-1.55c-.717-.39-1.232-.812-1.08-1.472.048-.187.126-.365.233-.525.535-.84 1.567-2.198 4.2-3.598q.335-.174.692-.33c.075 1.013 2.985.21 2.985.21a.96.96 0 0 1 .57.835c.038.888.168 2.528.615 3.263.445-.735.575-2.375.613-3.263a.96.96 0 0 1 .57-.835s2.907.81 2.985-.202q.347.151.675.322c2.632 1.4 3.665 2.758 4.2 3.598.107.16.185.338.232.525", fill: "#F9E0B4" }),
-            React__default["default"].createElement("path", { d: "M22.317 12.023c.359-.006.715.05 1.055.165.785.282 1.33.962 1.2 2.3-.105 1.1-.647 1.752-1.317 2.03-.461.188-.97.217-1.45.085.277-.97.555-3.88.512-4.58m-12.124 4.579a2.26 2.26 0 0 1-1.448-.082c-.672-.28-1.215-.93-1.322-2.033-.123-1.287.375-1.965 1.112-2.265a3 3 0 0 1 1.145-.2c-.042.7.235 3.61.513 4.58", fill: "#4B3956" }),
-            React__default["default"].createElement("path", { d: "M22.319 12.021c.04.7-.235 3.61-.513 4.581-.285.996-1.532 3.582-5.285 4.418a2.4 2.4 0 0 1-1.044 0c-3.752-.836-5-3.422-5.284-4.418-.278-.97-.554-3.88-.513-4.58 1.219-.669.668-2.955 1.56-5.057.556-1.307 1.305-1.644 1.722-1.727a.9.9 0 0 0 .533-.338c1.6-2.056 4.794-.95 5.966 1.225 1.066 1.977 1.225 4.918 2.858 5.896", fill: "#FFB497" }),
-            React__default["default"].createElement("path", { d: "M20.13 23.118c.067.217.083.446.048.67-.077 1.012-.52 2.735-1.227 2.542-1.018-.277-1.758-2.34-1.758-2.34.518-.23 1.003-.782 1.353-1.192q.068-.086.132-.16a.463.463 0 0 1 .625-.103c.295.153.683.345.828.583m-5.306.872s-.74 2.063-1.758 2.34c-.71.193-1.152-1.537-1.227-2.55a1.5 1.5 0 0 1 .047-.662c.145-.238.533-.43.828-.583a.463.463 0 0 1 .625.103l.125.15c.347.41.837.972 1.36 1.202", fill: "#F7F0DF" }),
-            React__default["default"].createElement("path", { d: "M14.94 16.018a.306.306 0 0 0-.3.385 1.414 1.414 0 0 0 2.72 0 .307.307 0 0 0-.3-.385z", fill: "#fff" }),
-            React__default["default"].createElement("path", { d: "M12.776 11.492h-.05a.676.676 0 0 0-.675.676v.541c0 .374.302.676.676.676h.049a.676.676 0 0 0 .676-.676v-.54a.676.676 0 0 0-.676-.677m6.448 1.893h.05a.676.676 0 0 0 .675-.676v-.541a.676.676 0 0 0-.676-.676h-.049a.676.676 0 0 0-.676.675v.542c0 .373.303.676.676.676", fill: "#9B4E4E" }),
-            React__default["default"].createElement("path", { d: "M16.017 29.117h-.034a.47.47 0 0 0-.471.472v.034c0 .26.21.471.471.471h.034c.26 0 .472-.21.472-.471v-.034a.47.47 0 0 0-.472-.472", fill: "#fff" }),
-            React__default["default"].createElement("path", { d: "M16.003 15.2c-.008 0-.69-.01-.69-.402a.25.25 0 0 1 .455-.142 1 1 0 0 0 .235.044.8.8 0 0 0 .229-.044.25.25 0 0 1 .456.142c0 .391-.679.402-.685.402", fill: "#FF7364" }),
-            React__default["default"].createElement("path", { d: "M11.532 12.095a.25.25 0 0 1-.225-.36 1.62 1.62 0 0 1 1.338-.752c.396-.017.782.124 1.075.39a.25.25 0 1 1-.333.374 1 1 0 0 0-.742-.264 1.14 1.14 0 0 0-.888.473.25.25 0 0 1-.225.14m-.451-1.716a.25.25 0 0 1-.175-.43c.606-.587 2.632-.888 3.235-.48a.25.25 0 0 1-.281.415c-.37-.253-2.149-.02-2.606.425a.25.25 0 0 1-.173.07m9.387 1.715a.25.25 0 0 1-.226-.14 1.14 1.14 0 0 0-.887-.472 1 1 0 0 0-.742.264.25.25 0 1 1-.332-.373c.293-.267.68-.408 1.075-.391a1.62 1.62 0 0 1 1.337.752.25.25 0 0 1-.225.36m.452-1.715a.25.25 0 0 1-.174-.07c-.457-.444-2.235-.677-2.605-.426a.25.25 0 0 1-.281-.414c.603-.408 2.628-.108 3.234.48a.25.25 0 0 1-.175.43zm2.71 1.175c-.135-.78-.492-2.643-2.005-5.64-.06-.125-.092-.258.005-.355a.254.254 0 0 1 .355.005c.795.817 1.67 2.882 1.9 4.565zM10.163 6.313c-.015.025-1.525 2.925-1.83 4.89l-.028-.173q-.1-.658-.127-1.322C8.54 7.94 9.673 6.16 9.73 6.063a.25.25 0 0 1 .34-.093.25.25 0 0 1 .093.343", fill: "#844040" }),
-            React__default["default"].createElement("path", { d: "M23.29 17.917c-1.345.813-3.559 1.331-5.908 1.3a.254.254 0 0 0-.253.247.25.25 0 0 0 .246.253l.23.002c2.522 0 4.831-.603 6.2-1.543a23 23 0 0 1-.516-.259", fill: "#473049" }),
-            React__default["default"].createElement("path", { d: "M16.138 20.42c.686 0 1.241-.426 1.241-.952s-.555-.952-1.241-.952-1.242.426-1.242.952.556.952 1.242.952", fill: "#4B3956" })),
-        React__default["default"].createElement("defs", null,
-            React__default["default"].createElement("clipPath", { id: "clip0_911_24123" },
-                React__default["default"].createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
-};
-
-const HealthUpdateIcon = () => {
-    return (React__default["default"].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("path", { d: "M20.69 3.066 4.714 5.456a1.714 1.714 0 0 0-1.442 1.95l3.01 20.106a1.714 1.714 0 0 0 1.948 1.442l15.975-2.39a1.714 1.714 0 0 0 1.441-1.95L22.638 4.507a1.714 1.714 0 0 0-1.949-1.441", fill: "#1B89E5" }),
-        React__default["default"].createElement("path", { d: "m4.488 5.49 16.427-2.458 3.13 20.914-16.427 2.458z", fill: "#fff" }),
-        React__default["default"].createElement("path", { d: "m13.559 8.067-.567.084a.83.83 0 0 0-.696.942l.02.141a.18.18 0 0 1-.15.203l-.14.021a.83.83 0 0 0-.697.942l.085.568a.83.83 0 0 0 .942.696l.141-.021a.18.18 0 0 1 .203.15l.022.14a.83.83 0 0 0 .942.697l.566-.085a.83.83 0 0 0 .697-.941l-.021-.142a.18.18 0 0 1 .15-.203l.141-.021a.83.83 0 0 0 .697-.943l-.085-.565a.83.83 0 0 0-.942-.697l-.142.022a.18.18 0 0 1-.203-.15l-.02-.142a.83.83 0 0 0-.943-.696m6.553 5.392-9.31 1.393a.32.32 0 0 0 .094.634l9.31-1.393a.32.32 0 1 0-.095-.634m.299 2.303L8.74 17.508a.32.32 0 0 0 .096.634l11.67-1.746a.32.32 0 0 0-.096-.634m-.591 2.436L9.039 19.81a.32.32 0 1 0 .095.634l10.78-1.613a.32.32 0 0 0-.095-.634m-1.084 2.51-9.397 1.406a.32.32 0 0 0 .095.634l9.397-1.407a.32.32 0 1 0-.095-.633m2.318-.347-.828.124a.32.32 0 0 0 .095.634l.828-.124a.32.32 0 0 0-.095-.634", fill: "#78C5EF" }),
-        React__default["default"].createElement("path", { d: "m27.358 4.303-.805-.273a1.26 1.26 0 0 0-1.596.789l-4.406 13.013.494 2.544a.442.442 0 0 0 .728.246l1.937-1.72 2.61-7.71.224.075a.583.583 0 0 0 .739-.365l1.357-4.007a2.045 2.045 0 0 0-1.282-2.592", fill: "#36B1F2" }),
-        React__default["default"].createElement("path", { d: "M26.32 11.443a.25.25 0 0 1-.236-.33l1.614-4.768a.25.25 0 1 1 .474.16l-1.615 4.768a.25.25 0 0 1-.237.17", fill: "#1B89E5" }),
-        React__default["default"].createElement("path", { d: "M17.67 5.535 8.324 6.934a1.15 1.15 0 0 1-1.307-.967l-.098-.654a.44.44 0 0 1 .368-.497l10.754-1.61a.437.437 0 0 1 .498.368l.097.654a1.15 1.15 0 0 1-.967 1.307z", fill: "#3C3854" })));
-};
-
-const PersonalizeIcon = () => {
-    return (React__default["default"].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("path", { d: "M31.364 22.343a5 5 0 0 0-1.713-1.477c-.847-.488-1.52-.816-1.638-1.931h-1.761c-.12 1.115-.797 1.443-1.644 1.931a5 5 0 0 0-1.712 1.477c-.33.438-.095.709.331.936.723.386 2.4.827 3.903.827 1.502 0 3.18-.441 3.902-.827.426-.227.662-.498.332-.936", fill: "#F78181" }),
-        React__default["default"].createElement("path", { d: "M21.765 14c-.006-3.907-4.11-7.388-7.666-4.77a.4.4 0 0 1-.129.065c-.958.303-1.65 1.213-2.108 2.305-1.408 3.347.2 7.77-.291 11.538h9.938c-.185-2.536.26-6.777.256-9.138", fill: "#FF6671" }),
-        React__default["default"].createElement("path", { d: "M5.354 9.745c-3.033 0-5.268 3.012-4.76 6.07.424 2.568 3.008 2.747 3.008 2.747l3.5-.003s2.586-.175 3.012-2.743c.507-3.06-1.728-6.07-4.76-6.07", fill: "#3A417C" }),
-        React__default["default"].createElement("path", { d: "M9.073 22.755c-.688.367-2.288.79-3.72.79s-3.03-.423-3.72-.79c-.408-.218-.63-.475-.318-.893.43-.588.99-1.07 1.635-1.407.205-.118.393-.203.563-.283h.002c.503-.235.843-.415.928-1.207h1.822c.085.797.428.975.935 1.21.17.08.355.165.558.28.644.339 1.202.82 1.632 1.407.315.418.09.675-.317.893", fill: "#BF6666" }),
-        React__default["default"].createElement("path", { d: "M31.332 22.342a5.04 5.04 0 0 0-1.712-1.477 9 9 0 0 1-.815-.498 3.43 3.43 0 0 1-3.373-.005c-.245.178-.547.325-.855.503a5 5 0 0 0-1.712 1.477c-.33.44-.095.71.33.938.722.385 2.4.827 3.902.827s3.18-.442 3.903-.827c.427-.228.662-.498.332-.938", fill: "#3A417C" }),
-        React__default["default"].createElement("path", { d: "M28.232 9.496c-1.05-.28-3.25-.14-3.708 1.205a.46.46 0 0 1-.18.24c-1.035.682-1.353 1.643-.862 3.845h7.298c.738-4.148-1.278-4.95-2.548-5.29", fill: "#FFB45A" }),
-        React__default["default"].createElement("path", { d: "M8.402 14.623a.51.51 0 0 1 .229.432 5.9 5.9 0 0 1-.278 1.793c-.262.697-.942 1.882-2.245 2.152a4 4 0 0 1-.757.09 4 4 0 0 1-.76-.09c-1.303-.27-1.98-1.455-2.243-2.152a5.9 5.9 0 0 1-.278-1.793.51.51 0 0 1 .229-.432c.99-.668 2.339-.862 3.052-.86.71-.002 2.06.192 3.051.86", fill: "#CE7A7A" }),
-        React__default["default"].createElement("path", { d: "M30.781 14.786a1.2 1.2 0 0 0-.469-.053.45.45 0 0 1-.225-.04c-.956-.438-.852-1.208-.955-1.723-.407-2.036-2.745-1.94-3.408-1.24a.36.36 0 0 1-.19.11c-.87.175-1.371 1.948-1.469 2.68a.24.24 0 0 1-.232.209q-.18 0-.35.057c-.448.157-.572.675-.392 1.157a1.03 1.03 0 0 0 .948.725.255.255 0 0 1 .267.175 3.31 3.31 0 0 0 1.945 2.092 2.13 2.13 0 0 0 1.762 0 3.3 3.3 0 0 0 1.945-2.092.254.254 0 0 1 .267-.175 1.03 1.03 0 0 0 .947-.725c.181-.482.056-1-.391-1.157m-9.271 8.351a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
-        React__default["default"].createElement("path", { d: "M21.51 23.137a5.9 5.9 0 0 0-2.012-1.734c-.995-.573-1.723-.494-1.863-1.803l-2.213-.01c-.14 1.31-.844 1.24-1.839 1.814a5.9 5.9 0 0 0-2.011 1.734c-.388.515-.112.833.389 1.1.849.453 2.82.972 4.584.972s3.726-.519 4.575-.972c.5-.268.777-.586.39-1.1", fill: "#FF9797" }),
-        React__default["default"].createElement("path", { d: "M18.682 13.703a3.32 3.32 0 0 1 1.206 3.398 3.63 3.63 0 0 1-2.229 2.489 3.5 3.5 0 0 1-1.118.213 3.5 3.5 0 0 1-1.12-.213 3.63 3.63 0 0 1-2.228-2.49 8.5 8.5 0 0 1-.284-2.55c.137-2.045.975-3.52 2.095-3.245a.25.25 0 0 0 .182-.023c1.377-.755 1.672 1.03 3.496 2.421", fill: "#FFAEAE" }),
-        React__default["default"].createElement("path", { d: "M21.12 24.238c-.85.452-2.81.972-4.575.972s-3.735-.52-4.585-.972c-.5-.268-.777-.585-.387-1.1a5.65 5.65 0 0 1 1.735-1.573 6.03 6.03 0 0 0 3.232.788 6.1 6.1 0 0 0 3.253-.775 5.7 5.7 0 0 1 1.717 1.56c.388.515.11.832-.39 1.1", fill: "#5C8EFF" }),
-        React__default["default"].createElement("path", { d: "M9.073 22.755c-.688.368-2.288.79-3.72.79s-3.03-.422-3.72-.79c-.408-.217-.63-.475-.318-.892.43-.588.99-1.07 1.635-1.408.205-.117.393-.202.563-.282h.002c.557.318 1.192.47 1.833.44a3.47 3.47 0 0 0 1.852-.438c.17.08.355.165.558.28a4.8 4.8 0 0 1 1.632 1.408c.315.417.09.675-.317.892", fill: "#4856B5" })));
-};
-
-const SecurityIcon = () => {
-    return (React__default["default"].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("path", { d: "M16 29.625c1.196 0 2.348-.639 3.327-1.31 5.423-3.715 6.606-5.558 6.995-6.163.436-.68 1.533-2.23 2.73-12.356.33-2.804-1.143-5.19-3.893-6.066a31.65 31.65 0 0 0-18.319 0c-2.75.874-4.222 3.262-3.892 6.067 1.196 10.125 2.293 11.674 2.73 12.355.388.605 1.572 2.448 6.994 6.163.98.671 2.13 1.31 3.328 1.31", fill: "#9DBA22" }),
-        React__default["default"].createElement("path", { d: "M25.142 7.18c-2.902-1.307-6.095-1.645-9.143-1.645s-6.241.338-9.143 1.645c-.7.316-1.115.77-1.04 1.365.382 3.052 1.583 11.235 2.192 12.128 1.21 1.777 5.533 4.67 7.267 5.788a1.37 1.37 0 0 0 1.448 0c1.733-1.119 6.056-4.011 7.267-5.788.609-.893 1.81-9.075 2.193-12.128.074-.595-.34-1.049-1.041-1.365", fill: "#BFDF46" }),
-        React__default["default"].createElement("path", { d: "M15.798 19.264c-1.522-.418-2.486-1.494-2.992-3.333a9.2 9.2 0 0 1-.177-4.156c.109-.644.715-1.192 1.434-.802q1.159.616 2.377 1.102c2.909 1.205 3.817 4.07 2.732 5.783-.578.912-1.922 1.806-3.375 1.406", fill: "#fff" }),
-        React__default["default"].createElement("path", { d: "M20.667 20.13a.3.3 0 0 1-.095-.015c-2.152-.684-4.24-2.662-4.838-4.08a.313.313 0 0 1 .508-.35q.045.045.067.106c.461 1.092 2.311 3.048 4.451 3.728a.313.313 0 0 1-.094.61", fill: "#9DBA22" })));
-};
-
-const ServiceIcon = () => {
-    return (React__default["default"].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("g", { clipPath: "url(#clip0_911_3434)" },
-            React__default["default"].createElement("path", { d: "M30.466 17.553c.714-.548.988-1.39.611-1.881s-1.261-.444-1.975.104c-.714.549-.988 1.391-.611 1.882s1.261.444 1.975-.105", fill: "#563960" }),
-            React__default["default"].createElement("path", { d: "M30.122 7.72a2.2 2.2 0 0 1-.438.37 2.355 2.355 0 0 1-2.787-3.79l.022-.017a2.356 2.356 0 0 1 3.203 3.437", fill: "#E8E2E2" }),
-            React__default["default"].createElement("path", { d: "M16.474 3.996c-.544-.568-1.058-1.45-1.082-2.29l-1.395.7a1.394 1.394 0 1 0 1.247 2.491l1.159-.583.259-.14a3 3 0 0 1-.188-.178", fill: "#E5395E" }),
-            React__default["default"].createElement("path", { d: "M18.934 2.175a1.39 1.39 0 0 1-.77 1.246l-1.472.738-.256.138a2.52 2.52 0 0 1-1.189-1.331 2 2 0 0 1-.042-1.165l.353-.191 1.358-.68a1.392 1.392 0 0 1 2.018 1.245", fill: "#F9AF2B" }),
-            React__default["default"].createElement("path", { d: "M5.507 6.695c-.407.705-1.475.86-2.425.362L2.975 7a3 3 0 0 1-.358-.248c.005-.012 1.05-.635 1.355-1.157.258-.44.25-1.335.268-1.38q.136.058.265.132.132.078.257.168c.795.585 1.128 1.515.745 2.18", fill: "#F44A52" }),
-            React__default["default"].createElement("path", { d: "M4.343 5.848a2.9 2.9 0 0 1-1.285 1.197L2.976 7a2.6 2.6 0 0 1-.398-.28c-.692-.587-.965-1.442-.605-2.067.378-.655 1.323-.833 2.215-.463a3 3 0 0 1 .51.28c.029.485-.095.967-.355 1.378", fill: "#E8E2E2" }),
-            React__default["default"].createElement("path", { d: "M1.87 17.24a1.12 1.12 0 1 0 0-2.24 1.12 1.12 0 0 0 0 2.24", fill: "#F9AF2B" }),
-            React__default["default"].createElement("path", { d: "M30.123 7.72a2.2 2.2 0 0 1-.437.37c0-1.013-1.5-3.058-3.153-3.418q.162-.206.365-.372l.023-.018c1.65.45 3.052 2.16 3.202 3.438", fill: "#C3C7C9" }),
-            React__default["default"].createElement("path", { d: "M25.295 17.4v9.637c0 2.13-1.745 3.225-3.855 3.518-2.707.375-8.128.375-10.835 0-2.11-.29-3.855-1.387-3.855-3.517v-9.637a3.86 3.86 0 0 1 1.354-2.93c.229-.194.412-.436.537-.71h14.767c.12.275.303.518.534.71q.16.135.303.29a3.85 3.85 0 0 1 1.05 2.64", fill: "#1B89E5" }),
-            React__default["default"].createElement("path", { d: "M16.568 17.151h-1.093a1.58 1.58 0 0 0-1.58 1.58v.272a.34.34 0 0 1-.34.34h-.272a1.58 1.58 0 0 0-1.58 1.58v1.095a1.58 1.58 0 0 0 1.58 1.58h.272a.34.34 0 0 1 .34.34v.272a1.58 1.58 0 0 0 1.58 1.58h1.093a1.58 1.58 0 0 0 1.58-1.58v-.273a.34.34 0 0 1 .34-.34h.274a1.58 1.58 0 0 0 1.58-1.58v-1.092a1.58 1.58 0 0 0-1.58-1.58h-.273a.34.34 0 0 1-.341-.34v-.274a1.58 1.58 0 0 0-1.58-1.58", fill: "#fff" }),
-            React__default["default"].createElement("path", { d: "M24.137 13.762H7.907a.47.47 0 0 1-.471-.47v-2.7a2.583 2.583 0 0 1 2.552-2.554c3.017-.1 9.05-.1 12.067 0a2.583 2.583 0 0 1 2.553 2.552v2.7a.473.473 0 0 1-.471.472", fill: "#E8E2E2" })),
-        React__default["default"].createElement("defs", null,
-            React__default["default"].createElement("clipPath", { id: "clip0_911_3434" },
-                React__default["default"].createElement("path", { fill: "#fff", d: "M0 0h32v32H0z" })))));
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getContents = (t) => {
-    return [
-        {
-            label: 'Personalized Experience',
-            description: 'Your name, gender, and date of birth help us provide tailored health advice and personalized care plans that fit your unique needs.',
-            icon: React__default["default"].createElement(PersonalizeIcon, null),
-        },
-        {
-            label: 'Timely Health Updates',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default["default"].createElement(HealthUpdateIcon, null),
-        },
-        {
-            label: 'Enhanced Security',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default["default"].createElement(SecurityIcon, null),
-        },
-        {
-            label: 'Quick Customer Support',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default["default"].createElement(CustomerSupportIcon, null),
-        },
-        {
-            label: 'Service Improvement',
-            description: 'We use your phone number and email to send important notifications, health reminders, and updates on new content to keep you informed.',
-            icon: React__default["default"].createElement(ServiceIcon, null),
-        },
-    ];
-};
-const CollectInfoTextPopup = () => {
-    const { openCollectInfoPopup, setOpenCollectInfoPopup } = useSSOState();
-    index.useTranslations();
-    const contents = getContents();
-    const [mobileDragOffset, setMobileDragOffset] = React.useState(0);
-    const dragStartYRef = React.useRef(0);
-    const mobileDragOffsetRef = React.useRef(mobileDragOffset);
-    mobileDragOffsetRef.current = mobileDragOffset;
-    const throttleSetMobileDragOffset = React.useMemo(() => {
-        return throttle__default["default"](setMobileDragOffset, 70);
-    }, []);
-    React.useEffect(() => {
-        if (openCollectInfoPopup) {
-            setMobileDragOffset(0);
-        }
-    }, [openCollectInfoPopup]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("style", { key: mobileDragOffset }, `
-        .collect-info-text-popup .mantine-Modal-inner {
-          transform: translateY(${Math.round(mobileDragOffset)}px);
-        }
-      `),
-        React__default["default"].createElement(index$1.Modal, { opened: openCollectInfoPopup, onClose: () => setOpenCollectInfoPopup(false), withCloseButton: false, zIndex: 400, styles: (theme) => ({
-                body: {
-                    padding: '32px 24px',
-                    position: 'relative',
-                    background: 'linear-gradient(180deg, #91CAFF 0%,  #CFE8FF 100px, #FFFFFF 200px)',
-                    [theme.fn.smallerThan('sm')]: {
-                        height: '100%',
-                    },
-                },
-                content: {
-                    [theme.fn.smallerThan('sm')]: {
-                        width: '100%',
-                        height: '100%',
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0,
-                        maxWidth: '100%',
-                        maxHeight: '100%',
-                    },
-                },
-                inner: {
-                    [theme.fn.smallerThan('sm')]: {
-                        padding: 0,
-                        left: 0,
-                        right: 0,
-                        top: 120,
-                        // transform: `translateY(${Math.round(mobileDragOffset)}px)`,
-                        display: 'block',
-                        transition: 'transform 70ms',
-                    },
-                },
-            }), className: "collect-info-text-popup" },
-            React__default["default"].createElement(core.Box, { sx: (theme) => ({
-                    [theme.fn.largerThan('sm')]: {
-                        display: 'none',
-                    },
-                    padding: 8,
-                    width: '100%',
-                    cursor: 'grab',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                }), draggable: true, onDrag: (e) => {
-                    if (e.clientY <= 5)
-                        return;
-                    throttleSetMobileDragOffset(e.clientY - dragStartYRef.current);
-                }, onDragStart: (e) => {
-                    dragStartYRef.current = e.clientY;
-                }, onDragEnd: (e) => {
-                    if (e.clientY - dragStartYRef.current > 100) {
-                        setMobileDragOffset(window.innerHeight);
-                        setTimeout(() => {
-                            setOpenCollectInfoPopup(false);
-                        }, 100);
-                    }
-                    else {
-                        throttleSetMobileDragOffset(0);
-                    }
-                }, onTouchStart: (e) => {
-                    dragStartYRef.current = e.touches[0].clientY;
-                }, onTouchMove: (e) => {
-                    if (e.touches[0].clientY < 0)
-                        return;
-                    throttleSetMobileDragOffset(e.touches[0].clientY - dragStartYRef.current);
-                }, onTouchEnd: (e) => {
-                    if (e.changedTouches[0].clientY - dragStartYRef.current > 100) {
-                        setMobileDragOffset(window.innerHeight);
-                        setTimeout(() => {
-                            setOpenCollectInfoPopup(false);
-                        }, 100);
-                    }
-                    else {
-                        throttleSetMobileDragOffset(0);
-                    }
-                } },
-                React__default["default"].createElement(core.Box, { sx: {
-                        border: '1.5px solid #ADB3BC',
-                        background: 'gray',
-                        borderRadius: 3,
-                        width: 44,
-                    } })),
-            React__default["default"].createElement("div", { style: {
-                    height: 40,
-                } },
-                React__default["default"].createElement(index$2.Button, { variant: "white", sx: (theme) => ({
-                        width: 40,
-                        height: 40,
-                        padding: 8,
-                        background: 'white',
-                        borderRadius: '100%',
-                        [theme.fn.smallerThan('sm')]: {
-                            display: 'none',
-                        },
-                    }), onClick: () => setOpenCollectInfoPopup(false) },
-                    React__default["default"].createElement(arrow.ChevronLeft, null))),
-            React__default["default"].createElement(BackgroundHeader$1, null),
-            React__default["default"].createElement(core.Stack, { pos: "relative", mt: 100, spacing: 8, style: {
-                    zIndex: 1,
-                } },
-                React__default["default"].createElement(index$3.Text, { size: "h4" }, "Why We Need Your Information"),
-                React__default["default"].createElement(index$4.Accordion, { styles: {
-                        item: {
-                            borderBottomColor: '#E4E8EC',
-                            paddingBottom: 16,
-                            marginTop: 16,
-                        },
-                        control: {
-                            padding: 0,
-                        },
-                        content: {
-                            padding: 0,
-                            marginTop: 8,
-                        },
-                    } }, contents.map((item, index) => (React__default["default"].createElement(index$4.Accordion.Item, { key: index, value: item.label },
-                    React__default["default"].createElement(index$4.Accordion.Control, { icon: item.icon },
-                        React__default["default"].createElement(index$3.Text, { size: "s3", weight: "semiBold" }, item.label)),
-                    React__default["default"].createElement(index$4.Accordion.Panel, null,
-                        React__default["default"].createElement(index$3.Text, { size: "p3" }, item.description))))))))));
-};
-
 const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
-    return (React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
+    return (React__default["default"].createElement(index.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
             body: {
                 padding: '32px 24px',
                 position: 'relative',
@@ -415,13 +111,13 @@ const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
                 zIndex: 1,
                 textAlign: 'center',
             } },
-            React__default["default"].createElement(index$3.Text, { size: "h4" }, "Are you sure you want to exit?"),
-            React__default["default"].createElement(index$3.Text, { size: "p3" }, "You\u2019re just a step away from completing your account setup. Do you really want to leave?")),
+            React__default["default"].createElement(index$1.Text, { size: "h4" }, "Are you sure you want to exit?"),
+            React__default["default"].createElement(index$1.Text, { size: "p3" }, "You\u2019re just a step away from completing your account setup. Do you really want to leave?")),
         React__default["default"].createElement(core.Stack, { mt: 32, spacing: 8, align: "center" },
             React__default["default"].createElement(index$2.Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
-                React__default["default"].createElement(index$3.Text, { size: "s2", weight: "regular", color: "inherit" }, "Cancel")),
+                React__default["default"].createElement(index$1.Text, { size: "s2", weight: "regular", color: "inherit" }, "Cancel")),
             React__default["default"].createElement(index$2.Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
-                React__default["default"].createElement(index$3.Text, { size: "p2", weight: "regular", color: "gray.6" }, "I want to exit now")))));
+                React__default["default"].createElement(index$1.Text, { size: "p2", weight: "regular", color: "gray.6" }, "I want to exit now")))));
 };
 const BackgroundHeader = () => (React__default["default"].createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
         position: 'absolute',
@@ -452,6 +148,23 @@ const BackgroundHeader = () => (React__default["default"].createElement("svg", {
             React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
             React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })))));
 
+const SSOStateContext = React.createContext({
+    locale: Locale.LOCALE.Vietnam,
+    onClose: () => false,
+});
+const SSOStateProvider = ({ children, locale = Locale.LOCALE.Vietnam, onClose, }) => {
+    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default["default"].useState(false);
+    return (React__default["default"].createElement(SSOStateContext.Provider, { value: {
+            locale,
+            onClose,
+            openCollectInfoPopup,
+            setOpenCollectInfoPopup,
+        } }, children));
+};
+const useSSOState = () => {
+    return React__default["default"].useContext(SSOStateContext);
+};
+
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
     const { steps, goBack } = store.useSSOSteps();
@@ -459,13 +172,13 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     const showBack = steps.length > 1;
     const showClose = steps.length === 1;
     const showLogo = steps.length === 1;
-    const logoType = (_a = index$5.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
+    const logoType = (_a = index$3.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
     const [closeConfirmOpen, setCloseConfirmOpen] = React__default["default"].useState(false);
     const onCloseClick = () => {
         setCloseConfirmOpen(true);
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+        React__default["default"].createElement(index.Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
                 body: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -525,8 +238,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
         React__default["default"].createElement(ConfirmClosePopup, { opened: closeConfirmOpen, onCancel: () => setCloseConfirmOpen(false), onClose: () => {
                 setCloseConfirmOpen(false);
                 onClose === null || onClose === void 0 ? void 0 : onClose();
-            } }),
-        React__default["default"].createElement(CollectInfoTextPopup, null)));
+            } })));
 };
 
 const loginByEmailPassword = (email, password) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -568,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) {
@@ -611,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
@@ -627,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$3.Text, { size: "s1", weight: "semiBold" }, "Continue with email"),
-            React__default["default"].createElement(index$3.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) => {
@@ -806,20 +609,6 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => tslib_es6.__await
     });
 });
 
-const CollectInfoText = () => {
-    const { setOpenCollectInfoPopup } = useSSOState();
-    return (React__default["default"].createElement(index$3.Text, { size: "p4", onClick: () => {
-            setOpenCollectInfoPopup(true);
-        }, color: "blue.6", style: {
-            cursor: 'pointer',
-        } },
-        React__default["default"].createElement(other.Info, { size: 16, color: '#2D87F3', style: {
-                verticalAlign: 'sub',
-            } }),
-        ' ',
-        "Why We Need Your Information?"));
-};
-
 const MailIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default["default"].createElement("g", { clipPath: "url(#clip0_869_25628)" },
         React__default["default"].createElement("rect", { width: "24", height: "24", rx: "12", fill: "#00B16A" }),
@@ -828,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;
@@ -1087,16 +876,16 @@ const SSOFirstScreen = ({ hidden }) => {
             height: '100%',
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Sign in or Sign up"),
-            React__default["default"].createElement(index$3.Text, { size: "p4" }, "Continue with your phone number, email or your socials to log in or sign up.")),
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Sign in or Sign up"),
+            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")),
             React__default["default"].createElement(core.Stack, { spacing: 16, align: "center" },
-                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Or continue with"),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Or continue with"),
                 React__default["default"].createElement(core.Group, { spacing: 24 },
                     React__default["default"].createElement("script", { src: "https://accounts.google.com/gsi/client", async: true }),
                     React__default["default"].createElement(index$2.Button, { variant: "white", style: {
@@ -1129,18 +918,17 @@ const SSOFirstScreen = ({ hidden }) => {
                     marginTop: 'auto',
                 },
             }) },
-            React__default["default"].createElement(CollectInfoText, null),
-            React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6" },
+            React__default["default"].createElement(index$1.Text, { size: "p5", color: "gray.6" },
                 "By tapping continue, I confirm that I have read, understand and agree to the",
                 ' ',
-                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$5.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
+                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$3.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
                     } }, "Privacy Policy"),
                 ' ',
                 "and the",
                 ' ',
-                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$5.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
+                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$3.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
                     } }, "Terms of Service"),
@@ -1173,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('');
@@ -1211,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) {
@@ -1227,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({
@@ -1247,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 {
@@ -1256,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;
         }
@@ -1276,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);
@@ -1294,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({
@@ -1353,40 +1141,40 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             submitOtp();
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, isEmail ? 'Verify Email' : 'Verify Phone Number'),
-            React__default["default"].createElement(index$3.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$3.Text, { size: "p4" }, "Didn\u2019t receive the code?"),
-                React__default["default"].createElement(index$3.Text, { style: {
+                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();
@@ -1394,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,
@@ -1411,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({
@@ -1427,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',
@@ -1454,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$3.Text, { size: "s1", weight: "semiBold" },
-                "Welcome back!",
+            React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" },
+                t('ssov2.password.title1'),
                 React__default["default"].createElement("br", null),
-                "Enter your password"),
-            React__default["default"].createElement(index$3.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$3.Text, { size: "p4" }, "Forgot Password?"),
-                React__default["default"].createElement(index$3.Text, { size: "s4", color: "blue.6", style: {
+                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) {
@@ -1521,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' })));
@@ -1536,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) {
@@ -1548,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' })));
@@ -1570,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$3.Text, { size: "s1", weight: "semiBold" }, "Reset password"),
-            React__default["default"].createElement(index$3.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$3.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"))));
+            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 }, 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" },
@@ -1605,17 +1392,17 @@ 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$3.Text, { size: "n1" },
+            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)),
                 ' ',
                 "At least 8 characters."),
-            React__default["default"].createElement(index$3.Text, { size: "n1" },
+            React__default["default"].createElement(index$1.Text, { size: "n1" },
                 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 }) => {
@@ -1681,14 +1468,14 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         }, 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$3.Text, { size: "s1", weight: "semiBold" }, "Setup your password"),
-                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Set up your login password and other details to complete the registration process.")),
+                React__default["default"].createElement(index$1.Text, { size: "s1", weight: "semiBold" }, "Setup your password"),
+                React__default["default"].createElement(index$1.Text, { size: "p4" }, "Set up your login password and other details to complete the registration process.")),
             React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
-            React__default["default"].createElement(CollectInfoText, null),
             React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, "Save"))));
 };
 
 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();
@@ -1696,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({
@@ -1718,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({
@@ -1752,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: {
@@ -1760,14 +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$3.Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
-                React__default["default"].createElement(index$3.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(CollectInfoText, null))));
+                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" },
@@ -1801,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$3.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',
@@ -1818,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: {
@@ -1846,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,
@@ -1861,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$6.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('');
@@ -2039,26 +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$3.Text, { size: "s1", weight: "semiBold" }, "Almost done!"),
-                React__default["default"].createElement(index$3.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 }),
-            React__default["default"].createElement(CollectInfoText, null),
-            errMsg && (React__default["default"].createElement(index$3.Text, { color: "red.6", size: "p4" }, errMsg)),
+            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 });
@@ -2070,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({
@@ -2083,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$3.Text, { size: "s1", weight: "semiBold" }, "Update Your Email"),
-            React__default["default"].createElement(index$3.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 = () => {