@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/esm/i18n.js

@@ -1 +1,55 @@
-import{T as s}from"./translationsContext-f8842fe7.js";export{T as TranslationsContext}from"./translationsContext-f8842fe7.js";import o,{useState as e,useEffect as r,useMemo as t}from"react";import i from"./i18n-values/en-PH.js";import n from"./i18n-values/hi-IN.js";import a from"./i18n-values/id-ID.js";import l from"./i18n-values/km-KH.js";import m from"./i18n-values/ms-MY.js";import v from"./i18n-values/my-MM.js";import f from"./i18n-values/th-TH.js";import j from"./i18n-values/tl-PH.js";import u from"./i18n-values/vi-VN.js";import p from"./i18n-values/vi-VN_MB.js";import c from"./i18n-values/zh-TW.js";const d={"en-PH":i,"vi-VN":u,"hi-IN":n,"id-ID":a,"ms-MY":m,"my-MM":v,"km-KH":l,"zh-TW":c,"th-TH":f,"tl-PH":j,"vi-VN_MB":p},h=({locale:i="en-PH",overrides:n,overrideCurrentLocale:a,children:l,shouldLoadTranslation:m=!0,loader:v=null,onTranslationsLoaded:f})=>{const j=n&&n[i]||a,[u,p]=e((()=>Object.assign(Object.assign({},j),m?d[i]:{})));r((()=>{p(Object.assign(Object.assign({},j),m?d[i]:{}))}),[m,i]);const c=t((()=>u?{locale:i,values:u}:null),[i,u]);return r((()=>{f&&Object.keys(u).length&&f(u)}),[u]),o.createElement(s.Provider,{value:c},c?l:v)};export{h as TranslationsProvider,d as translationsMap};
+import { T as TranslationsContext } from './translationsContext-ad3e25de.js';
+export { T as TranslationsContext } from './translationsContext-ad3e25de.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import defaultTranslations from './i18n-values/en-PH.js';
+import hiTranslations from './i18n-values/hi-IN.js';
+import idTranslations from './i18n-values/id-ID.js';
+import kmTranslations from './i18n-values/km-KH.js';
+import msTranslations from './i18n-values/ms-MY.js';
+import myTranslations from './i18n-values/my-MM.js';
+import thTranslations from './i18n-values/th-TH.js';
+import tlTranslations from './i18n-values/tl-PH.js';
+import viTranslations from './i18n-values/vi-VN.js';
+import mbTranslations from './i18n-values/vi-VN_MB.js';
+import zhTranslations from './i18n-values/zh-TW.js';
+
+const translationsMap = {
+    'en-PH': defaultTranslations,
+    'vi-VN': viTranslations,
+    'hi-IN': hiTranslations,
+    'id-ID': idTranslations,
+    'ms-MY': msTranslations,
+    'my-MM': myTranslations,
+    'km-KH': kmTranslations,
+    'zh-TW': zhTranslations,
+    'th-TH': thTranslations,
+    'tl-PH': tlTranslations,
+    'vi-VN_MB': mbTranslations,
+};
+/**
+ * @deprecated Consider to use TranslationsProviderV2
+ */
+const TranslationsProvider = ({ locale = 'en-PH', overrides, overrideCurrentLocale, children, shouldLoadTranslation = true, loader = null, onTranslationsLoaded, }) => {
+    const overridedValues = (overrides && overrides[locale]) || overrideCurrentLocale;
+    const [values, setValues] = useState(() => (Object.assign(Object.assign({}, overridedValues), (shouldLoadTranslation ? translationsMap[locale] : {}))));
+    useEffect(() => {
+        setValues(Object.assign(Object.assign({}, overridedValues), (shouldLoadTranslation ? translationsMap[locale] : {})));
+    }, [shouldLoadTranslation, locale]);
+    const contextValue = useMemo(() => {
+        if (!values) {
+            return null;
+        }
+        return {
+            locale,
+            values,
+        };
+    }, [locale, values]);
+    useEffect(() => {
+        if (onTranslationsLoaded && Object.keys(values).length) {
+            onTranslationsLoaded(values);
+        }
+    }, [values]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: contextValue }, contextValue ? children : loader));
+};
+
+export { TranslationsProvider, translationsMap };

package/build/esm/i18nV2.js

