@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/index-4b7d4b5b.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+var index$2 = require('./index-dff7ee1b.js');
+var styled = require('@emotion/styled');
+var theme = require('./theme-be20929b.js');
+var index = require('./index-1fdf2f01.js');
+var index$1 = require('./index-64d8db08.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ALLOW_DOMAIN_URL = [
+    'hellobacsi.com',
+    'hellosehat.com',
+    'hellodoktor.com',
+    'hellokrupet.com',
+    'hellodoctor.com.ph',
+    'hellokhunmor.com',
+    'hellosayarwon.com',
+    'helloyishi.com.tw',
+    'helloswasthya.com',
+    'marrybaby.vn',
+    'hellohealth.questionpro.com',
+    'hellobacsivn.page.link',
+];
+const isInternalLink = (url = '') => {
+    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
+};
+
+const StyledLanguageChangeLink = styled__default["default"].a `
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  padding: 7px 11px;
+  gap: 2px;
+
+  background: ${theme.theme.colors.white};
+  border: 1px solid ${theme.theme.colors.neutral100};
+  border-radius: 20px;
+
+  color: ${theme.theme.colors.gray600};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+`;
+
+const StyledSelectionContainer = styled__default["default"].div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledSelectionLabel = styled__default["default"].div `
+  position: relative;
+`;
+const StyleSelectionPopup = styled__default["default"].div `
+  position: absolute;
+  z-index: 21;
+  top: 100%;
+  right: 0;
+  width: 327px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
+
+  &[data-is-open='false'] {
+    display: none;
+  }
+  &[data-show-indicator='true'] {
+    &:before {
+      position: absolute;
+      right: 11px;
+      bottom: 100%;
+      width: 0;
+      height: 0;
+      border: 0.5rem solid transparent;
+      border-top: none;
+      border-bottom-color: #fff;
+      content: '';
+      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+    }
+  }
+`;
+const StyledOption = styled__default["default"].div `
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 16px;
+  border-radius: ${theme.theme.borderRadius};
+  cursor: pointer;
+
+  .check-icon {
+    width: 16px;
+    height: 16px;
+  }
+  &[data-selected='false'] {
+    background-color: ${theme.theme.colors.gray100};
+  }
+`;
+const StyledPopupBackground = styled__default["default"].div `
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+`;
+
+const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(StyledSelectionContainer, null,
+            React__default["default"].createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
+                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
+                React__default["default"].createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index$2) => (React__default["default"].createElement(StyledOption, { key: index$2, "data-selected": showSelected && selected === option.value, onClick: (e) => {
+                        if (selected !== option.value) {
+                            onChange(option.value);
+                            setIsOpen((value) => !value);
+                        }
+                        e.stopPropagation();
+                    } },
+                    React__default["default"].createElement(index.Text, { size: "p3" }, option.label),
+                    showSelected && selected === option.value && (React__default["default"].createElement("img", { src: index$1.CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
+        isOpen && (React__default["default"].createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
+};
+
+const LanguageSwitcher = ({ languageOptions, locale }) => {
+    var _a, _b;
+    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
+    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
+        return null;
+    }
+    return (React__default["default"].createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default["default"].createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
+            if (typeof window !== 'undefined') {
+                window.location.href = href;
+            }
+        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
+};
+const LanguageLabel = ({ locale, label, href, }) => {
+    var _a, _b, _c;
+    return (React__default["default"].createElement(StyledLanguageChangeLink, { href: href },
+        React__default["default"].createElement(index$2.Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
+        React__default["default"].createElement("span", null, label)));
+};
+
+exports.LanguageSwitcher = LanguageSwitcher;
+exports.isInternalLink = isInternalLink;

package/build/{index-5029b5d8.js → index-4bc690c9.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-f410baf6.js');
+var theme = require('./theme-be20929b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-4cdcdbbe.js

@@ -0,0 +1,498 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$1 = require('./index-54aeefca.js');
+var index = require('./index-1fdf2f01.js');
+var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
+var styled = require('@emotion/styled');
+var constants = require('./constants-a78fa8b3.js');
+var index$2 = require('./index-f222ee45.js');
+var theme = require('./theme-be20929b.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledCardLink = styled__default["default"].div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: min(280px, 56.25%);
+    .link-image-blur {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 110%;
+      height: 110%;
+      /* Add the blur effect */
+      -webkit-filter: blur(8px);
+      filter: blur(8px);
+      object-fit: cover;
+      object-position: center;
+      opacity: 0.8;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+    .link-info-container {
+      padding-bottom: 1rem;
+      p {
+        color: #2661ad;
+      }
+      .link-logo {
+        max-width: 2rem;
+        height: 13px;
+        margin-right: 4px;
+        object-fit: contain;
+        vertical-align: middle;
+      }
+    }
+    .link-image-wrapper {
+      padding-top: min(360px, 56.25%);
+      .link-image {
+        object-fit: cover;
+      }
+    }
+  }
+`;
+
+const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [hideLogo, setHideLogo] = React.useState(false);
+    const _theme = core.useMantineTheme();
+    const noRefetchRef = React.useRef(noRefetch);
+    noRefetchRef.current = noRefetch;
+    const [previewData, setPreviewData] = React.useState(null);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            if (noRefetchRef.current)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((res) => {
+                var _a, _b, _c;
+                setHideLogo(false);
+                setPreviewData({
+                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
+                    url,
+                    image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
+                    // logo: meta.logo,
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url]);
+    const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
+    const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
+    const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const urlParts = displayUrl
+        .replace('http://', '')
+        .replace('https://', '')
+        .split(/[/?#]/);
+    const domain = urlParts[0];
+    const showDefaultRef = React.useRef(false);
+    return (React__default["default"].createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
+        React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+            displayImage && (React__default["default"].createElement("div", { className: "link-image-wrapper" },
+                !isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" })),
+                React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" }))),
+            React__default["default"].createElement("div", { className: "link-info-container" },
+                React__default["default"].createElement(index.Text, { size: "n1" },
+                    isMarryBaby && displayLogo && !hideLogo && (React__default["default"].createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
+                    domain),
+                React__default["default"].createElement(index$1.Heading, { tag: "h6" }, displayTitle)))));
+};
+
+const StyledPopoverMenu = styled__default["default"].div `
+  position: relative;
+  display: content;
+
+  .popover-menu__btn {
+    /* position: relative; */
+    > span {
+      width: 100%;
+      height: 100%;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .popover-menu__content {
+    position: absolute;
+    z-index: 10;
+    width: 320px;
+    padding: 8px;
+    border: none;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      position: absolute;
+      width: 16px;
+      height: 8px;
+      background: #fff;
+      content: '';
+    }
+
+    &.--position {
+      &-top {
+        bottom: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              top: 100%;
+              left: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              top: 100%;
+              right: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+        }
+      }
+
+      &-right {
+        left: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+
+          &-end {
+            top: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              bottom: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+        }
+      }
+
+      &-bottom {
+        top: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              bottom: 100%;
+              left: 16px;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              right: 16px;
+              bottom: 100%;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+        }
+      }
+
+      &-left {
+        left: -8px;
+        transform: translateX(-100%);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+
+          &-end {
+            bottom: 0;
+
+            &::before {
+              bottom: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    .popover-menu__content {
+      padding: 0;
+      border-radius: 12px;
+      /* &::before {
+        display: none;
+      } */
+    }
+  }
+`;
+const StyledTree = styled__default["default"].div `
+  display: flex;
+  /* max-height: 300px; */
+  flex-direction: column;
+  cursor: default;
+
+  .__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0;
+    margin-bottom: 8px;
+
+    .__back-btn {
+      position: absolute;
+      top: 50%;
+      left: 8px;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      transform: translateY(-50%);
+    }
+  }
+
+  .tree-text-description {
+    padding-right: 8px;
+    padding-left: 8px;
+    margin-top: -8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+  }
+
+  .__content {
+    overflow: auto;
+    flex: 1;
+  }
+
+  .__list {
+    .__item {
+      position: relative;
+      &.bold-item {
+        font-weight: 700;
+      }
+      &:last-child {
+        .__btn {
+          margin-bottom: 0;
+        }
+      }
+
+      .__btn {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 40px;
+        align-items: center;
+        padding: 0 1rem;
+        border: none;
+        margin-bottom: 8px;
+        color: ${theme.theme.colors.gray800};
+        cursor: pointer;
+        text-align: left;
+        transition: background 0.3s;
+
+        /* for better gtm tracking result  */
+        * {
+          pointer-events: none;
+        }
+        &.--checked {
+          color: ${theme.theme.colors.gray500};
+          pointer-events: none;
+        }
+
+        &:hover {
+          background: ${theme.theme.colors.gray100};
+        }
+
+        .__icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 0.4rem;
+        }
+
+        & > span {
+          position: relative;
+
+          & > img {
+            width: 16px;
+            height: 16px;
+            margin-right: 0.4rem;
+          }
+        }
+      }
+
+      .__toggle {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        width: 16px;
+        height: 16px;
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .__header {
+      padding: 1rem;
+    }
+    .tree-text-description {
+      padding: 0 1rem;
+    }
+    .__list {
+      .__item {
+        &:first-child {
+          .__btn {
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+          }
+        }
+        &:last-child {
+          .__btn {
+            border-bottom-left-radius: 12px;
+            border-bottom-right-radius: 12px;
+          }
+        }
+        .__btn {
+          height: unset;
+          padding: 1rem;
+          margin-bottom: 0;
+          &:hover {
+            background: ${theme.theme.mbColors.lightPink};
+          }
+        }
+      }
+    }
+  }
+`;
+
+const PopoverMenu = ({ className, style, toggleButtonContent, position = 'bottom', align = 'end', children, buttonProps, }) => {
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [isShow, setIsShow] = React.useState(false);
+    const popoverContent = React.useRef(null);
+    const isShowRef = React.useRef(isShow);
+    React.useEffect(() => {
+        var _a;
+        isShowRef.current = isShow;
+        if (!isShow)
+            return;
+        (_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isShow]);
+    React.useEffect(() => {
+        const clickHandler = (e) => {
+            var _a;
+            if (!((_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
+                isShowRef.current)
+                setIsShow(false);
+        };
+        window.addEventListener('click', clickHandler, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('click', clickHandler);
+        };
+    }, []);
+    return (React__default["default"].createElement(StyledPopoverMenu, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        React__default["default"].createElement(index$2.Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "popover-menu__btn", size: "md", color: "transparent", onClick: () => setIsShow((v) => !v) }, buttonProps), toggleButtonContent),
+        isShow ? (React__default["default"].createElement("div", { ref: popoverContent, className: `popover-menu__content --position-${position} --align-${align}`, tabIndex: 0, onClick: (e) => e.stopPropagation() }, typeof children === 'function'
+            ? children({
+                setShow: setIsShow,
+            })
+            : children)) : null));
+};
+
+exports.CardLink = CardLink;
+exports.PopoverMenu = PopoverMenu;
+exports.StyledTree = StyledTree;