@hhgtech/hhg-components 1.29.361 → 1.29.362-beta-2

package/build/esm/subot.js

@@ -1,76 +1,75 @@
-import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, memo, useImperativeHandle } from 'react';
-import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS } from './index-68df179a.js';
-import { a as __awaiter, _ as __rest } from './tslib.es6-cf8bdaac.js';
-import { f as basePath, G as GA_TOKEN_COOKIE, j as DATE_FNS_DATE_FORMAT, A as API_DATE_FORMAT, g as SSO_URL } from './index-057e4881.js';
+import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, memo } from 'react';
+import { d as NodeType, E as ELEMENT_CONTROL_INPUT_TYPE, f as NodeActionType, c as NodePosition, e as NodeFinalTypes, g as NodeMultipleOptions, N as NodeIntentType, F as FULL_KEY_ADDRESS, C as COMMON_DATE_TRANSLATE_KEY } from './index-44ff7f05.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-32e42d64.js';
+import { f as basePath, G as GA_TOKEN_COOKIE, I as ISO_FORMAT, g as SSO_URL } from './index-a1380637.js';
 import Cookies from 'js-cookie';
 import fd from 'fastdom';
 import fastdomPromised from 'fastdom/extensions/fastdom-promised';
-import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-b544b20b.js';
+import { G as GlobalData, c as callApi, u as locale, T as TogetherComponentGlobalContext } from './utils-9d793dd1.js';
 import formatString from 'string-format';
