@hhgtech/hhg-components 1.29.541 → 1.29.543-beta-1

package/build/esm/pwg.js

@@ -1,46 +1,46 @@
 import React__default, { useMemo, useState, useRef } from 'react';
-import { M as MarryBabyText, a as MarryBabyHeading } from './index-de3a12d3.js';
-import { T as Text } from './index-0b67696c.js';
-import { P as PillCarousel } from './index-73053988.js';
-import { u as useTranslations } from './index-09d9e570.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-92a7c89f.js';
+import { T as Text } from './index-c8d80f8c.js';
+import { P as PillCarousel } from './index-11573496.js';
+import { u as useTranslations } from './index-8c2dd675.js';
 import { theme } from './miscTheme.js';
 import { ResponsiveContainer, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, Area, ReferenceDot } from 'recharts';
-import { C as CustomReferenceDot } from './index-57322550.js';
-import { a as useOutsideClick } from './useOutsideClick-5ac585f9.js';
+import { C as CustomReferenceDot } from './index-c9008978.js';
+import { a as useOutsideClick } from './useOutsideClick-53f27509.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-00ab44b2.js';
+import { _ as __rest } from './tslib.es6-ac697999.js';
 import '@mantine/core';
-import './index-17c85f76.js';
-import './index-fe4471f4.js';
-import './Locale-dc1237b9.js';
-import './index-7adf994c.js';
+import './index-bbbf3f0d.js';
+import './index-724975e3.js';
+import './Locale-698c9c5e.js';
+import './index-e711e815.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './index-50aea2c8.js';
-import './utils-538169b3.js';
-import './index-546ca9b5.js';
-import './index-bd44bcb2.js';
+import './index-f444d8e4.js';
+import './utils-fc3d898b.js';
+import './index-be1db312.js';
+import './index-8a202e23.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
 import '@mantine/carousel';
-import './index-3f09210d.js';
+import './index-c1c0ef29.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index-8c40504a.js';
+import './index-2f6a858f.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './shared-b07d1eb2.js';
+import './shared-a1a01a37.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-38cdf062.js';
+import './useUniqueId-26ee7b08.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
-import './index-2d25b0f0.js';
+import './index-85d86bd0.js';
 import '@mantine/dates';
-import './index.styles-3adef5f6.js';
-import './translationsContext-18f7b7e0.js';
-import './index-04505e35.js';
+import './index.styles-80f436a0.js';
+import './translationsContext-b5c78f1e.js';
+import './index-4c6f5023.js';
 
 const CustomizedAxisTick = (props) => {
     const { x, y, payload, activeWeek } = props;

package/build/esm/ssoV2/screens/first/firstBFlow.d.ts

@@ -8,5 +8,5 @@ type Props = {
     onTriggerFacebookLogin: () => void;
     onClickEmail: () => void;
 } & PolicyContentProps;
-declare const FirstBFlow: ({ hidden, legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTriggerFacebookLogin, onClickEmail, }: Props) => React.JSX.Element;
+declare const FirstBFlow: ({ hidden, activeTab, legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTriggerFacebookLogin, onClickEmail, }: Props) => React.JSX.Element;
 export default FirstBFlow;

package/build/esm/ssoV2/screens/first/policyContent.d.ts

@@ -3,6 +3,8 @@ export type Props = {
     legalTextType: 'community' | 'default';
     trackingCategory: string;
     trackingAction: string;
+    activeTab?: string;
+    errMsgPolicy?: string;
 };
-declare const PolicyContent: ({ legalTextType, trackingCategory, trackingAction, }: Props) => React.JSX.Element;
+declare const PolicyContent: ({ legalTextType, trackingCategory, trackingAction, activeTab, errMsgPolicy, }: Props) => React.JSX.Element;
 export default PolicyContent;

package/build/esm/ssoV2/ssoStateManager/store.d.ts

@@ -1,5 +1,9 @@
 import { UserInfo } from "../../types";
 export type SSOV2StoreType = {
+    isHaveReadAndAgreePolicy?: boolean;
+    setIsHaveReadAndAgreePolicy: (isHaveReadAndAgreePolicy: boolean) => void;
+    isGetUpdateFromHHG?: boolean;
+    setIsGetUpdateFromHHG: (isGetUpdateFromHHG: boolean) => void;
     userInfo?: UserInfo;
     abTestFlow?: 'A' | 'B';
     setABTestFlow: (flow?: 'A' | 'B') => void;

package/build/esm/ssoV2/utils.d.ts

@@ -3,6 +3,7 @@ import { SubotBotItem } from "../types";
 export declare const isFeatureWhatsAppEnabled: boolean;
 export declare const isFeatureSMSEnabled: boolean;
 export declare const isFeatureZaloEnabled: boolean;
+export declare const isFeaturePolicyUpdateEnabled: boolean;
 export declare const isSupportProduct: (featureFlagsProduct: {
     name: string;
 }[]) => boolean;

package/build/esm/ssoV2.js

@@ -1,36 +1,37 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-00ab44b2.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-ac697999.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useImperativeHandle, useState, useCallback, forwardRef } from 'react';
 import { getCookie, setCookie, deleteCookie } from './miscCookieHelper.js';
-import { I as Input, h as ErrorBoundary, s as styles, O as OTP, i as PasswordInput } from './index-bd44bcb2.js';
-import { f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, a as fetchSSOV2ApiJson, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, u as updateUserInfo, r as resetPassword } from './index-d535cfb0.js';
+import { I as Input, h as ErrorBoundary, d as Checkbox, s as styles, O as OTP, i as PasswordInput } from './index-8a202e23.js';
+import { f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, a as fetchSSOV2ApiJson, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, u as updateUserInfo, r as resetPassword } from './index-62119af7.js';
 import { isProduction } from './constantsIsProduction.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
 import { Close, Search, ReplySquare } from '@hhgtech/icons/core';
-import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-8c40504a.js';
-import { L as LogoIcon } from './logoIcon-b515c32f.js';
-import { B as Button } from './index-2d25b0f0.js';
-import { M as Modal } from './index-3b8592c9.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-2f6a858f.js';
+import { L as LogoIcon } from './logoIcon-11a81375.js';
+import { B as Button } from './index-85d86bd0.js';
+import { M as Modal } from './index-99c2bc84.js';
 import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-fe4471f4.js';
-import { C as CommonGAssets } from './index-7adf994c.js';
-import { s as showNotification } from './index-3f09210d.js';
-import { T as Text } from './index-0b67696c.js';
-import './index-17c85f76.js';
-import { u as useTranslations } from './index-09d9e570.js';
+import './index-724975e3.js';
+import { C as CommonGAssets } from './index-e711e815.js';
+import { s as showNotification } from './index-c1c0ef29.js';
+import { T as Text } from './index-c8d80f8c.js';
+import './index-bbbf3f0d.js';
+import { u as useTranslations } from './index-8c2dd675.js';
 import '@mantine/hooks';
-import './utils-538169b3.js';
-import './index-04505e35.js';
-import { L as LOCALE } from './Locale-dc1237b9.js';
-import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, I as IS_SSOV2_ENABLED, s as splitPhone, b as isPhoneNotVerifedYet, c as isLoginWithPhoneNotVerifedYet, d as isFlowFinishedSetup, r as redirect } from './store-5b85d43f.js';
-export { u as useSSOV2Store } from './store-5b85d43f.js';
-import { I as ImageWrap, u as useScreenSize } from './index-50aea2c8.js';
+import './utils-fc3d898b.js';
+import './index-4c6f5023.js';
+import { L as LOCALE } from './Locale-698c9c5e.js';
+import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, I as IS_SSOV2_ENABLED, s as splitPhone, b as isPhoneNotVerifedYet, c as isLoginWithPhoneNotVerifedYet, d as isFlowFinishedSetup, r as redirect } from './store-fff659b2.js';
+export { u as useSSOV2Store } from './store-fff659b2.js';
+import { I as ImageWrap, u as useScreenSize } from './index-f444d8e4.js';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { G as Google, F as Facebook } from './Google-dc232b37.js';
-import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-4cfd441c.js';
-export { g as getURLwithSSOTracking } from './utils-4cfd441c.js';
-import { S as Spoiler } from './index-d9e2b1d5.js';
+import { G as Google, F as Facebook } from './Google-24d4c12b.js';
+import { i as isFeaturePolicyUpdateEnabled, a as isFeatureWhatsAppEnabled, b as isFeatureZaloEnabled, c as isFeatureSMSEnabled, d as isSupportProduct } from './utils-3df6bc9c.js';
+export { g as getURLwithSSOTracking } from './utils-3df6bc9c.js';
+import { S as Spoiler } from './index-54361e90.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
+import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { CaretDown } from '@hhgtech/icons/other';
@@ -39,26 +40,25 @@ import throttle from 'lodash/throttle';
 import { getCountryCallingCode } from 'react-phone-number-input';
 import Flags from 'react-phone-number-input/flags';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-2d973164.js';
