@hhgtech/hhg-components
Version:
Hello Health Group common components
914 lines (895 loc) • 277 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var miscCookieHelper = require('./miscCookieHelper.js');
var index$8 = require('./index-3424862e.js');
var index$7 = require('./index-83c3a6b2.js');
var constantsIsProduction = require('./constantsIsProduction.js');
var arrow = require('@hhgtech/icons/arrow');
var core$1 = require('@hhgtech/icons/core');
var index$2 = require('./index-ec32050c.js');
var logoIcon = require('./logoIcon-87e19fb4.js');
var index$4 = require('./index-515469d0.js');
var index$1 = require('./index-47ec78f0.js');
var core = require('@mantine/core');
require('@mantine/dates');
require('./index-0a047edc.js');
var index$6 = require('./index-9301f298.js');
var index$a = require('./index-4d838fd2.js');
var index$3 = require('./index-d4ad3f79.js');
require('./index-04864074.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var Locale = require('./Locale-eb0da538.js');
var store = require('./store-bc8408a1.js');
var index$5 = require('./index-6b44ec2b.js');
var ReCAPTCHA = require('react-google-recaptcha');
var Google = require('./Google-bf77a89b.js');
var utils = require('./utils-46a3542e.js');
var index$9 = require('./index-ac227da3.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var styled = require('@emotion/styled');
var classNames = require('classnames');
var other = require('@hhgtech/icons/other');
var debounce = require('lodash/debounce');
var throttle = require('lodash/throttle');
var PhoneInputBase = require('react-phone-number-input');
var Flags = require('react-phone-number-input/flags');
var vaul = require('vaul');
var utils$1 = require('./utils-b5f30c40.js');
var form = require('@mantine/form');
var yup = require('yup');
var dayjs = require('dayjs');
var index$b = require('./index-2558f624.js');
require('@mantine/carousel');
require('./miscTheme.js');
require('./shared-201fc49c.js');
require('uuid');
require('./useUniqueId-88b26792.js');
require('./constantsSite.js');
require('@emotion/react');
require('./normalizeLink-90691beb.js');
require('date-fns/locale');
require('./constantsRiskScreener.js');
require('./index.styles-5f6a7ac0.js');
require('@mantine/notifications');
require('./translationsContext-4698cb34.js');
require('zustand');
require('./healthTools-a695152c.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var ReCAPTCHA__default = /*#__PURE__*/_interopDefault(ReCAPTCHA);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var Flags__default = /*#__PURE__*/_interopDefault(Flags);
var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
// const fakeData = {
const fetchFeatureFlag = (site) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
var _a, _b;
let data = null;
try {
const baseUrl = constantsIsProduction.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 = React.createContext({
locale: Locale.LOCALE.Vietnam,
onClose: () => false,
setTracking: () => false,
});
const SSOStateProvider = ({ children, locale = Locale.LOCALE.Vietnam, onClose, }) => {
const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default["default"].useState(false);
const [tracking, setTracking] = React__default["default"].useState();
return (React__default["default"].createElement(SSOStateContext.Provider, { value: {
locale,
onClose,
openCollectInfoPopup,
setOpenCollectInfoPopup,
tracking,
setTracking,
} }, children));
};
const useSSOState = () => {
return React__default["default"].useContext(SSOStateContext);
};
const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
const { t } = index.useTranslations();
const { tracking } = useSSOState();
return (React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: index$2.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["default"].createElement(BackgroundHeader, null),
React__default["default"].createElement(core.Stack, { pos: "relative", mt: 150, spacing: 8, style: {
zIndex: 1,
textAlign: 'center',
} },
React__default["default"].createElement(index$3.Text, { size: "h4" }, t('ssov2.popup.close.title')),
React__default["default"].createElement(index$3.Text, { size: "p3" }, t('ssov2.popup.close.description'))),
React__default["default"].createElement(core.Stack, { mt: 32, spacing: 8, align: "center" },
React__default["default"].createElement(index$4.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["default"].createElement(index$3.Text, { size: "s2", weight: "regular", color: "inherit" }, t('ssov2.button.cancel'))),
React__default["default"].createElement(index$4.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["default"].createElement(index$3.Text, { size: "p2", weight: "regular", color: "gray.6" }, t('ssov2.button.exitNow'))))));
};
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',
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_35161)" }),
React__default["default"].createElement("circle", { opacity: ".3", cx: "146", cy: "109", r: "85", fill: "url(#paint1_linear_908_35161)" }),
React__default["default"].createElement("circle", { cx: "146.5", cy: "108.5", r: "47.5", fill: "url(#paint2_linear_908_35161)" }),
React__default["default"].createElement("circle", { cx: "146.5", cy: "108.5", r: "47", stroke: "url(#paint3_linear_908_35161)" }),
React__default["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["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["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["default"].createElement("defs", null,
React__default["default"].createElement("linearGradient", { id: "paint0_linear_908_35161", 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_35161", 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_35161", 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_35161", 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 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 === store.SSOStepTypeType.UPDATE_EMAIL);
};
const isVerifyPhoneInTheSignUp = (steps, flowData) => {
var _a;
return ((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === store.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 === store.SSOStepTypeType.PASSWORD);
const passwordForgotStep = steps.findIndex((s) => s.type === store.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 === store.SSOStepTypeType.PASSWORD);
const passwordForgotStep = steps.findIndex((s) => s.type === store.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) === store.SSOStepTypeType.OTP ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.SETUP_FULL ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.VERIFY_PHONE ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.PASSWORD ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.FORGOT_PASSWORD_PHONE ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.FORGOT_PASSWORD_SETUP ||
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.EMAIL ||
(step === null || step === void 0 ? void 0 : step.type) === store.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 = store.useSSOV2Store().setupSource === 'community' &&
((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === store.SSOStepTypeType.UPDATE_EMAIL;
const arrSteps = isCommunityUpdateEmail
? [
store.SSOStepTypeType.UPDATE_EMAIL,
store.SSOStepTypeType.OTP,
!userInfo || !store.isUserFinishedSetup(userInfo)
? store.SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean)
: [
!isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B'
? [store.SSOStepTypeType.VERIFY_PHONE, store.SSOStepTypeType.OTP]
: undefined,
isExistUpdateEmailStep(steps)
? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
? store.SSOStepTypeType.OTP
: store.SSOStepTypeType.UPDATE_EMAIL
: undefined,
!userInfo || !store.isUserFinishedSetup(userInfo)
? store.SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.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)
? store.SSOStepTypeType.OTP
: undefined,
!((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass)
? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP
: undefined,
!isSetupFullInfoAlready(userInfo, flowData)
? store.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 === store.SSOStepTypeType.FORGOT_PASSWORD_PHONE);
const arrSteps = [
store.SSOStepTypeType.PASSWORD,
!isPhoneVerifedAlready(userInfo, flowData) || isForgotPasswordPhone
? [store.SSOStepTypeType.FORGOT_PASSWORD_PHONE, store.SSOStepTypeType.OTP]
: undefined,
isForgotPasswordPhone ? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP : undefined,
isExistUpdateEmailStep(steps)
? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
? store.SSOStepTypeType.OTP
: store.SSOStepTypeType.UPDATE_EMAIL
: undefined,
!isSetupFullInfoAlready(userInfo, flowData)
? store.SSOStepTypeType.SETUP_FULL
: undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.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) &&
store.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 === store.SSOStepTypeType.FORGOT_PASSWORD_SETUP);
if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
return [];
const arrSteps = [
(step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
? store.SSOStepTypeType.OTP
: store.SSOStepTypeType.EMAIL,
hasPasswordStep || isForgotPasswordSetup
? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP
: store.SSOStepTypeType.PASSWORD,
hasPhoneStep
? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
? store.SSOStepTypeType.OTP
: store.SSOStepTypeType.VERIFY_PHONE
: undefined,
hasSetupFullStep ? store.SSOStepTypeType.SETUP_FULL : undefined,
]
.flat()
.filter(Boolean);
const previousStep = steps[currentStepIndex - 1];
return [
arrSteps.length,
(previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.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 } = store.useSSOSteps();
const { flowData, userInfo, abTestFlow } = store.useSSOV2Store();
/** No need update state IF userInfo is changed */
const initUserInfo = React.useMemo(() => userInfo, [userInfo]);
const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex, abTestFlow }, initUserInfo);
if (!activeStepNumber || totalStepNumber === 1)
return null;
return (React__default["default"].createElement(core.Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
const currentStepNumber = idx + 1;
return (React__default["default"].createElement(core.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 } = store.useSSOSteps();
const { flowData } = store.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) === store.SSOStepTypeType.OTP ||
((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_OTP && steps.length > 1) ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.PASSWORD ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.EMAIL;
const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.FIRST;
const showLogo = (steps.length === 1 || showProgressBar) && !showBack;
const logoType = (_a = index$2.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
const [closeConfirmOpen, setCloseConfirmOpen] = React__default["default"].useState(false);
const onCloseClick = () => {
setCloseConfirmOpen(true);
};
const isWhatsAppPhoneVerify = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_PHONE_VERIFY;
const isWhatsAppLoginFlow = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_PHONE_VERIFY ||
(currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_OTP;
const onModalRequestClose = () => {
if (isWhatsAppLoginFlow)
return;
onCloseClick();
};
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: onModalRequestClose, closeOnClickOutside: !isWhatsAppLoginFlow, closeOnEscape: !isWhatsAppLoginFlow, styles: (theme) => ({
body: {
display: 'flex',
flexDirection: 'column',
gap: isWhatsAppPhoneVerify ? 24 : 16,
padding: '32px 24px',
position: 'relative',
background: isWhatsAppPhoneVerify
? 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 70px)'
: '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: index$2.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["default"].createElement("div", { style: {
height: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
} },
showBack && (React__default["default"].createElement(index$4.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["default"].createElement(arrow.ChevronLeft, null))),
showLogo && (React__default["default"].createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' }),
locale === Locale.LOCALE.Indonesia && (React__default["default"].createElement(index$5.ImageWrap, { alt: "", src: index$6.CommonGAssets.getAssetPath('sehat-badge.png'), style: {
width: 56,
height: 23,
} })))),
showClose && (React__default["default"].createElement(index$4.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["default"].createElement(core$1.Close, null)))),
showProgressBar && React__default["default"].createElement(ProgressBar, null),
React__default["default"].createElement("div", { style: {
flex: 1,
} }, children)),
React__default["default"].createElement(ConfirmClosePopup, { opened: closeConfirmOpen, onCancel: () => setCloseConfirmOpen(false), onClose: () => {
setCloseConfirmOpen(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
} })));
};
const loginByEmailPassword = (email, password) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('password', password);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.EMAIL.LOGIN_BY_PASSWORD, {
method: 'POST',
body: formData,
});
});
const registerBySendEmailOTP = (email) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('website_id', index$7.websiteId);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.EMAIL.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const resendEmailOTP = (email) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.EMAIL.SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyByEmailOTP = (email, otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('email', email);
formData.append('code', otpCode);
return index$7.fetchSSOV2Api(index$7.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 } = index.useTranslations();
const [loading, setLoading] = React__default["default"].useState(false);
const [errMsg, setErrMsg] = React__default["default"].useState('');
const { flowData, abTestFlow } = store.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();
React.useEffect(() => {
if (!hidden) {
setErrMsg('');
setTracking({
category: trackingCategory,
action: trackingAction,
});
}
}, [hidden]);
const { addStep, goNext } = 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();
setLoading(true);
try {
const email = e.currentTarget.email.value;
const existRes = yield index$7.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) {
store.useSSOV2Store.setState({
flowData: {
method: 'email',
flow: 'login',
metaData: existRes._data,
},
});
// go to password screen
addStep({
type: store.SSOStepTypeType.PASSWORD,
config: {
email,
},
});
goNext();
}
else {
let res;
store.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: store.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["default"].createElement(core.Stack, { spacing: 8 },
React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
React__default["default"].createElement(index$3.Text, { size: "p4" }, t('ssov2.email.description'))),
React__default["default"].createElement(index$8.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["default"].createElement(index$4.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 GOOGLE_RECAPTCHA_KEY = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_KEY;
const GRecaptchaHandler = (props) => {
const { recaptchaHandlerRef } = props;
const recaptchaRef = React.useRef();
React.useImperativeHandle(recaptchaHandlerRef, () => ({
getToken: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const recaptcha = recaptchaRef.current;
if (!recaptcha)
return null;
try {
const token = yield recaptcha.executeAsync();
recaptcha.reset();
return token;
}
catch (_a) {
return null;
}
}),
}));
React.useEffect(() => {
if (!GOOGLE_RECAPTCHA_KEY) {
console.warn("[ERROR] Google Recaptcha key isn't available");
}
}, []);
const handleCaptchaError = () => {
console.warn('[ERROR] Recaptcha');
};
if (!GOOGLE_RECAPTCHA_KEY)
return null;
return (React__default["default"].createElement(index$8.ErrorBoundary, null,
React__default["default"].createElement(ReCAPTCHA__default["default"], { ref: recaptchaRef, size: "invisible", sitekey: GOOGLE_RECAPTCHA_KEY, onErrored: handleCaptchaError })));
};
const useGRecaptchaHandler = () => {
const recaptchaHandlerRef = React.useRef(null);
const getGRecaptchaToken = () => {
var _a, _b, _c;
return (_c = (_b = (_a = recaptchaHandlerRef.current) === null || _a === void 0 ? void 0 : _a.getToken) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
};
const renderRecaptchaHandler = () => {
if (!store.IS_SSOV2_ENABLED())
return null;
return React__default["default"].createElement(GRecaptchaHandler, { recaptchaHandlerRef: recaptchaHandlerRef });
};
return {
getGRecaptchaToken,
renderRecaptchaHandler,
};
};
// "phone_number":"906911910",
// "password":"Kenny2103!"
const loginByPhonePassword = (phone, password) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
let { phoneNumber } = store.splitPhone(phone);
phoneNumber = phoneNumber.startsWith('0')
? phoneNumber.substring(1)
: phoneNumber;
formData.append('phone_number', phoneNumber);
formData.append('password', password);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.LOGIN_BY_PASSWORD, {
method: 'POST',
body: formData,
}, true);
});
// "phone_number": "906911910",
// "area_code":"+84",
const registerBySendPhoneOTP = (phone, areaCode) => tslib_es6.__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', index$7.websiteId);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.REGISTER_BY_SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "phone_number": "906911910",
// "area_code":"+84",
const resendPhoneOTP = (phone, areaCode, gRecaptchaResponse) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
formData.append('g-recaptcha-response', gRecaptchaResponse);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.SEND_OTP, {
method: 'POST',
body: formData,
});
});
// "otp_code":"212616",
// "phone_number": "906911910",
// "area_code":"+84"
const verifyByPhoneOTP = (phone, areaCode, otpCode) => tslib_es6.__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 index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.VERIFY_BY_OTP, {
method: 'POST',
body: formData,
});
});
const resendUpdatePhoneOTP = (phone, areaCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('phone_number', phone);
formData.append('area_code', areaCode);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.UPDATE_PHONE_SEND_OTP, {
method: 'POST',
body: formData,
});
});
const verifyUpdatePhoneOTP = (areaCode, otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('otp_code', otpCode);
formData.append('area_code', areaCode);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.PHONE.UPDATE_PHONE_VERIFY_OTP, {
method: 'POST',
body: formData,
});
});
const loginBySocial = (token, social) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
formData.append('token', token);
formData.append('provider', social);
formData.append('website_id', index$7.websiteId);
return index$7.fetchSSOV2Api(index$7.SSO_V2_PATHS.LOGIN_BY_SOCIAL, {
method: 'POST',
body: formData,
});
});
/** Guest: send or resend OTP (same endpoint). Optional referrer e.g. payment pag