@@ -1 +1,18 @@
-import{T as e}from"./translationsContext-f8842fe7.js";export{T as TranslationsContext}from"./translationsContext-f8842fe7.js";import t,{useMemo as o}from"react";const r=({locale:r="en-PH",values:n,children:a})=>{const l=o((()=>n?{locale:r,values:n}:null),[r,n]);return t.createElement(e.Provider,{value:l},a)};export{r as TranslationsProvider};
+import { T as TranslationsContext } from './translationsContext-ad3e25de.js';
+export { T as TranslationsContext } from './translationsContext-ad3e25de.js';
+import React__default, { useMemo } from 'react';
+
+const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {
+    const contextValue = useMemo(() => {
+        if (!values) {
+            return null;
+        }
+        return {
+            locale,
+            values,
+        };
+    }, [locale, values]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: contextValue }, children));
+};
+
+export { TranslationsProvider };

package/build/esm/index-12fa4985.js

@@ -0,0 +1,8 @@
+import React__default, { forwardRef } from 'react';
+
+const CustomReferenceDot = forwardRef(function CustomReferenceDot(props, ref) {
+    return (React__default.createElement("circle", Object.assign({}, props, { ref: ref }),
+        React__default.createElement("animate", { attributeName: "r", values: "4;8;4", dur: "2s", begin: "0s", repeatCount: "indefinite" })));
+});
+
+export { CustomReferenceDot as C };

package/build/esm/index-1e59f99a.js

