@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/index-c2578f13.js

@@ -0,0 +1,377 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var LastPeriod = require('./LastPeriod-1f403d10.js');
+var dateFns = require('date-fns');
+var core = require('@mantine/core');
+var form = require('@mantine/form');
+var dayjs = require('dayjs');
+var index$3 = require('./index-848c257f.js');
+var index = require('./index-d97f9371.js');
+require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+require('@mantine/hooks');
+require('./index-3ae93a30.js');
+require('./index-e0d59d3e.js');
+require('./utils-7effa670.js');
+require('./useMantineLocale-30235874.js');
+var index$2 = require('./index-1f94d57c.js');
+require('./other-b4596d33.js');
+var index$1 = require('./index-d1fb44a6.js');
+var other = require('@hhgtech/icons/other');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+
+const ConceptionDate = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M16.5 27.133c1.298 0 2.596-.149 3.868-.447a9.15 9.15 0 0 0 6.818-6.818 16.94 16.94 0 0 0 0-7.736 9.15 9.15 0 0 0-6.818-6.818 16.94 16.94 0 0 0-7.736 0 9.15 9.15 0 0 0-6.818 6.818A17 17 0 0 0 5.367 16a.867.867 0 1 1-1.734 0c0-1.43.165-2.862.494-4.264a10.88 10.88 0 0 1 8.109-8.11 18.7 18.7 0 0 1 8.528 0 10.88 10.88 0 0 1 8.11 8.11 18.7 18.7 0 0 1 0 8.528 10.88 10.88 0 0 1-8.11 8.11 18.7 18.7 0 0 1-4.264.493.867.867 0 0 1 0-1.734", fill: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "M11.633 16a4.867 4.867 0 1 1 9.734 0 4.867 4.867 0 0 1-9.734 0m4.867-3.133a3.133 3.133 0 1 0 0 6.266 3.133 3.133 0 0 0 0-6.266", fill: "#E85388" }),
+        React__default["default"].createElement("path", { d: "M9.834 25.333a2.667 2.667 0 1 0-2.298-1.312l-.084.084a3.25 3.25 0 0 0-.952 2.298c0 .726-.41 1.39-1.06 1.715l-1.238.619a.667.667 0 0 0 .596 1.193l1.24-.62a3.25 3.25 0 0 0 1.796-2.907c0-.508.202-.995.561-1.355l.084-.084c.397.235.86.37 1.355.37", fill: "#3E3F58" }))) : (React__default["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("circle", { cx: "9", cy: "6.75", fill: "#91CAFF", r: "6.75" }),
+        React__default["default"].createElement("circle", { cx: "9", cy: "6.75", fill: "#2D87F3", r: "5.4" }),
+        React__default["default"].createElement("path", { d: "M1.789 12.2a.245.245 0 0 1-.02-.489c.073-.006 1.795-.167 1.761-1.605-.013-.587.15-1.057.485-1.397.524-.53 1.273-.528 1.305-.527a.245.245 0 0 1-.002.49h-.002c-.011 0-.582.004-.955.385-.236.24-.351.59-.34 1.038.018.793-.367 1.41-1.114 1.787a3.3 3.3 0 0 1-1.118.319M.75 17.774a.245.245 0 0 1 .226-.263c.073-.006 1.786-.162 1.749-1.593-.016-.586.146-1.055.48-1.392.521-.528 1.27-.524 1.3-.523a.245.245 0 0 1-.006.49c-.015 0-.58.004-.949.38q-.352.362-.335 1.033c.02.791-.362 1.406-1.106 1.78a3.3 3.3 0 0 1-1.095.313.245.245 0 0 1-.263-.225", fill: "#D2D6DC" }),
+        React__default["default"].createElement("path", { d: "M8.659 5.035c-.562-.561-1.956-.078-2.699.665-.407.407-.635.91-.665 1.373v.124l1.145 1.16.181.042c.464-.03.966-.258 1.373-.665.743-.743 1.226-2.137.665-2.699", fill: "#E3F2FF" }),
+        React__default["default"].createElement("path", { d: "m5.295 7.073-.292.75a.55.55 0 0 0 .124.589l.155.155a.55.55 0 0 0 .589.124l.75-.292z", fill: "#91CAFF" }),
+        React__default["default"].createElement("path", { d: "M8.098 11.358a.87.87 0 0 0-.233-.523c-.562-.562-1.956-.079-2.699.664-.407.408-.635.91-.665 1.373v.125l1.146 1.16.18.042c.464-.03.966-.258 1.374-.666.566-.566.98-1.51.897-2.175", fill: "#E3F2FF" }),
+        React__default["default"].createElement("path", { d: "m4.5 12.872-.29.75a.55.55 0 0 0 .123.589l.156.155a.55.55 0 0 0 .588.124l.75-.292z", fill: "#91CAFF" })));
+};
+
+const IVF = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M15.804 28.278a3.16 3.16 0 0 1-3.18-3.208l.128-20.306 6.405.008-.128 20.307c-.012 1.757-1.452 3.191-3.225 3.2", fill: "#fff" }),
+        React__default["default"].createElement("path", { d: "m12.72 10.266-.116 14.788c-.011 1.757 1.423 3.197 3.18 3.208 1.774-.008 3.214-1.442 3.225-3.2V10.267", fill: "#FFEAF1" }),
+        React__default["default"].createElement("circle", { cx: "14.662", cy: "19.027", transform: "rotate(-49.83 14.662 19.027)", fill: "#3E3F58", r: "1.012" }),
+        React__default["default"].createElement("circle", { cx: "16.326", cy: "13.426", r: "1.012", transform: "rotate(-49.83 16.326 13.426)", fill: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "m14.662 19.026.087 1.022a.98.98 0 0 0 .344.667.98.98 0 0 1 .32.98l-.123.51m1.036-8.779.087 1.022a.98.98 0 0 0 .344.666.98.98 0 0 1 .32.98l-.123.511", stroke: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "M18.833 27.597a3.94 3.94 0 0 1-3.02 1.408 4 4 0 0 1-2.795-1.148 3.98 3.98 0 0 1-1.14-2.795l.108-20.553c0-.426.344-.756.753-.738.426 0 .757.345.738.754l-.108 20.553c.002.656.248 1.256.697 1.733a2.42 2.42 0 0 0 1.727.706 2.483 2.483 0 0 0 2.47-2.462l.109-20.553c0-.426.344-.757.753-.738.426 0 .757.344.738.754l-.108 20.553a3.85 3.85 0 0 1-.922 2.526", fill: "#202135" }),
+        React__default["default"].createElement("path", { d: "M20.753 4.975a.75.75 0 0 1-.58.262l-8.714-.027a.727.727 0 0 1-.738-.754c0-.425.344-.756.754-.737l8.713.026c.426 0 .756.344.738.754a.66.66 0 0 1-.173.476", fill: "#202135" }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M13.064 5.794a17.8 17.8 0 0 1 3.34-4.638l4.26 2.881a17.8 17.8 0 0 0-3.272 4.507l-1.08 2.12a.65.65 0 0 0 .124.76 7.9 7.9 0 0 1 2.296 4.81c.027.265-1.141 5.997-9.376 5.573-1.587-.082-5.724-1.269-6.12-2.86a8 8 0 0 1-.233-2.161c.124-4.165 3.718-7.648 7.884-7.647h.098a.65.65 0 0 0 .59-.36z", fill: "#BCDEFF" }),
+        React__default["default"].createElement("path", { d: "M20.75 3.234 16.696.496a.886.886 0 1 0-.992 1.469l4.056 2.738a.886.886 0 0 0 .992-1.469", fill: "#E3F2FF" }),
+        React__default["default"].createElement("path", { d: "M18.771 17.024a7.87 7.87 0 0 1-2.7 5.944A4.2 4.2 0 0 1 13.301 24H8.473a4.2 4.2 0 0 1-2.769-1.03 7.9 7.9 0 0 1-2.468-4.023c.924.468 2.191.805 3.922.805 1.142 0 2.01-.346 2.775-.834q.323-.21.629-.446c1.973-1.516 3.524-3.668 8.17-2.238q.04.39.04.79", fill: "#2D87F3" }),
+        React__default["default"].createElement("path", { d: "M11.858 15.5c-1.78.348-3.096-1.608-2.134-3.121a2.06 2.06 0 0 1 1.529-.944q.303-.03.588.025a.27.27 0 0 0 .268-.107c.282-.373.737-.573 1.2-.639.224-.031.374-.24.379-.44.021-.794.657-1.311 1.288-1.234.183.022.223.27.058.35l-.012.006a.9.9 0 0 0-.28.196c-.213.263-.187.407-.153.6.03.167.066.37-.04.715a1.45 1.45 0 0 1-.504.7c-.255.19-.445.23-.592.263-.088.019-.16.034-.223.076a.27.27 0 0 0-.07.379c.184.27.306.587.344.934a2.063 2.063 0 0 1-1.646 2.24", fill: "#fff" }),
+        React__default["default"].createElement("ellipse", { cx: "10", cy: "20.5", rx: "3", ry: "2.5", fill: "#FF6F4D" })));
+};
+
+var DueDateCalculatorType$1;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+})(DueDateCalculatorType$1 || (DueDateCalculatorType$1 = {}));
+
+const DueDateFormContext = React.createContext({});
+
+const ConceptionFormContext = React.createContext({});
+
+const DefaultLayout$2 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(ConceptionFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }))));
+};
+
+const InlineLayout$2 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(ConceptionFormContext);
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default["default"].createElement(index.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), error: null }))),
+        form.errors.lastPeriodDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.lastPeriodDate))));
+};
+
+const MbLayout$2 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(ConceptionFormContext);
+    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+        React__default["default"].createElement(index.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, rightSection: null, maxDate: new Date() }))));
+};
+
+var DueDateCalculatorType;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+})(DueDateCalculatorType || (DueDateCalculatorType = {}));
+const API_DATE_FORMAT = 'yyyy-MM-dd';
+const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
+    const pregnancyLength = 272 + (periodLength - 21);
+    const dueDate = new Date(lastPeriodDate);
+    dueDate.setDate(dueDate.getDate() + pregnancyLength);
+    return {
+        startDate: lastPeriodDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.lastPeriod + 1,
+            first_day: dateFns.format(lastPeriodDate, API_DATE_FORMAT),
+            cycle_length_days: periodLength,
+            conception_date: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateConception = (conceptionDate) => {
+    const dueDate = new Date(conceptionDate);
+    dueDate.setDate(dueDate.getDate() + 265);
+    return {
+        startDate: conceptionDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.conception + 1,
+            conception_date: dateFns.format(conceptionDate, API_DATE_FORMAT),
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateIVF = (IVFDate, numDayTransfer) => {
+    const dueDate = new Date(IVFDate);
+    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
+    return {
+        startDate: IVFDate,
+        dueDate,
+        otherInfo: {
+            method: DueDateCalculatorType.IVF + 1,
+            ivf_transfer_date: dateFns.format(IVFDate, API_DATE_FORMAT),
+            days_transfer: numDayTransfer,
+            conception_date: null,
+            first_day: null,
+            cycle_length_days: null,
+        },
+    };
+};
+
+const ConceptionForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const theme = core.useMantineTheme();
+    const { t } = useTranslations.useTranslations();
+    const form$1 = form.useForm({
+        initialValues: {
+            lastPeriodDate: new Date(),
+        },
+    });
+    const formProps = {
+        onSubmit: form$1.onSubmit((values) => {
+            const { lastPeriodDate } = values;
+            onSubmit(getDueDateConception(lastPeriodDate), `${index$2.QUERY_HEALTH_TOOL.type}=1&sd=${dayjs__default["default"](lastPeriodDate).format(index$2.API_DATE_FORMAT)}&${index$2.QUERY_HEALTH_TOOL.additional}= `);
+        }),
+    };
+    return (React__default["default"].createElement(ConceptionFormContext.Provider, { value: { form: form$1 } },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$2, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$2, null)) : (React__default["default"].createElement(DefaultLayout$2, null)),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const IVFFormContext = React.createContext({});
+
+const DefaultLayout$1 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form, transferDateOptions } = React.useContext(IVFFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index.DatePicker, Object.assign({ label: t('dueDatePage.ivf.transferDate') }, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default["default"].createElement(index$3.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$3.Radio, { key: idx, value: i.value, label: i.label })))))));
+};
+
+const InlineLayout$1 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form, transferDateOptions } = React.useContext(IVFFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.ivf.transferDate') },
+            React__default["default"].createElement(index.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { width: 'none' },
+            React__default["default"].createElement(index$3.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+                React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$3.Radio, { key: idx, value: i.value, label: i.label }))))))));
+};
+
+const MbLayout$1 = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form, transferDateOptions } = React.useContext(IVFFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.ivf.transferDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index.DatePicker, Object.assign({}, form.getInputProps('IVFDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), rightSection: null }))),
+        React__default["default"].createElement(index$3.Radio.Group, Object.assign({}, form.getInputProps('dayTransfer')),
+            React__default["default"].createElement(core.Group, null, transferDateOptions.map((i, idx) => (React__default["default"].createElement(index$3.Radio, { key: idx, value: i.value, label: i.label })))))));
+};
+
+const IVFForm = ({}) => {
+    var _a;
+    const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const transferDateOptions = [
+        {
+            value: '3',
+            label: t('dueDatePage.ivf.transferDateRadio', {
+                number: 3,
+            }),
+        },
+        {
+            value: '5',
+            label: t('dueDatePage.ivf.transferDateRadio', {
+                number: 5,
+            }),
+        },
+    ];
+    const form$1 = form.useForm({
+        initialValues: {
+            IVFDate: new Date(),
+            dayTransfer: (_a = transferDateOptions === null || transferDateOptions === void 0 ? void 0 : transferDateOptions[0]) === null || _a === void 0 ? void 0 : _a.value,
+        },
+    });
+    const formProps = {
+        onSubmit: form$1.onSubmit((values) => {
+            const { IVFDate } = values;
+            const dayTransfer = Number(values.dayTransfer);
+            onSubmit(getDueDateIVF(IVFDate, Number(dayTransfer)), `${index$2.QUERY_HEALTH_TOOL.type}=2&${index$2.QUERY_HEALTH_TOOL.startDate}=${dayjs__default["default"](IVFDate).format(index$2.API_DATE_FORMAT)}&${index$2.QUERY_HEALTH_TOOL.additional}=${dayTransfer}`);
+        }),
+    };
+    return (React__default["default"].createElement(IVFFormContext.Provider, { value: { form: form$1, transferDateOptions } },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout$1, null)) : theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout$1, null)) : (React__default["default"].createElement(DefaultLayout$1, null)),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const LastPeriodFormContext = React.createContext({});
+
+const DefaultLayout = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(LastPeriodFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index.DatePicker, Object.assign({ label: t('dueDatePage.lastPeriod.lastPeriodLabel') }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() })),
+        React__default["default"].createElement(index$3.Input.Wrapper, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'))))));
+};
+
+const InlineLayout = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(LastPeriodFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default["default"].createElement(index.DatePicker, Object.assign({}, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength'), { error: null }))),
+        form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const MbLayout = () => {
+    const { t } = useTranslations.useTranslations();
+    const { form } = React.useContext(LastPeriodFormContext);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index.DatePicker, Object.assign({ rightSection: null }, form.getInputProps('lastPeriodDate'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.periodLengthLabel'), rightSection: t('ovulationPage.dayUnit') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 20, max: 40, placeholder: t('tools.inputPlaceholder', {
+                    content: '30',
+                }) }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength))));
+};
+
+const LastPeriodForm = ({}) => {
+    const { formLayout, onSubmit, currentUrl, submitProps } = React.useContext(DueDateFormContext);
+    const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        initialValues: {
+            lastPeriodDate: new Date(),
+        },
+        validate: {
+            periodLength: form.isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const formProps = {
+        onSubmit: form$1.onSubmit((values) => {
+            const { periodLength, lastPeriodDate } = values;
+            onSubmit(getDueDateLastPeriod(lastPeriodDate, periodLength), `${index$2.QUERY_HEALTH_TOOL.type}=0&${index$2.QUERY_HEALTH_TOOL.startDate}=${dayjs__default["default"](lastPeriodDate).format(index$2.API_DATE_FORMAT)}&${index$2.QUERY_HEALTH_TOOL.additional}=${periodLength}`);
+        }),
+    };
+    return (React__default["default"].createElement(LastPeriodFormContext.Provider, { value: { form: form$1 } },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: formLayout }, formProps),
+            formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, null)) : isMarryBaby ? (React__default["default"].createElement(MbLayout, null)) : (React__default["default"].createElement(DefaultLayout, null)),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: currentUrl, className: "due-date-calculate-button", type: "submit" }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
+};
+
+const FormSwitcher = () => {
+    const { calculatorType } = React.useContext(DueDateFormContext);
+    return calculatorType === DueDateCalculatorType.lastPeriod ? (React__default["default"].createElement(LastPeriodForm, null)) : calculatorType === DueDateCalculatorType.conception ? (React__default["default"].createElement(ConceptionForm, null)) : calculatorType === DueDateCalculatorType.IVF ? (React__default["default"].createElement(IVFForm, null)) : null;
+};
+
+var OvulationCalculatorType;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const DueDateForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
+    const { t } = useTranslations.useTranslations();
+    const [calculatorType, setCalculatorType] = React.useState(DueDateCalculatorType$1.lastPeriod);
+    const calculatingMethods = [
+        {
+            value: DueDateCalculatorType$1.lastPeriod,
+            label: t('dueDatePage.lastPeriod'),
+            icon: React__default["default"].createElement(LastPeriod.LastPeriod, null),
+        },
+        {
+            value: DueDateCalculatorType$1.conception,
+            label: t('dueDatePage.conceptionDate'),
+            icon: React__default["default"].createElement(ConceptionDate, null),
+        },
+        {
+            value: DueDateCalculatorType$1.IVF,
+            label: t('dueDatePage.ivf'),
+            icon: React__default["default"].createElement(IVF, null),
+        },
+    ];
+    return (React__default["default"].createElement(DueDateFormContext.Provider, { value: {
+            calculatingMethods,
+            submitProps,
+            currentUrl,
+            isMobile,
+            formLayout,
+            onSubmit,
+            calculatorType,
+            setCalculatorType,
+        } },
+        React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ component: "div", formLayout: "default" }, props),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
+                React__default["default"].createElement(index$3.Input.Wrapper, { label: t('dueDatePage.calculationMethod') },
+                    React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, { isMobile: isMobile, data: calculatingMethods, defaultValue: String(DueDateCalculatorType$1.lastPeriod), onChange: (v) => setCalculatorType(Number(v)) }))),
+            React__default["default"].createElement(FormSwitcher, null))));
+};
+
+exports.DueDateForm = DueDateForm;