+import { M as MAPPED_LOCALE } from './utils-6fbc551f.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-0861b084.js';
+import { D as DatePicker } from './index-e983908f.js';
 import '@mantine/carousel';
-import './miscTheme.js';
-import './shared-b07d1eb2.js';
+import './shared-a1a01a37.js';
 import 'uuid';
-import './useUniqueId-38cdf062.js';
+import './useUniqueId-26ee7b08.js';
 import './constantsSite.js';
 import '@emotion/react';
-import './normalizeLink-c3e1dac7.js';
+import './normalizeLink-6c015a5c.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-3adef5f6.js';
+import './index.styles-80f436a0.js';
 import '@mantine/notifications';
-import './translationsContext-18f7b7e0.js';
+import './translationsContext-b5c78f1e.js';
 import 'zustand';
-import './healthTools-86250e0e.js';
+import './healthTools-9b64c78e.js';
 
 // const fakeData = {
 const fetchFeatureFlag = (site) => __awaiter(void 0, void 0, void 0, function* () {
@@ -905,6 +905,13 @@ const registerBySendWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0,
     formData.append('phone_number', phone);
     formData.append('area_code', areaCode);
     formData.append('website_id', websiteId);
+    if (isFeaturePolicyUpdateEnabled) {
+        formData.append('consent_type', JSON.stringify({
+            TC_acceptance: useSSOV2Store.getState().isHaveReadAndAgreePolicy,
+            marketing_opt_in: useSSOV2Store.getState().isGetUpdateFromHHG,
+            source_screen: 'signup_page',
+        }));
+    }
     return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.REGISTER_BY_SEND_OTP, {
         method: 'POST',
         body: formData,
@@ -1010,35 +1017,82 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0,
 const MailIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M15.043 2.56348H6.29297C3.66797 2.56348 1.91797 3.87598 1.91797 6.93848V13.0635C1.91797 16.126 3.66797 17.4385 6.29297 17.4385H15.043C17.668 17.4385 19.418 16.126 19.418 13.0635V6.93848C19.418 3.87598 17.668 2.56348 15.043 2.56348ZM15.4542 7.89223L12.7155 10.0797C12.138 10.5435 11.403 10.771 10.668 10.771C9.93297 10.771 9.18922 10.5435 8.62047 10.0797L5.88172 7.89223C5.60172 7.66473 5.55797 7.24473 5.77672 6.96473C6.00422 6.68473 6.41547 6.63223 6.69547 6.85973L9.43422 9.04723C10.0992 9.58098 11.228 9.58098 11.893 9.04723L14.6317 6.85973C14.9117 6.63223 15.3317 6.67598 15.5505 6.96473C15.778 7.24473 15.7342 7.66473 15.4542 7.89223Z", fill: "#00B16A" })));
 
-const PolicyContent = ({ legalTextType, trackingCategory, trackingAction, }) => {
+const checkboxStyles = (isError) => ({
+    inner: {
+        padding: '3px',
+    },
+    label: {
+        paddingLeft: '8px',
+        position: 'relative',
+        top: '1px',
+    },
+    icon: {
+        width: '40%',
+    },
+    input: {
+        borderColor: theme.colors.neutral400,
+        borderWidth: '1.5px',
+        borderRadius: '3px',
+        width: '14px',
+        height: '14px',
+        ':not(:checked)': {
+            borderColor: isError ? theme.colors.red600 : theme.colors.neutral400,
+        },
+    },
+});
+const PolicyContent = ({ legalTextType, trackingCategory, trackingAction, activeTab, errMsgPolicy, }) => {
     var _a, _b;
     const { t } = useTranslations();
     const { locale } = useSSOState();
+    const { isHaveReadAndAgreePolicy, setIsHaveReadAndAgreePolicy, isGetUpdateFromHHG, setIsGetUpdateFromHHG, } = useSSOV2Store();
+    const isDisplayPolicyContent = !activeTab || activeTab !== 'signup';
+    const isDisplayTwoCheckbox = isFeaturePolicyUpdateEnabled && activeTab === 'signup';
+    const urlPrivacy = `https://${domainLocales[locale]}/static/${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`;
+    const urlTerms = `https://${domainLocales[locale]}/static/${((_b = STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`;
+    const policyRendered = (React__default.createElement(Text, { size: "p5", color: "gray.6" }, t(isFeaturePolicyUpdateEnabled
+        ? 'ssov2.policyText.version2'
+        : legalTextType === 'community'
+            ? 'ssov2.policyText.community'
+            : 'ssov2.policyText', {
+        privacy: (React__default.createElement("a", { href: urlPrivacy, target: "_blank", style: {
+                color: '#262626',
+                textDecoration: 'underline',
+            }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy", rel: "noreferrer" }, t('ssov2.policyText.privacy'))),
+        terms: (React__default.createElement("a", { href: urlTerms, target: "_blank", style: {
+                color: '#262626',
+                textDecoration: 'underline',
+            }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service", rel: "noreferrer" }, t('ssov2.policyText.terms'))),
+    })));
     return (React__default.createElement(Stack, { spacing: 24, sx: (theme) => ({
             marginTop: 56,
             [theme.fn.smallerThan('sm')]: {
                 marginTop: 'auto',
                 paddingTop: 50,
             },
-        }) },
-        React__default.createElement(Spoiler, { maxHeight: 74, showLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('home.seeMore')), hideLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('articlePage.showLess')) },
-            React__default.createElement(Text, { size: "p5", color: "gray.6" }, t(legalTextType === 'community'
-                ? 'ssov2.policyText.community'
-                : 'ssov2.policyText', {
-                privacy: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
-                        color: '#262626',
-                        textDecoration: 'underline',
-                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy", rel: "noreferrer" }, t('ssov2.policyText.privacy'))),
-                terms: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_b = STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
-                        color: '#262626',
-                        textDecoration: 'underline',
-                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service", rel: "noreferrer" }, t('ssov2.policyText.terms'))),
-            })))));
+        }), className: errMsgPolicy ? 'sso-has-error' : undefined, "data-testid": "policy-content" },
+        isDisplayTwoCheckbox && (React__default.createElement(Stack, { spacing: 16 },
+            React__default.createElement(Checkbox, { label: React__default.createElement(Text, { size: "p5", color: "gray.5" },
+                    t('ssov2.policyText.readAndAgree', {
+                        privacy: (React__default.createElement("a", { href: urlPrivacy, target: "_blank", style: {
+                                color: 'inherit',
+                                textDecoration: 'underline',
+                            }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy", rel: "noreferrer" }, t('ssov2.policyText.privacy'))),
+                        terms: (React__default.createElement("a", { href: urlTerms, target: "_blank", style: {
+                                color: 'inherit',
+                                textDecoration: 'underline',
+                            }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service", rel: "noreferrer" }, t('ssov2.policyText.terms'))),
+                    }),
+                    React__default.createElement("span", { style: { color: theme.colors.red600 } }, "*")), checked: isHaveReadAndAgreePolicy, onChange: (event) => {
+                    setIsHaveReadAndAgreePolicy(event.target.checked);
+                }, styles: checkboxStyles(!!errMsgPolicy) }),
+            React__default.createElement(Checkbox, { label: React__default.createElement(Text, { size: "p5", color: "gray.5" }, t('ssov2.policyText.receiveUpdates')), checked: isGetUpdateFromHHG, onChange: (event) => {
+                    setIsGetUpdateFromHHG(event.target.checked);
+                }, styles: checkboxStyles() }))),
+        isDisplayPolicyContent &&
+            (isFeaturePolicyUpdateEnabled ? (policyRendered) : (React__default.createElement(Spoiler, { maxHeight: 74, showLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('home.seeMore')), hideLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('articlePage.showLess')) }, policyRendered)))));
 };
 
-const FirstBFlow = ({ hidden, 
-// activeTab,
-legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTriggerFacebookLogin, onClickEmail, }) => {
+const FirstBFlow = ({ hidden, activeTab, legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTriggerFacebookLogin, onClickEmail, }) => {
     const { t } = useTranslations();
     return (React__default.createElement("div", { style: {
             display: hidden ? 'none' : 'flex',
@@ -1096,7 +1150,7 @@ legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTrigger
                             } }),
                         ' ',
                         React__default.createElement(Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
-        React__default.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
+        React__default.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory, activeTab: activeTab })));
 };
 
 function createCommonjsModule(fn) {
@@ -2556,9 +2610,10 @@ const Zalo = ({ size = 20, useCurrentColor = false }) => {
 const SSOFirstScreen = ({ hidden, config, }) => {
     const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
+    const [errMsgPolicy, setErrMsgPolicy] = React__default.useState('');
     const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext } = useSSOSteps();
-    const { setUserInfo, abTestFlow } = useSSOV2Store();
+    const { setUserInfo, abTestFlow, isHaveReadAndAgreePolicy, setIsHaveReadAndAgreePolicy, setIsGetUpdateFromHHG, } = useSSOV2Store();
     const [activeTab, setActiveTab] = React__default.useState('login');
     const { legalTextType } = config || {};
     const { t } = useTranslations();
@@ -2676,6 +2731,16 @@ const SSOFirstScreen = ({ hidden, config, }) => {
             });
         };
     }, []);
+    const scrollToError = () => {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = document.querySelector('.sso-has-error')) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                behavior: 'smooth',
+                block: 'end',
+                inline: 'nearest',
+            });
+        });
+    };
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         setLoading(true);
@@ -2743,8 +2808,11 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         var _c, _d;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
+        if (!areaCode || !phoneNumber || !phone || !isHaveReadAndAgreePolicy) {
+            !isHaveReadAndAgreePolicy && setErrMsgPolicy('REQUIRED');
+            (!areaCode || !phoneNumber || !phone) &&
+                setErrMsg(t('ssov2.validate.phone.required'));
+            scrollToError();
             return setLoading(false);
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
@@ -2806,8 +2874,10 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         var _e, _f;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
+        if (!areaCode || !phoneNumber || !phone || !isHaveReadAndAgreePolicy) {
+            !isHaveReadAndAgreePolicy && setErrMsgPolicy('REQUIRED');
+            (!areaCode || !phoneNumber || !phone) &&
+                setErrMsg(t('ssov2.validate.phone.required'));
             return setLoading(false);
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
@@ -2945,6 +3015,16 @@ const SSOFirstScreen = ({ hidden, config, }) => {
             });
         }, { scope: 'public_profile,email,user_gender,user_birthday' });
     };
