@anker-in/headless-ui 1.0.22 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/types.d.ts +1 -0
- package/dist/cjs/biz-components/FooterNavigation/types.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/Subscribe/index.d.ts +2 -1
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/types.d.ts +1 -0
- package/dist/esm/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +2 -0
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/Subscribe/index.d.ts +2 -1
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var T=(t,l)=>{for(var a in l)c(t,a,{get:l[a],enumerable:!0})},S=(t,l,a,m)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of D(l))!E.call(t,o)&&o!==a&&c(t,o,{get:()=>l[o],enumerable:!(m=y(l,o))||m.enumerable});return t};var A=t=>S(c({},"__esModule",{value:!0}),t);var L={};T(L,{default:()=>z});module.exports=A(L);var e=require("react/jsx-runtime"),r=require("react"),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),w=require("../../components/index.js");const C=({subscribeMetadata:t,onSubmit:l,className:a,loading:m})=>{const[o,i]=(0,r.useState)(null),[f,b]=(0,r.useState)(null),[v,g]=(0,r.useState)(!1),[u,h]=(0,r.useState)(""),N=n=>{n.preventDefault();const d=new FormData(n.target),p=d.get("email"),k=d.get("terms"),B=d.get("news");if(!p){i(t?.emptyError);return}if(!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(p)){i(t?.formatError);return}if(!k){b(t?.termsError);return}l?.({email:p,terms:k,news:B,dealsType:t?.dealsType,onSuccess:()=>{g(!0);let F=setTimeout(()=>{g(!1),clearTimeout(F)},3e3)}})};return(0,e.jsxs)("div",{className:(0,x.cn)("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",a),children:[(0,e.jsx)("style",{jsx:!0,global:!0,children:`
|
|
2
2
|
.subscribe-component input:-webkit-autofill,
|
|
3
3
|
.subscribe-component input:-webkit-autofill:hover,
|
|
4
4
|
.subscribe-component input:-webkit-autofill:focus {
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #fff;
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:
|
|
10
|
+
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:N,children:[(0,e.jsxs)("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[(0,e.jsxs)("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[(0,e.jsx)("input",{name:"email",onFocus:()=>i(null),value:u,onChange:n=>h(n.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),(0,e.jsx)("button",{onClick:()=>h(""),className:(0,x.cn)("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!u}),children:"\u2715"})]}),(0,e.jsx)(s.Button,{type:"submit",className:"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:m?(0,e.jsx)(w.LoadingDots,{}):(0,e.jsx)(s.Text,{html:t?.button,className:"text-sm desktop:text-base font-bold leading-[1.2]"})})]}),o&&(0,e.jsx)(s.Text,{as:"p",html:o,className:"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"mt-4 flex flex-col gap-2",children:[(0,e.jsxs)("div",{className:"flex items-start gap-2 laptop:items-center",children:[(0,e.jsx)(s.Checkbox,{name:"terms",id:"terms",size:"base",checked:t?.termsChecked,onCheckedChange:n=>n&&b(null),className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),(0,e.jsx)("label",{htmlFor:"terms",children:(0,e.jsx)(s.Text,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),f&&(0,e.jsx)(s.Text,{as:"p",html:f,className:"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Checkbox,{name:"news",id:"news",size:"base",checked:t?.newsChecked,className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),(0,e.jsx)("label",{htmlFor:"news",children:(0,e.jsx)(s.Text,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),v&&(0,e.jsx)(s.Text,{as:"p",html:t?.successMessage,className:"text-base text-brand-0 font-bold leading-[1.2]"})]})]})]})};var z=C;
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\"
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Subscribe_exports", "__export", "Subscribe_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "Subscribe", "subscribeMetadata", "onSubmit", "className", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked"]
|
|
4
|
+
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { LoadingDots } from '../../components/index.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n loading,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n loading?: boolean\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n {loading ? <LoadingDots /> : <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />}\n </Button>\n </div>\n {error && (\n <Text as=\"p\" html={error} className=\"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n )}\n <div className=\"mt-4 flex flex-col gap-2\">\n <div className=\"flex items-start gap-2 laptop:items-center\">\n <Checkbox\n name=\"terms\"\n id=\"terms\"\n size=\"base\"\n checked={subscribeMetadata?.termsChecked}\n onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"terms\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.terms}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {termsError && (\n <Text\n as=\"p\"\n html={termsError}\n className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\"\n />\n )}\n <div className=\"flex items-start gap-2\">\n <Checkbox\n name=\"news\"\n id=\"news\"\n size=\"base\"\n checked={subscribeMetadata?.newsChecked}\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"news\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.news}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {success && (\n <Text\n as=\"p\"\n html={subscribeMetadata?.successMessage}\n className=\"text-base text-brand-0 font-bold leading-[1.2]\"\n />\n )}\n </div>\n </form>\n </div>\n )\n}\n\nexport default Subscribe\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Subscribe_exports", "__export", "Subscribe_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "Subscribe", "subscribeMetadata", "onSubmit", "className", "loading", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as O,jsx as e,jsxs as l}from"react/jsx-runtime";import{useEffect as
|
|
1
|
+
import{Fragment as O,jsx as e,jsxs as l}from"react/jsx-runtime";import{useEffect as v,useMemo as M,useState as k}from"react";import{Picture as f,Text as o,Container as C,Link as x}from"../../components/index.js";import F from"../Subscribe/index.js";import{FooterNavigationBlockType as b}from"./types.js";import{AddIcon as N,SubtractIcon as g,ArrowRightIcon as D,CountryIcon as A}from"./icons/index.js";import{useMediaQuery as y}from"react-responsive";import{cn as h}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";const E=({data:{footerNavigation:s}={},currentCountry:r,event:i,subscribeLoading:t})=>{const[n,m]=k(!1),p=y({query:"(max-width: 1440px)"});v(()=>{m(p)},[p]);const d=M(()=>s?.footerBlocks?.find(c=>c?.blockType===b.Brand)?.country||{},[s]);return l(C,{childClassName:"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8",children:[e(o,{html:s?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),s?.footerBlocks?.map(c=>{if(c?.blockType===b.Signup)return e(S,{subscribeLoading:t,data:c,onSubmit:i?.signup});if(c?.blockType===b.Brand)return e(z,{data:c,isMobile:n,event:i,currentCountry:r});if(c?.blockType===b.Main)return e(T,{data:{...c,country:d},event:i,isMobile:n,currentCountry:r})})]})},S=({data:s,onSubmit:r,subscribeLoading:i})=>l("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8",children:[e(F,{subscribeMetadata:s?.signup,className:"desktop:flex-[744]",onSubmit:r,loading:i}),e("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),l("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[l("div",{className:"flex-1",children:[e(o,{html:s?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:s?.enjoy?.enjoys?.map(t=>l("div",{className:"flex-start flex gap-2",children:[e(f,{source:t?.icon?.url,alt:t?.icon?.alt,className:"size-5 shrink-0"}),e(o,{html:t?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})]},t?.id))})]}),e("div",{className:"w-px bg-[#3D3E3F] hidden desktop:block"}),l("div",{className:"flex-1",children:[e(o,{html:s?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:s?.benefit?.benefits?.map(t=>e(x,{href:t?.link,asChild:!t?.link,className:"no-underline",children:e(o,{html:t?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},t?.id))})]})]})]}),T=({data:s,event:r,isMobile:i,currentCountry:t})=>{const[n,m]=k(!1),{services:p,mainNav:d,country:c}=s;return l("div",{className:"flex flex-col gap-8",children:[l("div",{className:h({"desktop:gap-16 flex":p?.download?.title}),children:[l("div",{className:h("w-full",{"desktop:flex-[1260]":p?.download?.title}),children:[e(o,{html:p?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:h("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":p?.download?.title}),children:p?.storeBenefits?.reasons?.map(a=>l("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[e(f,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-5 shrink-0"}),e(x,{href:a?.link,asChild:!a?.link,className:"no-underline",children:e(o,{html:a?.label,className:"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]"})})]},a?.id))})]}),e(w,{className:h({"desktop:flex-[404] hidden desktop:block":p?.download?.title}),title:p?.download?.title,apps:p?.download?.apps})]}),e("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]"}),l("div",{className:"desktop:grid grid-cols-4 gap-4",children:[e(u,{title:d?.products?.title,lists:d?.products?.products}),e(u,{title:d?.explore?.title,lists:d?.explore?.explores}),e(u,{title:d?.support?.title,lists:d?.support?.supports}),l("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[l("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[e(o,{as:"p",html:d?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white"}),i&&e("button",{onClick:()=>m(!n),children:n?e(g,{width:20,height:20}):e(N,{width:20,height:20})})]}),(n&&i||!i)&&e("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",children:d?.contact?.contacts?.map(a=>l("div",{className:"flex items-start gap-2",children:[e(f,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-5 shrink-0"}),e(x,{href:a?.link,className:"no-underline",children:e(o,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})})]},a?.id))}),e(B,{country:t||c,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:i,onChangeCountry:r?.country}),e("div",{className:"desktop:hidden mt-8",children:e(w,{title:p?.download?.title,apps:p?.download?.apps})}),!!d?.socials?.length&&e("div",{className:"mt-8 flex items-center gap-2",children:d?.socials?.map(a=>e(x,{href:a?.link,children:e(f,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-8 shrink-0"})},a?.id))}),e("div",{className:"mt-4 flex flex-wrap gap-2",children:d?.payment?.map(a=>e(x,{href:a?.link,children:e(f,{source:a?.icon?.url,alt:a?.icon?.alt,className:"h-[28px] w-[44px] shrink-0"})},a?.id))})]})]})]})},z=({data:s,isMobile:r,event:i,currentCountry:t})=>l("div",{className:"flex flex-col gap-4",children:[l("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[l("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[e(o,{html:s?.brand?.currentBrand,className:"text-[#B6B6BA]"}),e("div",{className:"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]"}),e("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:s?.brand?.brands?.map(n=>e(x,{href:n?.link,children:e(o,{html:n?.icon,className:"text-[#B6B6BA] hover:text-white"})},n?.id))})]}),e(B,{country:t||s?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:r,onChangeCountry:i?.country})]}),e("div",{className:"h-px bg-[#3D3E3F]"}),l("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[e(o,{html:s?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:s?.policy?.policies?.map(n=>e(x,{href:n?.link,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline",children:n?.label},n?.id))})]})]}),u=({title:s,lists:r,className:i})=>{const[t,n]=k(!1),[m,p]=k(!1),d=y({query:"(max-width: 1440px)"});return v(()=>{p(d)},[d]),l("div",{className:h("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),children:[l("div",{className:"flex items-center justify-between",onClick:()=>n(!t),children:[e(o,{as:"p",html:s,className:"text-xl font-bold leading-[1.2] text-white"}),m&&e(O,{children:t?e(g,{width:20,height:20}):e(N,{width:20,height:20})})]}),(t&&m||!m)&&e("div",{className:"mt-4 flex flex-col gap-2",children:r?.map(c=>e(x,{href:c?.link,className:"no-underline",children:e(o,{html:c?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},c?.id))})]})},w=({title:s,apps:r,className:i})=>r?.length?l("div",{className:i,children:[e(o,{html:s,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex items-center gap-4",children:r?.map(t=>l("div",{className:"flex flex-col items-center gap-[6px]",children:[e(x,{href:t?.link,children:e(f,{source:t?.icon?.url,alt:t?.icon?.alt,className:"size-10 shrink-0"})}),t?.label&&e(o,{html:t?.label,className:"text-xs font-bold text-[#999999]"})]},t?.id))})]}):null,B=({country:s,isMobile:r,className:i,onChangeCountry:t})=>e("div",{className:h("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),onClick:()=>t?.(),children:l("div",{className:"flex items-center justify-between",children:[l("div",{className:"flex cursor-pointer items-center gap-2",children:[e(A,{width:20,height:20,className:"shrink-0"}),e(o,{as:"p",html:s?.countryName||s?.country,className:"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white"})]}),r&&e("button",{children:e(D,{width:20,height:20})})]})});var K=L(E);export{K as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({ data: { footerNavigation } = {}, currentCountry, event }: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit }: { data: any; onSubmit?: (params: any) => void }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text as=\"p\" html={mainNav?.contact?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Text", "Container", "Link", "Subscribe", "FooterNavigationBlockType", "AddIcon", "SubtractIcon", "ArrowRightIcon", "CountryIcon", "useMediaQuery", "cn", "withLayout", "FooterNavigation", "footerNavigation", "currentCountry", "event", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "item", "apps", "appItem", "onChangeCountry", "FooterNavigation_default"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footerNavigation } = {},\n currentCountry,\n event,\n subscribeLoading,\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion subscribeLoading={subscribeLoading} data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit, subscribeLoading }: { data: any; onSubmit?: (params: any) => void; subscribeLoading?: boolean }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} loading={subscribeLoading} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text as=\"p\" html={mainNav?.contact?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Text", "Container", "Link", "Subscribe", "FooterNavigationBlockType", "AddIcon", "SubtractIcon", "ArrowRightIcon", "CountryIcon", "useMediaQuery", "cn", "withLayout", "FooterNavigation", "footerNavigation", "currentCountry", "event", "subscribeLoading", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "item", "apps", "appItem", "onChangeCountry", "FooterNavigation_default"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/types.ts"],
|
|
4
|
-
"sourcesContent": ["export interface FooterNavigationProps {\n data: any\n currentCountry?: any\n event?: {\n signup?: (params: any) => void\n download?: () => void\n country?: () => void\n }\n}\n\nexport enum FooterNavigationBlockType {\n Signup = 'ipc-footer-signup',\n Main = 'ipc-footer-main',\n Brand = 'ipc-footer-brand',\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export interface FooterNavigationProps {\n data: any\n currentCountry?: any\n subscribeLoading?: boolean\n event?: {\n signup?: (params: any) => void\n download?: () => void\n country?: () => void\n }\n}\n\nexport enum FooterNavigationBlockType {\n Signup = 'ipc-footer-signup',\n Main = 'ipc-footer-main',\n Brand = 'ipc-footer-brand',\n}\n"],
|
|
5
|
+
"mappings": "AAWO,IAAKA,OACVA,EAAA,OAAS,oBACTA,EAAA,KAAO,kBACPA,EAAA,MAAQ,mBAHEA,OAAA",
|
|
6
6
|
"names": ["FooterNavigationBlockType"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as M}from"react/jsx-runtime";import{createContext as
|
|
1
|
+
import{jsx as M}from"react/jsx-runtime";import{createContext as S,useCallback as o,useContext as d,useMemo as p,useReducer as l}from"react";import{HeaderNavigationMenu as v}from"./types.js";const y={isMobile:!1,payloadData:{},buildProps:{products:[],categories:{}},currentMenu:v.Primary,setCurrentMenu:()=>{},currentSeriesMetadata:{},setCurrentSeriesMetadata:()=>{},onSeriesProductClick:(e,t,n)=>{},onSidebarNavClick:e=>{},cartCount:0},i=S(y),R=()=>{if(!d(i))throw new Error("useNavContext must be used in <NavProvider>");return d(i)},E=(e,t)=>{switch(t.type){case"SET_CURRENT_MENU":return{...e,currentMenu:t.value};case"SET_CURRENT_SERIES_METADATA":return{...e,currentSeriesMetadata:t.value};case"SET_SUB_SUB_CATEGORY":return{...e,subSubCategory:t.value}}},T=({children:e,...t})=>{const[n,r]=l(E,{...y,currentMenu:v.Primary,setCurrentMenu:()=>{}}),u=o(a=>r({type:"SET_CURRENT_MENU",value:a}),[r]),s=o(a=>r({type:"SET_CURRENT_SERIES_METADATA",value:a}),[r]),c=o(a=>r({type:"SET_SUB_SUB_CATEGORY",value:a}),[r]),C=p(()=>({...n,setCurrentMenu:u,setCurrentSeriesMetadata:s,setSubSubCategory:c}),[u,s,c,n]);return M(i.Provider,{value:{...C,...t},children:e})};var m=T;export{i as NavContext,m as default,R as useNavContext};
|
|
2
2
|
//# sourceMappingURL=NavProvider.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeaderNavigation/NavProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n buildProps: {\n products?: Product[] // \u4EA7\u54C1\u6570\u636E\n categories?: Record<string, any> // \u5206\u7C7B\u6570\u636E\n }\n event?: {\n search?: () => void\n cart?: () => void\n profile?: () => void\n livestream?: () => void\n join?: () => void\n login?: () => void\n }\n profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n isMobile?: boolean\n payloadData: any\n currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n setCurrentMenu?: (menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n currentSeriesMetadata?: any // \u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n setCurrentSeriesMetadata?: (metadata: any) => void // \u8BBE\u7F6E\u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n subSubCategory?: any // \u5B50\u5B50\u5206\u7C7B\n setSubSubCategory?: (category: any) => void // \u8BBE\u7F6E\u5B50\u5B50\u5206\u7C7B\n onSeriesProductClick?: (seriesProduct: any, position: number, seriesLabel?: string) => void // \u8BBE\u7F6E\u7CFB\u5217\u4EA7\u54C1\u70B9\u51FB\n onSidebarNavClick?: (series: any, index: number, subSubindex?: number) => void // \u8BBE\u7F6E\u4FA7\u8FB9\u680F\u5BFC\u822A\u70B9\u51FB\n}\n\nconst initialState: NavContextType = {\n isMobile: false,\n payloadData: {},\n buildProps: {\n products: [],\n categories: {},\n },\n currentMenu: HeaderNavigationMenu.Primary,\n setCurrentMenu: () => {},\n currentSeriesMetadata: {},\n setCurrentSeriesMetadata: () => {},\n onSeriesProductClick: (seriesProduct: any, position: number, seriesLabel?: string) => {},\n onSidebarNavClick: (series: any) => {} ,\n}\n\ntype Action =\n | {\n type: 'SET_CURRENT_MENU'\n value: HeaderNavigationMenu\n }\n | {\n type: 'SET_CURRENT_SERIES_METADATA'\n value: any\n }\n | {\n type: 'SET_SUB_SUB_CATEGORY'\n value: any\n }\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n const context = useContext(NavContext)\n if (!context) {\n throw new Error('useNavContext must be used in <NavProvider>')\n }\n return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n switch (action.type) {\n case 'SET_CURRENT_MENU': {\n return {\n ...state,\n currentMenu: action.value,\n }\n }\n case 'SET_CURRENT_SERIES_METADATA': {\n return {\n ...state,\n currentSeriesMetadata: action.value,\n }\n }\n case 'SET_SUB_SUB_CATEGORY': {\n return {\n ...state,\n subSubCategory: action.value,\n }\n }\n }\n}\n\nconst NavProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & NavContextType) => {\n const [state, dispatch] = useReducer(reducer, {\n ...initialState,\n currentMenu: HeaderNavigationMenu.Primary,\n setCurrentMenu: () => {},\n })\n\n const setCurrentMenu = useCallback(\n (value: HeaderNavigationMenu) => {\n return dispatch({ type: 'SET_CURRENT_MENU', value })\n },\n [dispatch]\n )\n\n const setCurrentSeriesMetadata = useCallback(\n (value: any) => {\n return dispatch({ type: 'SET_CURRENT_SERIES_METADATA', value })\n },\n [dispatch]\n )\n\n const setSubSubCategory = useCallback((value: any) => {\n return dispatch({ type: 'SET_SUB_SUB_CATEGORY', value })\n }, [dispatch])\n\n const value = useMemo(\n () => ({\n ...state,\n setCurrentMenu,\n setCurrentSeriesMetadata,\n setSubSubCategory,\n }),\n [setCurrentMenu, setCurrentSeriesMetadata, setSubSubCategory, state]\n )\n\n return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n buildProps: {\n products?: Product[] // \u4EA7\u54C1\u6570\u636E\n categories?: Record<string, any> // \u5206\u7C7B\u6570\u636E\n }\n cartCount: number\n event?: {\n search?: () => void\n cart?: () => void\n profile?: () => void\n livestream?: () => void\n join?: () => void\n login?: () => void\n }\n profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n isMobile?: boolean\n payloadData: any\n currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n setCurrentMenu?: (menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n currentSeriesMetadata?: any // \u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n setCurrentSeriesMetadata?: (metadata: any) => void // \u8BBE\u7F6E\u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n subSubCategory?: any // \u5B50\u5B50\u5206\u7C7B\n setSubSubCategory?: (category: any) => void // \u8BBE\u7F6E\u5B50\u5B50\u5206\u7C7B\n onSeriesProductClick?: (seriesProduct: any, position: number, seriesLabel?: string) => void // \u8BBE\u7F6E\u7CFB\u5217\u4EA7\u54C1\u70B9\u51FB\n onSidebarNavClick?: (series: any, index: number, subSubindex?: number) => void // \u8BBE\u7F6E\u4FA7\u8FB9\u680F\u5BFC\u822A\u70B9\u51FB\n}\n\nconst initialState: NavContextType = {\n isMobile: false,\n payloadData: {},\n buildProps: {\n products: [],\n categories: {},\n },\n currentMenu: HeaderNavigationMenu.Primary,\n setCurrentMenu: () => {},\n currentSeriesMetadata: {},\n setCurrentSeriesMetadata: () => {},\n onSeriesProductClick: (seriesProduct: any, position: number, seriesLabel?: string) => {},\n onSidebarNavClick: (series: any) => {},\n cartCount: 0,\n}\n\ntype Action =\n | {\n type: 'SET_CURRENT_MENU'\n value: HeaderNavigationMenu\n }\n | {\n type: 'SET_CURRENT_SERIES_METADATA'\n value: any\n }\n | {\n type: 'SET_SUB_SUB_CATEGORY'\n value: any\n }\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n const context = useContext(NavContext)\n if (!context) {\n throw new Error('useNavContext must be used in <NavProvider>')\n }\n return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n switch (action.type) {\n case 'SET_CURRENT_MENU': {\n return {\n ...state,\n currentMenu: action.value,\n }\n }\n case 'SET_CURRENT_SERIES_METADATA': {\n return {\n ...state,\n currentSeriesMetadata: action.value,\n }\n }\n case 'SET_SUB_SUB_CATEGORY': {\n return {\n ...state,\n subSubCategory: action.value,\n }\n }\n }\n}\n\nconst NavProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & NavContextType) => {\n const [state, dispatch] = useReducer(reducer, {\n ...initialState,\n currentMenu: HeaderNavigationMenu.Primary,\n setCurrentMenu: () => {},\n })\n\n const setCurrentMenu = useCallback(\n (value: HeaderNavigationMenu) => {\n return dispatch({ type: 'SET_CURRENT_MENU', value })\n },\n [dispatch]\n )\n\n const setCurrentSeriesMetadata = useCallback(\n (value: any) => {\n return dispatch({ type: 'SET_CURRENT_SERIES_METADATA', value })\n },\n [dispatch]\n )\n\n const setSubSubCategory = useCallback((value: any) => {\n return dispatch({ type: 'SET_SUB_SUB_CATEGORY', value })\n }, [dispatch])\n\n const value = useMemo(\n () => ({\n ...state,\n setCurrentMenu,\n setCurrentSeriesMetadata,\n setSubSubCategory,\n }),\n [setCurrentMenu, setCurrentSeriesMetadata, setSubSubCategory, state]\n )\n\n return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
|
|
5
|
+
"mappings": "AAsIS,cAAAA,MAAA,oBAtIT,OAAgB,iBAAAC,EAAe,eAAAC,EAAa,cAAAC,EAAY,WAAAC,EAAS,cAAAC,MAAkB,QAEnF,OAAS,wBAAAC,MAA4B,aA8BrC,MAAMC,EAA+B,CACnC,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,SAAU,CAAC,EACX,WAAY,CAAC,CACf,EACA,YAAaD,EAAqB,QAClC,eAAgB,IAAM,CAAC,EACvB,sBAAuB,CAAC,EACxB,yBAA0B,IAAM,CAAC,EACjC,qBAAsB,CAACE,EAAoBC,EAAkBC,IAAyB,CAAC,EACvF,kBAAoBC,GAAgB,CAAC,EACrC,UAAW,CACb,EAeaC,EAAaX,EAA8BM,CAAY,EAEvDM,EAAgB,IAAM,CAEjC,GAAI,CADYV,EAAWS,CAAU,EAEnC,MAAM,IAAI,MAAM,6CAA6C,EAE/D,OAAOT,EAAWS,CAAU,CAC9B,EAEME,EAAU,CAACC,EAAuBC,IAAmB,CACzD,OAAQA,EAAO,KAAM,CACnB,IAAK,mBACH,MAAO,CACL,GAAGD,EACH,YAAaC,EAAO,KACtB,EAEF,IAAK,8BACH,MAAO,CACL,GAAGD,EACH,sBAAuBC,EAAO,KAChC,EAEF,IAAK,uBACH,MAAO,CACL,GAAGD,EACH,eAAgBC,EAAO,KACzB,CAEJ,CACF,EAEMC,EAAc,CAAC,CACnB,SAAAC,EACA,GAAGC,CACL,IAEuB,CACrB,KAAM,CAACJ,EAAOK,CAAQ,EAAIf,EAAWS,EAAS,CAC5C,GAAGP,EACH,YAAaD,EAAqB,QAClC,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEKe,EAAiBnB,EACpBoB,GACQF,EAAS,CAAE,KAAM,mBAAoB,MAAAE,CAAM,CAAC,EAErD,CAACF,CAAQ,CACX,EAEMG,EAA2BrB,EAC9BoB,GACQF,EAAS,CAAE,KAAM,8BAA+B,MAAAE,CAAM,CAAC,EAEhE,CAACF,CAAQ,CACX,EAEMI,EAAoBtB,EAAaoB,GAC9BF,EAAS,CAAE,KAAM,uBAAwB,MAAAE,CAAM,CAAC,EACtD,CAACF,CAAQ,CAAC,EAEPE,EAAQlB,EACZ,KAAO,CACL,GAAGW,EACH,eAAAM,EACA,yBAAAE,EACA,kBAAAC,CACF,GACA,CAACH,EAAgBE,EAA0BC,EAAmBT,CAAK,CACrE,EAEA,OAAOf,EAACY,EAAW,SAAX,CAAoB,MAAO,CAAE,GAAGU,EAAO,GAAGH,CAAK,EAAI,SAAAD,EAAS,CACtE,EAEA,IAAOO,EAAQR",
|
|
6
6
|
"names": ["jsx", "createContext", "useCallback", "useContext", "useMemo", "useReducer", "HeaderNavigationMenu", "initialState", "seriesProduct", "position", "seriesLabel", "series", "NavContext", "useNavContext", "reducer", "state", "action", "NavProvider", "children", "rest", "dispatch", "setCurrentMenu", "value", "setCurrentSeriesMetadata", "setSubSubCategory", "NavProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as q,jsx as e,jsxs as l}from"react/jsx-runtime";import we,{forwardRef as Z,useCallback as G,useEffect as H,useImperativeHandle as Ce,useMemo as L,useRef as F,useState as M}from"react";import{Picture as V,Text as h,Button as $,Container as ee,Link as _,Heading as se}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as N,atobID as De}from"../../helpers/utils.js";import Le,{useNavContext as O}from"./NavProvider.js";import{HeaderNavigationMenu as A,HeaderNavigationBlockType as I,HeaderNavigationActionBlockType as W}from"./types.js";import"react-responsive";import{debounce as Me}from"es-toolkit";import Pe from"jump.js";import{useGSAP as oe}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as ie,WithSupports as ce,WithMulticol as de,WithGroupCategory as ue}from"./withCategory.js";import{Menu as ze,Close as me,User as Ee,RightArrow as He,LeftArrow as Be,DownArrow as te,Polygon as Te}from"./icons/index.js";import $e from"../NavigationSearch/index.js";const Re=Z((t,a)=>{const{data:{headerNavigation:n}={},buildProps:d,event:s,profile:b,theme:u="light",isTop:i=!1,searchResult:m,onSearch:w,isSearching:r,keywords:k,onPrimaryNavClick:x,onSeriesProductClick:f,onSidebarNavClick:v}=t,p=F(null),[c,o]=M(!1),[y,z]=M(!1),[C,P]=M(!1),[D,U]=M(!1),R=F(null),S=()=>{const B=document?.querySelector("body")?.offsetWidth||0;U(B<=1440)};H(()=>(S(),window.addEventListener("resize",S),()=>{window.removeEventListener("resize",S)}),[]),Ce(a,()=>R.current),H(()=>{R.current&&i&&Pe(R.current,{duration:0,offset:R.current?.getBoundingClientRect()?.bottom||0})},[i]),H(()=>{s&&(s.search=()=>o(!0))},[s]),oe(()=>{p?.current&&c&&re.fromTo(p.current,{height:0},{height:"auto",duration:.3})},[c]),H(()=>{document.documentElement.style.overflow=c?"hidden":"auto"},[c]);const Q=L(()=>n?.headerBar?.actions?.find(B=>B?.blockType===W.Search)?.searchBar?.[0]||{},[n]);return e(Le,{buildProps:d,profile:b,isMobile:D,event:s,payloadData:n,onSidebarNavClick:v,onSeriesProductClick:f,children:e("header",{"data-ui-component-id":"HeaderNavigation",className:"relative z-[100]",ref:R,children:l("div",{className:N("hover:text-black hover:bg-white",u==="light"?"text-black":"text-white",{}),onClick:()=>P(!0),children:[e(Ae,{data:n,className:"hidden desktop:block",theme:u,onNavItemClick:()=>P(!0),onPrimaryNavClick:x}),e(Oe,{data:n,className:"block desktop:hidden",onPrimaryNavClick:x}),c&&l("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.top}px)`},children:[e("div",{ref:p,className:N("overflow-y-auto",{}),children:e($e,{data:Q,keywords:k,isSearching:r,searchResult:m,onSearch:B=>{w?.(B)},onClose:()=>{w?.(),o(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>o(!1)})]})]})})})}),Ae=Z((t,a)=>{const{data:n,onNavItemClick:d,className:s,theme:b,onPrimaryNavClick:u}=t,{event:i,profile:m}=O(),[w,r]=M(!1),k=L(()=>ue(n?.categories?.filter(g=>g?.pcShow)),[n]),[x,f]=M(null),[v,p]=M([]),c=F(null),[o,y]=M(!1),z=F(null),C=F(null),P=F(k.map(g=>Array(g?.length||0).fill(null)));H(()=>{k?.length&&p(k?.map((g,E)=>g?.map((T,j)=>({groupIndex:E,index:j,open:!1}))))},[k]);const D=L(()=>{let g=null;for(const E of v){for(const T of E)if(T.open){g=T;break}if(g)break}return g},[v]);H(()=>{document.documentElement.style.overflow=D?.open||o?"hidden":"auto"},[D?.open,o]);const U=(g,E,T)=>{if(y(!1),x?.components?.[0]?.blockType===I.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const j=k?.flat()||[],J=j?.findIndex(le=>le?.id===k[E][T]?.id);g.stopPropagation(),d?.(),u?.(j[J],J),f(k[E][T]),p(le=>le.map(ke=>ke.map(X=>X.groupIndex===E&&X.index===T?{...X,open:!X.open}:{...X,open:!1})))}},R=()=>{p(g=>g.map(E=>E.map(T=>({...T,open:!1}))))},S=L(()=>{if(x)return x?.components?.[0]?.blockType},[x]),Q=ie(je,x),B=de(Fe,x),xe=ce(_e,{categoriesItem:x,currentNavItemRef:P.current?.[D?.groupIndex||0]?.[D?.index||0]}),Ne=L(()=>{switch(S){case I.Sidebar:return e(Q,{});case I.Supports:return e(xe,{});case I.Multicol:return e(B,{});default:return null}},[S,x]),ae=L(()=>n?.headerBar?.actions?.filter(g=>g?.pcShow),[n]),K=L(()=>ae?.find(g=>g?.blockType===W.Profile),[ae]),ne=G(()=>{y(g=>!g)},[]);return H(()=>{if(c?.current){const g=c.current;return g.addEventListener("click",ne),()=>{g.removeEventListener("click",ne)}}},[ne]),oe(()=>{D?.open&&re.fromTo(C?.current,{height:0},{height:"auto"})},[D?.open]),l(ee,{className:N("relative h-[96px]",s),children:[l("div",{ref:z,onClick:R,className:"flex h-full flex-col justify-end gap-4",children:[l("div",{className:"flex items-center justify-between",children:[e(ge,{}),e(ye,{ref:c,actions:ae,activeStatus:o})]}),e("div",{className:"flex justify-between",children:k?.map((g,E)=>e("div",{className:"flex gap-3",children:g?.map((T,j)=>e("div",{ref:J=>{P.current[E][j]=J},className:"group cursor-pointer",children:l("div",{className:"relative",children:[l("div",{className:"flex items-center gap-1 pb-4",onClick:J=>U(J,E,j),children:[e(h,{html:T.text,className:"text-sm font-bold leading-[1.4]"}),e(te,{className:N("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":D?.groupIndex===E&&D?.index===j,"opacity-100":w&&D?.groupIndex===E&&D?.index===j})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":D?.groupIndex===E&&D?.index===j},b==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},T.id))},`groupCategory-${E}`))})]}),l("div",{className:N("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(D?.open&&x)}),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{height:`calc(100dvh - ${z?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:C,className:N("relative z-50",{"overflow-hidden":S!==I.Supports}),children:Ne}),e("div",{className:"flex-1 bg-transparent",onClick:R})]}),o&&l("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${c?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:m?.email?l(q,{children:[e(h,{html:m?.nick_name||K?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:K?.profiles?.map(g=>e(Y,{className:"py-2",label:g?.title,href:g?.url},g.id))})]}):l(q,{children:[e(Te,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(h,{html:K?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:K?.benefits?.map(g=>l("div",{className:"flex items-center gap-[6px]",children:[e(V,{source:g.benefitIcon?.url,className:"size-4",alt:g.benefit,width:16,height:16}),e(h,{html:g.benefit,className:"text-sm font-bold leading-[1.4]"})]},g.id))}),l("div",{className:"mt-4 flex items-center gap-2",children:[e($,{variant:"secondary",size:"lg",onClick:()=>i?.join?.(),children:e(h,{html:K?.primaryButton||"Join Now",className:"font-bold"})}),e($,{variant:"primary",size:"lg",onClick:()=>i?.login?.(),children:e(h,{html:K?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>y(!1)})]})]})}),je=we.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:n,onSidebarNavClick:d}=O(),[s,b]=M([]),[u,i]=M(-1),m=F(null),w=G(()=>{const f=t?.subcategories;if(!f?.length)return;const v=f.findIndex(o=>!!o?.subSubCategories),p=f.findIndex(o=>!o?.subSubCategories),c=f.map((o,y)=>({index:y,open:v===y||p===y}));b(c)},[t]);H(()=>{w()},[w]);const r=L(()=>{const f=t?.subcategories?.[s?.find(p=>p.open)?.index||0],v=a?.find(p=>p?.label?.toLowerCase()===f?.label?.toLowerCase())||{};if(f?.collections){const p=n?.categories?.[f?.collections]||{};return{label:v?.label,isCollection:!0,banner:v?.banner,primary:v?.primary,series:[{products:p?.products}]}}else if(f?.subSubCategories){const p=f?.subSubCategories?.[u],c=a?.find(o=>o?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const o=n?.categories?.[p?.collections]||{};return{label:c?.label,isCollection:!0,banner:c?.banner,primary:c?.primary,series:[{products:o?.products}]}}else return c}else return v},[t,s,u,a]),k=G((f,v)=>{if(v?.subSubCategories?.length>0?i(0):i(-1),v?.subSubCategories?.length>0)b(p=>p.map(c=>c.index===f?{...c,open:!0}:{...c,open:!1}));else{const c=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);b(o=>o.map(y=>({...y,open:y.index===f||y.index===c})))}},[t,w]),x=(f,v)=>{b(p=>p.map(c=>c.index===f?{...c,open:!0}:{...c,open:!1})),i(v)};return l(ee,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[l("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:m,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((f,v)=>{const p=Array.isArray(f?.subSubCategories)&&f?.subSubCategories?.length>0;return l("div",{children:[l("div",{className:N("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!p&&s?.find(c=>c.index===v)?.open}),onClick:()=>{k(v,f),d?.(f,v)},children:[e(h,{html:f.label,className:"p-4 text-sm font-bold leading-[1.4]"}),p&&e(te,{className:N("size-4",{"rotate-180":s?.find(c=>c.index===v)?.open})})]}),s?.find(c=>c.index===v)?.open&&e("div",{className:"flex flex-col",children:f.subSubCategories?.map((c,o)=>e(h,{html:c.label,onClick:()=>{x(v,o),d?.(c,o)},className:N("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":u===o})},`subSubItem-${v}-${o}`))})]},`subcategoryItem-${v}`)})}),t&&e("div",{className:"flex",children:l("div",{className:"flex flex-col gap-4",children:[t?.primary&&e($,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&e($,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),l("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(r).length>0&&l("div",{className:"mb-4 flex items-center justify-between",children:[l("div",{className:"flex items-center gap-2",children:[e(h,{html:r?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),r?.primary&&!r?.primary?.hide&&e($,{as:"a",href:`${r?.primary?.url}?ref=${r?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:r?.primary?.label})]}),e(_,{href:r?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:r?.guide?.label})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:r?.series?.map((f,v)=>l("div",{children:[f.label&&e(h,{html:f.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),l("div",{className:"grid grid-cols-3 gap-4",children:[!!r?.banner&&e(_,{asChild:!r?.banner?.href,href:r?.banner?.href,children:l("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[e(V,{source:r?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(se,{size:2,html:r?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(h,{html:r?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),f.products?.map((p,c)=>e(pe,{seriesLabel:r?.label,product:p,isCollection:r?.isCollection},`seriesProductItem-${c}`))]})]},`seriesItem-${v}`))})]})]})}),Fe=({multicolMetadata:t})=>{const a=F(null);return e("div",{ref:a,children:e(ee,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((n,d)=>e("div",{className:"w-1/4",children:e(be,{item:n})},`multicolItem-${n?.label}-${d}`))})})})},_e=({supportsMetadata:t,currentNavItemRef:a})=>{const n=F(null),[d,s]=M(null),[b,u]=M(0);H(()=>{if(n?.current){const m=n?.current?.getBoundingClientRect();u(m.height)}},[n]);const i=Me(()=>{if(a){const m=a.getBoundingClientRect();s(m)}},500);return H(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[i]),H(()=>{if(a){const m=a.getBoundingClientRect();s(m)}},[a]),e("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${d?.right}px)`,height:b},children:e("div",{ref:n,className:"p-4",children:t?.map(m=>e("div",{className:"py-2",children:e(_,{href:m.url,className:"text-sm font-bold leading-[1.4] no-underline",children:m.label})},m.id))})})},pe=({product:t,isCollection:a,position:n,seriesLabel:d})=>{const{buildProps:s,onSeriesProductClick:b}=O();let u=a?t:s?.products?.find(r=>r.handle===t.handle);const i=u?.variants?.find(r=>r.sku===t.sku)||u?.variants?.[0],m=L(()=>`/products/${u?.handle}?variant=${De(i?.id)}`,[u?.handle,i?.id]),w=L(()=>u?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2),[u?.tags]);return i?.availableForSale?l("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",children:[e("div",{className:"shrink-0",children:e(V,{source:`${i?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),l("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(w)&&w?.map(r=>e(h,{as:"p",html:r,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),e(_,{href:m,onClick:r=>{r.preventDefault(),window.open(m),b?.(u,n||0,d)},className:"no-underline hover:text-current",children:e(h,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:u?.title||t?.name})}),t?.desc&&e(h,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]}):null},be=({item:t,allPicture:a})=>l(q,{children:[t?.columns&&l(q,{children:[e(h,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(n=>l("div",{className:"py-2 flex items-center gap-1",children:[e(_,{href:`${n.url}?ref=navMenu`,asChild:!n.url,className:"text-sm font-bold leading-[1.4] no-underline",children:n.label}),n?.badge&&e(h,{as:"p",html:n?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},n.label))})]}),t?.imageUrl&&e("div",{className:N("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":a}),children:l(_,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(V,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),l("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(h,{html:t.title,className:N("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(h,{html:t.subtitle,className:N("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e($,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:N("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Oe=Z(({data:t,className:a,onPrimaryNavClick:n},d)=>{const s=L(()=>ue(t?.categories?.filter(S=>S?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:u,subSubCategory:i}=O(),[m,w]=M(!1),[r,k]=M(0),[x,f]=M(null),v=F(null);H(()=>{if(v?.current&&m){const S=v?.current?.getBoundingClientRect();k(window?.innerHeight-(S?.bottom||0))}},[m]),oe(()=>{re.fromTo(v.current,{height:0},{height:r,duration:.3})},[r]),H(()=>{document.documentElement.style.overflow=m?"hidden":"auto"},[m]);const p=L(()=>x?.components?.[0]?.blockType,[x]),c=ce(Ue,{categoriesItem:x}),o=ie(We,x),y=de(Ge,x),z=L(()=>{switch(p){case I.Sidebar:return e(o,{});case I.Supports:return e(c,{});case I.Multicol:return e(y,{});default:return null}},[p,x,c]),C=G(()=>{w(!1),k(0),u&&u(A.Primary)},[w,k,u]),P=L(()=>t?.headerBar?.actions?.filter(S=>S?.mobileShow&&S?.blockType!==W.Profile),[t]),D=L(()=>t?.headerBar?.actions?.find(S=>S?.mobileShow&&S?.blockType===W.Profile)||{},[t]),U=L(()=>{switch(b){case A.Primary:return e(Je,{actions:P,menuOpen:m,onMenuOpenClose:()=>{w(!1),k(0)},onMenuOpenClick:()=>w(!0)});case A.Secondary:return e(he,{title:x?.text,onMenuOpenClose:C,onMenuBackClick:()=>u?.(A.Primary)});case A.Third:return e(he,{title:i?.label,onMenuOpenClose:C,onMenuBackClick:()=>u?.(A.Secondary)});default:return null}},[m,b,u,x,P,i,C]),R=G((S,Q)=>{const B=Array.isArray(s)?Array.isArray(s[S])?s[S][Q]:{}:{};f(B),B?.components?.[0]?.blockType===I.Links?B?.components?.[0]?.url&&window.open(B?.components?.[0]?.url):u?.(A.Secondary)},[s,u]);return l(ee,{className:N("relative h-[52px]",a),children:[U,m&&e("div",{ref:v,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:r},children:b===A.Primary?e(Ie,{categories:s,onPrimaryMenuClick:R,onPrimaryNavClick:n,profileAction:D}):z})]})}),Ie=({categories:t,onPrimaryMenuClick:a,profileAction:n,onPrimaryNavClick:d})=>{const{onSidebarNavClick:s}=O();return l("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((b,u)=>l("div",{className:"",children:[b?.map((i,m)=>e(Y,{label:i.text,onClick:()=>{const r=(t?.flat()||[])?.findIndex(k=>k?.id===t[u][m]?.id);a(u,m),d?.(i,r)},icon:i.components?.[0]?.icon},i.id)),e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]",{hidden:u===t.length-1})})]},`groupCategory-${u}`))}),e(Ke,{profileAction:n})]})},We=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:n,setCurrentMenu:d,subSubCategory:s,setSubSubCategory:b,setCurrentSeriesMetadata:u,currentSeriesMetadata:i,buildProps:m,onSidebarNavClick:w}=O(),[r,k]=M([]),[x,f]=M([]);H(()=>{t?.subcategories?.length&&k(t?.subcategories?.map((o,y)=>({index:y,open:!1})))},[t]),H(()=>{s?.subSubCategories?.length&&f(s?.subSubCategories?.map((o,y)=>({index:y,open:y===0})))},[s]);const v=G((o,y)=>{d&&d(A.Third),b?.(o);const z=a?.find(C=>y!==void 0?o?.subSubCategories?.[y]?.label?.toLowerCase()===C.label?.toLowerCase():o?.label?.toLowerCase()===C.label?.toLowerCase())||{};if(o?.collections){const C=m?.categories?.[o?.collections]||{};u?.({label:z?.label,isCollection:!0,banner:z?.banner,primary:z?.primary,series:[{products:C?.products}]})}else u?.(z)},[a,t,d,b,u]),p=L(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return L(()=>{switch(n){case A.Secondary:return l("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[e("div",{children:t?.subcategories?.map((o,y)=>e("div",{children:e(Y,{label:o?.label,active:r.find(z=>z.index===y)?.open,onClick:()=>{v(o),w?.(o,y)}})},`${o.label}-${y}`))}),l("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e($,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e($,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case A.Third:return l("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[s?.subSubCategories?s?.subSubCategories?.map((o,y)=>{const z=a?.find(P=>P.label.toLowerCase()===o?.label?.toLowerCase())||{};let C={};if(o?.collections){const P=m?.categories?.[o?.collections]||{};C={label:z?.label,isCollection:!0,banner:z?.banner,primary:z?.primary,series:[{products:P?.products}]}}else C=z;return l("div",{children:[Reflect.ownKeys(o).length>0&&e(fe,{matchSeriesMetadata:C,onSubSubCategoryItemClick:()=>{w?.(o,y),f(P=>P.map((D,U)=>({...D,open:U===y})))},expanded:!!x?.find(P=>P.index===y)?.open}),x?.find(P=>P.index===y)?.open&&l(q,{children:[e(ve,{matchSeriesMetadata:C}),C?.primary&&e("div",{className:"text-center my-4",children:e($,{as:"a",href:C?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:C?.primary?.label})})]})]},`${o.label}-${y}`)}):l(q,{children:[Reflect.ownKeys(i).length>0&&e(fe,{matchSeriesMetadata:i}),e(ve,{matchSeriesMetadata:i}),i?.primary&&e("div",{className:"text-center my-4 ",children:e($,{as:"a",href:`${i?.primary?.url}?ref=${i?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:i?.primary?.label})})]}),p&&e(_,{href:p?.url,children:e("div",{className:"mt-4",children:e(h,{html:p?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[n,t,d,a,r,x,b,s,u,i])},fe=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:n})=>l("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:a,children:[t?.label&&e(h,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(te,{className:N("size-5",{"rotate-180":n})})]}),ve=({matchSeriesMetadata:t})=>e("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((a,n)=>l("div",{children:[a.label&&e(h,{html:a.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),l("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&e(_,{asChild:!t?.banner?.href,href:t?.banner?.href,children:l("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[e(V,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(se,{size:2,html:t?.banner?.title||"Buy in Guide",className:N("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(h,{html:t?.banner?.desc||"20.000mAh",className:N("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((d,s)=>e(pe,{position:s,product:d,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${n}-${s}`))]})]},`seriesItem-${n}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Y,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!t?.some(n=>!!n.columns),[t]);return e("div",{className:N("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":a}),children:t?.map((n,d)=>e("div",{children:e(be,{item:n,allPicture:a})},`multicolItem-${n?.label}-${d}`))})},Ke=({profileAction:t})=>{const[a,n]=M(!1),{profile:d,event:s}=O();return l("div",{className:N("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[l("div",{className:"flex items-center justify-between",onClick:()=>n(!a),children:[l("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Ee,{})}),e(h,{html:d?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!d?.email&&e(te,{className:N("size-5 laptop:size-4",{"rotate-180":a})})]}),d?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(b=>e(Y,{label:b?.title,href:b?.url},b.id))}),a&&!d?.email&&l("div",{className:"mt-4",children:[e(h,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(b=>l("div",{className:"flex items-center gap-[6px]",children:[e(V,{source:b.benefitIcon?.url,className:"size-4",alt:b.benefit,width:16,height:16}),e(h,{html:b.benefit,className:"text-sm font-bold leading-[1.4]"})]},b.id))})]}),!d?.email&&l("div",{className:"mt-4 flex items-center gap-3",children:[e($,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>s?.join?.(),children:e(h,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e($,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>s?.login?.(),children:e(h,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Je=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:n,actions:d})=>l("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ge,{}),l("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(ye,{actions:d}),t?e(me,{className:"size-5",onClick:()=>a()}):e(ze,{className:"size-5",onClick:()=>n()})]})]}),ge=()=>{const{payloadData:t,isMobile:a}=O();return e("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},ye=Z(({actions:t,activeStatus:a=!1},n)=>{const{event:d}=O(),[s,b]=M(null),u=G((i,m)=>{switch(b(m),i?.blockType){case W.Search:d?.search?.();break;case W.Cart:d?.cart?.();break;case W.Profile:d?.profile?.();break;case W.Livestream:d?.livestream?.();break;default:return()=>{}}},[d]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,m)=>e("div",{ref:i.blockType===W.Profile?n:null,onClick:()=>u(i,m),children:e(h,{html:i.icon,className:N("cursor-pointer size-5",{"text-brand-0":a&&s===m})})},i.id))})}),he=({title:t,onMenuOpenClose:a,onMenuBackClick:n})=>l("div",{className:"flex h-full items-center gap-3",children:[e(Be,{className:"size-5",onClick:()=>n()}),e(h,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(me,{className:"size-5",onClick:()=>a()})]}),Y=({label:t,href:a,onClick:n,active:d,icon:s,className:b})=>e("div",{className:N("flex cursor-pointer items-center justify-between py-4",b),onClick:n,children:l(_,{href:a,asChild:!a,className:"flex w-full items-center justify-between no-underline",children:[l("div",{className:"flex items-center gap-4",children:[e(h,{html:t,className:N("text-sm font-bold leading-[1.4]",{underline:s})}),s&&e(h,{html:s})]}),e(He,{className:N("size-5 laptop:size-4",{"rotate-90":d})})]})});var ut=Se(Re);export{ut as default};
|
|
1
|
+
"use client";import{Fragment as X,jsx as e,jsxs as n}from"react/jsx-runtime";import we,{forwardRef as ee,useCallback as K,useEffect as H,useImperativeHandle as Ce,useMemo as D,useRef as F,useState as L}from"react";import{Picture as Q,Text as y,Button as T,Container as te,Link as O,Heading as ce}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as N,atobID as De}from"../../helpers/utils.js";import Le,{useNavContext as I}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as W,HeaderNavigationActionBlockType as _}from"./types.js";import"react-responsive";import{debounce as Me}from"es-toolkit";import Pe from"jump.js";import{useGSAP as se}from"@gsap/react";import{gsap as ie}from"gsap";import{WithSidebar as de,WithSupports as ue,WithMulticol as me,WithGroupCategory as pe}from"./withCategory.js";import{Menu as ze,Close as be,User as Ee,RightArrow as He,LeftArrow as Be,DownArrow as ae,Polygon as Te}from"./icons/index.js";import $e from"../NavigationSearch/index.js";const Re=ee((t,a)=>{const{data:{headerNavigation:l}={},buildProps:c,event:r,profile:b,theme:d="light",isTop:u=!1,searchResult:i,onSearch:k,isSearching:s,keywords:w,onPrimaryNavClick:x,onSeriesProductClick:f,onSidebarNavClick:v,headerId:g,cartCount:m}=t,o=F(null),[p,C]=L(!1),[S,z]=L(!1),[M,U]=L(!1),[J,P]=L(!1),R=F(null),A=()=>{const G=document?.querySelector("body")?.offsetWidth||0;P(G<=1440)};H(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),Ce(a,()=>R.current),H(()=>{R.current&&u&&Pe(R.current,{duration:0,offset:R.current?.getBoundingClientRect()?.bottom||0})},[u]),H(()=>{r&&(r.search=()=>C(!0))},[r]),se(()=>{o?.current&&p&&ie.fromTo(o.current,{height:0},{height:"auto",duration:.3})},[p]),H(()=>{document.documentElement.style.overflow=p?"hidden":"auto"},[p]);const ne=D(()=>l?.headerBar?.actions?.find(G=>G?.blockType===_.Search)?.searchBar?.[0]||{},[l]);return e(Le,{buildProps:c,profile:b,isMobile:J,event:r,payloadData:l,onSidebarNavClick:v,onSeriesProductClick:f,cartCount:m,children:e("header",{id:g||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100]",ref:R,children:n("div",{className:N("hover:text-black hover:bg-white",d==="light"?"text-black":"text-white",{}),onClick:()=>U(!0),children:[e(Ae,{data:l,className:"hidden desktop:block",theme:d,onNavItemClick:()=>U(!0),onPrimaryNavClick:x}),e(Oe,{data:l,className:"block desktop:hidden",onPrimaryNavClick:x}),p&&n("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.top}px)`},children:[e("div",{ref:o,className:N("overflow-y-auto",{}),children:e($e,{data:ne,keywords:w,isSearching:s,searchResult:i,onSearch:G=>{k?.(G)},onClose:()=>{k?.(),C(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>C(!1)})]})]})})})}),Ae=ee((t,a)=>{const{data:l,onNavItemClick:c,className:r,theme:b,onPrimaryNavClick:d}=t,{event:u,profile:i}=I(),[k,s]=L(!1),w=D(()=>pe(l?.categories?.filter(h=>h?.pcShow)),[l]),[x,f]=L(null),[v,g]=L([]),m=F(null),[o,p]=L(!1),C=F(null),S=F(null),z=F(w.map(h=>Array(h?.length||0).fill(null)));H(()=>{w?.length&&g(w?.map((h,E)=>h?.map((B,j)=>({groupIndex:E,index:j,open:!1}))))},[w]);const M=D(()=>{let h=null;for(const E of v){for(const B of E)if(B.open){h=B;break}if(h)break}return h},[v]);H(()=>{document.documentElement.style.overflow=M?.open||o?"hidden":"auto"},[M?.open,o]);const U=(h,E,B)=>{if(p(!1),x?.components?.[0]?.blockType===W.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const j=w?.flat()||[],q=j?.findIndex(re=>re?.id===w[E][B]?.id);h.stopPropagation(),c?.(),d?.(j[q],q),f(w[E][B]),g(re=>re.map(ke=>ke.map(Y=>Y.groupIndex===E&&Y.index===B?{...Y,open:!Y.open}:{...Y,open:!1})))}},J=()=>{g(h=>h.map(E=>E.map(B=>({...B,open:!1}))))},P=D(()=>{if(x)return x?.components?.[0]?.blockType},[x]),R=de(je,x),A=me(Fe,x),ne=ue(_e,{categoriesItem:x,currentNavItemRef:z.current?.[M?.groupIndex||0]?.[M?.index||0]}),G=D(()=>{switch(P){case W.Sidebar:return e(R,{});case W.Supports:return e(ne,{});case W.Multicol:return e(A,{});default:return null}},[P,x]),le=D(()=>l?.headerBar?.actions?.filter(h=>h?.pcShow),[l]),V=D(()=>le?.find(h=>h?.blockType===_.Profile),[le]),oe=K(()=>{p(h=>!h)},[]);return H(()=>{if(m?.current){const h=m.current;return h.addEventListener("click",oe),()=>{h.removeEventListener("click",oe)}}},[oe]),se(()=>{M?.open&&ie.fromTo(S?.current,{height:0},{height:"auto"})},[M?.open]),n(te,{className:N("relative h-[96px]",r),children:[n("div",{ref:C,onClick:J,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(ye,{}),e(xe,{ref:m,actions:le,activeStatus:o})]}),e("div",{className:"flex justify-between",children:w?.map((h,E)=>e("div",{className:"flex gap-3",children:h?.map((B,j)=>e("div",{ref:q=>{z.current[E][j]=q},className:"group cursor-pointer",children:n("div",{className:"relative",children:[n("div",{className:"flex items-center gap-1 pb-4",onClick:q=>U(q,E,j),children:[e(y,{html:B.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{className:N("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":M?.groupIndex===E&&M?.index===j,"opacity-100":k&&M?.groupIndex===E&&M?.index===j})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":M?.groupIndex===E&&M?.index===j},b==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},B.id))},`groupCategory-${E}`))})]}),n("div",{className:N("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(M?.open&&x)}),onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),style:{height:`calc(100dvh - ${C?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:S,className:N("relative z-50",{"overflow-hidden":P!==W.Supports}),children:G}),e("div",{className:"flex-1 bg-transparent",onClick:J})]}),o&&n("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${m?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:i?.email?n(X,{children:[e(y,{html:i?.nick_name||V?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:V?.profiles?.map(h=>e(Z,{className:"py-2",label:h?.title,href:h?.url},h.id))})]}):n(X,{children:[e(Te,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(y,{html:V?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:V?.benefits?.map(h=>n("div",{className:"flex items-center gap-[6px]",children:[e(Q,{source:h.benefitIcon?.url,className:"size-4",alt:h.benefit,width:16,height:16}),e(y,{html:h.benefit,className:"text-sm font-bold leading-[1.4]"})]},h.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(T,{variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:e(y,{html:V?.primaryButton||"Join Now",className:"font-bold"})}),e(T,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(y,{html:V?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})}),je=we.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:l,onSidebarNavClick:c}=I(),[r,b]=L([]),[d,u]=L(-1),i=F(null),k=K(()=>{const f=t?.subcategories;if(!f?.length)return;const v=f.findIndex(o=>!!o?.subSubCategories),g=f.findIndex(o=>!o?.subSubCategories),m=f.map((o,p)=>({index:p,open:v===p||g===p}));b(m)},[t]);H(()=>{k()},[k]);const s=D(()=>{const f=t?.subcategories?.[r?.find(g=>g.open)?.index||0],v=a?.find(g=>g?.label?.toLowerCase()===f?.label?.toLowerCase())||{};if(f?.collections){const g=l?.categories?.[f?.collections]||{};return{label:v?.label,isCollection:!0,banner:v?.banner,primary:v?.primary,series:[{products:g?.products}]}}else if(f?.subSubCategories){const g=f?.subSubCategories?.[d],m=a?.find(o=>o?.label?.toLowerCase()===g?.label?.toLowerCase())||{};if(g?.collections){const o=l?.categories?.[g?.collections]||{};return{label:m?.label,isCollection:!0,banner:m?.banner,primary:m?.primary,series:[{products:o?.products}]}}else return m}else return v},[t,r,d,a]),w=K((f,v)=>{if(v?.subSubCategories?.length>0?u(0):u(-1),v?.subSubCategories?.length>0)b(g=>g.map(m=>m.index===f?{...m,open:!0}:{...m,open:!1}));else{const m=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);b(o=>o.map(p=>({...p,open:p.index===f||p.index===m})))}},[t,k]),x=(f,v)=>{b(g=>g.map(m=>m.index===f?{...m,open:!0}:{...m,open:!1})),u(v)};return n(te,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[n("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:i,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((f,v)=>{const g=Array.isArray(f?.subSubCategories)&&f?.subSubCategories?.length>0;return n("div",{children:[n("div",{className:N("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!g&&r?.find(m=>m.index===v)?.open}),onClick:()=>{w(v,f),c?.(f,v)},children:[e(y,{html:f.label,className:"p-4 text-sm font-bold leading-[1.4]"}),g&&e(ae,{className:N("size-4",{"rotate-180":r?.find(m=>m.index===v)?.open})})]}),r?.find(m=>m.index===v)?.open&&e("div",{className:"flex flex-col",children:f.subSubCategories?.map((m,o)=>e(y,{html:m.label,onClick:()=>{x(v,o),c?.(m,o)},className:N("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":d===o})},`subSubItem-${v}-${o}`))})]},`subcategoryItem-${v}`)})}),t&&e("div",{className:"flex",children:n("div",{className:"flex flex-col gap-4",children:[t?.primary&&e(T,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&e(T,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),n("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(s).length>0&&n("div",{className:"mb-4 flex items-center justify-between",children:[n("div",{className:"flex items-center gap-2",children:[e(y,{html:s?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),s?.primary&&!s?.primary?.hide&&e(T,{as:"a",href:`${s?.primary?.url}?ref=${s?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:s?.primary?.label})]}),e(O,{href:s?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:s?.guide?.label})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.series?.map((f,v)=>n("div",{children:[f.label&&e(y,{html:f.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),n("div",{className:"grid grid-cols-3 gap-4",children:[!!s?.banner&&e(O,{asChild:!s?.banner?.href,href:s?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[e(Q,{source:s?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(ce,{size:2,html:s?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(y,{html:s?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),f.products?.map((g,m)=>e(fe,{seriesLabel:s?.label,product:g,isCollection:s?.isCollection},`seriesProductItem-${m}`))]})]},`seriesItem-${v}`))})]})]})}),Fe=({multicolMetadata:t})=>{const a=F(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((l,c)=>e("div",{className:"w-1/4",children:e(ve,{item:l})},`multicolItem-${l?.label}-${c}`))})})})},_e=({supportsMetadata:t,currentNavItemRef:a})=>{const l=F(null),[c,r]=L(null),[b,d]=L(0);H(()=>{if(l?.current){const i=l?.current?.getBoundingClientRect();d(i.height)}},[l]);const u=Me(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},500);return H(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),H(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},[a]),e("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:b},children:e("div",{ref:l,className:"p-4",children:t?.map(i=>e("div",{className:"py-2",children:e(O,{href:i.url,className:"text-sm font-bold leading-[1.4] no-underline",children:i.label})},i.id))})})},fe=({product:t,isCollection:a,position:l,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:b}=I();let d=a?t:r?.products?.find(s=>s.handle===t.handle);const u=d?.variants?.find(s=>s.sku===t.sku)||d?.variants?.[0],i=D(()=>`/products/${d?.handle}?variant=${De(u?.id)}`,[d?.handle,u?.id]),k=D(()=>d?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2),[d?.tags]);return u?.availableForSale?n("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",children:[e("div",{className:"shrink-0",children:e(Q,{source:`${u?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),n("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(k)&&k?.map(s=>e(y,{as:"p",html:s,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),e(O,{href:i,onClick:s=>{s.preventDefault(),window.open(i),b?.(d,l||0,c)},className:"no-underline hover:text-current",children:e(y,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:d?.title||t?.name})}),t?.desc&&e(y,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]}):null},ve=({item:t,allPicture:a})=>n(X,{children:[t?.columns&&n(X,{children:[e(y,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(l=>n("div",{className:"py-2 flex items-center gap-1",children:[e(O,{href:`${l.url}?ref=navMenu`,asChild:!l.url,className:"text-sm font-bold leading-[1.4] no-underline",children:l.label}),l?.badge&&e(y,{as:"p",html:l?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},l.label))})]}),t?.imageUrl&&e("div",{className:N("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":a}),children:n(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(Q,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),n("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(y,{html:t.title,className:N("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(y,{html:t.subtitle,className:N("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e(T,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:N("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Oe=ee(({data:t,className:a,onPrimaryNavClick:l},c)=>{const r=D(()=>pe(t?.categories?.filter(P=>P?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:d,subSubCategory:u}=I(),[i,k]=L(!1),[s,w]=L(0),[x,f]=L(null),v=F(null);H(()=>{if(v?.current&&i){const P=v?.current?.getBoundingClientRect();w(window?.innerHeight-(P?.bottom||0))}},[i]),se(()=>{ie.fromTo(v.current,{height:0},{height:s,duration:.3})},[s]),H(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const g=D(()=>x?.components?.[0]?.blockType,[x]),m=ue(Ue,{categoriesItem:x}),o=de(We,x),p=me(Ge,x),C=D(()=>{switch(g){case W.Sidebar:return e(o,{});case W.Supports:return e(m,{});case W.Multicol:return e(p,{});default:return null}},[g,x,m]),S=K(()=>{k(!1),w(0),d&&d($.Primary)},[k,w,d]),z=D(()=>t?.headerBar?.actions?.filter(P=>P?.mobileShow&&P?.blockType!==_.Profile),[t]),M=D(()=>t?.headerBar?.actions?.find(P=>P?.mobileShow&&P?.blockType===_.Profile)||{},[t]),U=D(()=>{switch(b){case $.Primary:return e(Je,{actions:z,menuOpen:i,onMenuOpenClose:()=>{k(!1),w(0)},onMenuOpenClick:()=>k(!0)});case $.Secondary:return e(Ne,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Primary)});case $.Third:return e(Ne,{title:u?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Secondary)});default:return null}},[i,b,d,x,z,u,S]),J=K((P,R)=>{const A=Array.isArray(r)?Array.isArray(r[P])?r[P][R]:{}:{};f(A),A?.components?.[0]?.blockType===W.Links?A?.components?.[0]?.url&&window.open(A?.components?.[0]?.url):d?.($.Secondary)},[r,d]);return n(te,{className:N("relative h-[52px]",a),children:[U,i&&e("div",{ref:v,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:s},children:b===$.Primary?e(Ie,{categories:r,onPrimaryMenuClick:J,onPrimaryNavClick:l,profileAction:M}):C})]})}),Ie=({categories:t,onPrimaryMenuClick:a,profileAction:l,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=I();return n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((b,d)=>n("div",{className:"",children:[b?.map((u,i)=>e(Z,{label:u.text,onClick:()=>{const s=(t?.flat()||[])?.findIndex(w=>w?.id===t[d][i]?.id);a(d,i),c?.(u,s)},icon:u.components?.[0]?.icon},u.id)),e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]",{hidden:d===t.length-1})})]},`groupCategory-${d}`))}),e(Ke,{profileAction:l})]})},We=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:l,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:b,setCurrentSeriesMetadata:d,currentSeriesMetadata:u,buildProps:i,onSidebarNavClick:k}=I(),[s,w]=L([]),[x,f]=L([]);H(()=>{t?.subcategories?.length&&w(t?.subcategories?.map((o,p)=>({index:p,open:!1})))},[t]),H(()=>{r?.subSubCategories?.length&&f(r?.subSubCategories?.map((o,p)=>({index:p,open:p===0})))},[r]);const v=K((o,p)=>{c&&c($.Third),b?.(o);const C=a?.find(S=>p!==void 0?o?.subSubCategories?.[p]?.label?.toLowerCase()===S.label?.toLowerCase():o?.label?.toLowerCase()===S.label?.toLowerCase())||{};if(o?.collections){const S=i?.categories?.[o?.collections]||{};d?.({label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:S?.products}]})}else d?.(C)},[a,t,c,b,d]),g=D(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return D(()=>{switch(l){case $.Secondary:return n("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[e("div",{children:t?.subcategories?.map((o,p)=>e("div",{children:e(Z,{label:o?.label,active:s.find(C=>C.index===p)?.open,onClick:()=>{v(o),k?.(o,p)}})},`${o.label}-${p}`))}),n("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e(T,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e(T,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case $.Third:return n("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((o,p)=>{const C=a?.find(z=>z.label.toLowerCase()===o?.label?.toLowerCase())||{};let S={};if(o?.collections){const z=i?.categories?.[o?.collections]||{};S={label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:z?.products}]}}else S=C;return n("div",{children:[Reflect.ownKeys(o).length>0&&e(ge,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>{k?.(o,p),f(z=>z.map((M,U)=>({...M,open:U===p})))},expanded:!!x?.find(z=>z.index===p)?.open}),x?.find(z=>z.index===p)?.open&&n(X,{children:[e(he,{matchSeriesMetadata:S}),S?.primary&&e("div",{className:"text-center my-4",children:e(T,{as:"a",href:S?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:S?.primary?.label})})]})]},`${o.label}-${p}`)}):n(X,{children:[Reflect.ownKeys(u).length>0&&e(ge,{matchSeriesMetadata:u}),e(he,{matchSeriesMetadata:u}),u?.primary&&e("div",{className:"text-center my-4 ",children:e(T,{as:"a",href:`${u?.primary?.url}?ref=${u?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:u?.primary?.label})})]}),g&&e(O,{href:g?.url,children:e("div",{className:"mt-4",children:e(y,{html:g?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[l,t,c,a,s,x,b,r,d,u])},ge=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:l})=>n("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:a,children:[t?.label&&e(y,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(ae,{className:N("size-5",{"rotate-180":l})})]}),he=({matchSeriesMetadata:t})=>e("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((a,l)=>n("div",{children:[a.label&&e(y,{html:a.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),n("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&e(O,{asChild:!t?.banner?.href,href:t?.banner?.href,children:n("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[e(Q,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),n("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[e(ce,{size:2,html:t?.banner?.title||"Buy in Guide",className:N("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(y,{html:t?.banner?.desc||"20.000mAh",className:N("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((c,r)=>e(fe,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l}-${r}`))]})]},`seriesItem-${l}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=D(()=>!t?.some(l=>!!l.columns),[t]);return e("div",{className:N("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":a}),children:t?.map((l,c)=>e("div",{children:e(ve,{item:l,allPicture:a})},`multicolItem-${l?.label}-${c}`))})},Ke=({profileAction:t})=>{const[a,l]=L(!1),{profile:c,event:r}=I();return n("div",{className:N("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[n("div",{className:"flex items-center justify-between",onClick:()=>l(!a),children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Ee,{})}),e(y,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(ae,{className:N("size-5 laptop:size-4",{"rotate-180":a})})]}),c?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(b=>e(Z,{label:b?.title,href:b?.url},b.id))}),a&&!c?.email&&n("div",{className:"mt-4",children:[e(y,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(b=>n("div",{className:"flex items-center gap-[6px]",children:[e(Q,{source:b.benefitIcon?.url,className:"size-4",alt:b.benefit,width:16,height:16}),e(y,{html:b.benefit,className:"text-sm font-bold leading-[1.4]"})]},b.id))})]}),!c?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(T,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:e(y,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(T,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:e(y,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Je=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:l,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ye,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(xe,{actions:c}),t?e(be,{className:"size-5",onClick:()=>a()}):e(ze,{className:"size-5",onClick:()=>l()})]})]}),ye=()=>{const{payloadData:t,isMobile:a}=I();return e("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},xe=ee(({actions:t,activeStatus:a=!1},l)=>{const{event:c,cartCount:r}=I(),[b,d]=L(null),u=K((i,k)=>{switch(d(k),i?.blockType){case _.Search:c?.search?.();break;case _.Cart:c?.cart?.();break;case _.Profile:c?.profile?.();break;case _.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,k)=>n("div",{className:"relative",ref:i.blockType===_.Profile?l:null,onClick:()=>u(i,k),children:[e(y,{html:i.icon,className:N("cursor-pointer size-5",{"text-brand-0":a&&b===k})}),i.blockType===_.Cart&&r>0&&e("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:e(y,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},i.id))})}),Ne=({title:t,onMenuOpenClose:a,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e(Be,{className:"size-5",onClick:()=>l()}),e(y,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(be,{className:"size-5",onClick:()=>a()})]}),Z=({label:t,href:a,onClick:l,active:c,icon:r,className:b})=>e("div",{className:N("flex cursor-pointer items-center justify-between py-4",b),onClick:l,children:n(O,{href:a,asChild:!a,className:"flex w-full items-center justify-between no-underline",children:[n("div",{className:"flex items-center gap-4",children:[e(y,{html:t,className:N("text-sm font-bold leading-[1.4]",{underline:r})}),r&&e(y,{html:r})]}),e(He,{className:N("size-5 laptop:size-4",{"rotate-90":c})})]})});var ut=Se(Re);export{ut as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|