@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/{index-e3bbd009.js → index-1f94d57c.js}

@@ -1,175 +1,16 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-var index$1 = require('./index-1f3fc2e3.js');
-var isProduction = require('./isProduction-20cd663d.js');
-
-const siteHost = {
-    HELLO_HEALTH_GROUP: 'hellohealthgroup.com',
-    HELLO_DOCTOR: 'hellodoctor.com.ph',
-    HELLO_DOCTOR_FIL: 'hellodoctor.com.ph/fil',
-    HELLO_KRUPET: 'hellokrupet.com',
-    HELLO_SWASTHYA: 'helloswasthya.com',
-    HELLO_SEHAT: 'hellosehat.com',
-    HELLO_SAYARWON: 'hellosayarwon.com',
-    HELLO_DOKTOR: 'hellodoktor.com',
-    HELLO_KHUNMOR: 'hellokhunmor.com',
-    HELLO_YISHI: 'helloyishi.com.tw',
-    HELLO_BACSI: 'hellobacsi.com',
-    MARRY_BABY: 'www.marrybaby.vn',
-};
-const siteOptions = {
-    HELLO_HEALTH_GROUP: {
-        lng: index$1.LOCALE.PhilippinesEnglish,
-        ns: 'translation',
-        name: 'Hello Health Group',
-        theme: 'hellosite',
-        dayjs: 'en',
-        phoneCountry: 'PH',
-        siteId: 10,
-    },
-    HELLO_DOCTOR: {
-        lng: index$1.LOCALE.PhilippinesEnglish,
-        ns: 'translation',
-        name: 'Hello Doctor',
-        theme: 'hellosite',
-        dayjs: 'en',
-        phoneCountry: 'PH',
-        siteId: 5,
-    },
-    HELLO_DOCTOR_FIL: {
-        lng: index$1.LOCALE.PhilippinesTagalog,
-        ns: 'translation',
-        name: 'Hello Doctor',
-        theme: 'hellosite',
-        dayjs: 'tl-ph',
-        phoneCountry: 'PH',
-        siteId: 5,
-    },
-    HELLO_KRUPET: {
-        lng: index$1.LOCALE.Cambodia,
-        ns: 'translation',
-        name: 'Hello Krupet',
-        theme: 'hellosite',
-        dayjs: 'km',
-        phoneCountry: 'KH',
-        siteId: 4,
-    },
-    HELLO_SWASTHYA: {
-        lng: index$1.LOCALE.India,
-        ns: 'translation',
-        name: 'Hello Swasthya',
-        theme: 'hellosite',
-        dayjs: 'hi',
-        phoneCountry: 'IN',
-        siteId: 9,
-    },
-    HELLO_SEHAT: {
-        lng: index$1.LOCALE.Indonesia,
-        ns: 'translation',
-        name: 'Hello Sehat',
-        theme: 'hellosite',
-        dayjs: 'id',
-        phoneCountry: 'ID',
-        siteId: 2,
-    },
-    HELLO_SAYARWON: {
-        lng: index$1.LOCALE.Myanmar,
-        ns: 'translation',
-        name: 'Hello Sayarwon',
-        theme: 'hellosite',
-        dayjs: 'my',
-        phoneCountry: 'MM',
-        siteId: 7,
-    },
-    HELLO_DOKTOR: {
-        lng: index$1.LOCALE.Malaysia,
-        ns: 'translation',
-        name: 'Hello Doktor',
-        theme: 'hellosite',
-        dayjs: 'ms-my',
-        phoneCountry: 'MY',
-        siteId: 3,
-    },
-    HELLO_KHUNMOR: {
-        lng: index$1.LOCALE.Thailand,
-        ns: 'translation',
-        name: 'Hello Khunmor',
-        theme: 'hellosite',
-        dayjs: 'th',
-        phoneCountry: 'TH',
-        siteId: 6,
-    },
-    HELLO_YISHI: {
-        lng: index$1.LOCALE.Taiwan,
-        ns: 'translation',
-        name: 'Hello Yishi',
-        theme: 'hellosite',
-        dayjs: 'zh-tw',
-        phoneCountry: 'TW',
-        siteId: 8,
-    },
-    HELLO_BACSI: {
-        lng: index$1.LOCALE.Vietnam,
-        ns: 'translation',
-        name: 'Hello Bacsi',
-        theme: 'hellosite',
-        dayjs: 'vi',
-        phoneCountry: 'VN',
-        siteId: 1,
-    },
-    MARRY_BABY: {
-        lng: index$1.LOCALE.Vietnam,
-        ns: 'marrybaby',
-        name: 'Marry Baby',
-        theme: 'marrybaby',
-        dayjs: 'vi',
-        phoneCountry: 'VN',
-        siteId: 11,
-    },
-};
-
-exports.RISK_SCREENER_NAME = void 0;
-(function (RISK_SCREENER_NAME) {
-    RISK_SCREENER_NAME["HPV"] = "hpv";
-})(exports.RISK_SCREENER_NAME || (exports.RISK_SCREENER_NAME = {}));
-const RISK_SCREENER_SLUG = {
-    [index$1.LOCALE.Vietnam]: {
-        [exports.RISK_SCREENER_NAME.HPV]: 'hpv-vaccine',
-    },
-    [index$1.LOCALE.Indonesia]: {
-        [exports.RISK_SCREENER_NAME.HPV]: 'deteksi-dini-hpv',
-    },
-};
+require('./index-3ae93a30.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
+var constantsSite = require('./constantsSite.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsRiskScreener = require('./constantsRiskScreener.js');
+var Locale = require('./Locale-9e8a2452.js');
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
 const USER_GEOLOCATION_COORDINATES_COOKIE = 'userGeoLocationCoordinates';
-const domainLocales = {
-    'vi-VN': 'hellobacsi.com',
-    'id-ID': 'hellosehat.com',
-    'ms-MY': 'hellodoktor.com',
-    'km-KH': 'hellokrupet.com',
-    'en-PH': 'hellodoctor.com.ph',
-    'th-TH': 'hellokhunmor.com',
-    'my-MM': 'hellosayarwon.com',
-    'zh-TW': 'helloyishi.com.tw',
-    'hi-IN': 'helloswasthya.com',
-    'tl-PH': 'hellodoctor.com.ph',
-    'vi-VN_MB': 'marrybaby.vn',
-};
-const MAP_DOMAIN_BY_LOCALE = {
-    [index$1.LOCALE.Vietnam]: 'hellobacsi.com',
-    [index$1.LOCALE.Indonesia]: 'hellosehat.com',
-    [index$1.LOCALE.Malaysia]: 'hellodoktor.com',
-    [index$1.LOCALE.Cambodia]: 'hellokrupet.com',
-    [index$1.LOCALE.PhilippinesEnglish]: 'hellodoctor.com.ph',
-    [index$1.LOCALE.PhilippinesTagalog]: 'hellodoctor.com.ph',
-    [index$1.LOCALE.Thailand]: 'hellokhunmor.com',
-    [index$1.LOCALE.Myanmar]: 'hellosayarwon.com',
-    [index$1.LOCALE.Taiwan]: 'helloyishi.com.tw',
-    [index$1.LOCALE.India]: 'helloswasthya.com',
-};
 const LOCALE_SPECS = {
     'vi-VN': {
         LOGO_TYPE: 'hellobacsi',
@@ -499,7 +340,7 @@ const CARE_LOCALES = [
     'id-ID',
     // 'en-PH',
     // 'tl-PH',
-    ...(isProduction.isProduction ? [] : ['ms-MY']),
+    ...(constantsIsProduction.isProduction ? [] : ['ms-MY']),
     //  'zh-TW'
 ];
 const CARE_BOOKING_LOCALES = ['vi-VN', 'id-ID'];
@@ -816,58 +657,58 @@ exports.QUERY_HEALTH_TOOL = void 0;
 })(exports.QUERY_HEALTH_TOOL || (exports.QUERY_HEALTH_TOOL = {}));
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const ISO_FORMAT = {
-    [index$1.LOCALE.Vietnam]: {
+    [Locale.LOCALE.Vietnam]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
-    [index$1.LOCALE.Cambodia]: {
+    [Locale.LOCALE.Cambodia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.India]: {
+    [Locale.LOCALE.India]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Indonesia]: {
+    [Locale.LOCALE.Indonesia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
-    [index$1.LOCALE.Malaysia]: {
+    [Locale.LOCALE.Malaysia]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Thailand]: {
+    [Locale.LOCALE.Thailand]: {
         dateFormat: 'DD/MM/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Taiwan]: {
+    [Locale.LOCALE.Taiwan]: {
         dateFormat: 'YYYY/MM/DD',
         separator: ',',
     },
-    [index$1.LOCALE.PhilippinesTagalog]: {
+    [Locale.LOCALE.PhilippinesTagalog]: {
         dateFormat: 'MM/DD/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.PhilippinesEnglish]: {
+    [Locale.LOCALE.PhilippinesEnglish]: {
         dateFormat: 'MM/DD/YYYY',
         separator: '.',
     },
-    [index$1.LOCALE.Myanmar]: {
+    [Locale.LOCALE.Myanmar]: {
         dateFormat: 'DD/MM/YYYY',
         separator: ',',
     },
 };
 const BEARER_TOKEN_COOKIE = 'hhg_user_token';
 const DATE_FNS_LOCALE = {
-    [index$1.LOCALE.PhilippinesEnglish]: locale.enUS,
-    [index$1.LOCALE.Vietnam]: locale.vi,
-    [index$1.LOCALE.Cambodia]: locale.km,
-    [index$1.LOCALE.India]: locale.hi,
-    [index$1.LOCALE.Indonesia]: locale.id,
-    [index$1.LOCALE.Myanmar]: locale.enUS,
-    [index$1.LOCALE.Malaysia]: locale.ms,
-    [index$1.LOCALE.Thailand]: locale.th,
-    [index$1.LOCALE.Taiwan]: locale.zhTW,
+    [Locale.LOCALE.PhilippinesEnglish]: locale.enUS,
+    [Locale.LOCALE.Vietnam]: locale.vi,
+    [Locale.LOCALE.Cambodia]: locale.km,
+    [Locale.LOCALE.India]: locale.hi,
+    [Locale.LOCALE.Indonesia]: locale.id,
+    [Locale.LOCALE.Myanmar]: locale.enUS,
+    [Locale.LOCALE.Malaysia]: locale.ms,
+    [Locale.LOCALE.Thailand]: locale.th,
+    [Locale.LOCALE.Taiwan]: locale.zhTW,
 };
 const CDN_ADDRESS = 'https://cdn.hellohealthgroup.com/countries';
 const GA_TOKEN_COOKIE = '_ga';
@@ -879,8 +720,6 @@ var index = /*#__PURE__*/Object.freeze({
   basePath: basePath,
   SSO_URL: SSO_URL,
   USER_GEOLOCATION_COORDINATES_COOKIE: USER_GEOLOCATION_COORDINATES_COOKIE,
-  domainLocales: domainLocales,
-  MAP_DOMAIN_BY_LOCALE: MAP_DOMAIN_BY_LOCALE,
   LOCALE_SPECS: LOCALE_SPECS,
   STATIC_PAGES: STATIC_PAGES,
   UP_BASEPATH: UP_BASEPATH,
@@ -897,11 +736,13 @@ var index = /*#__PURE__*/Object.freeze({
   GA_TOKEN_COOKIE: GA_TOKEN_COOKIE,
   API_DATE_FORMAT: API_DATE_FORMAT,
   DATE_FNS_DATE_FORMAT: DATE_FNS_DATE_FORMAT,
-  siteHost: siteHost,
-  siteOptions: siteOptions,
-  get RISK_SCREENER_NAME () { return exports.RISK_SCREENER_NAME; },
-  RISK_SCREENER_SLUG: RISK_SCREENER_SLUG,
-  isProduction: isProduction.isProduction
+  siteHost: constantsSite.siteHost,
+  siteOptions: constantsSite.siteOptions,
+  domainLocales: constantsDomainLocales.domainLocales,
+  MAP_DOMAIN_BY_LOCALE: constantsDomainLocales.MAP_DOMAIN_BY_LOCALE,
+  get RISK_SCREENER_NAME () { return constantsRiskScreener.RISK_SCREENER_NAME; },
+  RISK_SCREENER_SLUG: constantsRiskScreener.RISK_SCREENER_SLUG,
+  isProduction: constantsIsProduction.isProduction
 });
 
 exports.API_DATE_FORMAT = API_DATE_FORMAT;
@@ -916,15 +757,10 @@ exports.FAVICONS = FAVICONS;
 exports.GA_TOKEN_COOKIE = GA_TOKEN_COOKIE;
 exports.ISO_FORMAT = ISO_FORMAT;
 exports.LOCALE_SPECS = LOCALE_SPECS;
-exports.MAP_DOMAIN_BY_LOCALE = MAP_DOMAIN_BY_LOCALE;
-exports.RISK_SCREENER_SLUG = RISK_SCREENER_SLUG;
 exports.SSO_URL = SSO_URL;
 exports.STATIC_PAGES = STATIC_PAGES;
 exports.TOGETHER_LOCALES = TOGETHER_LOCALES;
 exports.UP_BASEPATH = UP_BASEPATH;
 exports.USER_GEOLOCATION_COORDINATES_COOKIE = USER_GEOLOCATION_COORDINATES_COOKIE;
 exports.basePath = basePath;
-exports.domainLocales = domainLocales;
 exports.index = index;
-exports.siteHost = siteHost;
-exports.siteOptions = siteOptions;

package/build/index-249e3f6f.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var form = require('@mantine/form');
+var useHealthToolCache = require('./useHealthToolCache-35767818.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+var constants$1 = require('./constants-bea20f60.js');
+var index$1 = require('./index-848c257f.js');
+require('@mantine/dates');
+require('./index-1f94d57c.js');
+require('./index-3ae93a30.js');
+require('./index-e0d59d3e.js');
+require('./useMantineLocale-30235874.js');
+require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+require('@mantine/hooks');
+require('./utils-7effa670.js');
+require('./other-b4596d33.js');
+var index = require('./index-d1fb44a6.js');
+var constants = require('./constants-78b4275f.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const PWGFormContext = React.createContext({});
+
+const DefaultForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
+        React__default["default"].createElement(index$1.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                content: '50',
+            }) }, form.getInputProps('lastWeight'))),
+        React__default["default"].createElement(index$1.Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                content: '160',
+            }) }, form.getInputProps('height'))),
+        React__default["default"].createElement(index$1.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                content: '50',
+            }) }, form.getInputProps('weight'))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('height'), { min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+            React__default["default"].createElement(index.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    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.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
+            form.errors.pregnantWeek && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.lastWeight && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }) }))),
+            form.errors.height && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.height))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.weight && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.weight))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const PWGForm = (_a) => {
+    var { formLayout = 'default', submitProps, onSubmit } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "submitProps", "onSubmit"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        validate: {
+            pregnantWeek: form.isNotEmpty(t('validation.error.requiredField')),
+            height: form.isNotEmpty(t('validation.error.requiredField')),
+            weight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) >= Number(values.lastWeight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+            lastWeight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) < Number(values.weight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+        },
+    });
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const linkTool = React.useMemo(() => getHealthToolLink(constants$1.HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest);
+    return (React__default["default"].createElement(PWGFormContext.Provider, { value: {
+            linkTool,
+            form: form$1,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.PWGForm = PWGForm;

package/build/index-2f6d4fee.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var useHealthToolCache = require('./useHealthToolCache-35767818.js');
+var constants = require('./constants-bea20f60.js');
+var index$1 = require('./index-f31f282c.js');
+var index$2 = require('./index-848c257f.js');
+require('@mantine/core');
+require('@mantine/dates');
+require('./index-1f94d57c.js');
+require('./index-3ae93a30.js');
+require('./index-e0d59d3e.js');
+require('./useMantineLocale-30235874.js');
+var index$3 = require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+var miscTheme = require('./miscTheme.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+require('@mantine/hooks');
+require('./utils-7effa670.js');
+require('./other-b4596d33.js');
+var index = require('./index-d1fb44a6.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;
+    const { t, locale } = useTranslations.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index.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$1.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$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.ageInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.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$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.heightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '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$2.Input.Number, { label: React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
+                        t('bmi.weightInput'),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
+                        content: '60',
+                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
+            } }),
+        React__default["default"].createElement(index.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;
+    const { t, locale } = useTranslations.useTranslations();
+    const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
+    return (React__default["default"].createElement(index.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.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$1.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.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default["default"].createElement(index$2.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.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.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '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.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index.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.HealthToolFormWrapper.FormRow, null,
+                    React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default["default"].createElement(index$2.Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: '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.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        React__default["default"].createElement(index.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 } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
+    const [isTouched, setIsTouched] = React.useState(false);
+    const { control, handleSubmit, setValue, watch } = reactHookForm.useForm();
+    const data = watch();
+    const { locale } = useTranslations.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 = {
+            gender: data.gender,
+            age: data.age,
+            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,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.BmiForm = BmiForm;