@hhgtech/hhg-components
Version:
Hello Health Group common components
946 lines (931 loc) • 248 kB
JavaScript
import { a as __awaiter, _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { createContext, useMemo, useEffect, useState, useCallback, forwardRef } from 'react';
import { getCookie, setCookie, deleteCookie } from './miscCookieHelper.js';
import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-5d405c0d.js';
import { f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, u as updateUserInfo, r as resetPassword } from './index-235eabf2.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-5e947517.js';
import { L as LogoIcon } from './logoIcon-ffd3141f.js';
import { B as Button } from './index-c68a0fa7.js';
import { M as Modal } from './index-5d32e000.js';
import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
import '@mantine/dates';
import './index-90813715.js';
import { C as CommonGAssets } from './index-ebe66e27.js';
import { s as showNotification } from './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import { u as useTranslations } from './index-9d21b711.js';
import '@mantine/hooks';
import './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { L as LOCALE } from './Locale-f270bd9d.js';
import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, b as isPhoneNotVerifedYet, c as isLoginWithPhoneNotVerifedYet, d as isFlowFinishedSetup, r as redirect } from './store-994a3f4d.js';
export { u as useSSOV2Store } from './store-994a3f4d.js';
import { I as ImageWrap, u as useScreenSize } from './useScreenSize-981e5b51.js';
import { G as Google, F as Facebook } from './Google-873ea6a4.js';
import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-757f12af.js';
export { g as getURLwithSSOTracking } from './utils-757f12af.js';
import { S as Spoiler } from './index-c52eb102.js';
import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
import styled from '@emotion/styled';
import cn from 'classnames';
import { CaretDown } from '@hhgtech/icons/other';
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
import Flags from 'react-phone-number-input/flags';
import { Drawer } from 'vaul';
import { M as MAPPED_LOCALE } from './utils-9b07a6ba.js';
import { useForm, yupResolver } from '@mantine/form';
import * as yup from 'yup';
import dayjs from 'dayjs';
import { D as DatePicker } from './index-afb403a9.js';
import '@mantine/carousel';
import './miscTheme.js';
import './useUniqueId-4305c9aa.js';
import './constantsSite.js';
import './normalizeLink-593b397a.js';
import 'date-fns/locale';
import './constantsRiskScreener.js';
import './index.styles-770020ac.js';
import '@mantine/notifications';
import './translationsContext-3a9e3453.js';
import 'zustand';
import './healthTools-84f2ddc1.js';
// const fakeData = {
const fetchFeatureFlag = (site) => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b;
let data = null;
try {
const baseUrl = isProduction
? 'https://mobile-be.hellohealthgroup.com'
: 'https://staging-mobile-be.hellohealthgroup.com';
const response = yield fetch(`${baseUrl}/api/feature-flag/v1/list?site=${site}`);
data = yield response.json();
}
catch (err) {
data = null;
}
return (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.flags) === null || _b === void 0 ? void 0 : _b.find((o) => o.name === 'SSO_V2_flag');
});
const SSOStateContext = createContext({
locale: LOCALE.Vietnam,
onClose: () => false,
setTracking: () => false,
});
const SSOStateProvider = ({ children, locale = LOCALE.Vietnam, onClose, }) => {
const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default.useState(false);
const [tracking, setTracking] = React__default.useState();
return (React__default.createElement(SSOStateContext.Provider, { value: {
locale,
onClose,
openCollectInfoPopup,
setOpenCollectInfoPopup,
tracking,
setTracking,
} }, children));
};
const useSSOState = () => {
return React__default.useContext(SSOStateContext);
};
const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
const { t } = useTranslations();
const { tracking } = useSSOState();
return (React__default.createElement(Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: ZINDEX_SSO + 2, styles: (theme) => ({
body: {
padding: '32px 24px',
position: 'relative',
background: 'linear-gradient(180deg, #91CAFF 0%, #CFE8FF 100px, #FFFFFF 200px)',
[theme.fn.smallerThan('sm')]: {
height: '100%',
},
'[data-event-category]': {
pointerEvents: 'initial !important',
'> *': {
pointerEvents: 'none',
},
},
},
content: {
[theme.fn.largerThan('sm')]: {
transform: 'translateY(90px)',
},
[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: 'unset',
// transform: `translateY(${Math.round(mobileDragOffset)}px)`,
display: 'block',
transition: 'transform 70ms',
},
},
}) },
React__default.createElement(BackgroundHeader, null),
React__default.createElement(Stack, { pos: "relative", mt: 150, spacing: 8, style: {
zIndex: 1,
textAlign: 'center',
} },
React__default.createElement(Text, { size: "h4" }, t('ssov2.popup.close.title')),
React__default.createElement(Text, { size: "p3" }, t('ssov2.popup.close.description'))),
React__default.createElement(Stack, { mt: 32, spacing: 8, align: "center" },
React__default.createElement(Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Cancel Exit" },
React__default.createElement(Text, { size: "s2", weight: "regular", color: "inherit" }, t('ssov2.button.cancel'))),
React__default.createElement(Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Want to exit" },
React__default.createElement(Text, { size: "p2", weight: "regular", color: "gray.6" }, t('ssov2.button.exitNow'))))));
};
const BackgroundHeader = () => (React__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.createElement("circle", { opacity: ".2", cx: "146", cy: "109", r: "146", fill: "url(#paint0_linear_908_35161)" }),
React__default.createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_35161)" }),
React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_35161)" }),
React__default.createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_35161)" }),
React__default.createElement("path", { d: "m148.68 89.129-13.51-2.087a4.552 4.552 0 0 0-5.17 4.454v35.009a4.55 4.55 0 0 0 1.586 3.395 4.56 4.56 0 0 0 3.594 1.059l13.5-2.087a4.474 4.474 0 0 0 3.82-4.452V93.58a4.48 4.48 0 0 0-3.82-4.451", fill: "#2D87F3" }),
React__default.createElement("path", { d: "M164.342 108.002a1.43 1.43 0 0 1-.557 1.132l-4.714 3.643a1.07 1.07 0 0 1-1.563-.281 1.1 1.1 0 0 1-.161-.566v-1.224l-5.085-.025a.54.54 0 0 1-.535-.539v-4.322a.54.54 0 0 1 .538-.538l5.088.004-.009-1.214a1.08 1.08 0 0 1 .598-.962 1.07 1.07 0 0 1 1.127.113l4.716 3.648a1.42 1.42 0 0 1 .557 1.131", fill: "#FF6F4D" }),
React__default.createElement("path", { d: "M164.342 108.002a1.43 1.43 0 0 1-.557 1.132l-4.714 3.643a1.07 1.07 0 0 1-1.563-.281 1.1 1.1 0 0 1-.161-.566v-1.224l-5.085-.025a.54.54 0 0 1-.535-.539v-4.322a.54.54 0 0 1 .538-.538l5.088.004-.009-1.214a1.08 1.08 0 0 1 .598-.962 1.07 1.07 0 0 1 1.127.113l4.716 3.648a1.42 1.42 0 0 1 .557 1.131m-18.248-2.179v4.324a.54.54 0 0 0 .539.539h3.017a.54.54 0 0 0 .538-.539v-4.324a.54.54 0 0 0-.538-.539h-3.017a.54.54 0 0 0-.539.539m-1.616 4.341a.54.54 0 0 1-.539.539h-.977a1.463 1.463 0 0 1-1.462-1.462v-2.478a1.463 1.463 0 0 1 1.462-1.463h.977a.54.54 0 0 1 .539.539z", fill: "#FF6F4D" }),
React__default.createElement("defs", null,
React__default.createElement("linearGradient", { id: "paint0_linear_908_35161", x1: "147.5", y1: "141", x2: "36.5", y2: "30", gradientUnits: "userSpaceOnUse" },
React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
React__default.createElement("stop", { offset: "1", stopColor: "#fff" })),
React__default.createElement("linearGradient", { id: "paint1_linear_908_35161", x1: "218.376", y1: "63.134", x2: "61", y2: "109", gradientUnits: "userSpaceOnUse" },
React__default.createElement("stop", { stopColor: "#fff" }),
React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
React__default.createElement("linearGradient", { id: "paint2_linear_908_35161", x1: "146.5", y1: "61", x2: "146.5", y2: "156", gradientUnits: "userSpaceOnUse" },
React__default.createElement("stop", { stopColor: "#fff", stopOpacity: ".6" }),
React__default.createElement("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })),
React__default.createElement("linearGradient", { id: "paint3_linear_908_35161", x1: "178.979", y1: "98.35", x2: "108.338", y2: "98.35", gradientUnits: "userSpaceOnUse" },
React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
React__default.createElement("stop", { offset: "1", stopColor: "#fff" })))));
const isPhoneVerifedAlready = (userInfo, flowData) => {
var _a;
if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
return (_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_phone_verified;
}
return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
};
const isSetupFullInfoAlready = (userInfo, flowData) => {
var _a, _b, _c;
if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
return (((_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_name) &&
((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_gender) &&
((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_birthday));
}
const hasName = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.name);
const hasGender = typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.gender) === 'number';
const hasBirthday = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.birthday);
return hasName && hasGender && hasBirthday;
};
const isExistUpdateEmailStep = (steps) => {
return steps.find((s) => s.type === SSOStepTypeType.UPDATE_EMAIL);
};
const isVerifyPhoneInTheSignUp = (steps, flowData) => {
var _a;
return ((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === SSOStepTypeType.FIRST && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup';
};
const parseEmailFromToken = (token) => {
try {
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(atob(base64)
.split('')
.map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
})
.join(''));
const payload = JSON.parse(jsonPayload);
return payload.email;
}
catch (err) {
return '';
}
};
const isSocialFlowFn = (flowData) => {
return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'google' || (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'facebook';
};
const isPhoneFlowFn = (flowData) => {
return ((flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'sms' ||
(flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'zalo' ||
(flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'phone' ||
(flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'whatsapp');
};
const isEmailFlowFn = (flowData) => {
return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'email';
};
const isResetPasswordFlowFn = (steps) => {
// First -> Passsword -> Password Forgot Setup
const passwordStep = steps.findIndex((s) => s.type === SSOStepTypeType.PASSWORD);
const passwordForgotStep = steps.findIndex((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_SETUP);
return (passwordStep > 0 &&
passwordForgotStep > 0 &&
passwordForgotStep > passwordStep);
};
const isResetPasswordViePhoneFlowFn = (steps) => {
// First -> Passsword -> Password Forgot Phone
const passwordStep = steps.findIndex((s) => s.type === SSOStepTypeType.PASSWORD);
const passwordForgotStep = steps.findIndex((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_PHONE);
return (passwordStep > 0 &&
passwordForgotStep > 0 &&
passwordForgotStep > passwordStep);
};
const isDisplayProgressBarFn = (flowData, step) => {
const showProgressBar = (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.SETUP_FULL ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.VERIFY_PHONE ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.PASSWORD ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_PHONE ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_SETUP ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.EMAIL ||
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.UPDATE_EMAIL;
const isWhiteListFlow = isSocialFlowFn(flowData) ||
isPhoneFlowFn(flowData) ||
isEmailFlowFn(flowData);
return showProgressBar && isWhiteListFlow;
};
const getCurrentStepNumber = (flowData, { steps, currentStepIndex, abTestFlow, }, userInfo) => {
var _a, _b, _c;
const step = steps[currentStepIndex];
const isSocialFlow = isSocialFlowFn(flowData);
const isPhoneFlow = isPhoneFlowFn(flowData);
const isEmailFlow = isEmailFlowFn(flowData);
/** Social (Google, Facebook): FIRST => VERIFY_PHONE | OTP => STEP_FULL */
if (isSocialFlow) {
// Ignore Phone in Community if in update email step
const isCommunityUpdateEmail = useSSOV2Store().setupSource === 'community' &&
((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === SSOStepTypeType.UPDATE_EMAIL;
const arrSteps = isCommunityUpdateEmail
? [
SSOStepTypeType.UPDATE_EMAIL,
SSOStepTypeType.OTP,
!userInfo || !isUserFinishedSetup(userInfo)
? SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean)
: [
!isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B'
? [SSOStepTypeType.VERIFY_PHONE, SSOStepTypeType.OTP]
: undefined,
isExistUpdateEmailStep(steps)
? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
? SSOStepTypeType.OTP
: SSOStepTypeType.UPDATE_EMAIL
: undefined,
!userInfo || !isUserFinishedSetup(userInfo)
? SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.UPDATE_EMAIL
? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
: arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
];
}
if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup') {
const arrSteps = [
!isPhoneVerifedAlready(userInfo, flowData)
? SSOStepTypeType.OTP
: undefined,
!((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass)
? SSOStepTypeType.FORGOT_PASSWORD_SETUP
: undefined,
!isSetupFullInfoAlready(userInfo, flowData)
? SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean);
return [
arrSteps.length,
arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
];
}
if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'login') {
const isForgotPasswordPhone = steps.find((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_PHONE);
const arrSteps = [
SSOStepTypeType.PASSWORD,
!isPhoneVerifedAlready(userInfo, flowData) || isForgotPasswordPhone
? [SSOStepTypeType.FORGOT_PASSWORD_PHONE, SSOStepTypeType.OTP]
: undefined,
isForgotPasswordPhone ? SSOStepTypeType.FORGOT_PASSWORD_SETUP : undefined,
isExistUpdateEmailStep(steps)
? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
? SSOStepTypeType.OTP
: SSOStepTypeType.UPDATE_EMAIL
: undefined,
!isSetupFullInfoAlready(userInfo, flowData)
? SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.UPDATE_EMAIL
? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
: arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
];
}
if (isEmailFlow) {
const hasPhoneStepCase1 = !isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B';
const hasPhoneStepCase2 = !isPhoneVerifedAlready(userInfo, flowData) &&
useSSOV2Store.getState().source === 'care_onboarding';
const hasPasswordStep = !((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_pass);
const hasPhoneStep = hasPhoneStepCase1 || hasPhoneStepCase2;
const hasSetupFullStep = !isSetupFullInfoAlready(userInfo, flowData);
const isForgotPasswordSetup = steps.find((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_SETUP);
if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
return [];
const arrSteps = [
(step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
? SSOStepTypeType.OTP
: SSOStepTypeType.EMAIL,
hasPasswordStep || isForgotPasswordSetup
? SSOStepTypeType.FORGOT_PASSWORD_SETUP
: SSOStepTypeType.PASSWORD,
hasPhoneStep
? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
? SSOStepTypeType.OTP
: SSOStepTypeType.VERIFY_PHONE
: undefined,
hasSetupFullStep ? SSOStepTypeType.SETUP_FULL : undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.VERIFY_PHONE
? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
: arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
];
}
return [];
};
const ProgressBar = () => {
// const initUserInfo = useRef<UserInfo | undefined | null>()
const { steps, currentStepIndex } = useSSOSteps();
const { flowData, userInfo, abTestFlow } = useSSOV2Store();
/** No need update state IF userInfo is changed */
const initUserInfo = useMemo(() => userInfo, [userInfo]);
const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex, abTestFlow }, initUserInfo);
if (!activeStepNumber || totalStepNumber === 1)
return null;
return (React__default.createElement(Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
const currentStepNumber = idx + 1;
return (React__default.createElement(Box, { key: currentStepNumber, style: {
width: 'auto',
height: 2,
flex: 1,
borderRadius: 4,
backgroundColor: currentStepNumber <= activeStepNumber ? '#00B16A' : '#D2D6DC',
} }));
})));
};
const SSOPopupWrapper = ({ children, opened, onClose, }) => {
var _a;
const { steps, goBack, currentStepIndex } = useSSOSteps();
const { flowData } = useSSOV2Store();
const { locale, tracking } = useSSOState();
const currentStep = steps[currentStepIndex];
const showProgressBar = isDisplayProgressBarFn(flowData, currentStep);
const showBack = (steps.length > 1 && !showProgressBar) ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.OTP ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.PASSWORD ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.EMAIL;
const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FIRST;
const showLogo = (steps.length === 1 || showProgressBar) && !showBack;
const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
const [closeConfirmOpen, setCloseConfirmOpen] = React__default.useState(false);
const onCloseClick = () => {
setCloseConfirmOpen(true);
};
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
body: {
display: 'flex',
flexDirection: 'column',
gap: 16,
padding: '32px 24px',
position: 'relative',
background: 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 150px)',
overflow: 'auto',
[theme.fn.smallerThan('sm')]: {
height: '100%',
},
'[data-event-category]': {
pointerEvents: 'initial !important',
'> *': {
pointerEvents: 'none',
},
},
},
content: {
[theme.fn.smallerThan('sm')]: {
width: '100%',
height: '100%',
borderRadius: 0,
maxWidth: '100%',
maxHeight: '100%',
},
},
inner: {
[theme.fn.smallerThan('sm')]: {
padding: 0,
left: 0,
right: 0,
display: 'block',
},
},
}), withCloseButton: false, zIndex: ZINDEX_SSO, overlayProps: {
'data-event-label': 'Focus out',
'data-event-category': tracking === null || tracking === void 0 ? void 0 : tracking.category,
'data-event-action': tracking === null || tracking === void 0 ? void 0 : tracking.action,
} },
React__default.createElement("div", { style: {
height: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
} },
showBack && (React__default.createElement(Button, { variant: "white", style: {
width: 40,
height: 40,
padding: 8,
background: 'white',
borderRadius: '100%',
}, onClick: goBack, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Back" },
React__default.createElement(ChevronLeft, null))),
showLogo && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
React__default.createElement(LogoIcon, { type: logoType, height: 32, width: 'unset' }),
locale === LOCALE.Indonesia && (React__default.createElement(ImageWrap, { alt: "", src: CommonGAssets.getAssetPath('sehat-badge.png'), style: {
width: 56,
height: 23,
} })))),
showClose && (React__default.createElement(Button, { variant: "white", style: {
width: 40,
height: 40,
padding: 8,
background: 'white',
borderRadius: '100%',
}, onClick: onCloseClick, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Exit" },
React__default.createElement(Close, null)))),
showProgressBar && React__default.createElement(ProgressBar, null),
React__default.createElement("div", { style: {
flex: 1,
} }, children)),
React__default.createElement(ConfirmClosePopup, { opened: closeConfirmOpen, onCancel: () => setCloseConfirmOpen(false), onClose: () => {
setCloseConfirmOpen(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
} })));
};
const loginByEmailPassword = (email, password) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('password', password);
return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.LOGIN_BY_PASSWORD, {
method: 'POST',
body: formData,
headers: {
Authorization: `Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe`,
},
});
});
const registerBySendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('website_id', websiteId);
return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const resendEmailOTP = (email) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyByEmailOTP = (email, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('code', otpCode);
return fetchSSOV2Api(SSO_V2_PATHS.EMAIL.VERIFY_BY_OTP, {
method: 'POST',
body: formData,
});
});
// 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');
}
const formattedCode = numberCode === null || numberCode === void 0 ? void 0 : numberCode.padStart(3, '0');
return t(`ssov2.error.api.${formattedCode}`) || t('ssov2.error.api');
};
const SSOEmailScreen = ({ hidden, }) => {
const { t } = useTranslations();
const [loading, setLoading] = React__default.useState(false);
const [errMsg, setErrMsg] = React__default.useState('');
const { flowData, abTestFlow } = useSSOV2Store();
const trackingCategory = flowData.flow === 'signup'
? `SSO - Sign Up via Email_Phone_Adoption_Test_${abTestFlow}`
: `SSO - Sign In via Email_Phone_Adoption_Test_${abTestFlow}`;
const trackingAction = `Continue With Email`;
const { setTracking } = useSSOState();
useEffect(() => {
if (!hidden) {
setErrMsg('');
setTracking({
category: trackingCategory,
action: trackingAction,
});
}
}, [hidden]);
const { addStep, goNext } = useSSOSteps();
return (React__default.createElement("form", { style: {
display: hidden ? 'none' : 'block',
}, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b;
e.preventDefault();
setLoading(true);
try {
const email = e.currentTarget.email.value;
const existRes = yield checkUserExist({ email });
if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
if ((_a = existRes._data) === null || _a === void 0 ? void 0 : _a.is_pass) {
useSSOV2Store.setState({
flowData: {
method: 'email',
flow: 'login',
metaData: existRes._data,
},
});
// go to password screen
addStep({
type: SSOStepTypeType.PASSWORD,
config: {
email,
},
});
goNext();
}
else {
let res;
useSSOV2Store.setState({
flowData: {
method: 'email',
flow: 'signup',
metaData: existRes._data,
},
});
if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
res = yield registerBySendEmailOTP(email);
}
else {
res = yield resendEmailOTP(email);
}
if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
return setLoading(false);
}
// go to register screen
addStep({
type: SSOStepTypeType.OTP,
config: {
email,
otpType: 'email',
afterAction: 'forgot',
},
});
goNext();
}
}
else {
setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
}
}
catch (e) {
console.error(e);
setErrMsg(getErrorTextFromCode(t, ''));
}
setLoading(false);
}) },
React__default.createElement(Stack, { spacing: 8 },
React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
React__default.createElement(Text, { size: "p4" }, t('ssov2.email.description'))),
React__default.createElement(Input, { name: "email", placeholder: t('onboarding.formEmail.yourEmail'), error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg(''), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.email.button'))));
};
const splitPhone = (phone) => {
if (!phone)
return { areaCode: undefined, phoneNumber: undefined };
const parsedPhone = parsePhoneNumber(phone);
return {
areaCode: parsedPhone.countryCallingCode
? '+' + parsedPhone.countryCallingCode
: '',
phoneNumber: parsedPhone.nationalNumber || '',
};
};
// "phone_number":"906911910",
// "password":"Kenny2103!"
const loginByPhonePassword = (phone, password) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
let { phoneNumber } = splitPhone(phone);
phoneNumber = phoneNumber.startsWith('0')
? phoneNumber.substring(1)
: phoneNumber;
formData.append('phone_number', phoneNumber);
formData.append('password', password);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.LOGIN_BY_PASSWORD, {
method: 'POST',
body: formData,
headers: {
Authorization: 'Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe',
},
}, true);
});
// "phone_number": "906911910",
// "area_code":"+84",
const registerBySendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
formData.append('website_id', websiteId);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const resendPhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "otp_code":"212616",
// "phone_number": "906911910",
// "area_code":"+84"
const verifyByPhoneOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
formData.append('otp_code', otpCode);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.VERIFY_BY_OTP, {
method: 'POST',
body: formData,
});
});
const resendUpdatePhoneOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.UPDATE_PHONE_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyUpdatePhoneOTP = (areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('otp_code', otpCode);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.PHONE.UPDATE_PHONE_VERIFY_OTP, {
method: 'POST',
body: formData,
});
});
const loginBySocial = (token, social) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('token', token);
formData.append('provider', social);
formData.append('website_id', websiteId);
return fetchSSOV2Api(SSO_V2_PATHS.LOGIN_BY_SOCIAL, {
method: 'POST',
body: formData,
headers: {
Authorization: `Basic aGhnOjEyMzQ1Njc4OUBAIyQhQCQjJSRe`,
},
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const registerBySendWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
formData.append('website_id', websiteId);
return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const resendWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.SEND_OTP, {
method: 'POST',
body: formData,
});
});
const resendUpdatePhoneWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyUpdatePhoneWhatsAppOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('otp_code', otpCode);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_VERIFY_OTP, {
method: 'POST',
body: formData,
});
});
const verifyByWhatsAppOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('otp_code', otpCode);
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.VERIFY_BY_OTP, {
method: 'POST',
body: formData,
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const registerBySendZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
formData.append('website_id', websiteId);
return fetchSSOV2Api(SSO_V2_PATHS.ZALO.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const resendZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.ZALO.SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "otp_code":"212616",
// "phone_number": "906911910",
// "area_code":"+84"
const verifyByZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('otp_code', otpCode);
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.ZALO.VERIFY_BY_OTP, {
method: 'POST',
body: formData,
});
});
const resendUpdatePhoneZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.ZALO.UPDATE_PHONE_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('otp_code', otpCode);
formData.append('area_code', areaCode);
return fetchSSOV2Api(SSO_V2_PATHS.ZALO.UPDATE_PHONE_VERIFY_OTP, {
method: 'POST',
body: formData,
});
});
const MailIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "21", height: "20", viewBox: "0 0 21 20", fill: