@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/useTranslations-e1853417.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var translationsContext = require('./translationsContext-950334bf.js');
+var formatString = require('string-format');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var formatString__default = /*#__PURE__*/_interopDefault(formatString);
+
+function useTranslations() {
+    const { values, locale } = React.useContext(translationsContext.TranslationsContext) || {
+        locale: 'en-PH',
+    };
+    return React.useMemo(() => ({
+        t(k, option) {
+            if (!values) {
+                console.error('[useTranslations] t method called before translation values are loaded');
+                return k;
+            }
+            if (values[k]) {
+                return option ? formatString__default["default"](values[k] || k, option) : values[k] || k;
+            }
+            console.warn(`[useTranslations] Missing translation for key ${k} and locale ${locale}`);
+            return option ? formatString__default["default"](k, option) : k;
+        },
+        // @ts-ignore
+        locale,
+    }), [values, locale]);
+}
+
+exports.useTranslations = useTranslations;

package/build/useUniqueId-11369116.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+
+/** src: https://www.benmvp.com/blog/8-helpful-custom-react-hooks/
+ * check if we are at first mount */
+const useInitialMount = () => {
+    // refs exist across component re-renders, so
+    // we can use it to store a value for the
+    // subsequent renders. We're tracking if it's
+    // the first render, which is initially `true`
+    const isFirst = React.useRef(true);
+    // the very first render, the ref will be
+    // `true`. but we immediately set it to `false`
+    // so that every render after will be `false`
+    if (isFirst.current) {
+        isFirst.current = false;
+        // return true the very first render
+        return true;
+    }
+    // return false every following render
+    return false;
+};
+
+let GLOBAL_ID = 0;
+/** src: https://www.benmvp.com/blog/8-helpful-custom-react-hooks/
+ * Generate Unique ID for both server and client side. Format: hhg-gen-id{number}
+ * This depend on render order, assuming that the order is the same on server and client.
+ */
+const useUniqueId = () => {
+    const idRef = React.useRef('');
+    const isInitialMount = useInitialMount();
+    // generate the ID for the first render
+    // and store in the ref to remain for
+    // subsequent renders
+    if (isInitialMount) {
+        GLOBAL_ID += 1;
+        idRef.current = `hhg-gen-id${GLOBAL_ID}`;
+    }
+    return idRef.current;
+};
+
+exports.useInitialMount = useInitialMount;
+exports.useUniqueId = useUniqueId;

package/build/utils-52113753.js

