@hhgtech/hhg-components
Version:
Hello Health Group common components
489 lines (476 loc) • 38.1 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-00ab44b2.js';
import React__default, { createContext, useState, useContext, useMemo, useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { u as useHealthToolsCache } from './useHealthToolCache-795263ae.js';
import { H as HEALTH_TOOL_TYPE } from './constants-367949ba.js';
import { createStyles, Flex, Box, useMantineTheme, Menu, rem, UnstyledButton, Text as Text$1, Stack, clsx, Grid } from '@mantine/core';
import { d as Checkbox, R as Radio, I as Input, e as ErrorLabel } from './index-bd44bcb2.js';
import '@mantine/dates';
import './index-8c40504a.js';
import './index-fe4471f4.js';
import './index-7adf994c.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import './index-2d25b0f0.js';
import { T as TemplateProvider, C as CustomStylesType } from './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import { u as useTranslations } from './index-09d9e570.js';
import '@mantine/hooks';
import './utils-538169b3.js';
import './index-04505e35.js';
import { H as HealthToolFormWrapper } from './index-c6190f14.js';
import { C as ChevronDown } from './ChevronDown-0a2a63a3.js';
import { C as CardWrapperContext } from './context-41a96757.js';
import { G as GenderOptionControl } from './index-a002ff96.js';
import '@hhgtech/icons/other';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { domainLocales } from './constantsDomainLocales.js';
import { getBmi } from './embeddedHeathToolCards_helpers.js';
const Question1Label = (_a) => {
var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
const { t } = useTranslations();
const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
const Component = LabelWrapper || Text;
return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.weightLossSupport')));
};
const Question2Label = (_a) => {
var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
const { t } = useTranslations();
const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
const Component = LabelWrapper || Text;
return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness')));
};
const Question2Description = (_a) => {
var { LabelWrapper } = _a, props = __rest(_a, ["LabelWrapper"]);
const { t } = useTranslations();
const labelProps = !LabelWrapper ? Object.assign({ size: 'p2' }, props) : {};
const Component = LabelWrapper || Text;
return (React__default.createElement(Component, Object.assign({}, labelProps), t('bmi.question.glp1Awareness.desc')));
};
const BmiFormContext = createContext({});
var useStyles$1 = createStyles(() => {
return {
label: {
marginTop: 2,
cursor: 'pointer',
userSelect: 'none',
},
};
});
const NewsletterCheckbox = (_a) => {
var { labelTextProps, checked: checkedProps, LabelWrapper, useCollapse = true } = _a, props = __rest(_a, ["labelTextProps", "checked", "LabelWrapper", "useCollapse"]);
const { t } = useTranslations();
const [show, setShow] = useState(!useCollapse);
const [firstTime, setFirstTime] = useState(true);
const [checked, setChecked] = useState(checkedProps);
const labelProps = !LabelWrapper ? Object.assign({ size: 'p3' }, labelTextProps) : {};
const Component = LabelWrapper || Text;
const { classes } = useStyles$1(undefined, { name: 'NewsletterCheckbox' });
return (React__default.createElement(Flex, { gap: 8, align: 'flex-start' },
React__default.createElement(Checkbox, Object.assign({}, props, { label: undefined, size: "sm", checked: checked, onChange: (event) => {
if (firstTime) {
setFirstTime(false);
}
else {
setChecked(event.currentTarget.checked);
}
}, styles: {
labelWrapper: {
display: 'none',
},
} })),
React__default.createElement(Box, null,
React__default.createElement(Component, Object.assign({}, labelProps, { onClick: () => {
useCollapse && setShow((v) => !v);
}, className: classes.label, lineClamp: show ? undefined : 1 }), t('bmi.newsletter.label')))));
};
const FitnessToolUnitPicker = ({ displayValue, field, onChange, }) => {
const theme = useMantineTheme();
const borderColor = theme.colors.gray[1];
const options = field === 'height'
? [
{ label: 'cm', system: 'metric' },
{ label: 'ft', system: 'imperial' },
]
: [
{ label: 'kg', system: 'metric' },
{ label: 'lbs', system: 'imperial' },
];
return (React__default.createElement(Menu, { position: "bottom-end", withinPortal: true, offset: 0, styles: {
dropdown: {
backgroundColor: theme.white,
border: `${rem(1)} solid ${borderColor}`,
borderRadius: 12,
boxShadow: '0px 0px 1px 0px #0000000A,0px 2px 8px 0px #0000000A,0px 10px 16px 0px #0000000A',
padding: rem(4),
minWidth: rem(90),
},
item: {
fontSize: theme.fontSizes.sm,
lineHeight: 1.4,
padding: `${rem(6)} ${rem(10)}`,
borderRadius: theme.radius.xs,
color: theme.colors.dark[9],
'&[data-hovered]': {
backgroundColor: 'transparent',
},
},
} },
React__default.createElement(Menu.Target, null,
React__default.createElement(UnstyledButton, { type: "button", sx: (theme) => ({
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
width: '100%',
paddingRight: theme.spacing.xs,
gap: 4,
}) },
React__default.createElement(Text$1, { component: "span", size: "sm", sx: { lineHeight: 1 } }, displayValue),
React__default.createElement(ChevronDown, { style: { width: 18, height: 18 } }))),
React__default.createElement(Menu.Dropdown, null, options.map((opt) => {
const isSelected = displayValue === opt.label;
return (React__default.createElement(Menu.Item, { key: opt.label, onClick: () => onChange(opt.system, field), sx: {
backgroundColor: isSelected ? theme.colors.gray[1] : undefined,
'&[data-hovered]': {
backgroundColor: isSelected
? theme.colors.gray[1]
: 'transparent',
},
} }, opt.label));
}))));
};
const DefaultForm = (props) => {
var _a, _b, _c, _d, _e, _f, _g;
const { t, locale } = useTranslations();
const { classes: cardWrapperClasses = {} } = useContext(CardWrapperContext);
const { control, bmiGenerated, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = useContext(BmiFormContext);
const radioStyle = {
body: {
alignItems: 'center',
},
};
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default.createElement(HealthToolDefaultLayout$1, { isMobile: props.isMobile, gutter: 4 },
React__default.createElement(Stack, { spacing: 4, px: 16 },
React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
return (React__default.createElement("div", null,
React__default.createElement(HealthToolDefaultLayout$1.GenderControl, { LabelWrapper: HealthToolDefaultLayout$1.Label, error: undefined, onChange: onChange, gap: 4 }),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} }),
React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement("div", null,
React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
content: '25',
}), name: name, value: value, onChange: onChange, min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
rightSection: formWrapperClasses.inputRightSection,
} }),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} }),
React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement("div", null,
React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.heightInput')), placeholder: t('tools.inputPlaceholder', {
content: unitSystem === 'imperial' ? 6 : 170,
}), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", rightSection: enableUnitPicker ? (React__default.createElement(FitnessToolUnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (t('bmi.heightInput.desc')), rightSectionWidth: 70, classNames: {
rightSection: formWrapperClasses.inputRightSection,
}, styles: !enableUnitPicker
? () => ({
rightSection: {
paddingRight: 0,
},
})
: undefined }),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} }),
React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement("div", null,
React__default.createElement(HealthToolDefaultLayout$1.InputNumber, { label: React__default.createElement(HealthToolDefaultLayout$1.Label, null, t('bmi.weightInput')), placeholder: t('tools.inputPlaceholder', {
content: unitSystem === 'imperial' ? 130 : 60,
}), name: name, value: value, onChange: onChange, precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default.createElement(FitnessToolUnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (t('bmi.weightInput.desc')), rightSectionWidth: 70, classNames: {
rightSection: formWrapperClasses.inputRightSection,
}, styles: !enableUnitPicker
? () => ({
rightSection: {
paddingRight: 0,
},
})
: undefined }),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} })),
withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Stack, { spacing: 4, px: 16 },
React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
return (React__default.createElement("div", null,
React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Question1Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg" },
React__default.createElement(Flex, { gap: "lg" },
React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} }),
React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement("div", null,
React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Question2Label, { LabelWrapper: HealthToolDefaultLayout$1.Label }), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Question2Description, { LabelWrapper: HealthToolDefaultLayout$1.SubLabel })) },
React__default.createElement(Flex, { gap: "lg" },
React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.yes')), styles: radioStyle }),
React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(HealthToolDefaultLayout$1.OptionLabel, null, t('switchBtn.no')), styles: radioStyle }))),
(error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolDefaultLayout$1.Error, { label: error.message }))));
} })),
React__default.createElement(Box, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
React__default.createElement(Stack, { spacing: 8, px: 16, py: 12 },
React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
return (React__default.createElement(NewsletterCheckbox, Object.assign({ size: "sm", onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
} }),
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))) : (React__default.createElement(Box, { px: 16, sx: { paddingBottom: 8 } },
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit')))))));
};
var useStyles = createStyles((theme) => {
return {
newsletterBlock: {
backgroundColor: theme.colors.neutral[0],
borderBottomLeftRadius: 'inherit',
borderBottomRightRadius: 'inherit',
'.bmi-btn': {
marginTop: 0,
},
},
inputRightSection: {
fontSize: rem(13),
lineHeight: rem(24),
color: theme.colors.gray[4],
justifyContent: 'flex-end',
paddingRight: 8,
whiteSpace: 'nowrap',
},
};
});
const InlineForm = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { t, locale } = useTranslations();
const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, enableUnitPicker, unitSystem, unitHeight, unitWeight, onUnitChange, } = useContext(BmiFormContext);
const { classes: wrapperClasses = {}, variant: cardWrapperVariant } = useContext(CardWrapperContext);
const { classes: formWrapperClasses = {} } = useContext(BmiFormContext);
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange }))));
} }),
React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
content: '25',
}), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
rightSection: {
width: 'auto',
},
}) }))));
} }),
React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
content: unitSystem === 'imperial' ? 6 : 170,
}), name: name, value: value, onChange: onChange, min: 0, precision: 1, inputMode: "decimal", error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: enableUnitPicker ? (React__default.createElement(FitnessToolUnitPicker, { displayValue: unitHeight, field: "height", onChange: onUnitChange })) : (React__default.createElement(HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.heightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
? () => ({
rightSection: {
paddingRight: 0,
},
})
: undefined }))));
} }),
React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
content: unitSystem === 'imperial' ? 130 : 60,
}), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, inputMode: "decimal", min: 0, rightSection: enableUnitPicker ? (React__default.createElement(FitnessToolUnitPicker, { displayValue: unitWeight, field: "weight", onChange: onUnitChange })) : (React__default.createElement(HealthToolFormWrapper.Unit, { styles: { root: { paddingRight: 0 } } }, t('bmi.weightInput.desc'))), rightSectionWidth: 70, styles: !enableUnitPicker
? () => ({
rightSection: {
paddingRight: 0,
},
})
: undefined }))));
} }),
withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(ErrorLabel, { label: error.message, textProps: {
size: 'p4',
}, sx: { marginTop: 6 } }))));
} }),
React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))) },
React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(ErrorLabel, { label: error.message, textProps: {
size: 'p4',
}, sx: { marginTop: 6 } }))));
} }),
cardWrapperVariant === 'gray' || cardWrapperVariant === 'violet' ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
} }),
React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { py: 16, className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
React__default.createElement(Stack, { spacing: 16 },
React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
return (React__default.createElement(NewsletterCheckbox, Object.assign({ size: "sm", labelTextProps: { size: 'p4' }, onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value, useCollapse: false }, field)));
} }),
React__default.createElement(Box, { className: clsx(wrapperClasses.submitWrapper) },
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
};
const BmiForm = (_a) => {
var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, defaultUnitSystem, enableUnitPicker = true, formLayout = 'default', submitProps, withAdditionalQuestion, isMobile } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "defaultUnitSystem", "enableUnitPicker", "formLayout", "submitProps", "withAdditionalQuestion", "isMobile"]);
const { classes } = useStyles(undefined, { name: 'BmiForm' });
const { locale } = useTranslations();
const [isTouched, setIsTouched] = useState(false);
const initialUnitSystem = useMemo(() => defaultUnitSystem || 'metric', [defaultUnitSystem]);
const [unitSystem, setUnitSystem] = useState(initialUnitSystem);
const { control, handleSubmit, setValue, watch } = useForm({
defaultValues: {
question1: undefined,
question2: undefined,
newsletter: true,
},
});
const data = watch();
const { getHealthToolLink } = useHealthToolsCache(locale);
const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
const unitHeight = unitSystem === 'imperial' ? 'ft' : 'cm';
const unitWeight = unitSystem === 'imperial' ? 'lbs' : 'kg';
const convertHeightToCm = (value) => unitSystem === 'imperial' ? value * 30.48 : value;
const convertWeightToKg = (value) => unitSystem === 'imperial' ? value * 0.45359237 : value;
const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
const rawHeight = typeof data.height === 'number' ? data.height : Number(data.height);
const rawWeight = typeof data.weight === 'number' ? data.weight : Number(data.weight);
const submitValue = enableUnitPicker
? Object.assign(Object.assign({}, data), { bmi: getBmi({
height: convertHeightToCm(rawHeight),
weight: convertWeightToKg(rawWeight),
}), unit: unitSystem }) : (() => {
const height = bmiUnit.heightConvert(rawHeight);
const weight = bmiUnit.weightConvert(rawWeight);
return Object.assign(Object.assign({}, data), { height,
weight, bmi: getBmi({ height, weight }) });
})();
onInValid();
onSubmitProps && onSubmitProps(submitValue);
});
const onInValid = () => {
setIsTouched(true);
};
useEffect(() => {
Object.keys(valueProps || {}).forEach((k) => {
const key = k;
setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
shouldTouch: false,
shouldDirty: false,
shouldValidate: false,
});
});
}, [valueProps]);
useEffect(() => {
onChangeProps && onChangeProps(data);
}, [data]);
useEffect(() => {
setUnitSystem(initialUnitSystem);
}, [initialUnitSystem]);
const onUnitChange = (next, _changedField) => {
if (!enableUnitPicker)
return;
if (next === unitSystem)
return;
setUnitSystem(next);
// Clear both inputs when unit changes to avoid mixing unit systems.
// `Input.Number` in this repo supports `value` as `number | ''`,
// so we clear with '' to make the UI reset properly.
setValue('height', '', { shouldDirty: true, shouldValidate: false });
setValue('weight', '', { shouldDirty: true, shouldValidate: false });
};
const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
return (React__default.createElement(TemplateProvider, { variant: CustomStylesType.LEADGEN },
React__default.createElement(BmiFormContext.Provider, { value: {
control,
bmiGenerated,
isTouched,
linkTool,
submitProps,
withAdditionalQuestion,
classes,
enableUnitPicker,
unitSystem,
unitHeight,
unitWeight,
onUnitChange,
} }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps, { isMobile: isMobile }))))));
};
const HealthToolDefaultLayoutContext = createContext({});
const Row = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
const { gutter } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement(Grid, Object.assign({ gutter: gutter }, props), children));
};
const Col = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default.createElement(Grid.Col, Object.assign({ span: 12 }, props), children));
};
const Label = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
const { labelSize } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement(Text, Object.assign({ size: labelSize, weight: "semiBold" }, props, { span: true }), children));
};
const OptionLabel = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
const { optionLabelSize } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement(Text, Object.assign({ size: optionLabelSize, weight: "regular" }, props, { span: true }), children));
};
const SubLabel = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
const { subLabelSize } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement(Text, Object.assign({ size: subLabelSize }, props), children));
};
const InputNumber = (_a) => {
var { error } = _a, props = __rest(_a, ["error"]);
const { inputSize } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement("div", null,
React__default.createElement(Input.Number, Object.assign({ size: inputSize }, props)),
error && React__default.createElement(Error, { label: error })));
};
const GenderControl = (props) => {
const { inputSize } = useContext(HealthToolDefaultLayoutContext);
return React__default.createElement(GenderOptionControl, Object.assign({ size: inputSize }, props));
};
const Error = (props) => {
const { errorLabelSize } = useContext(HealthToolDefaultLayoutContext);
return (React__default.createElement(ErrorLabel, Object.assign({ textProps: { size: errorLabelSize }, sx: { marginTop: 5 } }, props)));
};
const HealthToolDefaultLayout = (_a) => {
var _b, _c, _d, _e, _f, _g;
var { children, isMobile } = _a, props = __rest(_a, ["children", "isMobile"]);
const merged = Object.assign({ isMobile, labelSize: (_b = props.labelSize) !== null && _b !== void 0 ? _b : (isMobile ? 'p2' : 's4'), subLabelSize: (_c = props.subLabelSize) !== null && _c !== void 0 ? _c : 'subText', optionLabelSize: (_d = props.optionLabelSize) !== null && _d !== void 0 ? _d : (isMobile ? 'p2' : 's4'), inputSize: (_e = props.inputSize) !== null && _e !== void 0 ? _e : (isMobile ? 'sm' : 'md'), gutter: (_f = props.gutter) !== null && _f !== void 0 ? _f : (isMobile ? 4 : 12), errorLabelSize: (_g = props.errorLabelSize) !== null && _g !== void 0 ? _g : 'p3' }, props);
return (React__default.createElement(HealthToolDefaultLayoutContext.Provider, { value: merged }, children));
};
var HealthToolDefaultLayout$1 = Object.assign(HealthToolDefaultLayout, {
Row,
Col,
SubLabel,
Label,
OptionLabel,
Input,
InputNumber,
GenderControl,
Error,
});
export { BmiForm as B, FitnessToolUnitPicker as F, HealthToolDefaultLayout$1 as H, NewsletterCheckbox as N, Question1Label as Q, Question2Label as a, Question2Description as b };