@@ -0,0 +1,152 @@
+import React__default from 'react';
+import { B as Button } from './index-6ea6484e.js';
+import { C as Container } from './index-c2da5293.js';
+import dayjs from 'dayjs';
+import { d as domainLocales } from './index-e612be9c.js';
+import { t as theme } from './theme-e74db08c.js';
+import './index-32e53dac.js';
+import { Flex, Stack, Box } from '@mantine/core';
+import '@mantine/dates';
+import './Subot-3289bd8e.js';
+import './index-8858383e.js';
+import { T as Text } from './index-3474401a.js';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import '@mantine/hooks';
+import './utils-2c484c05.js';
+import { L as Logo } from './index-f3d0592b.js';
+import { M as MarryBabyText } from './index-81f295b7.js';
+import './translationsContext-ad3e25de.js';
+import 'string-format';
+
+var styles$1 = {"footer":"Lj0qoTD","flag":"OO-qFWT"};
+
+const Flag = ({ url, isMobile, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    return (React__default.createElement("div", { className: styles$1.flag , "data-is-mobile": isMobile },
+        React__default.createElement("img", { loading: "lazy", className: "country-flag", src: url, alt: "Country Flag", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-content-label": dataEventLabel })));
+};
+const DiscoverFooter = ({ className, type = 'main', footerInfo, isMobile, locale, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    const { t } = useTranslations();
+    const footerMenu = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu;
+    const verifiedIcons = ((_b = (_a = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _a === void 0 ? void 0 : _a.verified) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || [];
+    const FooterComp = 'footer';
+    return (React__default.createElement(FooterComp, { className: `${styles$1.footer } ${className || ''}`, style: type === 'mini'
+            ? {
+                backgroundColor: theme.colors.neutral50,
+            }
+            : {} },
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: "inner", "data-type": type }, type === 'main' ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("a", { href: "/" },
+                    React__default.createElement("img", { loading: "lazy", className: "footer-logo", src: (_c = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _c === void 0 ? void 0 : _c.logo, alt: "Logo", "data-is-sehat": locale === 'id-ID' })),
+                React__default.createElement("div", { className: "columns" },
+                    React__default.createElement("div", { className: "newsletter" },
+                        React__default.createElement(Text, { size: "p1", weight: "bold" }, (_d = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _d === void 0 ? void 0 : _d.content),
+                        React__default.createElement(Button, { className: "signupButton", color: "primary", size: "lg" }, t('footer.signUp')),
+                        React__default.createElement("div", { className: "social" },
+                            React__default.createElement(Text, { size: "sm" }, (_e = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _e === void 0 ? void 0 : _e.title),
+                            React__default.createElement("div", { className: "icons" }, (_g = (_f = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _f === void 0 ? void 0 : _f.socials) === null || _g === void 0 ? void 0 : _g.map((social, idx) => (React__default.createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                                React__default.createElement("img", { loading: "lazy", "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", className: "social-icon" }))))),
+                            React__default.createElement("hr", { className: "hrMobile" }))),
+                    React__default.createElement("div", null,
+                        footerMenu && (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement("div", { className: "biglinks" }, (_j = (_h = footerMenu[0]) === null || _h === void 0 ? void 0 : _h.items) === null || _j === void 0 ? void 0 : _j.map((bigLink, idx) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": bigLink.title, "data-event-label": `https://${domainLocales[locale]}${bigLink.url}`, className: "bigLink", key: idx, href: bigLink.url }, bigLink.title)))),
+                            React__default.createElement("hr", { className: "hrMobile" }),
+                            React__default.createElement("div", { className: "mHalf" },
+                                React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_k = footerMenu[1]) === null || _k === void 0 ? void 0 : _k.menu_title), (_m = (_l = footerMenu[1]) === null || _l === void 0 ? void 0 : _l.items) === null || _m === void 0 ? void 0 :
+                                _m.map((informationLink, idx) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${domainLocales[locale]}${informationLink.url}`, className: "link", href: informationLink.url, key: idx },
+                                    React__default.createElement(Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${domainLocales[locale]}${informationLink.url}` }, informationLink.title))))),
+                            React__default.createElement("div", { className: "mHalf" },
+                                React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_o = footerMenu[2]) === null || _o === void 0 ? void 0 : _o.menu_title), (_q = (_p = footerMenu[2]) === null || _p === void 0 ? void 0 : _p.items) === null || _q === void 0 ? void 0 :
+                                _q.map((hellohealthlink, idx) => hellohealthlink.url && (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url, className: "link", href: hellohealthlink.url, key: idx },
+                                    React__default.createElement(Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))))),
+                        React__default.createElement("hr", { className: "hrMobile" }),
+                        React__default.createElement("div", { className: "otherSites" },
+                            React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_r = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _r === void 0 ? void 0 : _r.title),
+                            React__default.createElement("div", { className: "flags" }, (_t = (_s = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _s === void 0 ? void 0 : _s.branch) === null || _t === void 0 ? void 0 : _t.map((flagLink, idx) => (React__default.createElement("a", { className: "link", href: flagLink.url, key: idx, "data-event-category": "Footer", "data-event-action": flagLink.name, "data-event-label": flagLink.url },
+                                React__default.createElement(Flag, { url: flagLink.flag, isMobile: isMobile, dataEventCategory: "Footer", dataEventAction: flagLink.name, dataEventLabel: flagLink.url })))))))),
+                React__default.createElement("hr", null),
+                React__default.createElement("div", { className: "copyright" },
+                    React__default.createElement("div", { className: "copyright-image-wrapper" }, verifiedIcons.length
+                        ? verifiedIcons.map((verify, index) => (React__default.createElement("a", { href: verify.url, key: index, className: "copyright-image" },
+                            React__default.createElement("img", { loading: "lazy", src: verify.image, alt: "DMCA Icon" }))))
+                        : null),
+                    React__default.createElement(Text, { size: "xs", className: "copyright-content", as: "div" },
+                        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                __html: (_u = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _u === void 0 ? void 0 : _u.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
+                            } }))))) : (React__default.createElement(React__default.Fragment, null, (footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu) && (React__default.createElement("div", { className: "columns" },
+                React__default.createElement("div", { className: "mHalf" },
+                    React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_v = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _v === void 0 ? void 0 : _v.menu_title), (_x = (_w = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _w === void 0 ? void 0 : _w.items) === null || _x === void 0 ? void 0 :
+                    _x.map((informationLink) => (React__default.createElement("a", { className: "link", href: informationLink.url, key: informationLink.title, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Information", "data-content-title": informationLink.title, "data-content-id": `https://${domainLocales[locale]}${informationLink.url}`, "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${domainLocales[locale]}${informationLink.url}` },
+                        React__default.createElement(Text, { dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${domainLocales[locale]}${informationLink.url}`, size: "sm", style: {
+                                color: theme.colors.gray800,
+                            } }, informationLink.title))))),
+                React__default.createElement("div", { className: "mHalf" },
+                    React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_y = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _y === void 0 ? void 0 : _y.menu_title), (_0 = (_z = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _z === void 0 ? void 0 : _z.items) === null || _0 === void 0 ? void 0 :
+                    _0.map((hellohealthlink, idx) => (React__default.createElement("a", { className: "link", href: hellohealthlink.url, key: idx, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Hello Health", "data-content-title": hellohealthlink.title, "data-content-id": hellohealthlink.url, "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url },
+                        React__default.createElement(Text, { size: "sm", color: theme.colors.gray800, dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))),
+                type !== 'mini' && React__default.createElement("hr", { className: "hrMobile" }),
+                React__default.createElement("div", { className: "newsletter" },
+                    React__default.createElement("div", { className: "social" },
+                        React__default.createElement(Text, { size: "sm" }, (_1 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _1 === void 0 ? void 0 : _1.title),
+                        React__default.createElement("div", { className: "icons" }, (_3 = (_2 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _2 === void 0 ? void 0 : _2.socials) === null || _3 === void 0 ? void 0 : _3.map((social, idx) => (React__default.createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                            React__default.createElement("img", { "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", loading: "lazy", className: "social-icon" })))))))))))))));
+};
+
+var styles = {"footerContainer":"B6-KmWK","menuContainer":"GS-7mbG","wrapMenuItem":"qc5bEb3","wrapItems":"CQGVeuT","wrapCopyRight":"_8eUT8Jr","wrapInfo":"_6JMoel-","socialLink":"pFG7UH3"};
+
+const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) => {
+    var _a;
+    if (!footerMenu)
+        return null;
+    const { general, menu, socials } = footerMenu;
+    return (React__default.createElement("footer", { className: styles.footerContainer , style: {
+            backgroundColor: background ? background : 'none',
+        } },
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: styles.menuContainer }, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default.createElement("div", { className: styles.wrapMenuItem, key: `mbf${idx}` },
+                React__default.createElement(MarryBabyText, { className: "title", type: "subtitle-1", color: theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
+                items.map(({ title, url }, id) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": "Click", "data-event-label": `${url}`, className: "link", href: url, key: `footer-links-${id}` },
+                    React__default.createElement("div", { className: styles.wrapItems, key: `mbitem${id}` },
+                        React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, title)))))))))),
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: styles.wrapInfo },
+                React__default.createElement(Flex, { gap: '24px', sx: (theme) => ({
+                        [theme.fn.largerThan('sm')]: {
+                            '.info-item': {
+                                flexGrow: 1,
+                                width: '50%',
+                            },
+                        },
+                        [theme.fn.smallerThan('sm')]: {
+                            flexDirection: 'column',
+                        },
+                    }) },
+                    React__default.createElement(Stack, { spacing: '24px', className: "info-item" },
+                        React__default.createElement(Logo, { className: "logo", type: logoType }),
+                        React__default.createElement(Text, { size: "p4", as: "div" },
+                            React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.content,
+                                } })),
+                        React__default.createElement("div", { className: styles.socialLink }, socials === null || socials === void 0 ? void 0 : socials.map(({ icon, name, url }, id) => (React__default.createElement("a", { key: `social${id}`, target: "_blank", rel: "noreferrer", "data-event-category": "Footer", "data-event-action": `Follow us - ${name}`, "data-content-label": name, href: url },
+                            React__default.createElement("img", { className: "social-logo", loading: "lazy", src: icon, alt: name })))))),
+                    React__default.createElement(Box, { className: "info-item", sx: { paddingTop: '7px' } },
+                        React__default.createElement(Text, { size: "p4", as: "div" },
+                            React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.information,
+                                } })))))),
+        React__default.createElement("div", { className: styles.wrapCopyRight },
+            React__default.createElement(Container, null,
+                React__default.createElement("div", { className: "content" },
+                    React__default.createElement(Text, { size: "p5", color: "#fff", as: "div" },
+                        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                __html: general === null || general === void 0 ? void 0 : general.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
+                            } })),
+                    React__default.createElement("div", { className: "verify" }, (_a = general === null || general === void 0 ? void 0 : general.verified) === null || _a === void 0 ? void 0 : _a.map(({ image, url }, idx) => (React__default.createElement("img", { loading: "lazy", key: `imgMbFt${idx}`, src: image, alt: url })))))))));
+};
+
+const Footer = ({ type, isMobile = true, locale, footerInfo, siteType, background, }) => {
+    return siteType === 'helloSites' ? (React__default.createElement(DiscoverFooter, { isMobile: isMobile, type: type, locale: locale, footerInfo: (footerInfo || {}) })) : (React__default.createElement(MarryBabyFooter, { footerMenu: footerInfo, background: background }));
+};
+
+export { Footer as F };