@@ -0,0 +1,384 @@
+'use strict';
+
+var utils = require('./utils-64bd0c42.js');
+var styled = require('styled-components');
+var React = require('react');
+var index = require('./index-1baaedb0.js');
+var index$1 = require('./index-3e5fc2d6.js');
+var Subot = require('./Subot-5fc40fb5.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledLogo = styled__default["default"].div `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  z-index: 1;
+  .main-logo-icon {
+    object-fit: contain;
+  }
+  &[data-logo-is-light] {
+    > svg path {
+      fill: #fff;
+    }
+    img {
+      filter: brightness(0) invert(1);
+    }
+  }
+
+  &[data-has-badge] {
+    @supports (display: flex) and (gap: 1em) {
+      gap: 0.5rem;
+    }
+
+    @supports not ((display: flex) and (gap: 1em)) {
+      > img {
+        margin-left: 0.25rem;
+      }
+    }
+  }
+
+  .common-logo-seasonal-left,
+  .common-logo-seasonal-right {
+    z-index: -1;
+    max-width: unset;
+    max-height: unset;
+  }
+  .common-logo-seasonal-left {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
+  .common-logo-seasonal-right {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+  &[data-seasonal='christmas'] {
+    padding-left: 37px;
+    padding-right: 22px;
+    .common-logo-seasonal-left {
+      width: 125px;
+      height: 56px;
+    }
+    .common-logo-seasonal-right {
+      width: 23px;
+      height: 17px;
+    }
+  }
+  &[data-seasonal='new-year'] {
+    padding-right: 85px;
+    .common-logo-seasonal-left {
+      top: 35%;
+      width: 100px;
+      height: 56px;
+    }
+    .common-logo-seasonal-right {
+      width: 85px;
+      height: 54px;
+    }
+    ${utils.MediaQueries.mbDown} {
+      padding-right: 0;
+      .common-logo-seasonal-right {
+        display: none;
+      }
+    }
+  }
+  &[data-seasonal='lunar-new-year'] {
+    padding-left: 30px;
+    padding-right: 35px;
+    .common-logo-seasonal-left {
+      width: 33px;
+      height: 41px;
+    }
+    .common-logo-seasonal-right {
+      width: 37px;
+      height: 54px;
+    }
+  }
+  &[data-seasonal='ramadan'] {
+    &[data-type='hellosehat'] {
+      padding-right: 35px;
+      .common-logo-seasonal-left {
+        width: 165px;
+        height: unset;
+        left: 6px;
+      }
+      .common-logo-seasonal-right {
+        width: 33px;
+        height: unset;
+      }
+    }
+    &[data-type='hellodoktor'] {
+      padding-right: 66px;
+      .common-logo-seasonal-left {
+        width: 133px;
+        height: unset;
+        left: 6px;
+      }
+      .common-logo-seasonal-right {
+        width: 63px;
+        height: unset;
+      }
+    }
+  }
+  &[data-seasonal='hung-king'] {
+    &[data-type='hellobacsi'] {
+      .common-logo-seasonal-left {
+        width: 134px;
+        height: unset;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    &[data-type='marryBaby'] {
+      .common-logo-seasonal-left {
+        width: 145px;
+        height: unset;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+`;
+const StyledProLogo = styled__default["default"].img `
+  height: 16px;
+  width: unset;
+  margin-bottom: 4px;
+  margin-left: -3px;
+`;
+
+const _LogoIcon = ({ type, width, height }) => {
+    const data = React.useMemo(() => {
+        switch (type) {
+            case 'hellobacsi':
+                return {
+                    width: width || '107px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellobacsi.png'),
+                };
+            case 'hellodoktor':
+                return {
+                    width: width || '127px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellodoktor.png'),
+                };
+            case 'hellosehat':
+                return {
+                    width: width || '121px',
+                    height: height || '27px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellosehat.png'),
+                };
+            case 'hellohealth':
+                return {
+                    width: width || '123px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellohealth.png'),
+                };
+            case 'hellotogether':
+                return {
+                    width: width || '150px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellotogether.png'),
+                };
+            case 'hellocare':
+                return {
+                    width: width || '99px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellocare.png'),
+                };
+            case 'hellodoctor':
+                return {
+                    width: width || '127px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellodoctor.png'),
+                };
+            case 'hellokrupet':
+                return {
+                    width: width || '101px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellokrupet.png'),
+                };
+            case 'hellosayarwon':
+                return {
+                    width: width || '111px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellosayarwon.png'),
+                };
+            case 'helloyishi':
+                return {
+                    width: width || '89px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/helloyishi.png'),
+                };
+            case 'hellokhunmor':
+                return {
+                    width: width || '123px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/hellokhunmor.png'),
+                };
+            case 'helloswasthya':
+                return {
+                    width: width || '105px',
+                    height: height || '24px',
+                    src: index.CommonGAssets.getAssetPath('logo/helloswasthya.png'),
+                };
+            case 'logomark':
+                return {
+                    width: width || '60px',
+                    height: height || '57px',
+                    src: index.CommonGAssets.getAssetPath('logo/logomark.png'),
+                };
+            case 'marryBaby':
+                return {
+                    width: width || '145px',
+                    height: height || '28px',
+                    src: index.CommonGAssets.getAssetPath('logo/marrybaby.png'),
+                };
+            default:
+                return null;
+        }
+    }, [type, width, height]);
+    const { src, width: logoWidth, height: logoHeight } = data || {};
+    return (React__default["default"].createElement(index$1.ImageWrap, { alt: `${type} logo`, className: "main-logo-icon", src: src, style: {
+            width: logoWidth,
+            height: logoHeight,
+        } }));
+};
+const LogoIcon = React.memo(_LogoIcon);
+
+const isChristmas = (date) => {
+    const day = date.getDate();
+    const month = date.getMonth();
+    return month === 11 && day >= 16 && day <= 25;
+};
+const LunarNewYearMapping = {
+    2023: [22, 0],
+    2024: [10, 1],
+    2025: [29, 0],
+    2026: [17, 1],
+    2027: [6, 1],
+    2028: [26, 0],
+    2029: [13, 1],
+    2030: [3, 1],
+    2031: [23, 0],
+    2032: [11, 1],
+    2033: [31, 0],
+    2034: [19, 1],
+    2035: [8, 1],
+    2036: [28, 0],
+    2037: [15, 1],
+    2038: [4, 1],
+    2039: [24, 0],
+    2040: [12, 1],
+};
+const LunarNewYearLocale = [
+    Subot.LOCALE.Vietnam,
+    Subot.LOCALE.Taiwan,
+    Subot.LOCALE.Indonesia,
+    Subot.LOCALE.Malaysia,
+];
+const isLunarNewYear = (date) => {
+    const year = date.getFullYear();
+    const currentLunarMap = LunarNewYearMapping[year];
+    if (!currentLunarMap)
+        return false;
+    const currentLunarDate = new Date(year, currentLunarMap[1], currentLunarMap[0]);
+    const startLunarDate = new Date(currentLunarDate);
+    startLunarDate.setDate(currentLunarDate.getDate() - 7);
+    const endLunarDate = new Date(currentLunarDate);
+    endLunarDate.setDate(currentLunarDate.getDate() + 5);
+    return startLunarDate <= date && date <= endLunarDate;
+};
+const isNewYear = (date) => {
+    const day = date.getDate();
+    const month = date.getMonth();
+    return (month === 11 && day >= 26) || (month === 0 && day <= 15);
+};
+const RamadanYearMapping = [
+    { year: 2024, start: [10, 2], end: [8, 3] },
+    { year: 2025, start: [1, 2], end: [30, 2] },
+    { year: 2026, start: [18, 1], end: [19, 2] },
+    { year: 2027, start: [8, 1], end: [9, 2] },
+    { year: 2028, start: [28, 0], end: [26, 1] },
+    { year: 2029, start: [16, 0], end: [14, 1] },
+    { year: 2030, start: [6, 0], end: [4, 1] },
+    { year: 2030, start: [26, 11], end: [24, 0, 2031] },
+    { year: 2031, start: [15, 11], end: [13, 0, 2032] },
+    { year: 2032, start: [4, 11], end: [2, 0, 2033] },
+];
+const isRamadan = (date) => {
+    const year = date.getFullYear();
+    const currentRamadanMaps = RamadanYearMapping.filter((ramadan) => ramadan.year === year);
+    if (!currentRamadanMaps.length)
+        return false;
+    return currentRamadanMaps.some((currentRamadanMap) => {
+        const ramadanYear = currentRamadanMap.start[2] || year;
+        const startRamadanDate = new Date(ramadanYear, currentRamadanMap.start[1], currentRamadanMap.start[0]);
+        const endRamadanDate = new Date(ramadanYear, currentRamadanMap.end[1], currentRamadanMap.end[0]);
+        return startRamadanDate <= date && date <= endRamadanDate;
+    });
+};
+const VNHungKingMapping = {
+    2024: [18, 3],
+    2025: [7, 3],
+    2026: [26, 3],
+    2027: [16, 3],
+    2028: [4, 3],
+    2029: [23, 3],
+    2030: [12, 3],
+    2031: [1, 3],
+    2032: [19, 3],
+    2033: [9, 3],
+    2034: [28, 3],
+    2035: [17, 3],
+};
+const isVNHungKing = (date) => {
+    const year = date.getFullYear();
+    const currentVNHungKingMap = VNHungKingMapping[year];
+    if (!currentVNHungKingMap)
+        return false;
+    const currentVNHungKingDate = new Date(year, currentVNHungKingMap[1], currentVNHungKingMap[0]);
+    const startVNHungKingDate = new Date(currentVNHungKingDate);
+    startVNHungKingDate.setDate(currentVNHungKingDate.getDate() - 1);
+    const endVNHungKingDate = new Date(currentVNHungKingDate);
+    endVNHungKingDate.setDate(currentVNHungKingDate.getDate() + 1);
+    return startVNHungKingDate <= date && date <= endVNHungKingDate;
+};
+const isVN3004 = (date) => {
+    const year = date.getFullYear();
+    const currentVN3004 = new Date(year, 3, 30);
+    const start = new Date(currentVN3004);
+    start.setDate(currentVN3004.getDate() - 1);
+    const end = new Date(currentVN3004);
+    end.setDate(currentVN3004.getDate() + 2);
+    return start <= date && date <= end;
+};
+const isLabourDay = (date) => {
+    const year = date.getFullYear();
+    const current = new Date(year, 4, 1);
+    const start = new Date(current);
+    start.setDate(current.getDate() - 1);
+    const end = new Date(current);
+    end.setDate(current.getDate() + 1);
+    return start <= date && date <= end;
+};
+
+exports.LogoIcon = LogoIcon;
+exports.LunarNewYearLocale = LunarNewYearLocale;
+exports.StyledLogo = StyledLogo;
+exports.StyledProLogo = StyledProLogo;
+exports.isChristmas = isChristmas;
+exports.isLabourDay = isLabourDay;
+exports.isLunarNewYear = isLunarNewYear;
+exports.isNewYear = isNewYear;
+exports.isRamadan = isRamadan;
+exports.isVN3004 = isVN3004;
+exports.isVNHungKing = isVNHungKing;

package/build/utils-64bd0c42.js

@@ -0,0 +1,143 @@
+'use strict';
+
+const makeParams = (params) => {
+    const paramKeys = Object.keys(params);
+    if (!paramKeys.length) {
+        return '';
+    }
+    return '?' + paramKeys.map((k) => `${k}=${params[k]}`).join('&');
+};
+const formatUrlWithPageParam = (path, page = 1, queryPageName = 'page') => {
+    const [urlPart, queryPart] = path.split('?');
+    const urlObj = new URLSearchParams(queryPart || '');
+    const params = {};
+    urlObj.forEach((val, key) => {
+        if (val) {
+            params[key] = val;
+        }
+    });
+    if (Number(page) > 1) {
+        params[queryPageName] = String(page); // Default is params.page
+    }
+    else {
+        // Do not display "page=1" on the URL
+        delete params[queryPageName]; // Default is params.page
+    }
+    return urlPart + makeParams(params);
+};
+const toggleNoScroll = (isNoScroll) => {
+    if (typeof window !== 'undefined') {
+        document.documentElement.style.overflow = isNoScroll ? 'hidden' : "";
+    }
+};
+const Breakpoints = {
+    BREAK_POINT_SMALL_MOBILE: 480,
+    BREAK_POINT_MOBILE: 768,
+    BREAK_POINT_TABLET: 1024,
+    BREAK_POINT_PC: 1159,
+    BREAK_POINT_LGPC: 1440,
+};
+/**
+ * List of mediaQueries to use in StyledComponents
+ * New naming convention base around breakpoints
+*
+ * Note: smb = small mobile; mb = mobile; td = tablet device; pc = pc/laptop device
+ *
+ * smbDown: BREAK_POINT_SMALL_MOBILE go down.
+ * smbUp: BREAK_POINT_SMALL_MOBILE go up
+ *
+ * mbDown: BREAK_POINT_MOBILE go down.
+ * mbOnly: from BREAK_POINT_SMALL_MOBILE to BREAK_POINT_MOBILE
+ * mbUp: BREAK_POINT_MOBILE go up
+ *
+ * tdDown: BREAK_POINT_TABLET go down
+ * tdOnly: from BREAK_POINT_MOBILE to BREAK_POINT_TABLET
+ * tdUp: BREAK_POINT_TABLET go up
+ *
+ * pcDown: BREAK_POINT_PC go down
+ * pcOnly: from BREAK_POINT_TABLET to BREAK_POINT_PC
+ * pcUp: BREAK_POINT_PC go up
+ *
+ * @example
+ *  ${MediaQueries.mbDown} {
+ *    color: ${(props) => props.theme.colors.neutral100 }};
+ *  }
+ */
+const MediaQueries = {
+    smbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE - 1}px)`,
+    smbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px)`,
+    mbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
+    mbOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
+    mbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px)`,
+    tdDown: `@media (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
+    tdOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
+    tdUp: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px)`,
+    pcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px)`,
+    pcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
+    pcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
+    lgPcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_LGPC}px)`,
+    lgPcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px) and (max-width: ${Breakpoints.BREAK_POINT_LGPC - 1}px)`,
+    lgPcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_LGPC - 1}px)`,
+    mbToPC: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
+};
+const getBoundariesFromMediaQueryKey = (key) => {
+    // zero mean not set
+    switch (key) {
+        case 'smbDown': return [0, Breakpoints.BREAK_POINT_SMALL_MOBILE - 1];
+        case 'smbUp': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, 0];
+        case 'mbDown': return [0, Breakpoints.BREAK_POINT_MOBILE - 1];
+        case 'mbOnly': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, Breakpoints.BREAK_POINT_MOBILE - 1];
+        case 'mbUp': return [Breakpoints.BREAK_POINT_MOBILE, 0];
+        case 'tdDown': return [0, Breakpoints.BREAK_POINT_TABLET - 1];
+        case 'tdOnly': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_TABLET - 1];
+        case 'tdUp': return [Breakpoints.BREAK_POINT_TABLET, 0];
+        case 'pcUp': return [Breakpoints.BREAK_POINT_PC, 0];
+        case 'pcOnly': return [Breakpoints.BREAK_POINT_TABLET, Breakpoints.BREAK_POINT_PC - 1];
+        case 'pcDown': return [0, Breakpoints.BREAK_POINT_PC - 1];
+        case 'lgPcUp': return [Breakpoints.BREAK_POINT_LGPC, 0];
+        case 'lgPcOnly': return [Breakpoints.BREAK_POINT_PC, Breakpoints.BREAK_POINT_LGPC - 1];
+        case 'lgPcDown': return [0, Breakpoints.BREAK_POINT_LGPC - 1];
+        case 'mbToPC': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_PC - 1];
+    }
+};
+const getPopupWrapperDom = () => {
+    if (typeof document === 'undefined')
+        return null;
+    const wrapperId = 'hhg-comp-popup-wrapper';
+    if (!document.querySelector('#' + wrapperId)) {
+        const newElem = document.createElement('div');
+        newElem.id = wrapperId;
+        document.body.appendChild(newElem);
+    }
+    return document.querySelector('#' + wrapperId);
+};
+const getWrapperDomWithSelector = (parentDom, wrapperKey) => {
+    if (typeof document === 'undefined')
+        return null;
+    if (!parentDom.querySelector(`[data-wrapper-selector="${wrapperKey}"]`)) {
+        const newElem = document.createElement('div');
+        newElem.setAttribute('data-wrapper-selector', wrapperKey);
+        document.body.appendChild(newElem);
+    }
+    return parentDom.querySelector(`[data-wrapper-selector="${wrapperKey}"]`);
+};
+const startCase = (str) => {
+    return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
+};
+const safeEncodeURI = (s) => {
+    if (decodeURI(s) !== s)
+        return s;
+    else
+        return encodeURI(s);
+};
+
+exports.Breakpoints = Breakpoints;
+exports.MediaQueries = MediaQueries;
+exports.formatUrlWithPageParam = formatUrlWithPageParam;
+exports.getBoundariesFromMediaQueryKey = getBoundariesFromMediaQueryKey;
+exports.getPopupWrapperDom = getPopupWrapperDom;
+exports.getWrapperDomWithSelector = getWrapperDomWithSelector;
+exports.makeParams = makeParams;
+exports.safeEncodeURI = safeEncodeURI;
+exports.startCase = startCase;
+exports.toggleNoScroll = toggleNoScroll;