@hhgtech/hhg-components
Version:
Hello Health Group common components
962 lines (940 loc) • 94.4 kB
JavaScript
'use strict';
var React = require('react');
var core = require('@mantine/core');
var index = require('./index-db44e8cb.js');
var togetherComponentGlobalContext = require('./utils-aea77f4a.js');
var index$9 = require('./index-1ee4ebb8.js');
var healthTools = require('./healthTools-66a8dc09.js');
var constantsRiskScreener = require('./constantsRiskScreener.js');
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var store = require('./store-c7185440.js');
var useScreenSize = require('./useScreenSize-30f50b76.js');
var normalizeLink = require('./normalizeLink-4fe5440a.js');
var index$1 = require('./index-c2c283f8.js');
var form = require('@mantine/form');
var index$5 = require('./index-ae1a5588.js');
require('@mantine/dates');
require('./index-ad7155cf.js');
require('./useMantineLocale-e946ce4a.js');
var index$3 = require('./index-25f2e7a5.js');
var index$4 = require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
var hooks = require('@mantine/hooks');
require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var togetherApiPaths = require('./togetherApiPaths.js');
require('./translationsContext-d63b6d32.js');
var index$2 = require('./index-b0c1d50a.js');
var useHealthToolCache = require('./useHealthToolCache-09989566.js');
var index$6 = require('./index-e4e2220d.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var constantsIsProduction = require('./constantsIsProduction.js');
var core$1 = require('@hhgtech/icons/core');
var index$8 = require('./index-981b4867.js');
var index$7 = require('./index-2b93ac79.js');
var Cookies = require('js-cookie');
var flatten = require('lodash/flatten');
var uniqBy = require('lodash/uniqBy');
var Locale = require('./Locale-59ccf941.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
var flatten__default = /*#__PURE__*/_interopDefault(flatten);
var uniqBy__default = /*#__PURE__*/_interopDefault(uniqBy);
const PREFER_TOPICS = [
{
title: 'Health News & Current Affairs',
description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
icon: index.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-health.svg'),
checked: false,
id: 1,
},
{
title: 'Educational Medical Hello Bacsi Content',
description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
icon: index.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-education.svg'),
checked: false,
id: 2,
},
{
title: 'Hello Health Community Feed',
description: 'Covering the latest happenings in the health field, including medical breakthroughs, policies, and disease outbreaks',
icon: index.CommonGAssets.getAssetPath('newsletter-prefer/newsletter-community.svg'),
checked: false,
id: 3,
},
];
var BannerCategory;
(function (BannerCategory) {
BannerCategory["Pregnant"] = "pregnant";
BannerCategory["Parenting"] = "parenting";
})(BannerCategory || (BannerCategory = {}));
var BannerType;
(function (BannerType) {
BannerType["Option"] = "option";
})(BannerType || (BannerType = {}));
var OptionBannerStyleType;
(function (OptionBannerStyleType) {
OptionBannerStyleType["Button"] = "button";
OptionBannerStyleType["Checkbox"] = "checkbox";
})(OptionBannerStyleType || (OptionBannerStyleType = {}));
var BannerAction;
(function (BannerAction) {
BannerAction["ShowTool"] = "showTool";
BannerAction["ShowPremiumModal"] = "showPremiumModal";
BannerAction["ShowOptionBanner"] = "showOptionBanner";
BannerAction["Hide"] = "hide";
})(BannerAction || (BannerAction = {}));
const MAPPING_CATEGORY_PREMIUM_TYPE = {
pregnancy: BannerCategory.Pregnant,
parenting: BannerCategory.Parenting,
};
const MAPPING_CATEGORY_PREMIUM_API_TYPE = {
[BannerCategory.Pregnant]: 'pregnant',
[BannerCategory.Parenting]: 'parent',
};
const FLOW = (t, currentUrl) => ({
[BannerCategory.Pregnant]: {
action: BannerAction.ShowOptionBanner,
props: {
heading: t('pnBanner.pregnancy.heading'),
description: t('pnBanner.pregnancy.desc'),
styleType: OptionBannerStyleType.Button,
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-pregnancy-mobile.png`),
},
buttonProps: {
variant: 'white',
styles: (theme) => ({
minWidth: core.rem(80),
[theme.fn.largerThan('sm')]: {
minWidth: core.rem(120),
},
}),
},
items: [
{
label: t('switchBtn.yes'),
value: 'yes',
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'Are you navigating the world of pregnancy - Yes Click',
dataEventLabel: currentUrl,
},
},
{
label: t('switchBtn.no'),
value: 'no',
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'Are you navigating the world of pregnancy - No Click',
dataEventLabel: currentUrl,
},
},
],
},
submitHandler: {
yes: {
action: BannerAction.ShowTool,
props: {
value: healthTools.HEALTH_TOOL_TYPE.DUE_DATE,
},
},
no: {
action: BannerAction.ShowPremiumModal,
},
},
},
[BannerCategory.Parenting]: {
action: BannerAction.ShowOptionBanner,
props: {
heading: t('pnBanner.parenting.heading'),
description: t('pnBanner.parenting.desc'),
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
},
hideDescOnMobile: true,
styleType: OptionBannerStyleType.Checkbox,
items: [
{
label: t('pnBanner.toddlers'),
value: 'todders',
},
{
label: t('pnBanner.teenager'),
value: 'teenager',
},
],
submitBtnTracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'What is the age range of your kids Click',
dataEventLabel: currentUrl,
},
},
submitHandler: {
todders: {
action: BannerAction.ShowTool,
props: {
value: healthTools.HEALTH_TOOL_TYPE.BABY_VACCINE,
},
},
teenager: {
action: BannerAction.ShowOptionBanner,
props: {
styleType: OptionBannerStyleType.Button,
heading: t('pnBanner.teenager.heading'),
description: t('pnBanner.parenting.desc'),
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
},
buttonProps: {
variant: 'white',
},
items: [
{
label: t('childCard.boy'),
value: 'teenager.boy',
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'What is the gender of your kids - Boy Click',
dataEventLabel: currentUrl,
},
},
{
label: t('childCard.girl'),
value: 'teenager.girl',
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'What is the gender of your kids - Girl Click',
dataEventLabel: currentUrl,
},
},
],
},
},
'teenager.boy': {
action: BannerAction.ShowPremiumModal,
},
'teenager.girl': {
action: BannerAction.ShowTool,
activeTool: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
props: {
value: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
},
},
'todders|teenager': {
action: BannerAction.ShowOptionBanner,
props: {
styleType: OptionBannerStyleType.Button,
heading: t('pnBanner.both.heading'),
description: t('pnBanner.both.desc'),
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
},
hideDescOnMobile: true,
buttonProps: {
variant: 'secondary',
},
styles: (theme) => ({
wrapper: {
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
},
},
button: {
background: theme.colors.blue[0],
},
}),
items: [
{
label: t('pnBanner.vaccine.btnLabel'),
activeTool: healthTools.HEALTH_TOOL_TYPE.BABY_VACCINE,
isLink: true,
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'Experience our tools for parent - Baby Vaccine Click',
dataEventLabel: currentUrl,
},
},
{
label: t('pnBanner.pn.btnLabel'),
value: 'todders|teenager.showPN',
isPNBtn: true,
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'Experience our tools for parent - Premium Newsletter Click',
dataEventLabel: currentUrl,
},
},
],
},
},
'todders|teenager.showPN': {
action: BannerAction.ShowOptionBanner,
props: {
styleType: OptionBannerStyleType.Button,
heading: t('pnBanner.both.heading'),
description: t('pnBanner.both.desc'),
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-parenting-mobile.png`),
},
hideDescOnMobile: true,
buttonProps: {
variant: 'secondary',
},
styles: (theme) => ({
wrapper: {
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
},
},
button: {
background: theme.colors.blue[0],
},
}),
items: [
{
label: t('pnBanner.vaccine.btnLabel'),
activeTool: healthTools.HEALTH_TOOL_TYPE.BABY_VACCINE,
isLink: true,
tracking: {
dataEventCategory: 'Focused Audience',
dataEventAction: 'Experience our tools for parent - Baby Vaccine Click',
dataEventLabel: currentUrl,
},
},
],
},
},
},
},
});
const TOOL_BANNERS_PROPS = (t) => ({
[healthTools.HEALTH_TOOL_TYPE.DUE_DATE]: {
heading: t('pnBanner.dueDateTool.heading'),
description: t('pnBanner.dueDateTool.desc'),
btnLabel: t('pnBanner.caclNow'),
value: healthTools.HEALTH_TOOL_TYPE.DUE_DATE,
dataEventAction: 'Try our Due Date Calculator Click',
},
[healthTools.HEALTH_TOOL_TYPE.BABY_VACCINE]: {
heading: t('pnBanner.vaccination.heading'),
description: t('pnBanner.vaccination.desc'),
btnLabel: t('pnBanner.caclNow'),
value: healthTools.HEALTH_TOOL_TYPE.BABY_VACCINE,
dataEventAction: 'Try our Baby Vaccine Scheduler Click',
},
[healthTools.HEALTH_TOOL_TYPE.BABY_GROWTH]: {
heading: 'Baby Growth',
description: t('pnBanner.vaccination.desc'),
btnLabel: t('pnBanner.caclNow'),
value: healthTools.HEALTH_TOOL_TYPE.BABY_GROWTH,
},
[constantsRiskScreener.RISK_SCREENER_NAME.HPV]: {
heading: t('pnBanner.hpv.heading'),
description: t('pnBanner.hpv.desc'),
thumbnail: {
desktop: index.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-desktop.png`),
mobile: index.CommonGAssets.getAssetPath(`newsletter/banner-option-hpv-mobile.png`),
},
isRiskScreener: true,
btnLabel: t('pnBanner.checkNow'),
value: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
hideDescOnMobile: true,
dataEventAction: 'Keep safe from HPV virus Click',
},
});
const SurveyOrPremiumBannerContext = React.createContext({});
const PnBannerEle = (_a) => {
var rest = tslib_es6.__rest(_a, []);
const { locale } = index$1.useTranslations();
const { type, isMobile, currentUrl, isMarketing, isLoggedIn, setShouldAcquisitionModalOpen, } = React.useContext(SurveyOrPremiumBannerContext);
const { triggerLogin } = store.useSSOV2Store();
const bannerClick = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const url = isMarketing
? normalizeLink.getCurrentBaseUrl(locale) + '/dang-ky-nhan-tin/'
: `${window.location.href}?source=acquisition`;
if (isLoggedIn) {
setShouldAcquisitionModalOpen === null || setShouldAcquisitionModalOpen === void 0 ? void 0 : setShouldAcquisitionModalOpen();
}
else {
if (store.IS_SSOV2_ENABLED(locale)) {
triggerLogin({
returnUrl: isMarketing ? url : undefined,
source: !isMarketing ? 'acquisition' : undefined,
});
}
else {
window.location.href = `${normalizeLink.getCurrentSsoUrl(locale)}/?returnUrl=${encodeURIComponent(url)}`;
}
}
});
return (React__default["default"].createElement(core.Container, Object.assign({ mih: { base: 144, md: 160 }, fluid: true, p: 0, sx: {
borderRadius: 4,
cursor: 'pointer',
}, onClick: bannerClick, "data-event-category": "Newsletter", "data-event-action": "Banner Click", "data-event-label": currentUrl, className: "pointer-event-child-none" }, rest),
React__default["default"].createElement(useScreenSize.ImageWrap, { src: isMarketing
? index.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_Marketing.png`)
: index.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_${type}.png`), style: { maxWidth: '100%' }, alt: "newsletter banner" })));
};
const PATHS$1 = {
GET_SUGGESTED_TOPIC: 'api/v1/categories?external_id={externalId}&site={website_url}',
GET_NEWSLETTER_CATEGORIES: 'api/v1/categories?site={website_url}',
POST_SUBSCRIPTION: 'api/v1/subscription?site={website_url}',
TEMP_POST_SUBSCRIPTION: 'api/v1/subscription/temporary?site={website_url}',
TEMP_POST_SUBSCRIPTION_OFFICIAL: 'api/v1/subscription/official?site={website_url}',
TEMP_GET_NEWSLETTER_CATEGORIES: 'api/v1/categories/temporary?site={website_url}',
GET_SUBSCRIPTION_CATEGORIES: 'api/v1/categories?site={website_url}',
};
var useStyles = core.createStyles((theme) => {
return {
root: {},
wrapper: {
[theme.fn.smallerThan('sm')]: {
width: '70%',
},
},
button: {
[theme.fn.smallerThan('sm')]: {
height: 'auto',
minHeight: core.rem(32),
padding: `${core.rem(6)} ${core.rem(16)}`,
textAlign: 'center',
width: '100%',
},
},
buttonLabel: {
whiteSpace: 'normal',
},
};
});
const BannerLayout = ({ heading, description, thumbnail = {
desktop: '',
mobile: '',
}, hideDescOnMobile, children, }) => {
const { isMobile, minHeight } = React.useContext(SurveyOrPremiumBannerContext);
return (React__default["default"].createElement(core.Box, { sx: () => ({
borderRadius: core.rem(8),
background: 'linear-gradient(180deg, #FAFDFF 0%, #E3F2FF 100%)',
}) },
React__default["default"].createElement(core.Box, { sx: (theme) => ({
minHeight: core.rem(minHeight),
borderRadius: 'inherit',
background: `url(${isMobile ? thumbnail.mobile : thumbnail.desktop})`,
backgroundPosition: 'center right',
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
padding: `${core.rem(24)} ${core.rem(16)}`,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
[theme.fn.largerThan('sm')]: {
padding: `${core.rem(22)} ${core.rem(32)}`,
},
}) },
React__default["default"].createElement(core.Stack, { spacing: core.rem(16) },
React__default["default"].createElement(core.Stack, { spacing: core.rem(4), sx: (theme) => ({
maxWidth: '60%',
[theme.fn.largerThan('sm')]: {
maxWidth: '70%',
},
}) },
heading && React__default["default"].createElement(index$2.Heading, { tag: "h4" }, heading),
!(hideDescOnMobile && isMobile) && description && (React__default["default"].createElement(index$3.Text, { size: "p4" }, description))),
React__default["default"].createElement(core.Box, null, children)))));
};
const BannerWithOptions = (props) => {
const { styleType = OptionBannerStyleType.Button, items: itemsProp = [], buttonProps, styles, submitBtnTracking, } = props;
const { classes } = useStyles(undefined, {
name: 'PremiumBannerWithOptions',
styles,
});
const { t, locale } = index$1.useTranslations();
const { surveyType, articleId, handleClickOption, hasPremiumBanner, source, isMobile, setShowPNModal, } = React.useContext(SurveyOrPremiumBannerContext);
const items = React.useMemo(() => !hasPremiumBanner
? itemsProp.filter((i) => !Boolean(i.isPNBtn)).filter(Boolean)
: itemsProp, [itemsProp]);
const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
const form$1 = form.useForm({
initialValues: {
bannerOptions: [],
},
});
const saveStep = (value) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
return yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.HEALTH_TOOL.CREATE, {
_locale: locale,
type: MAPPING_CATEGORY_PREMIUM_API_TYPE[surveyType],
}), 'POST', {
headers: {
'Content-Type': 'application/json',
},
data: {
value,
article: articleId,
source,
},
});
});
const renderButtonChoice = React.useCallback(() => (React__default["default"].createElement(core.Flex, { gap: core.rem(8), className: classes.wrapper }, items.map((i, idx) => (React__default["default"].createElement(core.Box, { key: String(idx), component: i.isLink ? 'a' : 'div', href: i.isRiskScreener
? `https://${constantsDomainLocales.domainLocales[locale]}/bot/${constantsRiskScreener.RISK_SCREENER_SLUG[locale][i.activeTool]}/`
: i.isLink
? getHealthToolLink(i.activeTool)
: undefined },
React__default["default"].createElement(index$4.Button, Object.assign({ className: classes.button, classNames: {
label: classes.buttonLabel,
}, size: "sm" }, i.tracking, buttonProps, { onClick: () => {
if (!i.isLink) {
if (i.isPNBtn) {
setShowPNModal(true);
}
saveStep(i.value);
handleClickOption(i.value);
}
} }), i.label)))))), [items, form$1]);
const renderCheckboxChoice = React.useCallback(() => (React__default["default"].createElement(core.Flex, null,
React__default["default"].createElement(core.Flex, { align: 'center', gap: core.rem(24), sx: (theme) => ({
background: 'white',
borderRadius: core.rem(8),
padding: core.rem(4),
[theme.fn.largerThan('sm')]: {
paddingLeft: core.rem(16),
},
}) },
React__default["default"].createElement(index$5.Checkbox.Group, Object.assign({}, form$1.getInputProps('bannerOptions', { type: 'checkbox' })),
React__default["default"].createElement(core.Flex, { gap: core.rem(16) }, items.map((i, idx) => (React__default["default"].createElement(index$5.Checkbox, { key: String(idx), value: i.value, label: i.label, styles: {
label: {
cursor: 'pointer',
},
} }))))),
React__default["default"].createElement(index$4.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$6.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
const curValues = form$1.getInputProps('bannerOptions').value;
saveStep(curValues.join('|'));
handleClickOption(curValues.join('|'));
}, styles: (theme) => ({
root: {
[theme.fn.smallerThan('sm')]: {
width: core.rem(38),
minWidth: 'auto',
padding: 0,
},
},
}) }), !isMobile && t('pnBanner.submit'))))), [items, form$1]);
return (React__default["default"].createElement(BannerLayout, Object.assign({}, props), styleType === OptionBannerStyleType.Button
? renderButtonChoice()
: styleType === OptionBannerStyleType.Checkbox
? renderCheckboxChoice()
: null));
};
const ToolBanner = (props) => {
var _a, _b;
const { t } = index$1.useTranslations();
const { heading, description, thumbnail, btnLabel, value, isRiskScreener, hideDescOnMobile, dataEventAction, } = props;
const { locale } = index$1.useTranslations();
const { isMobile } = React.useContext(SurveyOrPremiumBannerContext);
const { getHealthToolLink, allTools } = useHealthToolCache.useHealthToolsCache(locale);
const layout = isRiskScreener ? 'mainBanner' : 'toolBanner';
const btnEle = React.useMemo(() => {
const toolUrl = isRiskScreener
? `https://${!constantsIsProduction.isProduction ? 'discover.' : ''}${constantsDomainLocales.domainLocales[locale]}/bot/${constantsRiskScreener.RISK_SCREENER_SLUG[locale][value]}`
: getHealthToolLink(value);
return (React__default["default"].createElement("a", { href: toolUrl },
React__default["default"].createElement(index$4.Button, { size: "sm", "data-event-category": "Focused Audience", "data-event-action": dataEventAction, "data-event-label": toolUrl }, btnLabel || t('pnBanner.caclNow'))));
}, [allTools]);
return layout === 'mainBanner' ? (React__default["default"].createElement(BannerLayout, Object.assign({}, Object.assign(Object.assign({}, props), { thumbnail: props.thumbnail })), btnEle)) : (React__default["default"].createElement(core.Flex, { gap: core.rem(7), align: 'center', justify: 'space-between', sx: (theme) => ({
borderRadius: core.rem(8),
background: theme.colors.blue[0],
minHeight: core.rem(180),
padding: `${core.rem(24)} ${core.rem(16)}`,
[theme.fn.largerThan('sm')]: {
padding: `${core.rem(34)} ${core.rem(32)}`,
},
}) },
React__default["default"].createElement(core.Stack, { spacing: core.rem(12) },
React__default["default"].createElement(core.Stack, { spacing: core.rem(4) },
heading && React__default["default"].createElement(index$2.Heading, { tag: "h4" }, heading),
!(isMobile && hideDescOnMobile) && description && (React__default["default"].createElement(index$3.Text, { size: "p4" }, description))),
React__default["default"].createElement(core.Flex, { gap: core.rem(8), sx: {
button: {
minWidth: core.rem(120),
},
} }, btnEle)),
React__default["default"].createElement(core.Flex, { align: 'center', justify: 'center', sx: (theme) => ({
width: core.rem(96),
height: core.rem(96),
borderRadius: '50%',
background: 'white',
flexShrink: 0,
[theme.fn.largerThan('sm')]: {
width: core.rem(112),
height: core.rem(112),
},
img: {
maxWidth: core.rem(64),
[theme.fn.largerThan('sm')]: {
maxWidth: core.rem(73),
},
},
}) },
React__default["default"].createElement("img", { alt: "health-tool-icon", src: thumbnail ||
((_b = (_a = allTools.filter((i) => i.template === value)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.icon) ||
healthTools.HEALTH_TOOL_DEFAULT_IMG[value] ||
'', loading: "lazy" }))));
};
const HandlerBanner = () => {
var _a, _b, _c;
const { t } = index$1.useTranslations();
const { state, Outside } = React.useContext(SurveyOrPremiumBannerContext);
return (state === null || state === void 0 ? void 0 : state.action) === BannerAction.ShowTool ? (React__default["default"].createElement(Outside, null, TOOL_BANNERS_PROPS(t)[(_a = state === null || state === void 0 ? void 0 : state.props) === null || _a === void 0 ? void 0 : _a.value] ? (React__default["default"].createElement(ToolBanner, Object.assign({}, TOOL_BANNERS_PROPS(t)[(_b = state === null || state === void 0 ? void 0 : state.props) === null || _b === void 0 ? void 0 : _b.value], { value: (_c = state === null || state === void 0 ? void 0 : state.props) === null || _c === void 0 ? void 0 : _c.value }))) : null)) : (state === null || state === void 0 ? void 0 : state.action) === BannerAction.ShowOptionBanner ? (React__default["default"].createElement(Outside, null,
React__default["default"].createElement(BannerWithOptions, Object.assign({}, state === null || state === void 0 ? void 0 : state.props)))) : null;
};
const SideBannerModal = (_a) => {
var { isMobile, children, desktopBanner = index.CommonGAssets.getAssetPath('friso/onboarding-banner.jpg'), mobileBanner = index.CommonGAssets.getAssetPath('friso/onboarding-banner-mobile.jpg'), modalRatio = {
width: 937,
height: 536,
}, mobileBannerRatio = {
width: 750,
height: 480,
}, desktopBannerRatio = {
width: 420,
height: 536,
}, closeProps } = _a, modalProps = tslib_es6.__rest(_a, ["isMobile", "children", "desktopBanner", "mobileBanner", "modalRatio", "mobileBannerRatio", "desktopBannerRatio", "closeProps"]);
const { width: viewportWidth, height: viewportHeight } = hooks.useViewportSize();
const curBannerHeight = (viewportWidth * mobileBannerRatio.height) / mobileBannerRatio.width;
const minHeightNha = (viewportHeight <= 667 ? 190 : 265) + curBannerHeight + 74;
const [isFullScreen, setIsFullScreen] = React.useState(false);
return (React__default["default"].createElement(index$7.Modal, Object.assign({ styles: (theme) => ({
header: {
display: 'none',
},
content: {
flex: 'auto',
background: 'transparent',
[theme.fn.smallerThan('sm')]: {
maxHeight: '100%',
height: '100%',
position: 'relative',
borderRadius: 0,
},
[theme.fn.largerThan('sm')]: {
maxWidth: core.rem(modalRatio.width),
width: '100%',
height: '100%',
maxHeight: core.rem(modalRatio.height),
boxShadow: 'none',
},
},
body: {
padding: 0,
width: '100%',
height: '100%',
[theme.fn.largerThan('sm')]: {
display: 'flex',
alignItems: 'center',
},
},
inner: {
padding: 0,
[theme.fn.smallerThan('sm')]: {
display: 'flex',
alignItems: 'flex-end',
},
},
}) }, modalProps), isMobile ? (React__default["default"].createElement(core.Box, { sx: {
position: 'relative',
width: '100%',
height: '100%',
}, onTouchStart: () => setIsFullScreen(true) },
React__default["default"].createElement(core.Box, { className: "mobile-template", sx: {
position: 'absolute',
height: `${(isFullScreen ? 1 : minHeightNha / viewportHeight) * 100}%`,
left: 0,
bottom: 0,
right: 0,
transition: 'height 0.4s ease',
} },
React__default["default"].createElement(core.Box, { className: "mobile-template-wrapper", sx: {
height: '100%',
backgroundColor: 'white',
borderTopLeftRadius: isFullScreen ? 0 : core.rem(12),
borderTopRightRadius: isFullScreen ? 0 : core.rem(12),
} },
React__default["default"].createElement(core.Box, { sx: {
// height: 'calc(100% - 74px)',
height: '100%',
background: `url(${mobileBanner})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'top center',
overflowY: 'auto',
borderRadius: 'inherit',
} },
index$8.isVideo(mobileBanner) && (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, style: {
width: '100%',
position: 'absolute',
top: 0,
left: 0,
} },
React__default["default"].createElement("source", { src: mobileBanner }))),
React__default["default"].createElement(index$4.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null), sx: {
position: 'absolute',
right: 0,
top: 0,
zIndex: 1,
padding: core.rem(10),
// backgroundColor: 'transparent',
} }, closeProps, { onClick: () => modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose() })),
React__default["default"].createElement(core.AspectRatio, { ratio: (mobileBannerRatio === null || mobileBannerRatio === void 0 ? void 0 : mobileBannerRatio.width) / (mobileBannerRatio === null || mobileBannerRatio === void 0 ? void 0 : mobileBannerRatio.height), w: "100%" }),
React__default["default"].createElement(core.Box, { className: "inner", sx: {
padding: `${core.rem(28)} ${core.rem(16)} ${core.rem(16)}`,
background: 'white',
position: 'relative',
} }, children)))))) : (React__default["default"].createElement(core.AspectRatio, { className: "desktop-template", ratio: modalRatio.width / modalRatio.height, w: "100%", sx: {
position: 'relative',
'& > div': {
justifyContent: 'flex-end',
},
} },
React__default["default"].createElement(core.Box, { sx: {
width: '100%',
height: '100%',
justifyContent: 'flex-end',
alignItems: 'stretch',
borderRadius: core.rem(8),
background: 'white',
boxShadow: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem',
} },
index$8.isVideo(desktopBanner) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, style: {
borderTopLeftRadius: core.rem(8),
borderBottomLeftRadius: core.rem(8),
height: '100%',
display: 'block',
} },
React__default["default"].createElement("source", { src: desktopBanner }))) : (React__default["default"].createElement("img", { alt: "", src: desktopBanner, loading: "lazy", style: {
borderTopLeftRadius: core.rem(8),
borderBottomLeftRadius: core.rem(8),
height: '100%',
display: 'block',
} })),
React__default["default"].createElement(core.Box, { sx: {
position: 'relative',
height: '100%',
width: `${((modalRatio.width - desktopBannerRatio.width) /
modalRatio.width) *
100}%`,
} },
React__default["default"].createElement(index$4.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null) }, closeProps, { onClick: () => modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose(), sx: {
position: 'absolute',
right: 0,
top: 0,
backgroundColor: 'transparent',
} })),
React__default["default"].createElement(core.Box, { className: "side-banner-modal-container", sx: {
height: '100%',
padding: `${core.rem(40)} ${core.rem(24)} 0`,
} }, children)))))));
};
const PATHS = {
UPDATE_SUBSCRIPTION: 'user/subscription',
};
const PremiumNewsletterModalContext = React.createContext({});
const _NormalTopic = (_a) => {
var { value, name } = _a, rest = tslib_es6.__rest(_a, ["value", "name"]);
return (React__default["default"].createElement(index$5.ChipButton, Object.assign({ value: value, withIcon: true }, rest, { buttonProps: {
styles: () => ({
leftIcon: {
marginRight: core.rem(6),
},
root: {
paddingLeft: core.rem(10),
paddingRight: core.rem(10),
},
}),
} }), name));
};
const TopicSection = ({ topicsGroup, onTopicChange, isBlock = false, selectedTopics = [], inputProps, labelProps, maxSelect = 5, hasScroll, readonly, }) => {
const { action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const topics = flatten__default["default"](topicsGroup.map((i) => i.topics || []));
const { t } = index$1.useTranslations();
const [value, setValue] = React.useState([]);
React.useEffect(() => {
setValue(selectedTopics);
}, [selectedTopics.length]);
React.useEffect(() => {
onTopicChange === null || onTopicChange === void 0 ? void 0 : onTopicChange(value);
}, [value]);
const onValueChange = (v) => {
if (v.length > 5) {
pushNotifications({
type: 'danger',
title: t('pnTopicSection.maxSelectError.title', {
maxSelect,
}),
message: t('pnTopicSection.maxSelectError.desc'),
});
return;
}
else {
!readonly &&
setValue(() => {
return topics.filter((topicObj) => v.some((tValue) => topicObj.catId === tValue));
});
}
};
return (React__default["default"].createElement(core.Stack, { spacing: 12 }, topicsGroup.map((i, idx) => (React__default["default"].createElement(core.Stack, { key: String(idx), spacing: 12 },
i.label && (React__default["default"].createElement(index$3.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold" }, labelProps), i.label)),
hasScroll ? (React__default["default"].createElement(core.ScrollArea, { w: "100%", offsetScrollbars: true, scrollbarSize: 4, p: 16, m: -16, styles: {
viewport: {
margin: -16,
padding: 16,
},
} },
React__default["default"].createElement(core.Box, { w: 800 },
React__default["default"].createElement(core.Chip.Group, Object.assign({ value: value.map((v) => v.catId), multiple: true }, inputProps, { onChange: onValueChange }),
React__default["default"].createElement(core.Flex, { gap: 8, wrap: "wrap" }, i.topics.map((v) => (React__default["default"].createElement(_NormalTopic, Object.assign({ key: v.catId, value: v.catId, name: v.localName, isBlock: isBlock }, i.tracking))))))))) : (React__default["default"].createElement(core.Chip.Group, Object.assign({ value: value.map((v) => v.catId), multiple: true }, inputProps, { onChange: onValueChange }),
React__default["default"].createElement(core.Flex, { gap: 8, wrap: "wrap" }, i.topics.map((v) => v.catId ? (React__default["default"].createElement(_NormalTopic, Object.assign({ key: v.catId, value: v.catId, name: v.localName, isBlock: isBlock }, i.tracking))) : React__default["default"].isValidElement(v.component) ? (v.component) : null)))))))));
};
const Layout = (_a) => {
var { heading, children, stickyActions } = _a, scrollAreaProps = tslib_es6.__rest(_a, ["heading", "children", "stickyActions"]);
const { isMobile } = React.useContext(PremiumNewsletterModalContext);
const content = (React__default["default"].createElement(core.Stack, { spacing: core.rem(24), sx: { height: '100%' } },
React__default["default"].createElement(index$2.Heading, { tag: "h4", style: {
textAlign: 'center',
} }, heading),
React__default["default"].createElement(core.Box, null, children)));
return (React__default["default"].createElement(core.Box, { sx: (theme) => ({
[theme.fn.largerThan('sm')]: {
position: 'relative',
height: '100%',
},
}) },
isMobile ? (content) : (React__default["default"].createElement(core.ScrollArea, Object.assign({ className: "layout-body", h: stickyActions ? 'calc(100% - 90px)' : '100%' }, scrollAreaProps), content)),
stickyActions && (React__default["default"].createElement(core.Flex, { gap: core.rem(8), sx: (theme) => ({
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
padding: core.rem(16),
button: {
flexGrow: 1,
},
justifyContent: 'center',
[theme.fn.largerThan('sm')]: {
padding: `${core.rem(24)} 0`,
},
}) }, stickyActions))));
};
const MainForm = () => {
const { t, locale } = index$1.useTranslations();
const { data: { userInfo }, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const isLoggedIn = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
const { currentUrl, isMobile, pnSuggestCategory = [], nextStep, formValues, setFormValues, onSubmit: _onSubmit, submitLoading, selectCategory, setCategoryLibs, setSelectCategory, maxSelectCategory, } = React.useContext(PremiumNewsletterModalContext);
const pnSuggestCategoryIds = pnSuggestCategory.map((i) => i.catId);
const form$1 = form.useForm({
validate: {
name: form.isNotEmpty(t('healthToolPNModal.mainForm.requireName')),
},
initialValues: Object.assign(Object.assign({}, formValues), { fitnessTopics: pnSuggestCategoryIds }),
});
const [fitnessTopics, setFitnessTopics] = React.useState([]);
const [interestedTopics, setInterestedTopics] = React.useState([]);
React.useEffect(() => {
(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
var _a;
try {
const interestedRes = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getPremiumApiPath(PATHS$1.GET_SUBSCRIPTION_CATEGORIES, {
_locale: locale,
}), 'get');
const interestedList = (((_a = interestedRes === null || interestedRes === void 0 ? void 0 : interestedRes.data) === null || _a === void 0 ? void 0 : _a.subscription) || []).filter((i) => !pnSuggestCategoryIds.includes(i.catId));
setFitnessTopics(pnSuggestCategory);
setInterestedTopics(interestedList);
setCategoryLibs([...pnSuggestCategory, ...interestedList]);
}
catch (err) {
console.log(err);
}
}))();
}, []);
React.useEffect(() => {
isLoggedIn && form$1.setFieldValue('name', (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || '');
}, [isLoggedIn]);
const onMore = () => {
if (form$1.getInputProps('name').value !== '') {
setFormValues(form$1.getTransformedValues());
nextStep();
}
else {
form$1.validateField('name');
}
};
const onSubmit = (formValues) => {
if (selectCategory.length === 0) {
pushNotifications({
type: 'danger',
title: t('newsletter.error.minTitle'),
message: t('newsletter.error.minCotennt'),
});
return false;
}
setFormValues(formValues);
_onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(formValues.name);
};
const MoreButton = React.useMemo(() => (React__default["default"].createElement(index$4.Button, { variant: "tertiary", dataEventCategory: "Newsletter", dataEventAction: "More Category Click", dataEventLabel: currentUrl, leftIcon: React__default["default"].createElement(core$1.Plus, { size: 16, color: 'currentColor' }), onClick: onMore, styles: (theme) => ({
root: {
borderRadius: core.rem(6),
padding: '2px 15px',
height: core.rem(40),
},
label: {
fontSize: core.rem(14),
fontWeight: 400,
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(12),
lineHeight: core.rem(16),
height: core.rem(40),
},
},
leftIcon: {
marginRight: '5px',
},
}) },
React__default["default"].createElement(index$3.Text, { size: isMobile ? 'p3' : 'p4' }, t('home.seeMore')))), [form$1]);
React.useEffect(() => {
form$1.setFieldValue('fitnessTopics', selectCategory.map((i) => i.catId));
}, [selectCategory]);
return (React__default["default"].createElement("form", { style: { height: '100%' }, onSubmit: form$1.onSubmit(onSubmit) },
React__default["default"].createElement(Layout, { heading: t('healthToolPNModal.heading'), stickyActions: React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$4.Button, { fullWidth: true, type: "submit", dataEventCategory: "Newsletter", dataEventAction: "Register Click", dataEventLabel: currentUrl, loading: submitLoading, sx: { maxWidth: core.rem(240) } }, t('healthToolPNModal.register'))) },
React__default["default"].createElement(core.Stack, { spacing: core.rem(16) },
React__default["default"].createElement(index$5.Input, Object.assign({ label: t('newsletter.welcome.description') }, form$1.getInputProps('name'))),
React__default["default"].createElement(TopicSection, { topicsGroup: [
...(pnSuggestCategory.length === 0 &&
interestedTopics.length === 0
? [
{
topics: [
{
component: MoreButton,
},
],
},
]
: []),
...(pnSuggestCategory.length > 0
? [
{
label: t('healthToolPNModal.mainForm.tailorTopicsHeading'),
topics: [
...pnSuggestCategory,
...(interestedTopics.length === 0
? [
{
component: MoreButton,
},
]
: []),