-import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-f4515e36.js';
-export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-f4515e36.js';
+import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, T as TIME_RESET_RESEND_OTP, j as isFakeEmail, s as ssoIntents, k as getHhgIdFromCookie } from './index-a90b2458.js';
+export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, i as formatUrlWithEncrypedGa, g as getHelloSitesUrl, k as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, j as isFakeEmail, o as overrideParamsByQuery, s as ssoIntents } from './index-a90b2458.js';
 import dayjs from 'dayjs';
 import { isProduction } from './constantsIsProduction.js';
 import { MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import cn from 'classnames';
-import { C as Container$w } from './index-256332cd.js';
-import { L as Loading } from './index-15d0874c.js';
+import { C as Container$w } from './index-e9415462.js';
+import { L as Loading } from './index-f17b2c0b.js';
 import { motion } from 'framer-motion';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-504d3f05.js';
-import { B as Button } from './index-7d4d62ab.js';
+import { M as MediaQueries } from './utils-7fb93baf.js';
+import { B as Button } from './index-88b1b525.js';
 import { Remarkable } from 'remarkable';
 import { ArrowRight } from '@hhgtech/icons/other';
 import { useInView } from 'react-intersection-observer';
 import { Box, Textarea } from '@mantine/core';
-import { C as CommonGAssets } from './index-92ab9005.js';
+import { C as CommonGAssets } from './index-0f6364d8.js';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import { d as LEAD_TOKEN_COOKIE } from './constants-c3ebcf04.js';
+import { d as LEAD_TOKEN_COOKIE } from './constants-44b6bfd0.js';
 import { v4 } from 'uuid';
-import { T as Text } from './index-1b95110c.js';
+import { T as Text } from './index-2aa860e4.js';
 import { theme } from './miscTheme.js';
-import { S as Select } from './index-81097236.js';
+import { S as Select } from './index-fd74e24a.js';
 import '@mantine/dates';
-import './useMantineLocale-921259d6.js';
-import './index.styles-612b88c3.js';
-import './translationsContext-1053b855.js';
+import './useMantineLocale-b5ac651f.js';
+import './index.styles-c59d389f.js';
+import './translationsContext-ba5f494a.js';
 import '@mantine/hooks';
-import './other-28b72baa.js';
-import './index-2b2ebc80.js';
+import './other-41db008a.js';
+import './index-d1a2dc8f.js';
 import isEmpty from 'lodash/isEmpty';
 import { Controller, useForm, useFormState } from 'react-hook-form';
 import PhoneInputBase, { getCountryCallingCode, isPossiblePhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 import { LoadScript } from '@react-google-maps/api';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-ac7f16b4.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-50acf800.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { L as LOCALE } from './Locale-e3d80799.js';
+import { L as LOCALE } from './Locale-a047b32f.js';
 import get from 'lodash/get';
-import { D as DatePicker } from './index-b2cee507.js';
-import { B as Button$1 } from './index-e7631b76.js';
-import { D as Dropdown } from './index-2a7c39fd.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-9f4d56db.js';
-import { g as getURLwithSSOTracking } from './utils-6133a65e.js';
+import { I as InputDate } from './InputDate-86119dfd.js';
+import { B as Button$1 } from './index-f14dba41.js';
+import { D as Dropdown } from './index-e962a389.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-bf8836f8.js';
+import { g as getURLwithSSOTracking } from './utils-12a31cb9.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './index-3a41f28a.js';
+import './index-0688cf27.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './togetherApiPaths.js';
-import './index-f042164f.js';
-import './WhatsApp-68632cb6.js';
-import './Spinner-96ba8cab.js';
-import './index-8e69b183.js';
-import './useScreenSize-f3cae5ca.js';
+import './index-83296db9.js';
+import './WhatsApp-690f4774.js';
+import './Spinner-d99c754c.js';
+import './index-e53afe5a.js';
+import './useScreenSize-a28b4666.js';
 import '@mantine/carousel';
-import './useUniqueId-0e02bf45.js';
+import './useUniqueId-823f1e39.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
-import 'date-fns';
-import 'react-day-picker/DayPickerInput';
+import '@emotion/react';
 import 'zustand';
-import './normalizeLink-0fcb0a30.js';
-import './healthTools-362411e3.js';
+import './normalizeLink-6da98ce7.js';
+import './healthTools-29a83507.js';
 
 // extend fastdom
 const fastdom = fd.extend(fastdomPromised);
@@ -3567,6 +3566,239 @@ const useAddressMultipleLevelData = (countryCode) => {
     };
 };
 
+const CheckCircleGreen = (props) => {
+    return (React__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.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.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.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.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.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] = useState(TIME_RESET_RESEND_OTP);
+    const intervalId = useRef();
+    const onFinishLatest = useRef();
+    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
+    onFinishLatest.current = onFinish;
+    const resetCountDown = useCallback(() => {
+        let currentCount = 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 = useCallback(() => {
+        setCount(0);
+        clearInterval(intervalId.current);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        reset: resetCountDown,
+        cancel: cancelCountDown,
+        isFinished: count === 0,
+    }));
+    useEffect(() => {
+        resetCountDown();
+        return () => {
+            clearInterval(intervalId.current);
+        };
+    }, []);
+    return (React__default.createElement("div", { className: className, onClick: onClick },
+        resendLabel
+            ? resendLabel
+            : f({
+                id: 'subot.resendOTP.button',
+                defaultMessage: 'Resend',
+            }),
+        count > 0 && !isFinished && ` (${count}s)`));
+};
+var CountDown$1 = forwardRef(CountDown);
+
+styled.div `
+  margin: 0 auto;
+  background: #f7f9fc;
+  border-radius: ${theme.borderRadius};
+  ${MediaQueries.mbDown} {
+    padding: 16px;
+  }
+  ${MediaQueries.tdDown} {
+    padding: 24px;
+  }
+  ${MediaQueries.mbUp} {
+    padding: 32px;
+  }
+  .user-info-form {
+    .input-row {
+      ${MediaQueries.mbDown} {
+        margin-bottom: 16px;
+      }
+      ${MediaQueries.tdDown} {
+        margin-bottom: 18px;
+      }
+      ${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: ${theme.colors.gray600};
+      font-size: 13px;
+      font-weight: bold;
+    }
+    input[type='tel'],
+    input[type='number'] {
+      width: 100%;
+      padding: 12px 16px;
+      border: solid 1px ${theme.colors.gray200};
+      background: #fff;
+      border-radius: ${theme.borderRadius};
+
+      &[disabled] {
+        background-color: ${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: ${theme.colors.red700};
+      font-weight: ${theme.sizes.fwRegular};
+    }
+    .submit-btn {
+      padding: 12px 24px;
+      background-color: ${theme.colors.primaryBase};
+      border-radius: ${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: ${theme.colors.primaryHover};
+      }
+      &[disabled] {
+        background-color: ${theme.colors.gray200};
+        color: #bfbfbf;
+        cursor: not-allowed;
+      }
+
+      .spinner {
+        margin-right: 20px;
+      }
+    }
+    .submit-btn-row {
+      ${MediaQueries.mbUp} {
+        margin-bottom: 16px;
+      }
+      ${MediaQueries.tdDown} {
+        margin-bottom: 14px;
+      }
+      ${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: ${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.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: ${theme.colors.gray600};
+    }
+  }
+`;
+
 const Location = (props) => {
     return (React__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.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" })));
@@ -4110,6 +4342,27 @@ const StyledUserInfoFormContainer = styled.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 {
@@ -4254,239 +4507,6 @@ const getTransPleaseVerifiedOtp = () => {
     return pleaseVerifiedOtp;
 };
 
-const CheckCircleGreen = (props) => {
-    return (React__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.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.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.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.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.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] = useState(TIME_RESET_RESEND_OTP);
-    const intervalId = useRef();
-    const onFinishLatest = useRef();
-    const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
-    onFinishLatest.current = onFinish;
-    const resetCountDown = useCallback(() => {
-        let currentCount = 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 = useCallback(() => {
-        setCount(0);
-        clearInterval(intervalId.current);
-    }, []);
-    useImperativeHandle(ref, () => ({
-        reset: resetCountDown,
-        cancel: cancelCountDown,
-        isFinished: count === 0,
-    }));
-    useEffect(() => {
-        resetCountDown();
-        return () => {
-            clearInterval(intervalId.current);
-        };
-    }, []);
-    return (React__default.createElement("div", { className: className, onClick: onClick },
-        resendLabel
-            ? resendLabel
-            : f({
-                id: 'subot.resendOTP.button',
-                defaultMessage: 'Resend',
-            }),
-        count > 0 && !isFinished && ` (${count}s)`));
-};
-var CountDown$1 = forwardRef(CountDown);
-
-styled.div `
-  margin: 0 auto;
-  background: #f7f9fc;
-  border-radius: ${theme.borderRadius};
-  ${MediaQueries.mbDown} {
-    padding: 16px;
-  }
-  ${MediaQueries.tdDown} {
-    padding: 24px;
-  }
-  ${MediaQueries.mbUp} {
-    padding: 32px;
-  }
-  .user-info-form {
-    .input-row {
-      ${MediaQueries.mbDown} {
-        margin-bottom: 16px;
-      }
-      ${MediaQueries.tdDown} {
-        margin-bottom: 18px;
-      }
-      ${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: ${theme.colors.gray600};
-      font-size: 13px;
-      font-weight: bold;
-    }
-    input[type='tel'],
-    input[type='number'] {
-      width: 100%;
-      padding: 12px 16px;
-      border: solid 1px ${theme.colors.gray200};
-      background: #fff;
-      border-radius: ${theme.borderRadius};
-
-      &[disabled] {
-        background-color: ${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: ${theme.colors.red700};
-      font-weight: ${theme.sizes.fwRegular};
-    }
-    .submit-btn {
-      padding: 12px 24px;
-      background-color: ${theme.colors.primaryBase};
-      border-radius: ${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: ${theme.colors.primaryHover};
-      }
-      &[disabled] {
-        background-color: ${theme.colors.gray200};
-        color: #bfbfbf;
-        cursor: not-allowed;
-      }
-
-      .spinner {
-        margin-right: 20px;
-      }
-    }
-    .submit-btn-row {
-      ${MediaQueries.mbUp} {
-        margin-bottom: 16px;
-      }
-      ${MediaQueries.tdDown} {
-        margin-bottom: 14px;
-      }
-      ${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: ${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.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: ${theme.colors.gray600};
-    }
-  }
-`;
-
 var _a, _b, _c, _d, _e;
 const StyledPhoneCode = styled.div `
   display: flex;
@@ -4612,9 +4632,9 @@ const PhoneInputWithCode = (props) => {
     return (React__default.createElement(StyledPhoneInputWithCode, Object.assign({}, props, { flagComponent: FlagComponent })));
 };
 
-const DOB = ({ action, setValue, trigger, register, errors, botId, }) => {
+const DOB = ({ action, setValue, trigger, register, errors, botId, isDirty, isSubmitted, locale: localeProps, dateFormat, label: inputDateLabel, }) => {
     const { id, key, label } = action !== null && action !== void 0 ? action : {};
-    const locale = GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.locale;
+    const locale = localeProps || (GlobalData === null || GlobalData === void 0 ? void 0 : GlobalData.locale);
     const { formatMessage: f } = useContext(TogetherComponentGlobalContext);
     /**
      * Temporary hard for Durgo Campaign at this time
@@ -4626,23 +4646,38 @@ const DOB = ({ action, setValue, trigger, register, errors, botId, }) => {
     const error = get(errors, key);
     const dobErrMsg = get(error, 'message');
     const handleOnChange = (_value) => {
-        const dateString = dayjs(_value).format(API_DATE_FORMAT);
-        setValue(key, dateString);
-        trigger(key);
+        setValue(action.key, _value);
+        trigger(action.key);
     };
     return (React__default.createElement("div", { className: "input-row", key: id },
         React__default.createElement("label", { htmlFor: key }, label),
         React__default.createElement(StyleDatePickerInput, null,
-            React__default.createElement(DatePicker, { locale: locale || 'en-PH', displayDateFormat: DATE_FNS_DATE_FORMAT, onChange: handleOnChange }),
+            React__default.createElement(InputDate, { label: inputDateLabel, locale: locale, onChange: handleOnChange, error: Boolean(error && (isDirty || isSubmitted)), className: "subot_input subot_input_date" }),
             React__default.createElement("input", Object.assign({ id: id, type: "date", className: "input-date" }, register(key, {
-                required: true,
                 validate: {
-                    ageRange: (value) => isDurgoCampaign
-                        ? validateAge(value, f({
-                            id: 'validation.error.requiredAgeGroup',
-                            defaultMessage: 'Sorry, your child is not in the required Age Group.',
-                        }))
-                        : true,
+                    ageRange: (value) => {
+                        if (value === null || !value) {
+                            return f({
+                                id: 'validation.error.requiredField',
+                                defaultMessage: 'This field is required',
+                            });
+                        }
+                        const dayInJs = typeof value === 'string'
+                            ? dayjs(value, dateFormat, true)
+                            : dayjs(value);
+                        if (!dayInJs.isValid()) {
+                            return f({
+                                id: 'error.day.invalid',
+                                defaultMessage: 'This date is not valid, please update.',
+                            });
+                        }
+                        return isDurgoCampaign
+                            ? validateAge(value, f({
+                                id: 'validation.error.requiredAgeGroup',
+                                defaultMessage: 'Sorry, your child is not in the required Age Group.',
+                            }))
+                            : true;
+                    },
                 },
             })))),
         error && (React__default.createElement("p", { className: "error-message" }, dobErrMsg ||
@@ -4773,8 +4808,17 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
             return NodeActionType.USER_SUBMIT_ADDRESS_COMMUNE === action.type;
         });
     }, [actions]);
+    const { dateFormat, labelInputDate } = useMemo(() => {
+        const { dateFormat } = (ISO_FORMAT === null || ISO_FORMAT === void 0 ? void 0 : ISO_FORMAT[locale]) || ISO_FORMAT['vi-VN'];
+        return {
+            dateFormat,
+            labelInputDate: dateFormat
+                .split('/')
+                .map((key) => f(COMMON_DATE_TRANSLATE_KEY === null || COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : COMMON_DATE_TRANSLATE_KEY[key])),
+        };
+    }, [locale, f]);
     const inputType = ELEMENT_CONTROL_INPUT_TYPE;
-    const { register, handleSubmit, watch, formState: { errors }, control, setValue, setError, clearErrors, getValues, trigger, } = useForm({ defaultValues: defaultFormValues });
+    const { register, handleSubmit, watch, formState: { errors, isDirty, isSubmitted }, control, setValue, setError, clearErrors, getValues, trigger, } = useForm({ defaultValues: defaultFormValues });
     const formState = useFormState({ control });
     const isDurgoCampaign = isDurgoCampaignFn(botId);
     const setSubmitData = (data) => {
@@ -5079,7 +5123,7 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                     }))))))));
     };
     const renderFormInput = (action, index) => {
-        var _a;
+        var _a, _b;
         if (!action.key) {
             return null;
         }
@@ -5148,16 +5192,35 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
                 return (React__default.createElement("div", { className: "input-row", key: action.id },
                     React__default.createElement("label", { htmlFor: action.key }, action.label),
                     React__default.createElement(StyleDatePickerInput, null,
-                        React__default.createElement(DatePicker, { locale: locale || 'en-PH', displayDateFormat: DATE_FNS_DATE_FORMAT, onChange: (_value) => {
-                                const dateString = dayjs(_value).format(API_DATE_FORMAT);
-                                setValue(action.key, dateString);
+                        React__default.createElement(InputDate, { label: labelInputDate, locale: locale, onChange: (val) => {
+                                setValue(action.key, val);
                                 trigger(action.key);
-                            } }),
-                        React__default.createElement("input", Object.assign({ id: action.id, type: "date", className: "input-date" }, register(action.key, { required: true })))),
-                    errors[action.key] && (React__default.createElement("p", { className: "error-message" }, f({
-                        id: 'validation.error.requiredField',
-                        defaultMessage: 'This field is required',
-                    })))));
+                            }, error: Boolean(errors[action.key] && (isDirty || isSubmitted)), className: "subot_input subot_input_date" }),
+                        React__default.createElement("input", Object.assign({ id: action.id, type: "date", className: "input-date" }, register(action.key, {
+                            validate: {
+                                validDate: (value) => {
+                                    if (value === null || !value) {
+                                        return f({
+                                            id: 'validation.error.requiredField',
+                                            defaultMessage: 'This field is required',
+                                        });
+                                    }
+                                    const dayInJs = typeof value === 'string'
+                                        ? dayjs(value, dateFormat, true)
+                                        : dayjs(value);
+                                    if (!dayInJs.isValid()) {
+                                        return f({
+                                            id: 'error.day.invalid',
+                                            defaultMessage: 'This date is not valid, please update.',
+                                        });
+                                    }
+                                    else {
+                                        return true;
+                                    }
+                                },
+                            },
+                        })))),
+                    errors[action.key] && (isDirty || isSubmitted) && (React__default.createElement("p", { className: "error-message" }, (_b = errors === null || errors === void 0 ? void 0 : errors[action.key]) === null || _b === void 0 ? void 0 : _b.message))));
             case NodeActionType.USER_SUBMIT_BMI:
                 return (React__default.createElement("div", { key: action.id },
                     React__default.createElement("div", { className: "input-row", key: `${action.id}-weight` },
@@ -5270,7 +5333,7 @@ const UserInfoForm = ({ className, style, actions, countryCode, callBack, formSu
             case NodeActionType.USER_SUBMIT_GOOGLE_API_ADDRESS:
                 return (React__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 NodeActionType.USER_SUBMIT_DOB:
-                return (React__default.createElement(DOB, { action: action, setValue: setValue, trigger: trigger, register: register, errors: errors, botId: botId }));
+                return (React__default.createElement(DOB, { action: action, setValue: setValue, trigger: trigger, register: register, errors: errors, botId: botId, isDirty: isDirty, isSubmitted: isSubmitted, locale: locale, dateFormat: dateFormat, label: labelInputDate }));
             default:
                 return '';
         }