+    useEffect(() => {
+        if (isFeaturePolicyUpdateEnabled) {
+            setIsHaveReadAndAgreePolicy(false);
+            setIsGetUpdateFromHHG(false);
+        }
+        else {
+            setIsHaveReadAndAgreePolicy(true);
+            setIsGetUpdateFromHHG(false);
+        }
+    }, []);
     if (abTestFlow === 'B') {
         return (React__default.createElement(FirstBFlow, { hidden: hidden, activeTab: activeTab, legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory, onTriggerGoogleLogin: onTriggerGoogleLogin, onTriggerFacebookLogin: onTriggerFacebookLogin, onClickEmail: onClickEmail }));
     }
@@ -2969,7 +3049,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                 React__default.createElement("form", { onSubmit: (e) => {
                         e.preventDefault();
                         onClickContinueZalo();
-                    } },
+                    }, "data-testid": "screen-first-form" },
                     React__default.createElement(Input.Wrapper, { error: errMsg },
                         React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone", trackingFn: useCallback((option) => {
                                 if (!(option === null || option === void 0 ? void 0 : option.label))
@@ -3036,7 +3116,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                             } }),
                         ' ',
                         React__default.createElement(Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
-        React__default.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
+        React__default.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory, activeTab: activeTab, errMsgPolicy: errMsgPolicy })));
 };
 
 const initSendUpdateEmailOtp = (email) => __awaiter(void 0, void 0, void 0, function* () {
@@ -3612,7 +3692,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         }
         onClose === null || onClose === void 0 ? void 0 : onClose(true);
     });
