@hhgtech/hhg-components 1.29.449 → 1.29.450-beta-1

package/build/index-bbe5cb13.js

@@ -1,217 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-acd80713.js');
-var React = require('react');
-var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-dcb0cf9f.js');
-var constants = require('./constants-ffa1b205.js');
-var core = require('@mantine/core');
-var index$2 = require('./index-7fed156e.js');
-var index$3 = require('./index-7481f662.js');
-require('@mantine/dates');
-require('./index-2d74352f.js');
-require('./index-fd836996.js');
-require('./index-d7818ca5.js');
-require('./index-18acca73.js');
-var index$4 = require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
-var miscTheme = require('./miscTheme.js');
-require('./index.styles-61ce234f.js');
-var index = require('./index-2f23d479.js');
-require('@mantine/hooks');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var index$1 = require('./index-5322f269.js');
-var Locale = require('./Locale-21703205.js');
-var constantsDomainLocales = require('./constantsDomainLocales.js');
-var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const BmiFormContext = React.createContext({});
-
-const DefaultForm = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { t, locale } = index.useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = React.useContext(BmiFormContext);
-    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$2.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                        t('bmi.ageInput'),
-                        ' ',
-                        React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: '25',
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                        t('bmi.heightInput'),
-                        ' ',
-                        React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
-                        t('bmi.weightInput'),
-                        ' ',
-                        React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-            } }),
-        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                        React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                            React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                            React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
-                } }),
-            React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default["default"].createElement(index$4.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')), error: isTouched ? React__default["default"].createElement(index$3.ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                        React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                            React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                            React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
-                } }),
-            React__default["default"].createElement(core.Stack, { spacing: 16, sx: (theme) => ({
-                    backgroundColor: theme.colors.neutral[0],
-                    padding: `${core.rem(16)} ${core.rem(12)}`,
-                    borderBottomLeftRadius: 'inherit',
-                    borderBottomRightRadius: 'inherit',
-                    margin: `0 ${core.rem(-16)}  ${core.rem(-16)}`,
-                }) },
-                React__default["default"].createElement(reactHookForm.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 = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
-                        return (React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
-                    } }),
-                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))));
-};
-
-const InlineForm = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { t, locale } = index.useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = React.useContext(BmiFormContext);
-    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
-                    React__default["default"].createElement(index$2.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
-                    React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
-                            rightSection: {
-                                width: 'auto',
-                            },
-                        }) })));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
-                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: locale === Locale.LOCALE.Myanmar ? 6 : 170,
-                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, error.message))));
-            } }),
-        React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-                    React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
-                        React__default["default"].createElement(index$3.Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: locale === Locale.LOCALE.Myanmar ? 130 : 60,
-                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, error.message))));
-            } }),
-        withAdditionalQuestion ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactHookForm.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["default"].createElement(core.Box, null,
-                        React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
-                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
-                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$3.ErrorLabel, { label: error.message, textProps: {
-                                size: 'p4',
-                            }, sx: { marginTop: 6 } }))));
-                } }),
-            React__default["default"].createElement(reactHookForm.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["default"].createElement(core.Box, null,
-                        React__default["default"].createElement(index$3.Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default["default"].createElement(index$4.Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')) },
-                            React__default["default"].createElement(core.Flex, { gap: "lg", sx: { paddingTop: core.rem(8) } },
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default["default"].createElement(index$3.Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
-                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$3.ErrorLabel, { label: error.message, textProps: {
-                                size: 'p4',
-                            }, sx: { marginTop: 6 } }))));
-                } }),
-            React__default["default"].createElement(core.Stack, { className: "newsletter-block", spacing: 16, sx: (theme) => ({
-                    backgroundColor: theme.colors.neutral[0],
-                    padding: `${core.rem(16)} ${core.rem(12)}`,
-                    borderBottomLeftRadius: 'inherit',
-                    borderBottomRightRadius: 'inherit',
-                    margin: `0 ${core.rem(-16)}  ${core.rem(-16)}`,
-                    '.bmi-btn': {
-                        marginTop: 0,
-                    },
-                }) },
-                React__default["default"].createElement(reactHookForm.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 = tslib_es6.__rest(_b, ["value", "onChange", "name"]);
-                        return (React__default["default"].createElement(index$3.Checkbox, Object.assign({ size: "sm", label: React__default["default"].createElement(index$4.Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
-                    } }),
-                React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))));
-};
-
-const BmiForm = (_a) => {
-    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps, withAdditionalQuestion } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion"]);
-    const [isTouched, setIsTouched] = React.useState(false);
-    const { control, handleSubmit, setValue, watch } = reactHookForm.useForm({
-        defaultValues: {
-            question1: undefined,
-            question2: undefined,
-            newsletter: true,
-        },
-    });
-    const data = watch();
-    const { locale } = index.useTranslations();
-    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
-    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
-    const onValid = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        const height = bmiUnit.heightConvert(data.height);
-        const weight = bmiUnit.weightConvert(data.weight);
-        const submitValue = Object.assign(Object.assign({}, data), { height,
-            weight, bmi: embeddedHeathToolCards_helpers.getBmi({ height, weight }) });
-        onInValid();
-        onSubmitProps && onSubmitProps(submitValue);
-    });
-    const onInValid = () => {
-        setIsTouched(true);
-    };
-    React.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]);
-    React.useEffect(() => {
-        onChangeProps && onChangeProps(data);
-    }, [data]);
-    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
-    return (React__default["default"].createElement(BmiFormContext.Provider, { value: {
-            control,
-            bmiGenerated,
-            isTouched,
-            linkTool,
-            submitProps,
-            withAdditionalQuestion,
-        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
-};
-
-exports.BmiForm = BmiForm;

package/build/index-e4be8339.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-acd80713.js');
-var React = require('react');
-var core = require('@mantine/core');
-require('./index-7481f662.js');
-require('@mantine/dates');
-require('./index-2d74352f.js');
-require('./index-fd836996.js');
-require('./index-d7818ca5.js');
-require('./index-18acca73.js');
-var index$1 = require('./index-caaf6cac.js');
-var index$2 = require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
-var index = require('./index-2f23d479.js');
-require('@mantine/hooks');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var useStyles = core.createStyles((theme, { hasOnClickFn }) => {
-    return {
-        root: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: core.rem(16),
-        },
-        sponsorBox: {
-            display: 'flex',
-            gap: core.rem(12),
-            alignItems: 'center',
-            backgroundColor: theme.colors.neutral[0],
-            border: `1px solid ${theme.colors.neutral[1]}`,
-            borderRadius: core.rem(4),
-            padding: '4px 12px',
-            alignSelf: 'flex-start',
-        },
-        sponsorLogo: {
-            maxHeight: core.rem(32),
-        },
-        btn: {
-            minWidth: core.rem(180),
-            [theme.fn.largerThan('sm')]: {
-                alignSelf: 'flex-end',
-            },
-            visibility: hasOnClickFn ? 'visible' : 'hidden',
-        },
-    };
-});
-
-const BabyPoopForm = (_a) => {
-    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
-    const { t } = index.useTranslations();
-    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
-    return (React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
-        sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
-            React__default["default"].createElement(index$1.Text, { size: "p4" }, t('common.sponsoredBy')),
-            React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
-        React__default["default"].createElement(index$1.Text, { size: "p3", className: "description" }, babyPoopPage.description),
-        React__default["default"].createElement(index$2.Button, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
-};
-
-exports.BabyPoopForm = BabyPoopForm;