package/build/index-c2fec0fb.js

@@ -0,0 +1,239 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var form = require('@mantine/form');
+var useHealthToolCache = require('./useHealthToolCache-35767818.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+var index$4 = require('./index-e0d59d3e.js');
+var constants = require('./constants-bea20f60.js');
+var index$1 = require('./index-f31f282c.js');
+var index$3 = require('./index-848c257f.js');
+var index$2 = require('./index-d97f9371.js');
+require('@mantine/core');
+require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+require('@mantine/hooks');
+require('./index-3ae93a30.js');
+require('./utils-7effa670.js');
+require('./useMantineLocale-30235874.js');
+require('./index-1f94d57c.js');
+require('./other-b4596d33.js');
+var index = require('./index-d1fb44a6.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ThrFormContext = React.createContext({});
+
+const DefaultForm = (_a) => {
+    var _b;
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                content: '60',
+            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                rightSection: {
+                    width: 'auto',
+                },
+            }) })),
+        isAdult && (React__default["default"].createElement(index$3.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                value: option.value,
+                label: option.label,
+            })), styles: {
+                item: {
+                    whiteSpace: 'nowrap',
+                    padding: '10px 12px',
+                    fontSize: '14px',
+                },
+            }, withinPortal: true }, form.getInputProps('activeValue')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const InlineForm = (_a) => {
+    var _b;
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
+                React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, error: null, maxDate: new Date() }))),
+            form.errors.age && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.age))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
+                        rightSection: {
+                            width: 'auto',
+                        },
+                    }) }))),
+            form.errors.heartRate && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
+        isAdult && (React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+            React__default["default"].createElement(index$3.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+};
+
+const ThrForm = (_a) => {
+    var { formLayout, onSubmit, onError, submitProps } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const minRange = React.useRef(40);
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const form$1 = form.useForm({
+        initialValues: {
+            heartRate: 60,
+            activeValue: 'low_intensity',
+        },
+        validate: {
+            gender: form.isNotEmpty(t('validation.error.requiredField')),
+            age: form.isNotEmpty(t('validation.error.requiredField')),
+            heartRate: (value) => {
+                return Number(value) >= minRange.current && Number(value) <= 200
+                    ? null
+                    : t('tools.heartRateRangeErr', {
+                        min: minRange.current,
+                        max: 200,
+                    });
+            },
+        },
+    });
+    const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
+    const [isAdult, setIsAdult] = React.useState(false);
+    const rangeHeartRateByAge = [
+        {
+            idAge: 0,
+            minAge: 0,
+            maxAge: 18,
+            rangeMale: 40,
+            rangeFemale: 40,
+        },
+        {
+            idAge: 1,
+            minAge: 18,
+            maxAge: 25,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 2,
+            minAge: 25,
+            maxAge: 35,
+            rangeMale: 49,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 3,
+            minAge: 35,
+            maxAge: 45,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 4,
+            minAge: 45,
+            maxAge: 55,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 5,
+            minAge: 55,
+            maxAge: 65,
+            rangeMale: 51,
+            rangeFemale: 54,
+        },
+        {
+            idAge: 6,
+            minAge: 65,
+            maxAge: 120,
+            rangeMale: 50,
+            rangeFemale: 54,
+        },
+    ];
+    const activeValueNote = [
+        {
+            value: 'low_intensity',
+            label: t('targetHeartRate.lowIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/low.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/low-active.svg`),
+            content: t('targetHeartRate.lowIntensity.note'),
+        },
+        {
+            value: 'moderate_intensity',
+            label: t('targetHeartRate.moderateIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/moderate.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/moderate-active.svg`),
+            content: t('targetHeartRate.moderateIntensity.note'),
+        },
+        {
+            value: 'aerobic_zone',
+            label: t('targetHeartRate.aerobicZone.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/aerobic.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
+            content: t('targetHeartRate.aerobicZone.note'),
+        },
+        {
+            value: 'vigorous_intensity',
+            label: t('targetHeartRate.vigorousIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/vigorous.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
+            content: t('targetHeartRate.vigorousIntensity.note'),
+        },
+        {
+            value: 'maximum_intensity',
+            label: t('targetHeartRate.maximumIntensity.title'),
+            image: index$4.CommonGAssets.getAssetPath(`/maximum.svg`),
+            imageActive: index$4.CommonGAssets.getAssetPath(`/maximum-active.svg`),
+            content: t('targetHeartRate.maximumIntensity.note'),
+        },
+    ];
+    React.useEffect(() => {
+        const ageDate = form$1.getInputProps('age').value;
+        const gender = form$1.getInputProps('gender').value;
+        if (ageDate instanceof Date) {
+            const age = (new Date().getTime() - ageDate.getTime()) / 1000;
+            if (age >= 18 * 365 * 24 * 60 * 60)
+                setIsAdult(true);
+            else
+                setIsAdult(false);
+            const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
+                age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
+            minRange.current =
+                gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
+        }
+    }, [form$1]);
+    const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form$1.onSubmit(onSubmit, onError) });
+    return (React__default["default"].createElement(ThrFormContext.Provider, { value: {
+            isAdult,
+            activeValueNote,
+            linkTool,
+            form: form$1,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.ThrForm = ThrForm;