-    return (React__default.createElement("form", { style: {
+    const formRendered = (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
             e.preventDefault();
@@ -3656,6 +3736,16 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                         cursor: 'pointer',
                     }, onClick: resetPassword, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Reset Password" }, t('ssov2.password.reset')))),
         React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Sign In" }, t('ssov2.password.signIn'))));
+    if (isFeaturePolicyUpdateEnabled) {
+        return (React__default.createElement("div", { style: {
+                display: hidden ? 'none' : 'flex',
+                flexDirection: 'column',
+                height: '100%',
+            } },
+            formRendered,
+            React__default.createElement(PolicyContent, { legalTextType: "default", trackingAction: trackingAction, trackingCategory: trackingCategory, activeTab: "password" })));
+    }
+    return formRendered;
 };
 
 const SetupLater = ({ style = {} }) => {

package/build/esm/{store-5b85d43f.js → store-fff659b2.js}

@@ -1,8 +1,8 @@
-import { a as __awaiter } from './tslib.es6-00ab44b2.js';
+import { a as __awaiter } from './tslib.es6-ac697999.js';
 import { create } from 'zustand';
-import { g as getUserInfo } from './index-d535cfb0.js';
+import { g as getUserInfo } from './index-62119af7.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { B as BEARER_TOKEN_COOKIE } from './index-8c40504a.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-2f6a858f.js';
 import { getCookie } from './miscCookieHelper.js';
 
 const mergePhone = (phone, areaCode) => {
@@ -102,6 +102,10 @@ const useSSOSteps = create((set) => ({
 }));
 
 const useSSOV2Store = create()((set, get) => ({
+    isHaveReadAndAgreePolicy: false,
+    setIsHaveReadAndAgreePolicy: (isHaveReadAndAgreePolicy) => set({ isHaveReadAndAgreePolicy }),
+    isGetUpdateFromHHG: false,
+    setIsGetUpdateFromHHG: (isGetUpdateFromHHG) => set({ isGetUpdateFromHHG }),
     userInfo: undefined,
     abTestFlow: 'A',
     setABTestFlow(abTestFlow) {

package/build/esm/subot.js

@@ -1,81 +1,81 @@
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
-import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS, C as COMMON_DATE_TRANSLATE_KEY, h as SubotType } from './index-fe4471f4.js';
-import { a as __awaiter, _ as __rest } from './tslib.es6-00ab44b2.js';
-import { b as basePath, G as GA_TOKEN_COOKIE, A as API_DATE_FORMAT, I as ISO_FORMAT, l as SSO_URL } from './index-8c40504a.js';
+import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS, C as COMMON_DATE_TRANSLATE_KEY, h as SubotType } from './index-724975e3.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-ac697999.js';
+import { b as basePath, G as GA_TOKEN_COOKIE, A as API_DATE_FORMAT, I as ISO_FORMAT, l as SSO_URL } from './index-2f6a858f.js';
 import Cookies from 'js-cookie';
 import fd from 'fastdom';
 import fastdomPromised from 'fastdom/extensions/fastdom-promised';
-import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-5e9c89a7.js';
+import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-250fdcf8.js';
 import formatString from 'string-format';
-import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-cb8135e0.js';
-export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-cb8135e0.js';
+import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-dec665cb.js';
+export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-dec665cb.js';
 import dayjs from 'dayjs';
 import { MAP_DOMAIN_BY_LOCALE, domainLocales } from './constantsDomainLocales.js';
 import { Box, Textarea, clsx } from '@mantine/core';
 import classNames from 'classnames';
-import { C as Container$w } from './index-f0dc4a09.js';
-import { L as Loading } from './index-55273f7d.js';
+import { C as Container$w } from './index-c319b7f7.js';
+import { L as Loading } from './index-0c65b11c.js';
 import { motion } from 'framer-motion';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-538169b3.js';
-import { B as Button } from './index-2d25b0f0.js';
+import { M as MediaQueries } from './utils-fc3d898b.js';
+import { B as Button } from './index-85d86bd0.js';
 import { Remarkable } from 'remarkable';
 import { ArrowRight as ArrowRight$1 } from '@hhgtech/icons/other';
 import { useInView } from 'react-intersection-observer';
-import { C as CommonGAssets } from './index-7adf994c.js';
+import { C as CommonGAssets } from './index-e711e815.js';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { d as LEAD_TOKEN_COOKIE } from './constants-367949ba.js';
+import { d as LEAD_TOKEN_COOKIE } from './constants-1c80c37a.js';
 import { v4 } from 'uuid';
-import { T as Text } from './index-0b67696c.js';
+import { T as Text } from './index-c8d80f8c.js';
 import { theme } from './miscTheme.js';
 import { isProduction } from './constantsIsProduction.js';
-import { S as Select } from './index-bd44bcb2.js';
+import { S as Select } from './index-8a202e23.js';
 import '@mantine/dates';
-import './index-3f09210d.js';
-import './index-17c85f76.js';
-import './index.styles-3adef5f6.js';
-import './translationsContext-18f7b7e0.js';
+import './index-c1c0ef29.js';
+import './index-bbbf3f0d.js';
+import './index.styles-80f436a0.js';
+import './translationsContext-b5c78f1e.js';
 import '@mantine/hooks';
-import './index-04505e35.js';
+import './index-4c6f5023.js';
 import isEmpty from 'lodash/isEmpty';
 import { Controller, useForm } from 'react-hook-form';
 import PhoneInputBase, { getCountryCallingCode, isPossiblePhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 import { LoadScript } from '@react-google-maps/api';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-0feee1dd.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-1d8380f8.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { L as LOCALE } from './Locale-dc1237b9.js';
-import { I as InputDate } from './InputDate-9df68382.js';
-import { B as Button$1 } from './index-67429eb2.js';
-import { D as Dropdown } from './index-17533356.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-5b85d43f.js';
-import { g as getURLwithSSOTracking } from './utils-4cfd441c.js';
-import { T as TextArea } from './index-2508cd58.js';
+import { L as LOCALE } from './Locale-698c9c5e.js';
+import { I as InputDate } from './InputDate-54af4f26.js';
+import { B as Button$1 } from './index-8fc735b7.js';
+import { D as Dropdown } from './index-be56db62.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-fff659b2.js';
+import { g as getURLwithSSOTracking } from './utils-3df6bc9c.js';
+import { T as TextArea } from './index-80bd3728.js';
 import StarRatings from 'react-star-ratings';
 import { ArticleCard } from './moleculesArticleCard.js';
-import { T as Text$1 } from './index-546ca9b5.js';
-import { H as Heading } from './index-e348d0b2.js';
+import { T as Text$1 } from './index-be1db312.js';
+import { H as Heading } from './index-d74fd1ef.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './index-dac15b93.js';
+import './index-cafedc9d.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './togetherApiPaths.js';
-import './index-a22d54f1.js';
-import './WhatsApp-6a0c0a12.js';
-import './Spinner-589f30ad.js';
-import './index-09d9e570.js';
-import './shared-b07d1eb2.js';
-import './index-50aea2c8.js';
+import './index-dadeb4c3.js';
+import './WhatsApp-7143b078.js';
+import './Spinner-56f8e23b.js';
+import './index-8c2dd675.js';
+import './shared-a1a01a37.js';
+import './index-f444d8e4.js';
 import '@mantine/carousel';
-import './useUniqueId-38cdf062.js';
+import './useUniqueId-26ee7b08.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
 import 'zustand';
-import './index-d535cfb0.js';
-import './normalizeLink-c3e1dac7.js';
-import './healthTools-86250e0e.js';
+import './index-62119af7.js';
+import './normalizeLink-6c015a5c.js';
+import './healthTools-9b64c78e.js';
 
 // extend fastdom
 const fastdom = fd.extend(fastdomPromised);