@hhgtech/hhg-components 1.29.363-beta-1 → 1.29.363-beta-2

package/build/subot.js

@@ -3,75 +3,77 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index$2 = require('./index-4597d53c.js');
-var tslib_es6 = require('./tslib.es6-2e23e1b2.js');
-var index$3 = require('./index-05ddebba.js');
+var index$2 = require('./index-0608ea5e.js');
+var tslib_es6 = require('./tslib.es6-606ff01f.js');
+var index$3 = require('./index-811237e6.js');
 var Cookies = require('js-cookie');
 var fd = require('fastdom');
 var fastdomPromised = require('fastdom/extensions/fastdom-promised');
-var togetherComponentGlobalContext = require('./utils-b30189c1.js');
+var togetherComponentGlobalContext = require('./utils-117b8c86.js');
 var formatString = require('string-format');
-var index$1 = require('./index-a8e0ea94.js');
+var index$1 = require('./index-d8ae0ca3.js');
 var dayjs = require('dayjs');
+var constantsIsProduction = require('./constantsIsProduction.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var cn = require('classnames');
-var index$b = require('./index-93b1571a.js');
-var index$a = require('./index-5992647e.js');
+var index$c = require('./index-3023fc1d.js');
+var index$b = require('./index-f94d96b0.js');
 var framerMotion = require('framer-motion');
 var styled = require('@emotion/styled');
-var utils = require('./utils-7f6ff3c4.js');
-var index$4 = require('./index-42946da1.js');
+var utils = require('./utils-3cb0d22b.js');
+var index$4 = require('./index-477cebbf.js');
 var remarkable = require('remarkable');
 var other = require('@hhgtech/icons/other');
 var reactIntersectionObserver = require('react-intersection-observer');
 var core = require('@mantine/core');
-var index$5 = require('./index-9e0eb6a9.js');
+var index$5 = require('./index-02afe710.js');
 var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
-var constants = require('./constants-6846ba29.js');
+var constants = require('./constants-d500ce7e.js');
 var uuid = require('uuid');
-var index$6 = require('./index-2eae91af.js');
+var index$6 = require('./index-8d800d85.js');
 var miscTheme = require('./miscTheme.js');
-var constantsIsProduction = require('./constantsIsProduction.js');
-var index$7 = require('./index-195f6e5b.js');
+var index$7 = require('./index-6d0d2d4d.js');
 require('@mantine/dates');
-require('./useMantineLocale-6426be99.js');
-require('./index.styles-0207515c.js');
-require('./translationsContext-a7d3b749.js');
+require('./useMantineLocale-38878107.js');
+require('./index.styles-324e5c01.js');
+require('./translationsContext-12be2d75.js');
 require('@mantine/hooks');
-require('./other-076deeb8.js');
-require('./index-32cfdd3a.js');
+require('./other-e8ccd21a.js');
+require('./index-2e487c4d.js');
 var isEmpty = require('lodash/isEmpty');
 var reactHookForm = require('react-hook-form');
 var PhoneInputBase = require('react-phone-number-input');
 var api = require('@react-google-maps/api');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-2f527f55.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-7d230bda.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var Locale = require('./Locale-043d083b.js');
-var InputDate = require('./InputDate-ce2a409e.js');
-var index$8 = require('./index-df64e24f.js');
-var index$9 = require('./index-317dae80.js');
-var store = require('./store-4613ec9c.js');
-var utils$1 = require('./utils-b20e2a7f.js');
+var Locale = require('./Locale-f4106b88.js');
+var get = require('lodash/get');
+var index$8 = require('./index-5dfb877f.js');
+var index$9 = require('./index-39286805.js');
+var index$a = require('./index-c03acf1f.js');
+var store = require('./store-389f5e92.js');
+var utils$1 = require('./utils-f2c7aec1.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./index-ab81ccf1.js');
+require('./index-80aa2faa.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('./togetherApiPaths.js');
-require('./index-a95a0812.js');
-require('./WhatsApp-1347df20.js');
-require('./Spinner-4a032444.js');
-require('./index-43ae933f.js');
-require('./useScreenSize-b501ca79.js');
+require('./index-e67dced7.js');
+require('./WhatsApp-a51ca5c2.js');
+require('./Spinner-3ba389bd.js');
+require('./index-d402790d.js');
+require('./useScreenSize-4b3a1f5f.js');
 require('@mantine/carousel');
-require('./useUniqueId-2fd547e0.js');
+require('./useUniqueId-d4e54fbf.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
-require('@emotion/react');
+require('date-fns');
+require('react-day-picker/DayPickerInput');
 require('zustand');
-require('./normalizeLink-888a76f2.js');
-require('./healthTools-d9cd9a0a.js');
+require('./normalizeLink-e450c12c.js');
+require('./healthTools-d3486cb8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -86,6 +88,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 var isSameOrBefore__default = /*#__PURE__*/_interopDefault(isSameOrBefore);
 var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
 var PhoneInputBase__default = /*#__PURE__*/_interopDefault(PhoneInputBase);
+var get__default = /*#__PURE__*/_interopDefault(get);
 
 // extend fastdom
 const fastdom = fd__default["default"].extend(fastdomPromised__default["default"]);
@@ -230,6 +233,10 @@ const subotInlineImpression = (data) => tslib_es6.__awaiter(void 0, void 0, void
     catch (error) { }
 });
 
+const isDurgoCampaignFn = (botId) => {
+    const botIdNumber = Number(botId);
+    return constantsIsProduction.isProduction ? botIdNumber === 2629 : botIdNumber === 1092;
+};
 const calcAge = (value) => {
     const birthDate = dayjs__default["default"](value);
     const today = dayjs__default["default"]();
@@ -243,43 +250,13 @@ const calcAge = (value) => {
  * Temporary hard the range of age from 1 -> 6 for Durgo Campaign at this time
  * Ticket: https://hhgdev.atlassian.net/browse/HTO-1327
  */
-const validateAge = (value, errMsg, conditions) => {
-    const { birthDate, today } = calcAge(value);
-    if (!conditions || !conditions.length) {
-        return true;
-    }
-    const diff = today.diff(birthDate, 'M') / 12;
-    /**
-     * No body in future can validate
-     */
-    if (diff < 0 || (diff === 0 && today.date() < birthDate.date())) {
-        return errMsg;
-    }
-    /**
-     * from, to
-     * if from === null then compare 0 - to
-     * if to === null then compare from - infinity
-     */
-    let isValid = false;
-    if (Array.isArray(conditions)) {
-        for (const cond of conditions) {
-            const { from, to } = cond || {};
-            if (!from && !to) {
-                break;
-            }
-            if ((from <= diff && diff <= to) ||
-                (from <= diff && to === null) ||
-                (from === null && to <= diff)) {
-                isValid = true;
-                break;
-            }
-        }
+const validateAge = (value, errMsg) => {
+    const { birthDate, today, age } = calcAge(value);
+    if (today.month() < birthDate.month() ||
+        (today.month() === birthDate.month() && today.date() < birthDate.date())) {
+        return age >= 1 && age <= 6 ? true : errMsg;
     }
-    if (typeof localStorage !== 'undefined' &&
-        localStorage.getItem('hhg_debug') === 'true') {
-        console.log('Log __DOB__ : ', { conditions, isValid, diff });
-    }
-    return isValid || errMsg;
+    return age >= 1 && age <= 6 ? true : errMsg;
 };
 
 const getDynamicScore = (node) => {
@@ -3608,239 +3585,6 @@ const useAddressMultipleLevelData = (countryCode) => {
     };
 };
 
-const CheckCircleGreen = (props) => {
-    return (React__default["default"].createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8m2.467.467 2.393 2.393c.26.26.687.26.94 0l5.06-5.06a.664.664 0 1 0-.94-.94L6.667 9.447 4.74 7.527a.664.664 0 1 0-.94.94", fill: "#00B16A" })));
-};
-
-const IconEdit = (props) => {
-    return (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-        React__default["default"].createElement("path", { d: "M19.1719 2C18.4481 2 17.7244 2.27562 17.1719 2.82812L16 4L20 8L21.1719 6.82812C22.2759 5.72412 22.2759 3.93313 21.1719 2.82812C20.6194 2.27562 19.8956 2 19.1719 2ZM14.5 5.5L3 17V21H7L18.5 9.5L14.5 5.5Z", fill: "#2685F1" })));
-};
-
-const InfoError = (props) => {
-    return (React__default["default"].createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 1.333A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333m0 7.334A.67.67 0 0 1 7.333 8V5.333c0-.366.3-.666.667-.666s.667.3.667.666V8c0 .367-.3.667-.667.667M7.333 10v1.333h1.334V10z", fill: "#F44D2C" })));
-};
-
-const CountDown = ({ onFinish, onClick, isFinished, resendLabel, className }, ref) => {
-    const [count, setCount] = React.useState(index$1.TIME_RESET_RESEND_OTP);
-    const intervalId = React.useRef();
-    const onFinishLatest = React.useRef();
-    const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    onFinishLatest.current = onFinish;
-    const resetCountDown = React.useCallback(() => {
-        let currentCount = index$1.TIME_RESET_RESEND_OTP;
-        setCount(currentCount);
-        clearInterval(intervalId.current);
-        intervalId.current = setInterval(() => {
-            var _a;
-            currentCount = currentCount - 1;
-            setCount(currentCount);
-            if (currentCount === 0) {
-                (_a = onFinishLatest.current) === null || _a === void 0 ? void 0 : _a.call(onFinishLatest, true);
-                clearInterval(intervalId.current);
-            }
-        }, 1000);
-    }, []);
-    const cancelCountDown = React.useCallback(() => {
-        setCount(0);
-        clearInterval(intervalId.current);
-    }, []);
-    React.useImperativeHandle(ref, () => ({
-        reset: resetCountDown,
-        cancel: cancelCountDown,
-        isFinished: count === 0,
-    }));
-    React.useEffect(() => {
-        resetCountDown();
-        return () => {
-            clearInterval(intervalId.current);
-        };
-    }, []);
-    return (React__default["default"].createElement("div", { className: className, onClick: onClick },
-        resendLabel
-            ? resendLabel
-            : f({
-                id: 'subot.resendOTP.button',
-                defaultMessage: 'Resend',
-            }),
-        count > 0 && !isFinished && ` (${count}s)`));
-};
-var CountDown$1 = React.forwardRef(CountDown);
-
-styled__default["default"].div `
-  margin: 0 auto;
-  background: #f7f9fc;
-  border-radius: ${miscTheme.theme.borderRadius};
-  ${utils.MediaQueries.mbDown} {
-    padding: 16px;
-  }
-  ${utils.MediaQueries.tdDown} {
-    padding: 24px;
-  }
-  ${utils.MediaQueries.mbUp} {
-    padding: 32px;
-  }
-  .user-info-form {
-    .input-row {
-      ${utils.MediaQueries.mbDown} {
-        margin-bottom: 16px;
-      }
-      ${utils.MediaQueries.tdDown} {
-        margin-bottom: 18px;
-      }
-      ${utils.MediaQueries.mbUp} {
-        margin-bottom: 20px;
-      }
-      .address-dropdown > ul {
-        z-index: 20000;
-        max-height: 250px;
-        overflow-y: auto;
-      }
-
-      &.error {
-        margin-bottom: 0;
-      }
-    }
-    label {
-      display: block;
-      margin-bottom: 6px;
-      color: ${miscTheme.theme.colors.gray600};
-      font-size: 13px;
-      font-weight: bold;
-    }
-    input[type='tel'],
-    input[type='number'] {
-      width: 100%;
-      padding: 12px 16px;
-      border: solid 1px ${miscTheme.theme.colors.gray200};
-      background: #fff;
-      border-radius: ${miscTheme.theme.borderRadius};
-
-      &[disabled] {
-        background-color: ${miscTheme.theme.colors.gray100};
-      }
-    }
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number']::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-    }
-    button {
-      width: 100%;
-    }
-    .error-message {
-      display: block;
-      padding-bottom: 20px;
-      color: ${miscTheme.theme.colors.red700};
-      font-weight: ${miscTheme.theme.sizes.fwRegular};
-    }
-    .submit-btn {
-      padding: 12px 24px;
-      background-color: ${miscTheme.theme.colors.primaryBase};
-      border-radius: ${miscTheme.theme.borderRadius};
-      color: #fff;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 24px;
-      transition: background-color 0.3s, border-color 0.3s;
-      display: flex;
-      justify-content: center;
-      &:hover {
-        background-color: ${miscTheme.theme.colors.primaryHover};
-      }
-      &[disabled] {
-        background-color: ${miscTheme.theme.colors.gray200};
-        color: #bfbfbf;
-        cursor: not-allowed;
-      }
-
-      .spinner {
-        margin-right: 20px;
-      }
-    }
-    .submit-btn-row {
-      ${utils.MediaQueries.mbUp} {
-        margin-bottom: 16px;
-      }
-      ${utils.MediaQueries.tdDown} {
-        margin-bottom: 14px;
-      }
-      ${utils.MediaQueries.mbDown} {
-        margin-bottom: 12px;
-      }
-      .subot-checkbox {
-        display: flex;
-        align-items: flex-start;
-        margin: 0;
-        cursor: pointer;
-        &__input {
-          position: relative;
-          display: block;
-          overflow: hidden;
-          width: 18px;
-          height: 18px;
-          box-sizing: border-box;
-          padding: 0;
-          margin-right: 10px;
-          &:before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            display: flex;
-            background-color: ${miscTheme.theme.colors.primaryBase};
-            background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="%232D87F3" stroke="%232D87F3" stroke-width="2"/><path d="M15.5714 8L9.67857 14L7 11.2727" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: 120%;
-            content: '';
-            opacity: 0;
-            transition: 0.3s all ease;
-          }
-          &:checked:before {
-            opacity: 1;
-            transition: 0.3s all ease;
-          }
-        }
-        &__label {
-          flex: 1;
-          font-weight: 400;
-          line-height: 1.4;
-        }
-      }
-    }
-  }
-`;
-const StyleWrapperPhoneInput = styled__default["default"].div `
-  position: relative;
-
-  .PhoneInputCountry {
-    background-color: #f2f2f2;
-
-    .PhoneInputCountrySelectArrow {
-      display: none !important;
-    }
-  }
-
-  .icon-edit-phone {
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    right: 16px;
-    top: 17px;
-    cursor: pointer;
-
-    path {
-      fill: ${miscTheme.theme.colors.gray600};
-    }
-  }
-`;
-
 const Location = (props) => {
     return (React__default["default"].createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
         React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.167 7.72A5.83 5.83 0 0 1 10 1.889a5.83 5.83 0 0 1 5.833 5.833c0 3.475-3.683 8.267-5.191 10.092-.334.4-.942.4-1.275 0-1.517-1.825-5.2-6.617-5.2-10.092m3.75 0a2.084 2.084 0 1 0 4.168 0 2.084 2.084 0 0 0-4.168 0", fill: "#ADB3BC" })));
@@ -4384,27 +4128,6 @@ const StyledUserInfoFormContainer = styled__default["default"].div `
         text-decoration: none;
       }
     }
-
-    .subot_input_date {
-      --input-height: 46px;
-      --input-max-width: 100%;
-      input[type='text'] {
-        padding: 0 !important;
-        background-color: transparent !important;
-        background-image: none !important;
-        border: none !important;
-        line-height: 0.5;
-      }
-
-      .input_date-input_container {
-        background-color: #fff;
-
-        &:focus-within,
-        &.input_date-input_shrink {
-          --input-padding-y: 5px;
-        }
-      }
-    }
   }
 
   &.si-form-revamp {
@@ -4547,38 +4270,241 @@ const getTransPleaseVerifiedOtp = () => {
     pleaseVerifiedOtp.set(Locale.LOCALE.Thailand, 'กรุณาตรวจสอบหมายเลขโทรศัพท์ของคุณ');
     pleaseVerifiedOtp.set(Locale.LOCALE.PhilippinesTagalog, 'Paki-verify ang iyong numero ng telepono');
     return pleaseVerifiedOtp;
-};
-const validateDateField = (value, isSubmitting, f, cb) => {
-    let errMsg = f({
-        id: 'error.day.invalid',
-        defaultMessage: 'This date is not valid, please update.',
-    });
-    if (!value) {
-        errMsg = f({
-            id: 'validation.error.requiredField',
-            defaultMessage: 'This field is required',
-        });
-        return errMsg;
-    }
-    if (typeof value === 'string') {
-        const valueArr = value.split('/');
-        if (valueArr.length === 3) {
-            return errMsg;
-        }
-        else {
-            return isSubmitting ? errMsg : true;
-        }
-    }
-    const dayInJs = dayjs__default["default"](value);
-    if (!dayInJs.isValid()) {
-        return errMsg;
-    }
-    if (cb) {
-        return cb(value);
-    }
-    return true;
 };
 
+const CheckCircleGreen = (props) => {
+    return (React__default["default"].createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8m2.467.467 2.393 2.393c.26.26.687.26.94 0l5.06-5.06a.664.664 0 1 0-.94-.94L6.667 9.447 4.74 7.527a.664.664 0 1 0-.94.94", fill: "#00B16A" })));
+};
+
+const IconEdit = (props) => {
+    return (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M19.1719 2C18.4481 2 17.7244 2.27562 17.1719 2.82812L16 4L20 8L21.1719 6.82812C22.2759 5.72412 22.2759 3.93313 21.1719 2.82812C20.6194 2.27562 19.8956 2 19.1719 2ZM14.5 5.5L3 17V21H7L18.5 9.5L14.5 5.5Z", fill: "#2685F1" })));
+};
+
+const InfoError = (props) => {
+    return (React__default["default"].createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 1.333A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333m0 7.334A.67.67 0 0 1 7.333 8V5.333c0-.366.3-.666.667-.666s.667.3.667.666V8c0 .367-.3.667-.667.667M7.333 10v1.333h1.334V10z", fill: "#F44D2C" })));
+};
+
+const CountDown = ({ onFinish, onClick, isFinished, resendLabel, className }, ref) => {
+    const [count, setCount] = React.useState(index$1.TIME_RESET_RESEND_OTP);
+    const intervalId = React.useRef();
+    const onFinishLatest = React.useRef();
+    const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    onFinishLatest.current = onFinish;
+    const resetCountDown = React.useCallback(() => {
+        let currentCount = index$1.TIME_RESET_RESEND_OTP;
+        setCount(currentCount);
+        clearInterval(intervalId.current);
+        intervalId.current = setInterval(() => {
+            var _a;
+            currentCount = currentCount - 1;
+            setCount(currentCount);
+            if (currentCount === 0) {
+                (_a = onFinishLatest.current) === null || _a === void 0 ? void 0 : _a.call(onFinishLatest, true);
+                clearInterval(intervalId.current);
+            }
+        }, 1000);
+    }, []);
+    const cancelCountDown = React.useCallback(() => {
+        setCount(0);
+        clearInterval(intervalId.current);
+    }, []);
+    React.useImperativeHandle(ref, () => ({
+        reset: resetCountDown,
+        cancel: cancelCountDown,
+        isFinished: count === 0,
+    }));
+    React.useEffect(() => {
+        resetCountDown();
+        return () => {
+            clearInterval(intervalId.current);
+        };
+    }, []);
+    return (React__default["default"].createElement("div", { className: className, onClick: onClick },
+        resendLabel
+            ? resendLabel
+            : f({
+                id: 'subot.resendOTP.button',
+                defaultMessage: 'Resend',
+            }),
+        count > 0 && !isFinished && ` (${count}s)`));
+};
+var CountDown$1 = React.forwardRef(CountDown);
+
+styled__default["default"].div `
+  margin: 0 auto;
+  background: #f7f9fc;
+  border-radius: ${miscTheme.theme.borderRadius};
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px;
+  }
+  ${utils.MediaQueries.tdDown} {
+    padding: 24px;
+  }
+  ${utils.MediaQueries.mbUp} {
+    padding: 32px;
+  }
+  .user-info-form {
+    .input-row {
+      ${utils.MediaQueries.mbDown} {
+        margin-bottom: 16px;
+      }
+      ${utils.MediaQueries.tdDown} {
+        margin-bottom: 18px;
+      }
+      ${utils.MediaQueries.mbUp} {
+        margin-bottom: 20px;
+      }
+      .address-dropdown > ul {
+        z-index: 20000;
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      &.error {
+        margin-bottom: 0;
+      }
+    }
+    label {
+      display: block;
+      margin-bottom: 6px;
+      color: ${miscTheme.theme.colors.gray600};
+      font-size: 13px;
+      font-weight: bold;
+    }
+    input[type='tel'],
+    input[type='number'] {
+      width: 100%;
+      padding: 12px 16px;
+      border: solid 1px ${miscTheme.theme.colors.gray200};
+      background: #fff;
+      border-radius: ${miscTheme.theme.borderRadius};
+
+      &[disabled] {
+        background-color: ${miscTheme.theme.colors.gray100};
+      }
+    }
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+    button {
+      width: 100%;
+    }
+    .error-message {
+      display: block;
+      padding-bottom: 20px;
+      color: ${miscTheme.theme.colors.red700};
+      font-weight: ${miscTheme.theme.sizes.fwRegular};
+    }
+    .submit-btn {
+      padding: 12px 24px;
+      background-color: ${miscTheme.theme.colors.primaryBase};
+      border-radius: ${miscTheme.theme.borderRadius};
+      color: #fff;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+      transition: background-color 0.3s, border-color 0.3s;
+      display: flex;
+      justify-content: center;
+      &:hover {
+        background-color: ${miscTheme.theme.colors.primaryHover};
+      }
+      &[disabled] {
+        background-color: ${miscTheme.theme.colors.gray200};
+        color: #bfbfbf;
+        cursor: not-allowed;
+      }
+
+      .spinner {
+        margin-right: 20px;
+      }
+    }
+    .submit-btn-row {
+      ${utils.MediaQueries.mbUp} {
+        margin-bottom: 16px;
+      }
+      ${utils.MediaQueries.tdDown} {
+        margin-bottom: 14px;
+      }
+      ${utils.MediaQueries.mbDown} {
+        margin-bottom: 12px;
+      }
+      .subot-checkbox {
+        display: flex;
+        align-items: flex-start;
+        margin: 0;
+        cursor: pointer;
+        &__input {
+          position: relative;
+          display: block;
+          overflow: hidden;
+          width: 18px;
+          height: 18px;
+          box-sizing: border-box;
+          padding: 0;
+          margin-right: 10px;
+          &:before {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            background-color: ${miscTheme.theme.colors.primaryBase};
+            background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="%232D87F3" stroke="%232D87F3" stroke-width="2"/><path d="M15.5714 8L9.67857 14L7 11.2727" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 120%;
+            content: '';
+            opacity: 0;
+            transition: 0.3s all ease;
+          }
+          &:checked:before {
+            opacity: 1;
+            transition: 0.3s all ease;
+          }
+        }
+        &__label {
+          flex: 1;
+          font-weight: 400;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+`;
+const StyleWrapperPhoneInput = styled__default["default"].div `
+  position: relative;
+
+  .PhoneInputCountry {
+    background-color: #f2f2f2;
+
+    .PhoneInputCountrySelectArrow {
+      display: none !important;
+    }
+  }
+
+  .icon-edit-phone {
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    right: 16px;
+    top: 17px;
+    cursor: pointer;
+
+    path {
+      fill: ${miscTheme.theme.colors.gray600};
+    }
+  }
+`;
+
 var _a, _b, _c, _d, _e;
 const StyledPhoneCode = styled__default["default"].div `
   display: flex;
@@ -4704,46 +4630,44 @@ const PhoneInputWithCode = (props) => {
     return (React__default["default"].createElement(StyledPhoneInputWithCode, Object.assign({}, props, { flagComponent: FlagComponent })));
 };
 
-const DOB = ({ action, trigger, control, locale: localeProps, labelTuples, isSubmitting, }) => {
-    const { id, key, label, validated_message, validated_conditions } = action !== null && action !== void 0 ? action : {};
-    const locale = localeProps || (togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.locale);
+const DOB = ({ action, setValue, trigger, register, errors, botId, }) => {
+    const { id, key, label } = action !== null && action !== void 0 ? action : {};
+    const locale = togetherComponentGlobalContext.GlobalData === null || togetherComponentGlobalContext.GlobalData === void 0 ? void 0 : togetherComponentGlobalContext.GlobalData.locale;
     const { formatMessage: f } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    /**
+     * Temporary hard for Durgo Campaign at this time
+     * Ticket: https://hhgdev.atlassian.net/browse/HTO-1327
+     * Production is: 2629
+     * Staging is: 1092
+     */
+    const isDurgoCampaign = isDurgoCampaignFn(botId);
+    const error = get__default["default"](errors, key);
+    const dobErrMsg = get__default["default"](error, 'message');
+    const handleOnChange = (_value) => {
+        const dateString = dayjs__default["default"](_value).format(index$3.API_DATE_FORMAT);
+        setValue(key, dateString);
+        trigger(key);
+    };
     return (React__default["default"].createElement("div", { className: "input-row", key: id },
         React__default["default"].createElement("label", { htmlFor: key }, label),
-        React__default["default"].createElement(reactHookForm.Controller, { name: action.key, control: control, rules: {
-                required: {
-                    value: true,
-                    message: f({
-                        id: 'validation.error.requiredField',
-                        defaultMessage: 'This field is required',
-                    }),
-                },
+        React__default["default"].createElement(StyleDatePickerInput, null,
+            React__default["default"].createElement(index$8.DatePicker, { locale: locale || 'en-PH', displayDateFormat: index$3.DATE_FNS_DATE_FORMAT, onChange: handleOnChange }),
+            React__default["default"].createElement("input", Object.assign({ id: id, type: "date", className: "input-date" }, register(key, {
+                required: true,
                 validate: {
-                    ageRange: (value) => validateDateField(value, isSubmitting, f, (value) => validateAge(value, validated_message ||
-                        f({
+                    ageRange: (value) => isDurgoCampaign
+                        ? validateAge(value, f({
                             id: 'validation.error.requiredAgeGroup',
                             defaultMessage: 'Sorry, your child is not in the required Age Group.',
-                        }), (() => {
-                        try {
-                            return JSON.parse(validated_conditions);
-                        }
-                        catch (error) {
-                            return [];
-                        }
-                    })())),
+                        }))
+                        : true,
                 },
-            }, render: ({ field, fieldState }) => {
-                const { value, name, onChange } = field, restField = tslib_es6.__rest(field, ["value", "name", "onChange"]);
-                const { error } = fieldState;
-                const isError = !!error;
-                return (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(StyleDatePickerInput, null,
-                        React__default["default"].createElement(InputDate.InputDate, Object.assign({}, restField, { defaultValue: value, onChange: (val) => {
-                                onChange(val);
-                                trigger(name);
-                            }, labelTuples: labelTuples, locale: locale, error: isError, className: "subot_input subot_input_date" }))),
-                    isError && React__default["default"].createElement("p", { className: "error-message" }, error === null || error === void 0 ? void 0 : error.message)));
-            } })));
+            })))),
+        error && (React__default["default"].createElement("p", { className: "error-message" }, dobErrMsg ||
+            f({
+                id: 'validation.error.requiredField',
+                defaultMessage: 'This field is required',
+            })))));
 };
 
 const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSubmitMeta, isFormRevamp, botId, nodeId, trackingSubmitBtn, }) => {
@@ -4801,12 +4725,6 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                 return;
             }
             data[d.key] = d.value;
-            if ([
-                index$2.ELEMENT_CONTROL_INPUT_TYPE[index$2.NodeActionType.USER_SUBMIT_DATE],
-                index$2.ELEMENT_CONTROL_INPUT_TYPE[index$2.NodeActionType.USER_SUBMIT_DOB],
-            ].includes(d.control)) {
-                data[d.key] = dayjs__default["default"](d.value, index$3.API_DATE_FORMAT).toDate();
-            }
         });
         if (data['otpPhoneNumber']) {
             setVerifiedOTP(true);
@@ -4873,17 +4791,10 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
             return index$2.NodeActionType.USER_SUBMIT_ADDRESS_COMMUNE === action.type;
         });
     }, [actions]);
-    const { labelInputDate } = React.useMemo(() => {
-        const { dateFormat } = (index$3.ISO_FORMAT === null || index$3.ISO_FORMAT === void 0 ? void 0 : index$3.ISO_FORMAT[locale]) || index$3.ISO_FORMAT['vi-VN'];
-        return {
-            dateFormat,
-            labelInputDate: dateFormat
-                .split('/')
-                .map((key) => f(index$2.COMMON_DATE_TRANSLATE_KEY === null || index$2.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$2.COMMON_DATE_TRANSLATE_KEY[key])),
-        };
-    }, [locale, f]);
     const inputType = index$2.ELEMENT_CONTROL_INPUT_TYPE;
-    const { register, handleSubmit, watch, formState: { errors, isSubmitting }, control, setValue, setError, clearErrors, getValues, trigger, } = reactHookForm.useForm({ defaultValues: defaultFormValues });
+    const { register, handleSubmit, watch, formState: { errors }, control, setValue, setError, clearErrors, getValues, trigger, } = reactHookForm.useForm({ defaultValues: defaultFormValues });
+    const formState = reactHookForm.useFormState({ control });
+    const isDurgoCampaign = isDurgoCampaignFn(botId);
     const setSubmitData = (data) => {
         const submitMeta = [];
         for (const action of actions) {
@@ -4915,17 +4826,13 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                         value: data[action.key].label || '',
                     });
                 }
-                else if (action.type === index$2.NodeActionType.USER_SUBMIT_DOB ||
-                    action.type === index$2.NodeActionType.USER_SUBMIT_DATE) {
-                    const dobStr = (data[action.key] || '');
-                    const dayInJS = dayjs__default["default"](dobStr);
-                    if (dayInJS.isValid()) {
-                        submitMeta.push({
-                            key: action.key,
-                            control: inputType[action.type] || '',
-                            value: dayInJS.format(index$3.API_DATE_FORMAT),
-                        });
-                    }
+                else if (action.type === index$2.NodeActionType.USER_SUBMIT_DOB) {
+                    const dobStr = data[action.key] || '';
+                    submitMeta.push({
+                        key: action.key,
+                        control: inputType[action.type] || '',
+                        value: dobStr,
+                    });
                 }
                 else if (isActionTypeOtp(action.type)) {
                     submitMeta.push({
@@ -5148,7 +5055,7 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                                 required: true,
                             }, render: (props) => {
                                 var _a;
-                                return (React__default["default"].createElement(index$9.Dropdown, { id: actionAddressLever1.id, options: provinceData, onChange: (val) => {
+                                return (React__default["default"].createElement(index$a.Dropdown, { id: actionAddressLever1.id, options: provinceData, onChange: (val) => {
                                         props.field.onChange(val);
                                         handleSelectedProvince(val);
                                     }, value: props.field.value, placeholder: (actionAddressLever1 === null || actionAddressLever1 === void 0 ? void 0 : actionAddressLever1.label) || '', className: `address-dropdown ${((_a = props.field.value) === null || _a === void 0 ? void 0 : _a.value) ? '' : 'show-placeholder'}` }));
@@ -5164,7 +5071,7 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                                 required: true,
                             }, render: (props) => {
                                 var _a;
-                                return (React__default["default"].createElement(index$9.Dropdown, { id: actionAddressLever2.id, options: districtData, onChange: (val) => {
+                                return (React__default["default"].createElement(index$a.Dropdown, { id: actionAddressLever2.id, options: districtData, onChange: (val) => {
                                         props.field.onChange(val);
                                         handleSelectedDistrict(val);
                                     }, value: props.field.value, placeholder: (actionAddressLever2 === null || actionAddressLever2 === void 0 ? void 0 : actionAddressLever2.label) || '', className: `address-dropdown ${((_a = props.field.value) === null || _a === void 0 ? void 0 : _a.value) ? '' : 'show-placeholder'}` }));
@@ -5180,7 +5087,7 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                                 required: true,
                             }, render: (props) => {
                                 var _a;
-                                return (React__default["default"].createElement(index$9.Dropdown, { id: actionAddressLever3.id, options: communeData, onChange: (val) => {
+                                return (React__default["default"].createElement(index$a.Dropdown, { id: actionAddressLever3.id, options: communeData, onChange: (val) => {
                                         props.field.onChange(val);
                                     }, value: props.field.value, placeholder: (actionAddressLever3 === null || actionAddressLever3 === void 0 ? void 0 : actionAddressLever3.label) || '', className: `address-dropdown ${((_a = props.field.value) === null || _a === void 0 ? void 0 : _a.value) ? '' : 'show-placeholder'}` }));
                             } })),
@@ -5258,31 +5165,17 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
             case index$2.NodeActionType.USER_SUBMIT_DATE:
                 return (React__default["default"].createElement("div", { className: "input-row", key: action.id },
                     React__default["default"].createElement("label", { htmlFor: action.key }, action.label),
-                    React__default["default"].createElement(reactHookForm.Controller, { name: action.key, control: control, rules: {
-                            required: {
-                                value: true,
-                                message: f({
-                                    id: 'validation.error.requiredField',
-                                    defaultMessage: 'This field is required',
-                                }),
-                            },
-                            validate: {
-                                ageRange: (value) => {
-                                    return validateDateField(value, isSubmitting, f);
-                                },
-                            },
-                        }, render: ({ field, fieldState }) => {
-                            const { value, name, onChange } = field, restField = tslib_es6.__rest(field, ["value", "name", "onChange"]);
-                            const { error } = fieldState;
-                            const isError = !!error;
-                            return (React__default["default"].createElement("div", null,
-                                React__default["default"].createElement(StyleDatePickerInput, null,
-                                    React__default["default"].createElement(InputDate.InputDate, Object.assign({}, restField, { defaultValue: value, onChange: (val) => {
-                                            onChange(val);
-                                            trigger(name);
-                                        }, labelTuples: labelInputDate, locale: locale, error: isError, className: "subot_input subot_input_date" }))),
-                                isError && (React__default["default"].createElement("p", { className: "error-message" }, error === null || error === void 0 ? void 0 : error.message))));
-                        } })));
+                    React__default["default"].createElement(StyleDatePickerInput, null,
+                        React__default["default"].createElement(index$8.DatePicker, { locale: locale || 'en-PH', displayDateFormat: index$3.DATE_FNS_DATE_FORMAT, onChange: (_value) => {
+                                const dateString = dayjs__default["default"](_value).format(index$3.API_DATE_FORMAT);
+                                setValue(action.key, dateString);
+                                trigger(action.key);
+                            } }),
+                        React__default["default"].createElement("input", Object.assign({ id: action.id, type: "date", className: "input-date" }, register(action.key, { required: true })))),
+                    errors[action.key] && (React__default["default"].createElement("p", { className: "error-message" }, f({
+                        id: 'validation.error.requiredField',
+                        defaultMessage: 'This field is required',
+                    })))));
             case index$2.NodeActionType.USER_SUBMIT_BMI:
                 return (React__default["default"].createElement("div", { key: action.id },
                     React__default["default"].createElement("div", { className: "input-row", key: `${action.id}-weight` },
@@ -5388,14 +5281,14 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                             React__default["default"].createElement("span", { className: "verify-success-label" }, f({
                                 id: 'subot.verifyOTP.success.message',
                                 defaultMessage: 'Verified successful',
-                            })))) : (React__default["default"].createElement(index$8.Button, Object.assign({ className: "submit-btn", size: isFormRevamp ? 'md' : 'lg', isLoading: isLoadingVerify, isDisabled: !sentOTP, onClick: (e) => handleVerifyOTP(e, action) }, trackingVerifyOTP), f({
+                            })))) : (React__default["default"].createElement(index$9.Button, Object.assign({ className: "submit-btn", size: isFormRevamp ? 'md' : 'lg', isLoading: isLoadingVerify, isDisabled: !sentOTP, onClick: (e) => handleVerifyOTP(e, action) }, trackingVerifyOTP), f({
                             id: 'subot.verifyOTP.button',
                             defaultMessage: 'Verify OTP',
                         })))))));
             case index$2.NodeActionType.USER_SUBMIT_GOOGLE_API_ADDRESS:
                 return (React__default["default"].createElement(GoogleAddressField$1, { action: action, control: control, formError: errors[action.key], key: action.id, initValue: defaultFormValues === null || defaultFormValues === void 0 ? void 0 : defaultFormValues[action.key], onChange: setValue }));
             case index$2.NodeActionType.USER_SUBMIT_DOB:
-                return (React__default["default"].createElement(DOB, { key: action.key, action: action, trigger: trigger, control: control, locale: locale, labelTuples: labelInputDate, isSubmitting: isSubmitting }));
+                return (React__default["default"].createElement(DOB, { action: action, setValue: setValue, trigger: trigger, register: register, errors: errors, botId: botId }));
             default:
                 return '';
         }
@@ -5409,9 +5302,11 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                         React__default["default"].createElement("span", { className: "subot-checkbox__label" },
                             React__default["default"].createElement(Markdown, null, action.label)))));
             case index$2.NodeActionType.USER_SUBMIT_SEND:
+                // const disabledWhenNotVerifyed = hasOtpField ? !verifiedOTP : false
                 const disabled = hasConfirm ? !confirm : false;
+                const disabledDurgoCampaign = !formState.isValid;
                 return (React__default["default"].createElement("div", { className: "submit-btn-row", key: action.id },
-                    React__default["default"].createElement("button", Object.assign({ id: action.id, className: "submit-btn", type: "submit", disabled: disabled }, trackingSubmit, { "data-response-id": action.id }), action.label)));
+                    React__default["default"].createElement("button", Object.assign({ id: action.id, className: "submit-btn", type: "submit", disabled: isDurgoCampaign ? disabledDurgoCampaign : disabled }, trackingSubmit, { "data-response-id": action.id }), action.label)));
             case index$2.NodeActionType.USER_SUBMIT_TERMS:
                 return (React__default["default"].createElement("div", { className: "form-terms", key: action.id },
                     React__default["default"].createElement(Markdown, null, action.label)));
@@ -6250,7 +6145,7 @@ const View = ({ loading, backgroundImage, isShowFooter, isFullContainer, isDisab
                 React__default["default"].createElement(Close, null))),
             React__default["default"].createElement(NodeContextProvider, null,
                 React__default["default"].createElement("div", { className: "subot-inline-revamp-container", "data-show-footer": isShowFooter },
-                    loading && !isShowFooter && React__default["default"].createElement(index$a.Loading, { className: "si-loading" }),
+                    loading && !isShowFooter && React__default["default"].createElement(index$b.Loading, { className: "si-loading" }),
                     React__default["default"].createElement(Container$1, { onClickStart: () => {
                             setIsDisplayFullMobile(true);
                         } })),
@@ -6269,7 +6164,7 @@ const View = ({ loading, backgroundImage, isShowFooter, isFullContainer, isDisab
     }, [bgImgFullContainer]);
     if (isFullContainer) {
         return (React__default["default"].createElement(StyledContainerFullscreen, { style: styleFullContainer },
-            React__default["default"].createElement(index$b.Container, { className: "si-container" },
+            React__default["default"].createElement(index$c.Container, { className: "si-container" },
                 React__default["default"].createElement("div", { className: "si-revamp-left" },
                     React__default["default"].createElement(Container$t, { subotSettingData: subotSettingData }),
                     React__default["default"].createElement(Container$v, null)),