@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/esm/utils-2c484c05.js

@@ -0,0 +1,132 @@
+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);
+};
+
+export { Breakpoints as B, MediaQueries as M, getPopupWrapperDom as a, getWrapperDomWithSelector as b, safeEncodeURI as c, formatUrlWithPageParam as f, getBoundariesFromMediaQueryKey as g, makeParams as m, startCase as s, toggleNoScroll as t };

package/build/esm/utils-3a2a47d9.js

@@ -0,0 +1,22 @@
+import { L as LOCALE } from './Subot-3289bd8e.js';
+
+// https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
+const MAPPED_LOCALE = {
+    [LOCALE.Vietnam]: 'VN',
+    [LOCALE.Cambodia]: 'KH',
+    [LOCALE.Indonesia]: 'ID',
+    [LOCALE.Malaysia]: 'MY',
+    [LOCALE.PhilippinesEnglish]: 'PH',
+    [LOCALE.PhilippinesTagalog]: 'PH',
+    [LOCALE.Taiwan]: 'TW',
+    [LOCALE.Thailand]: 'TH',
+    [LOCALE.Myanmar]: 'MM',
+};
+const hiddenEmailChar = (str = '') => {
+    const domainIndex = str.indexOf('@');
+    const leftSide = str.substring(0, domainIndex);
+    const startMask = leftSide.length > 3 ? 3 : leftSide.length;
+    return str.replace(str.substring(startMask, domainIndex), str.slice(startMask, domainIndex).replace(/./g, 'x'));
+};
+
+export { MAPPED_LOCALE as M, hiddenEmailChar as h };

package/build/esm/utils-6d7b88da.js

@@ -0,0 +1,367 @@
+import { M as MediaQueries } from './utils-2c484c05.js';
+import styled from 'styled-components';
+import React__default, { memo, useMemo } from 'react';
+import { C as CommonGAssets } from './index-8858383e.js';
+import { I as ImageWrap } from './index-32e53dac.js';
+import { L as LOCALE } from './Subot-3289bd8e.js';
+
+const StyledLogo = styled.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;
+    }
+    ${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.img `
+  height: 16px;
+  width: unset;
+  margin-bottom: 4px;
+  margin-left: -3px;
+`;
+
+const _LogoIcon = ({ type, width, height }) => {
+    const data = useMemo(() => {
+        switch (type) {
+            case 'hellobacsi':
+                return {
+                    width: width || '107px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellobacsi.png'),
+                };
+            case 'hellodoktor':
+                return {
+                    width: width || '127px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellodoktor.png'),
+                };
+            case 'hellosehat':
+                return {
+                    width: width || '121px',
+                    height: height || '27px',
+                    src: CommonGAssets.getAssetPath('logo/hellosehat.png'),
+                };
+            case 'hellohealth':
+                return {
+                    width: width || '123px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellohealth.png'),
+                };
+            case 'hellotogether':
+                return {
+                    width: width || '150px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellotogether.png'),
+                };
+            case 'hellocare':
+                return {
+                    width: width || '99px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellocare.png'),
+                };
+            case 'hellodoctor':
+                return {
+                    width: width || '127px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellodoctor.png'),
+                };
+            case 'hellokrupet':
+                return {
+                    width: width || '101px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellokrupet.png'),
+                };
+            case 'hellosayarwon':
+                return {
+                    width: width || '111px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellosayarwon.png'),
+                };
+            case 'helloyishi':
+                return {
+                    width: width || '89px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/helloyishi.png'),
+                };
+            case 'hellokhunmor':
+                return {
+                    width: width || '123px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/hellokhunmor.png'),
+                };
+            case 'helloswasthya':
+                return {
+                    width: width || '105px',
+                    height: height || '24px',
+                    src: CommonGAssets.getAssetPath('logo/helloswasthya.png'),
+                };
+            case 'logomark':
+                return {
+                    width: width || '60px',
+                    height: height || '57px',
+                    src: CommonGAssets.getAssetPath('logo/logomark.png'),
+                };
+            case 'marryBaby':
+                return {
+                    width: width || '145px',
+                    height: height || '28px',
+                    src: CommonGAssets.getAssetPath('logo/marrybaby.png'),
+                };
+            default:
+                return null;
+        }
+    }, [type, width, height]);
+    const { src, width: logoWidth, height: logoHeight } = data || {};
+    return (React__default.createElement(ImageWrap, { alt: `${type} logo`, className: "main-logo-icon", src: src, style: {
+            width: logoWidth,
+            height: logoHeight,
+        } }));
+};
+const LogoIcon = 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 = [
+    LOCALE.Vietnam,
+    LOCALE.Taiwan,
+    LOCALE.Indonesia,
+    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;
+};
+
+export { LogoIcon as L, StyledLogo as S, LunarNewYearLocale as a, isLunarNewYear as b, isNewYear as c, isRamadan as d, isVNHungKing as e, isVN3004 as f, isLabourDay as g, StyledProLogo as h, isChristmas as i };