@anker-in/headless-ui 1.1.66 → 1.1.67
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/HeaderNavigation/MobileResourceSidebarMenu.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MulticolDropdown.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/ResourceItem.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/ResourceSidebarDropdown.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js.map +3 -3
- 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 +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +1 -1
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +3 -3
- package/dist/cjs/components/brand-strip.js +1 -1
- package/dist/cjs/components/brand-strip.js.map +2 -2
- 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/HeaderNavigation/MobileResourceSidebarMenu.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileResourceSidebarMenu.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MulticolDropdown.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/ResourceItem.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/ResourceSidebarDropdown.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js.map +3 -3
- 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 +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +1 -1
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +3 -3
- package/dist/esm/components/brand-strip.js +1 -1
- package/dist/esm/components/brand-strip.js.map +2 -2
- package/dist/tokens/soundcore.css +16 -0
- package/package.json +1 -2
- package/style.css +3 -0
- package/tailwind.config.js +2 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var S=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var F=(t,o)=>{for(var l in o)S(t,l,{get:o[l],enumerable:!0})},G=(t,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of R(o))!j.call(t,c)&&c!==l&&S(t,c,{get:()=>o[c],enumerable:!(i=O(o,c))||i.enumerable});return t};var K=t=>G(S({},"__esModule",{value:!0}),t);var J={};F(J,{default:()=>q});module.exports=K(J);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),z=require("../HeaderNavigation/icons/index.js"),p=require("react"),d=require("../../helpers/utils.js"),_=require("../AiuiProvider/index.js"),D=require("../ShelfDisplay/shelfDisplay.js"),v=require("./types.js");const E=({product:t,onSecondaryButton:o,onPrimaryButton:l,searchValue:i,variantData:c,shopNowLoadingProductId:y})=>{const r=(0,p.useMemo)(()=>c||t?.variants?.[0],[t,c]),{locale:x="us",copyWriting:m}=(0,_.useAiuiContext)(),k=y===t?.id,b=(0,p.useMemo)(()=>`${x==="us"?"":"/"+x}/products/${t?.handle}?variant=${(0,d.atobID)(r?.id)}?ref=search_result_${i?.toLowerCase()}`,[t?.handle,r?.id,i,x]),n=r?.coupons?.[0],{price:T,basePrice:f}=(0,D.formatVariantPrice)({locale:x,amount:n?n.variant_price4wscode:r?.price,baseAmount:n?r?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),P=(0,p.useMemo)(()=>t?.tags?.filter?.(g=>g?.startsWith?.("CLtag"))?.map?.(g=>g?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"&&t?.advertisingLink?(0,e.jsxs)(s.Link,{href:t?.advertisingLink,className:"h-full",children:[(0,e.jsx)(s.Picture,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Text,{html:t?.advertisingTitle,className:(0,d.cn)("desktop:text-[18px] text-sm font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&(0,e.jsx)(s.Heading,{size:3,html:t?.advertisingSubtitle,className:(0,d.cn)("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):(0,e.jsxs)("a",{href:b,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(s.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${r?.image?.url||t?.images?.[0]?.url}}`,alt:t?.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:P?.map((g,N)=>(0,e.jsx)(s.Text,{as:"p",html:g,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"},N))}),(0,e.jsx)(s.Text,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,d.highlightSearchWord)(t?.title||"",i||"")}),(0,e.jsx)(s.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,d.highlightSearchWord)(t?.description,i||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:r?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:r?.availableForSale&&T||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:r?.availableForSale&&f||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(s.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,onClick:g=>{g.preventDefault(),g.stopPropagation(),o?.()},children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(s.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!r?.availableForSale,loading:k,onClick:g=>{g.preventDefault(),g.stopPropagation(),l?.()},children:m?.shopNowText})]})]})]})]})})},W=({blog:t,searchValue:o})=>{const{copyWriting:l,locale:i}=(0,_.useAiuiContext)(),c=(0,p.useMemo)(()=>`${i==="us"?"":"/"+i}/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,[t,i]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:(0,e.jsx)(s.Picture,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(t?.title,o)}),(0,e.jsx)(s.Text,{html:(0,d.highlightSearchWord)(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(s.Button,{as:"a",href:c,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},U=({searchValue:t,page:o})=>{const{copyWriting:l,locale:i="us"}=(0,_.useAiuiContext)(),c=(0,p.useMemo)(()=>`${i==="us"?"":`/${i}`}/${o?.handle}`,[o,i]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,t)}),(0,e.jsx)(s.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(s.Button,{as:"a",href:c,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},w=({url:t,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(s.Picture,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(s.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),C=({products:t,title:o,buildProps:l,onSecondaryButton:i,onPrimaryButton:c})=>{const{products:y}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((r,x)=>{const m=y?.find(b=>b.handle===r.handle);if(!m)return null;const k=m?.variants?.find(b=>b.sku===r.sku);return(0,e.jsx)(E,{product:m,variantData:k,onSecondaryButton:()=>i?.(),onPrimaryButton:()=>c?.()},r.sku+x)})})]})},H=({searchResult:t,searchValue:o,data:l,onSecondaryButton:i,onPrimaryButton:c,onChangeSort:y,loading:r,shopNowLoadingProductId:x,searchResultCount:m,onChangeTab:k,buildProps:b})=>{const[n,T]=(0,p.useState)(l?.tabs?.[0]),f=(0,p.useRef)(!1),[P,g]=(0,p.useState)(!1),[N,L]=(0,p.useState)({[v.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[v.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.BLOGS)?.sortKeys?.[0],[v.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PAGES)?.sortKeys?.[0]}),h=(0,p.useMemo)(()=>t?.products||[],[t]),I=(0,p.useMemo)(()=>t?.blogs||[],[t]),B=(0,p.useMemo)(()=>t?.pages||[],[t]),$=(0,p.useMemo)(()=>Object.values(m||{}).reduce((a,u)=>a+u,0),[m]),M=(0,p.useMemo)(()=>{const a={advertisingBgImg:`${n?.advertisingBgImg?.url}, ${n?.advertisingMobBgImg?.url} 768`,advertisingTitle:n?.advertisingTitle,advertisingSubtitle:n?.advertisingSubtitle,advertisingLink:n?.advertisingLink,advertisingTheme:n?.advertisingTheme,type:"advertising"};return!f.current&&h?.length&&(h?.length>=8?(h?.splice(7,0,a),f.current=!0):(h?.push(a),f.current=!0)),h},[n,h]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",$?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(s.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(s.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(s.TabsTrigger,{onClick:()=>{T(a),f.current=!1;const u=a?.sortKeys?.[0];u&&(L(A=>({...A,[a?.tabType]:u})),y?.(a?.tabType,u)),k?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(s.DropdownMenu,{onOpenChange:g,children:[(0,e.jsx)(s.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[n?.sortLabel," ",N?.[n?.tabType]?.label," ",(0,e.jsx)(z.DownArrow,{className:(0,d.cn)("inline-block size-4",{"rotate-180":P})})]})}),(0,e.jsx)(s.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:n?.sortKeys?.map(a=>(0,e.jsx)(s.DropdownMenuItem,{className:(0,d.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"bg-[#EAEAEC]":N?.[n?.tabType]?.value===a.value}),onClick:()=>{f.current=!1,y?.(n?.tabType,a),L(u=>({...u,[n?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:M?.map((a,u)=>(0,e.jsx)(E,{searchValue:o,product:a,shopNowLoadingProductId:x,onSecondaryButton:()=>i?.(a),onPrimaryButton:()=>c?.(a)},(a.id||"")+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!h?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]}),(0,e.jsx)(s.TabsContent,{value:v.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[I?.map(a=>(0,e.jsx)(W,{blog:a,searchValue:o},a.id)),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!I?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:B?.map((a,u)=>(0,e.jsx)(U,{page:a,searchValue:o},(a.global_id||a.id)+u))}),r?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!B?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(C,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]})]})})]})};var q=H;
|
|
1
|
+
"use strict";var w=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var W=(t,o)=>{for(var l in o)w(t,l,{get:o[l],enumerable:!0})},F=(t,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of G(o))!K.call(t,d)&&d!==l&&w(t,d,{get:()=>o[d],enumerable:!(r=$(o,d))||r.enumerable});return t};var U=t=>F(w({},"__esModule",{value:!0}),t);var X={};W(X,{default:()=>Q});module.exports=U(X);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),D=require("../HeaderNavigation/icons/index.js"),p=require("react"),c=require("../../helpers/utils.js"),T=require("../AiuiProvider/index.js"),M=require("../ShelfDisplay/shelfDisplay.js"),v=require("./types.js"),N=require("../../helpers/utils.js"),A=require("../Listing/utils/textFormat.js");const E=({product:t,onSecondaryButton:o,onPrimaryButton:l,searchValue:r,variantData:d,shopNowLoadingProductId:f})=>{const i=(0,p.useMemo)(()=>d||t?.variants?.[0],[t,d]),{locale:x="us",copyWriting:m}=(0,T.useAiuiContext)(),k=f===t?.id,b=(0,p.useMemo)(()=>(0,N.getLocalizedPath)(`/products/${t?.handle}?variant=${(0,c.atobID)(i?.id)}?ref=search_result_${r?.toLowerCase()}`,x),[t?.handle,i?.id,r,x]),n=i?.coupons?.[0],{price:P,basePrice:h}=(0,M.formatVariantPrice)({locale:x,amount:n?n.variant_price4wscode:i?.price?.amount??i?.price,baseAmount:n?i?.price?.amount??i?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),S=(0,p.useMemo)(()=>t?.tags?.filter?.(g=>g?.startsWith?.("CLtag"))?.map?.(g=>g?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return(0,e.jsx)("div",{className:"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden",children:t?.type==="advertising"&&t?.advertisingLink?(0,e.jsxs)(s.Link,{href:(0,N.getLocalizedPath)(t?.advertisingLink,x),className:"h-full",children:[(0,e.jsx)(s.Picture,{source:`${t?.advertisingBgImg}`,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Text,{html:t?.advertisingTitle,className:(0,c.cn)("desktop:text-base text-sm font-bold leading-[1.2]",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})}),t?.advertisingSubtitle&&(0,e.jsx)(s.Heading,{size:3,html:t?.advertisingSubtitle,className:(0,c.cn)("laptop:line-clamp-3 mt-2 line-clamp-4 font-bold",{"text-white":t?.advertisingTheme==="light","text-info-primary":t?.advertisingTheme==="dark"})})]})]}):(0,e.jsxs)("a",{href:b,className:"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(s.Picture,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${i?.image?.url||t?.images?.[0]?.url}}`,alt:t?.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:S?.map((g,_)=>(0,e.jsx)(s.Text,{as:"p",html:g,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"},_))}),(0,e.jsx)(s.Text,{className:"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:(0,c.highlightSearchWord)(t?.title||"",r||"")}),(0,e.jsx)(s.Text,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:(0,c.highlightSearchWord)(t?.description,r||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:i?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:i?.availableForSale&&P||""}),(0,e.jsx)("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:i?.availableForSale&&h||""})]}):(0,e.jsx)("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,c.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(s.Button,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",onClick:g=>{g.preventDefault(),g.stopPropagation(),o?.()},children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(s.Button,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,loading:k,onClick:g=>{g.preventDefault(),g.stopPropagation(),l?.()},children:m?.shopNowText})]})]})]})]})})},H=({blog:t,searchValue:o})=>{const{copyWriting:l,locale:r="us"}=(0,T.useAiuiContext)(),d=(0,p.useMemo)(()=>(0,N.getLocalizedPath)(`/blogs/${t?.blog?.handle}/${t?.handle.replace("storefront-","")}`,r),[t,r]);return(0,e.jsx)("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden",children:(0,e.jsx)(s.Picture,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,c.highlightSearchWord)(t?.title,o)}),(0,e.jsx)(s.Text,{html:(0,c.highlightSearchWord)(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"desktop:mt-6 mt-4",children:(0,e.jsx)(s.Button,{as:"a",href:d,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},q=({searchValue:t,page:o})=>{const{copyWriting:l,locale:r="us"}=(0,T.useAiuiContext)(),d=(0,p.useMemo)(()=>(0,N.getLocalizedPath)(`/${o?.handle}`,r),[o,r]);return(0,e.jsxs)("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[(0,e.jsx)(s.Heading,{size:3,html:(0,c.highlightSearchWord)(o?.name,t)}),(0,e.jsx)(s.Text,{as:"p",html:(0,c.highlightSearchWord)(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(s.Button,{as:"a",href:d,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:l?.learnMoreText||"Learn More"})]})},C=({url:t,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center gap-4",children:[(0,e.jsx)(s.Picture,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),(0,e.jsx)(s.Text,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),L=({products:t,title:o,buildProps:l,onSecondaryButton:r,onPrimaryButton:d})=>{const{products:f}=l||{};return console.log(f,"buildProducts"),(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((i,x)=>{const m=f?.find(b=>b.handle===i.handle);if(!m)return null;const k=m?.variants?.find(b=>b.sku===i.sku);return(0,e.jsx)(E,{product:m,variantData:k,onSecondaryButton:()=>r?.(),onPrimaryButton:()=>d?.()},i.sku+x)})})]})},J=({searchResult:t,searchValue:o,data:l,onSecondaryButton:r,onPrimaryButton:d,onChangeSort:f,loading:i,shopNowLoadingProductId:x,searchResultCount:m,onChangeTab:k,buildProps:b})=>{const[n,P]=(0,p.useState)(l?.tabs?.[0]),h=(0,p.useRef)(!1),[S,g]=(0,p.useState)(!1),[_,I]=(0,p.useState)({[v.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[v.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.BLOGS)?.sortKeys?.[0],[v.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===v.SearchPageTabType.PAGES)?.sortKeys?.[0]}),y=(0,p.useMemo)(()=>t?.products||[],[t]),B=(0,p.useMemo)(()=>t?.blogs||[],[t]),z=(0,p.useMemo)(()=>t?.pages||[],[t]),O=(0,p.useMemo)(()=>Object.values(m||{}).reduce((a,u)=>a+u,0),[m]),R=(0,p.useMemo)(()=>{const a={advertisingBgImg:`${n?.advertisingBgImg?.url}, ${n?.advertisingMobBgImg?.url} 768`,advertisingTitle:n?.advertisingTitle,advertisingSubtitle:n?.advertisingSubtitle,advertisingLink:n?.advertisingLink,advertisingTheme:n?.advertisingTheme,type:"advertising"};return!h.current&&y?.length&&(y?.length>=8?(y?.splice(7,0,a),h.current=!0):(y?.push(a),h.current=!0)),y},[n,y]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[(0,e.jsx)(s.Heading,{size:4,weight:"bold",html:(0,A.replaceTemplate)(l?.title,{totalCount:O?.toString(),inputValue:`"${o}"`})}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(s.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(s.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(s.TabsTrigger,{onClick:()=>{P(a),h.current=!1;const u=a?.sortKeys?.[0];u&&(I(j=>({...j,[a?.tabType]:u})),f?.(a?.tabType,u)),k?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(s.DropdownMenu,{onOpenChange:g,children:[(0,e.jsx)(s.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none",children:[n?.sortLabel," ",_?.[n?.tabType]?.label," ",(0,e.jsx)(D.DownArrow,{className:(0,c.cn)("inline-block size-4",{"rotate-180":S})})]})}),(0,e.jsx)(s.DropdownMenuContent,{align:"start",sideOffset:8,className:"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none",children:n?.sortKeys?.map(a=>(0,e.jsx)(s.DropdownMenuItem,{className:(0,c.cn)("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none",{"bg-[#EAEAEC]":_?.[n?.tabType]?.value===a.value}),onClick:()=>{h.current=!1,f?.(n?.tabType,a),I(u=>({...u,[n?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:R?.map((a,u)=>(0,e.jsx)(E,{searchValue:o,product:a,shopNowLoadingProductId:x,onSecondaryButton:()=>r?.(a),onPrimaryButton:()=>d?.(a)},(a.id||"")+u))}),i?(0,e.jsx)("div",{className:"mt-6 flex w-full justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!y?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(C,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(L,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]}),(0,e.jsx)(s.TabsContent,{value:v.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[B?.map(a=>(0,e.jsx)(H,{blog:a,searchValue:o},a.id)),i?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!B?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(C,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(L,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(s.TabsContent,{value:v.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:z?.map((a,u)=>(0,e.jsx)(q,{page:a,searchValue:o},(a.global_id||a.id)+u))}),i?(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsx)(s.LoadingDots,{})}):!z?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(C,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(L,{products:l?.recommendProducts||[],buildProps:b,title:l?.recommendProductsTitle,shopNowLoadingProductId:x})]})]})]})})]})};var Q=J;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return `${locale === 'us' ? '' : '/' + locale}/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`\n }, [product?.handle, variant?.id, searchValue, locale])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto\">\n {product?.type === 'advertising' && product?.advertisingLink ? (\n <Link href={product?.advertisingLink} className=\"h-full\">\n <Picture\n source={`${product?.advertisingBgImg}`}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-[18px] text-sm font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n )}\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product?.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product?.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting, locale } = useAiuiContext()\n\n const articleLink = useMemo(\n () =>\n `${locale === 'us' ? '' : '/' + locale}/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`,\n [blog, locale]\n )\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n if (!buildProduct) return null\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.sku + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n shopNowLoadingProductId,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n advertisingTheme: currentTab?.advertisingTheme,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n <Heading\n size={4}\n weight=\"bold\"\n html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={8} className=\"rounded-none bg-white !px-0 py-2\">\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current',\n {\n 'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={(product.id || '') + index}\n product={product}\n shopNowLoadingProductId={shopNowLoadingProductId}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "defaultSortKey", "prev", "sortKey"]
|
|
4
|
+
"sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n LoadingDots,\n} from '../../components/index.js'\nimport { DownArrow } from '../HeaderNavigation/icons/index.js'\nimport { useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n shopNowLoadingProductId,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n // \u5224\u65AD\u5F53\u524D\u4EA7\u54C1\u662F\u5426\u5728\u52A0\u8F7D\u4E2D\n const isCurrentProductLoading = shopNowLoadingProductId === product?.id\n\n const listingLink = useMemo(() => {\n return getLocalizedPath(\n `/products/${product?.handle}?variant=${atobID(variant?.id as string)}?ref=search_result_${searchValue?.toLowerCase()}`,\n locale\n )\n }, [product?.handle, variant?.id, searchValue, locale])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : (variant?.price?.amount ?? variant?.price),\n baseAmount: coupon ? (variant?.price?.amount ?? variant?.price) : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"rounded-image-text ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto overflow-hidden\">\n {product?.type === 'advertising' && product?.advertisingLink ? (\n <Link href={getLocalizedPath(product?.advertisingLink, locale)} className=\"h-full\">\n <Picture\n source={`${product?.advertisingBgImg}`}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"desktop:p-6 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n <Text\n html={product?.advertisingTitle}\n className={cn('desktop:text-base text-sm font-bold leading-[1.2]', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n {product?.advertisingSubtitle && (\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className={cn('laptop:line-clamp-3 mt-2 line-clamp-4 font-bold', {\n 'text-white': product?.advertisingTheme === 'light',\n 'text-info-primary': product?.advertisingTheme === 'dark',\n })}\n />\n )}\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\"tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:size-[196px] mx-auto size-[138px]\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product?.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2\">\n {tags?.map((tag: string, index: number) => (\n <Text\n key={index}\n as=\"p\"\n html={tag}\n className=\"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n />\n ))}\n </div>\n <Text\n className=\"lg-desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold\"\n html={highlightSearchWord(product?.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onSecondaryButton?.()\n }}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto w-full\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n loading={isCurrentProductLoading}\n onClick={e => {\n e.preventDefault()\n e.stopPropagation()\n onPrimaryButton?.()\n }}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n\n const articleLink = useMemo(\n () => getLocalizedPath(`/blogs/${blog?.blog?.handle}/${blog?.handle.replace('storefront-', '')}`, locale),\n [blog, locale]\n )\n\n return (\n <div className=\"ipc_search_blog_item border-b border-[#E4E5E6] py-6\">\n <div className=\"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4\">\n <div className=\"rounded-image-text laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px] overflow-hidden\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n />\n <div className=\"desktop:mt-6 mt-4\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => getLocalizedPath(`/${page?.handle}`, locale), [page, locale])\n return (\n <div className=\"ipc_search_page_items border-b border-[#E4E5E6] py-6\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"desktop:mt-6 mt-4\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col items-center justify-center gap-4\">\n <Picture source={url} className=\"h-[180px] w-[240px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] text-sm font-bold leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n console.log(buildProducts, 'buildProducts')\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n if (!buildProduct) return null\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.sku + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n shopNowLoadingProductId,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: `${currentTab?.advertisingBgImg?.url}, ${currentTab?.advertisingMobBgImg?.url} 768`,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n advertisingTheme: currentTab?.advertisingTheme,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16\">\n <Heading\n size={4}\n weight=\"bold\"\n html={replaceTemplate(data?.title, {\n totalCount: totalCount?.toString(),\n inputValue: `\"${searchValue}\"`,\n })}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\" desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n isInsertAdvertising.current = false\n // \u5207\u6362tab\u65F6\uFF0C\u91CD\u7F6E\u8BE5tab\u7684\u6392\u5E8F\u503C\u4E3A\u9ED8\u8BA4\u503C\uFF08\u7B2C\u4E00\u4E2AsortKey\uFF09\n const defaultSortKey = tab?.sortKeys?.[0]\n if (defaultSortKey) {\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [tab?.tabType]: defaultSortKey,\n }))\n onChangeSort?.(tab?.tabType, defaultSortKey)\n }\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2] focus-visible:!outline-none\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('inline-block size-4', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align=\"start\"\n sideOffset={8}\n className=\"rounded-sidebar-shelf bg-white !px-0 py-2 focus-visible:!outline-none\"\n >\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current hover:!outline-none',\n {\n 'bg-[#EAEAEC]': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={(product.id || '') + index}\n product={product}\n shopNowLoadingProductId={shopNowLoadingProductId}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex w-full justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={(page.global_id || page.id) + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"mt-6 flex justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n shopNowLoadingProductId={shopNowLoadingProductId}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "import_textFormat", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "shopNowLoadingProductId", "variant", "locale", "copyWriting", "isCurrentProductLoading", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "index", "e", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "defaultSortKey", "prev", "sortKey"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.create;var
|
|
1
|
+
"use strict";var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(t,r)=>{for(var e in r)s(t,e,{get:r[e],enumerable:!0})},o=(t,r,e,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of g(r))!u.call(t,a)&&a!==e&&s(t,a,{get:()=>r[a],enumerable:!(l=f(r,a))||l.enumerable});return t};var h=(t,r,e)=>(e=t!=null?d(c(t)):{},o(r||!t||!t.__esModule?s(e,"default",{value:t,enumerable:!0}):e,t)),y=t=>o(s({},"__esModule",{value:!0}),t);var x={};b(x,{default:()=>v});module.exports=y(x);var n=require("react/jsx-runtime"),S=require("react"),p=h(require("./link.js")),i=require("../helpers/utils.js"),m=require("./container.js");const k=({data:t,className:r,itemClassName:e})=>(0,n.jsx)("div",{className:(0,i.cn)("w-full",r),children:(0,n.jsxs)(m.Container,{className:"!bg-transparent",children:[t?.title?(0,n.jsx)("p",{className:"brand-strip-title mb-2 text-sm font-bold text-[#767880]",dangerouslySetInnerHTML:{__html:t?.title||""}}):null,(0,n.jsx)("div",{className:"flex flex-wrap gap-2",children:t?.leftIcon?.map?.((l,a)=>(0,n.jsx)(p.default,{href:l?.link,asChild:!l?.link,className:"desktop:hidden block h-full",children:(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:l?.logo||""},className:(0,i.cn)("brand-strip-item rounded-sidebar-shelf box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]",e)})},a))})]})});var v=k;
|
|
2
2
|
//# sourceMappingURL=brand-strip.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/brand-strip.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport Link from './link.js'\nimport { cn } from '../helpers/utils.js'\nimport { Container } from './container.js'\n\ntype BrandStripItem = {\n /** \u54C1\u724C\u540D\u79F0\uFF0C\u7528\u4E8E\u9ED8\u8BA4\u5C55\u793A\u548C\u8F85\u52A9\u6587\u672C */\n name: string\n /** \u54C1\u724C Logo \u7684\u56FE\u7247\u5730\u5740\uFF0C\u9ED8\u8BA4\u662F\u5185\u7F6E\u7684\u6587\u5B57 Logo */\n logo?: string\n /** \u81EA\u5B9A\u4E49 alt \u6587\u6848 */\n alt?: string\n /** \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u53EF\u9009 */\n link?: string\n}\n\ntype BrandStripProps = {\n data: any\n /** \u5916\u5C42\u5BB9\u5668 class */\n className?: string\n /** \u6BCF\u4E2A\u5361\u7247\u7684 class */\n itemClassName?: string\n}\n\n/**\n * BrandStrip - \u54C1\u724C\u5FBD\u6807\u5C55\u793A\u6761\n *\n * @description \u5C55\u793A\u54C1\u724C Logo \u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u5B9A\u4E49\u6807\u9898\u3001Logo \u548C\u8DF3\u8F6C\u94FE\u63A5\n */\nconst BrandStrip: React.FC<BrandStripProps> = ({ data, className, itemClassName }) => {\n return (\n <div className={cn('w-full', className)}>\n <Container className=\"!bg-transparent\">\n {data?.title ? (\n <p\n className=\"brand-strip-title mb-2 text-sm font-bold text-[#767880]\"\n dangerouslySetInnerHTML={{ __html: data?.title || '' }}\n />\n ) : null}\n <div className=\"flex flex-wrap gap-2\">\n {data?.leftIcon?.map?.((item: any, index: number) => {\n return (\n <Link key={index} href={item?.link} asChild={!item?.link} className=\"desktop:hidden block h-full\">\n <div\n dangerouslySetInnerHTML={{ __html: item?.logo || '' }}\n className={cn(\n 'brand-strip-item box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]',\n itemClassName\n )}\n />\n </Link>\n )\n })}\n </div>\n </Container>\n </div>\n )\n}\n\nexport type { BrandStripProps, BrandStripItem }\nexport default BrandStrip\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCM,IAAAI,EAAA,6BAhCNC,EAAkB,iBAClBC,EAAiB,wBACjBC,EAAmB,+BACnBC,EAA0B,0BA0B1B,MAAMC,EAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,cAAAC,CAAc,OAE5E,OAAC,OAAI,aAAW,MAAG,SAAUD,CAAS,EACpC,oBAAC,aAAU,UAAU,kBAClB,UAAAD,GAAM,SACL,OAAC,KACC,UAAU,0DACV,wBAAyB,CAAE,OAAQA,GAAM,OAAS,EAAG,EACvD,EACE,QACJ,OAAC,OAAI,UAAU,uBACZ,SAAAA,GAAM,UAAU,MAAM,CAACG,EAAWC,OAE/B,OAAC,EAAAC,QAAA,CAAiB,KAAMF,GAAM,KAAM,QAAS,CAACA,GAAM,KAAM,UAAU,8BAClE,mBAAC,OACC,wBAAyB,CAAE,OAAQA,GAAM,MAAQ,EAAG,EACpD,aAAW,MACT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport Link from './link.js'\nimport { cn } from '../helpers/utils.js'\nimport { Container } from './container.js'\n\ntype BrandStripItem = {\n /** \u54C1\u724C\u540D\u79F0\uFF0C\u7528\u4E8E\u9ED8\u8BA4\u5C55\u793A\u548C\u8F85\u52A9\u6587\u672C */\n name: string\n /** \u54C1\u724C Logo \u7684\u56FE\u7247\u5730\u5740\uFF0C\u9ED8\u8BA4\u662F\u5185\u7F6E\u7684\u6587\u5B57 Logo */\n logo?: string\n /** \u81EA\u5B9A\u4E49 alt \u6587\u6848 */\n alt?: string\n /** \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u53EF\u9009 */\n link?: string\n}\n\ntype BrandStripProps = {\n data: any\n /** \u5916\u5C42\u5BB9\u5668 class */\n className?: string\n /** \u6BCF\u4E2A\u5361\u7247\u7684 class */\n itemClassName?: string\n}\n\n/**\n * BrandStrip - \u54C1\u724C\u5FBD\u6807\u5C55\u793A\u6761\n *\n * @description \u5C55\u793A\u54C1\u724C Logo \u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u5B9A\u4E49\u6807\u9898\u3001Logo \u548C\u8DF3\u8F6C\u94FE\u63A5\n */\nconst BrandStrip: React.FC<BrandStripProps> = ({ data, className, itemClassName }) => {\n return (\n <div className={cn('w-full', className)}>\n <Container className=\"!bg-transparent\">\n {data?.title ? (\n <p\n className=\"brand-strip-title mb-2 text-sm font-bold text-[#767880]\"\n dangerouslySetInnerHTML={{ __html: data?.title || '' }}\n />\n ) : null}\n <div className=\"flex flex-wrap gap-2\">\n {data?.leftIcon?.map?.((item: any, index: number) => {\n return (\n <Link key={index} href={item?.link} asChild={!item?.link} className=\"desktop:hidden block h-full\">\n <div\n dangerouslySetInnerHTML={{ __html: item?.logo || '' }}\n className={cn(\n 'brand-strip-item rounded-sidebar-shelf box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]',\n itemClassName\n )}\n />\n </Link>\n )\n })}\n </div>\n </Container>\n </div>\n )\n}\n\nexport type { BrandStripProps, BrandStripItem }\nexport default BrandStrip\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCM,IAAAI,EAAA,6BAhCNC,EAAkB,iBAClBC,EAAiB,wBACjBC,EAAmB,+BACnBC,EAA0B,0BA0B1B,MAAMC,EAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,cAAAC,CAAc,OAE5E,OAAC,OAAI,aAAW,MAAG,SAAUD,CAAS,EACpC,oBAAC,aAAU,UAAU,kBAClB,UAAAD,GAAM,SACL,OAAC,KACC,UAAU,0DACV,wBAAyB,CAAE,OAAQA,GAAM,OAAS,EAAG,EACvD,EACE,QACJ,OAAC,OAAI,UAAU,uBACZ,SAAAA,GAAM,UAAU,MAAM,CAACG,EAAWC,OAE/B,OAAC,EAAAC,QAAA,CAAiB,KAAMF,GAAM,KAAM,QAAS,CAACA,GAAM,KAAM,UAAU,8BAClE,mBAAC,OACC,wBAAyB,CAAE,OAAQA,GAAM,MAAQ,EAAG,EACpD,aAAW,MACT,4KACAD,CACF,EACF,GAPSE,CAQX,CAEH,EACH,GACF,EACF,EAKJ,IAAOZ,EAAQO",
|
|
6
6
|
"names": ["brand_strip_exports", "__export", "brand_strip_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_link", "import_utils", "import_container", "BrandStrip", "data", "className", "itemClassName", "item", "index", "Link"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useEffect as k,useMemo as C,useState as g}from"react";import{Text as d,Container as M,Link as f}from"../../components/index.js";import D from"../Subscribe/index.js";import{FooterNavigationBlockType as b}from"./types.js";import{AddIcon as y,SubtractIcon as v,ArrowRightIcon as F,CountryIcon as L}from"./icons/index.js";import{useMediaQuery as N}from"react-responsive";import{cn as x}from"../../helpers/utils.js";import{withLayout as A}from"../../shared/Styles.js";const E=({data:{footer:t}={},currentCountry:c,event:l,subscribeLoading:a,classNames:n})=>{const[m,p]=g(!1),r=N({query:"(max-width: 1439px)"});k(()=>{p(r)},[r]);const u=C(()=>t?.blocks?.find(s=>s?.blockType===b.Brand)?.country||{},[t]);return e("footer",{className:x(n?.root),children:i(M,{className:x(n?.child),childClassName:x("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8"),children:[e(d,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(s=>{if(s?.blockType===b.Signup)return e(S,{subscribeLoading:a,data:s,onSubmit:l?.signup},s.id);if(s?.blockType===b.Brand)return e(z,{data:s,isMobile:m,event:l,currentCountry:c},s?.id);if(s?.blockType===b.Main)return e($,{data:{...s,country:u},event:l,isMobile:m,currentCountry:c},s.id)})]})})},S=({data:t,onSubmit:c,subscribeLoading:l})=>i("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8",children:[e(D,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:c,loading:l}),e("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),i("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[i("div",{className:"flex-1",children:[e(d,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(a=>i("div",{className:"flex-start flex gap-2",children:[e("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"size-5 shrink-0"}),e(d,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},a?.id))})]}),e("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),i("div",{className:"flex-1",children:[e(d,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(a=>e(f,{href:`${a?.link}?ref=footer`,asChild:!a?.link,className:"no-underline",children:e(d,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},a?.id))})]})]})]}),$=({data:t,event:c,isMobile:l,currentCountry:a})=>{const[n,m]=g(!1),{services:p,mainNav:r,country:u}=t,s="contact-section";return i("nav",{className:"flex flex-col gap-8","aria-label":"Main navigation",children:[i("div",{className:x({"desktop:gap-16 flex":p?.download?.title}),children:[i("div",{className:x("w-full",{"desktop:flex-[1260]":p?.download?.title}),children:[e(d,{html:p?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:x("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(o=>i("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"size-5 shrink-0"}),e(f,{href:`${o?.link}?ref=footer`,asChild:!o?.link,className:"no-underline",children:e(d,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},o?.id))})]}),e(w,{className:x({"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]","aria-hidden":"true"}),i("div",{className:"desktop:grid grid-cols-4 gap-4",children:[e(h,{title:r?.products?.title,lists:r?.products?.products}),e(h,{title:r?.explore?.title,lists:r?.explore?.explores}),e(h,{title:r?.support?.title,lists:r?.support?.supports}),i("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[i("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[e(d,{as:"p",html:r?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white",id:s}),l&&e("button",{onClick:()=>m(!n),"aria-expanded":n,"aria-controls":s,"aria-label":n?"Collapse contact section":"Expand contact section",children:n?e(v,{width:20,height:20}):e(y,{width:20,height:20})})]}),(n&&l||!l)&&e("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",role:"region","aria-labelledby":s,children:r?.contact?.contacts?.map(o=>i(f,{href:o?.link,className:"group flex items-start gap-2 no-underline",children:[e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),e(d,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white"})]},o?.id))}),e(B,{country:a||u,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:c?.country}),e("div",{className:"desktop:hidden mt-8",children:e(w,{title:p?.download?.title,apps:p?.download?.apps})}),!!r?.socials?.length&&e("div",{className:"mt-8 flex items-center gap-2",role:"list","aria-label":"Social media links",children:r?.socials?.map(o=>e(f,{href:`${o?.link}?ref=footer`,className:"group",role:"listitem","aria-label":o?.icon?.alt||"Social media",children:e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"})},o?.id))}),e("div",{className:"mt-4 flex flex-wrap gap-2",role:"list","aria-label":"Payment methods",children:r?.payment?.map(o=>e(f,{href:o?.link,asChild:!o?.link,role:"listitem","aria-label":o?.icon?.alt||"Payment method",children:e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"h-[28px] w-[44px] shrink-0"})},o?.id))})]})]})]})},z=({data:t,isMobile:c,event:l,currentCountry:a})=>i("div",{className:"flex flex-col gap-4",children:[i("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[i("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[e(f,{href:`${t?.brand?.link}?ref=footer`,asChild:!t?.brand?.link,children:e(d,{html:t?.brand?.currentBrand,className:"cursor-pointer text-[#B6B6BA] hover:text-white"})}),e("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),e("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(n=>e(f,{href:`${n?.link}?ref=footer`,children:e(d,{html:n?.icon,className:"text-[#B6B6BA] hover:text-white"})},n?.id))})]}),e(B,{country:a||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:c,onChangeCountry:l?.country})]}),e("div",{className:"h-px bg-[#3D3E3F]"}),i("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[e(d,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(n=>e(f,{href:`${n?.link}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:n?.label},n?.id)),t?.policy?.cookies&&e("button",{"data-cc":"show-preferencesModal",onClick:l?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Cookie preferences: ${t?.policy?.cookies}`,children:t?.policy?.cookies})]})]})]}),h=({title:t,lists:c,className:l})=>{const[a,n]=g(!1),[m,p]=g(!1),r=N({query:"(max-width: 1439px)"});k(()=>{p(r)},[r]);const u=`nav-section-${t?.replace(/\s+/g,"-").toLowerCase()}`;return i("div",{className:x("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[i("div",{className:"flex items-center justify-between",children:[e(d,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white",id:u}),m&&e("button",{onClick:()=>n(!a),"aria-expanded":a,"aria-controls":u,"aria-label":a?`Collapse ${t}`:`Expand ${t}`,className:"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black",children:a?e(v,{width:20,height:20}):e(y,{width:20,height:20})})]}),(a&&m||!m)&&e("nav",{className:"mt-4 flex flex-col gap-2",role:"region","aria-labelledby":u,children:c?.map(s=>e(f,{href:`${s?.link}?ref=footer`,className:"no-underline",children:e(d,{html:s?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},s?.id))})]})},w=({title:t,apps:c,className:l})=>c?.length?i("div",{className:l,children:[e(d,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex items-center gap-4",role:"list","aria-label":"Download apps",children:c?.map(a=>i(f,{href:a?.link,className:"group flex flex-col items-center gap-[6px]",role:"listitem","aria-label":a?.icon?.alt||a?.label||"Download app",children:[e("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),a?.label&&e(d,{html:a?.label,className:"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white"})]},a?.id))})]}):null,B=({country:t,isMobile:c,className:l,onChangeCountry:a})=>e("div",{className:x("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:i("button",{onClick:()=>a?.(),className:"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Change country/region, current: ${t?.countryName||t?.country}`,children:[i("div",{className:"group flex items-center gap-2",children:[e(L,{width:20,height:20,className:"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100","aria-hidden":"true"}),e(d,{as:"span",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200"})]}),c&&e(F,{width:20,height:20,"aria-hidden":"true"})]})});var G=A(E);export{G as default};
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useEffect as N,useMemo as A,useState as k}from"react";import{Text as r,Container as D,Link as x}from"../../components/index.js";import F from"../Subscribe/index.js";import{FooterNavigationBlockType as y}from"./types.js";import{AddIcon as w,SubtractIcon as B,ArrowRightIcon as z,CountryIcon as E}from"./icons/index.js";import{useMediaQuery as C}from"react-responsive";import{cn as m,getLocalizedPath as u}from"../../helpers/utils.js";import{useAiuiContext as h}from"../AiuiProvider/index.js";import{withLayout as S}from"../../shared/Styles.js";const $=({data:{footer:t}={},currentCountry:c,event:l,subscribeLoading:f,classNames:a})=>{const[s,g]=k(!1),p=C({query:"(max-width: 1439px)"});N(()=>{g(p)},[p]);const d=A(()=>t?.blocks?.find(n=>n?.blockType===y.Brand)?.country||{},[t]);return e("footer",{className:m(a?.root),children:i(D,{className:m(a?.child),childClassName:m("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8"),children:[e(r,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(n=>{if(n?.blockType===y.Signup)return e(T,{subscribeLoading:f,data:n,onSubmit:l?.signup},n.id);if(n?.blockType===y.Brand)return e(O,{data:n,isMobile:s,event:l,currentCountry:c},n?.id);if(n?.blockType===y.Main)return e(P,{data:{...n,country:d},event:l,isMobile:s,currentCountry:c},n.id)})]})})},T=({data:t,onSubmit:c,subscribeLoading:l})=>{const{locale:f="us"}=h();return i("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8",children:[e(F,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:c,loading:l}),e("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),i("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[i("div",{className:"flex-1",children:[e(r,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(a=>i("div",{className:"flex-start flex gap-2",children:[e("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"size-5 shrink-0"}),e(r,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},a?.id))})]}),e("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),i("div",{className:"flex-1",children:[e(r,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(a=>e(x,{href:`${u(a?.link,f)}?ref=footer`,asChild:!a?.link,className:"no-underline",children:e(r,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},a?.id))})]})]})]})},P=({data:t,event:c,isMobile:l,currentCountry:f})=>{const{locale:a="us"}=h(),[s,g]=k(!1),{services:p,mainNav:d,country:n}=t,b="contact-section";return i("nav",{className:"flex flex-col gap-8","aria-label":"Main navigation",children:[i("div",{className:m({"desktop:gap-16 flex":p?.download?.title}),children:[i("div",{className:m("w-full",{"desktop:flex-[1260]":p?.download?.title}),children:[e(r,{html:p?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:m("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(o=>i("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"size-5 shrink-0"}),e(x,{href:`${u(o?.link,a)}?ref=footer`,asChild:!o?.link,className:"no-underline",children:e(r,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},o?.id))})]}),e(M,{className:m({"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]","aria-hidden":"true"}),i("div",{className:"desktop:grid grid-cols-4 gap-4",children:[e(v,{title:d?.products?.title,lists:d?.products?.products}),e(v,{title:d?.explore?.title,lists:d?.explore?.explores}),e(v,{title:d?.support?.title,lists:d?.support?.supports}),i("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[i("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[e(r,{as:"p",html:d?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white",id:b}),l&&e("button",{onClick:()=>g(!s),"aria-expanded":s,"aria-controls":b,"aria-label":s?"Collapse contact section":"Expand contact section",children:s?e(B,{width:20,height:20}):e(w,{width:20,height:20})})]}),(s&&l||!l)&&e("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",role:"region","aria-labelledby":b,children:d?.contact?.contacts?.map(o=>i(x,{href:o?.link,className:"group flex items-start gap-2 no-underline",children:[e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),e(r,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white"})]},o?.id))}),e(L,{country:f||n,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:c?.country}),e("div",{className:"desktop:hidden mt-8",children:e(M,{title:p?.download?.title,apps:p?.download?.apps})}),!!d?.socials?.length&&e("div",{className:"mt-8 flex items-center gap-2",role:"list","aria-label":"Social media links",children:d?.socials?.map(o=>e(x,{href:`${u(o?.link,a)}?ref=footer`,className:"group",role:"listitem","aria-label":o?.icon?.alt||"Social media",children:e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"})},o?.id))}),e("div",{className:"mt-4 flex flex-wrap gap-2",role:"list","aria-label":"Payment methods",children:d?.payment?.map(o=>e(x,{href:u(o?.link,a),asChild:!o?.link,role:"listitem","aria-label":o?.icon?.alt||"Payment method",children:e("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"h-[28px] w-[44px] shrink-0"})},o?.id))})]})]})]})},O=({data:t,isMobile:c,event:l,currentCountry:f})=>{const{locale:a="us"}=h();return i("div",{className:"flex flex-col gap-4",children:[i("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[i("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[e(x,{href:`${u(t?.brand?.link,a)}?ref=footer`,asChild:!t?.brand?.link,children:e(r,{html:t?.brand?.currentBrand,className:"cursor-pointer text-[#B6B6BA] hover:text-white"})}),e("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),e("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(s=>e(x,{href:`${u(s?.link,a)}?ref=footer`,children:e(r,{html:s?.icon,className:"text-[#B6B6BA] hover:text-white"})},s?.id))})]}),e(L,{country:f||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:c,onChangeCountry:l?.country})]}),e("div",{className:"h-px bg-[#3D3E3F]"}),i("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[e(r,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(s=>e(x,{href:`${u(s?.link,a)}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:s?.label},s?.id)),t?.policy?.cookies&&e("button",{"data-cc":"show-preferencesModal",onClick:l?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Cookie preferences: ${t?.policy?.cookies}`,children:t?.policy?.cookies})]})]})]})},v=({title:t,lists:c,className:l})=>{const{locale:f="us"}=h(),[a,s]=k(!1),[g,p]=k(!1),d=C({query:"(max-width: 1439px)"});N(()=>{p(d)},[d]);const n=`nav-section-${t?.replace(/\s+/g,"-").toLowerCase()}`;return i("div",{className:m("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[i("div",{className:"flex items-center justify-between",children:[e(r,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white",id:n}),g&&e("button",{onClick:()=>s(!a),"aria-expanded":a,"aria-controls":n,"aria-label":a?`Collapse ${t}`:`Expand ${t}`,className:"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black",children:a?e(B,{width:20,height:20}):e(w,{width:20,height:20})})]}),(a&&g||!g)&&e("nav",{className:"mt-4 flex flex-col gap-2",role:"region","aria-labelledby":n,children:c?.map(b=>e(x,{href:`${u(b?.link,f)}?ref=footer`,className:"no-underline",children:e(r,{html:b?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},b?.id))})]})},M=({title:t,apps:c,className:l})=>{const{locale:f="us"}=h();return c?.length?i("div",{className:l,children:[e(r,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex items-center gap-4",role:"list","aria-label":"Download apps",children:c?.map(a=>i(x,{href:u(a?.link,f),className:"group flex flex-col items-center gap-[6px]",role:"listitem","aria-label":a?.icon?.alt||a?.label||"Download app",children:[e("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),a?.label&&e(r,{html:a?.label,className:"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white"})]},a?.id))})]}):null},L=({country:t,isMobile:c,className:l,onChangeCountry:f})=>e("div",{className:m("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:i("button",{onClick:()=>f?.(),className:"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Change country/region, current: ${t?.countryName||t?.country}`,children:[i("div",{className:"group flex items-center gap-2",children:[e(E,{width:20,height:20,className:"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100","aria-hidden":"true"}),e(r,{as:"span",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200"})]}),c&&e(z,{width:20,height:20,"aria-hidden":"true"})]})});var U=S($);export{U 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 { 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: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <footer className={cn(classNames?.root)}>\n <Container\n className={cn(classNames?.child)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8')}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n </footer>\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 = ({\n data,\n onSubmit,\n subscribeLoading,\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n}) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8\">\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\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 <img\n src={enjoyItem?.icon?.url}\n loading=\"lazy\"\n alt={enjoyItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\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}?ref=footer`}\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 const contactSectionId = 'contact-section'\n\n return (\n <nav className=\"flex flex-col gap-8\" aria-label=\"Main navigation\">\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 <img\n src={reasonItem?.icon?.url}\n loading=\"lazy\"\n alt={reasonItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Link href={`${reasonItem?.link}?ref=footer`} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm 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]\" aria-hidden=\"true\" />\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\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n id={contactSectionId}\n />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={contactSectionId}\n aria-label={mainNavMenuOpen ? 'Collapse contact section' : 'Expand contact section'}\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div\n className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\"\n role=\"region\"\n aria-labelledby={contactSectionId}\n >\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <Link\n key={contactItem?.id}\n href={contactItem?.link}\n className=\"group flex items-start gap-2 no-underline\"\n >\n <img\n src={contactItem?.icon?.url}\n loading=\"lazy\"\n alt={contactItem?.icon?.alt}\n className=\"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white\"\n />\n </Link>\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\" role=\"list\" aria-label=\"Social media links\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link\n href={`${socialItem?.link}?ref=footer`}\n key={socialItem?.id}\n className=\"group\"\n role=\"listitem\"\n aria-label={socialItem?.icon?.alt || 'Social media'}\n >\n <img\n src={socialItem?.icon?.url}\n loading=\"lazy\"\n alt={socialItem?.icon?.alt}\n className=\"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Payment methods\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link\n href={paymentItem?.link}\n asChild={!paymentItem?.link}\n key={paymentItem?.id}\n role=\"listitem\"\n aria-label={paymentItem?.icon?.alt || 'Payment method'}\n >\n <img\n src={paymentItem?.icon?.url}\n loading=\"lazy\"\n alt={paymentItem?.icon?.alt || ''}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </nav>\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 <Link href={`${data?.brand?.link}?ref=footer`} asChild={!data?.brand?.link}>\n <Text html={data?.brand?.currentBrand} className=\"cursor-pointer text-[#B6B6BA] hover:text-white\" />\n </Link>\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\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}?ref=footer`} 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}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Cookie preferences: ${data?.policy?.cookies}`}\n >\n {data?.policy?.cookies}\n </button>\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: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const sectionId = `nav-section-${title?.replace(/\\s+/g, '-').toLowerCase()}`\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\">\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" id={sectionId} />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={sectionId}\n aria-label={mainNavMenuOpen ? `Collapse ${title}` : `Expand ${title}`}\n className=\"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <nav className=\"mt-4 flex flex-col gap-2\" role=\"region\" aria-labelledby={sectionId}>\n {lists?.map((item: any) => (\n <Link href={`${item?.link}?ref=footer`} 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 </nav>\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\" role=\"list\" aria-label=\"Download apps\">\n {apps?.map((appItem: any) => (\n <Link\n key={appItem?.id}\n href={appItem?.link}\n className=\"group flex flex-col items-center gap-[6px]\"\n role=\"listitem\"\n aria-label={appItem?.icon?.alt || appItem?.label || 'Download app'}\n >\n <img\n src={appItem?.icon?.url}\n loading=\"lazy\"\n alt={appItem?.icon?.alt}\n className=\"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n {appItem?.label && (\n <Text\n html={appItem?.label}\n className=\"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white\"\n />\n )}\n </Link>\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 className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <button\n onClick={() => onChangeCountry?.()}\n className=\"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Change country/region, current: ${country?.countryName || country?.country}`}\n >\n <div className=\"group flex items-center gap-2\">\n <CountryIcon\n width={20}\n height={20}\n className=\"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n aria-hidden=\"true\"\n />\n <Text\n as=\"span\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200\"\n />\n </div>\n {isMobile && <ArrowRightIcon width={20} height={20} aria-hidden=\"true\" />}\n </button>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "useEffect", "useMemo", "useState", "Text", "Container", "Link", "Subscribe", "FooterNavigationBlockType", "AddIcon", "SubtractIcon", "ArrowRightIcon", "CountryIcon", "useMediaQuery", "cn", "withLayout", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "contactSectionId", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "sectionId", "item", "apps", "appItem", "onChangeCountry", "FooterNavigation_default"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { 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, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <footer className={cn(classNames?.root)}>\n <Container\n className={cn(classNames?.child)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8')}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n </footer>\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 = ({\n data,\n onSubmit,\n subscribeLoading,\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n}) => {\n const { locale = 'us' } = useAiuiContext()\n\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8\">\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\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 <img\n src={enjoyItem?.icon?.url}\n loading=\"lazy\"\n alt={enjoyItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\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={`${getLocalizedPath(benefitItem?.link, locale)}?ref=footer`}\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 { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n const contactSectionId = 'contact-section'\n\n return (\n <nav className=\"flex flex-col gap-8\" aria-label=\"Main navigation\">\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 <img\n src={reasonItem?.icon?.url}\n loading=\"lazy\"\n alt={reasonItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Link\n href={`${getLocalizedPath(reasonItem?.link, locale)}?ref=footer`}\n asChild={!reasonItem?.link}\n className=\"no-underline\"\n >\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm 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]\" aria-hidden=\"true\" />\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\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n id={contactSectionId}\n />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={contactSectionId}\n aria-label={mainNavMenuOpen ? 'Collapse contact section' : 'Expand contact section'}\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div\n className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\"\n role=\"region\"\n aria-labelledby={contactSectionId}\n >\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <Link\n key={contactItem?.id}\n href={contactItem?.link}\n className=\"group flex items-start gap-2 no-underline\"\n >\n <img\n src={contactItem?.icon?.url}\n loading=\"lazy\"\n alt={contactItem?.icon?.alt}\n className=\"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white\"\n />\n </Link>\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\" role=\"list\" aria-label=\"Social media links\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link\n href={`${getLocalizedPath(socialItem?.link, locale)}?ref=footer`}\n key={socialItem?.id}\n className=\"group\"\n role=\"listitem\"\n aria-label={socialItem?.icon?.alt || 'Social media'}\n >\n <img\n src={socialItem?.icon?.url}\n loading=\"lazy\"\n alt={socialItem?.icon?.alt}\n className=\"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Payment methods\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link\n href={getLocalizedPath(paymentItem?.link, locale)}\n asChild={!paymentItem?.link}\n key={paymentItem?.id}\n role=\"listitem\"\n aria-label={paymentItem?.icon?.alt || 'Payment method'}\n >\n <img\n src={paymentItem?.icon?.url}\n loading=\"lazy\"\n alt={paymentItem?.icon?.alt || ''}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </nav>\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 const { locale = 'us' } = useAiuiContext()\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 <Link href={`${getLocalizedPath(data?.brand?.link, locale)}?ref=footer`} asChild={!data?.brand?.link}>\n <Text html={data?.brand?.currentBrand} className=\"cursor-pointer text-[#B6B6BA] hover:text-white\" />\n </Link>\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={`${getLocalizedPath(brandItem?.link, locale)}?ref=footer`} 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={`${getLocalizedPath(policyItem?.link, locale)}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Cookie preferences: ${data?.policy?.cookies}`}\n >\n {data?.policy?.cookies}\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const sectionId = `nav-section-${title?.replace(/\\s+/g, '-').toLowerCase()}`\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\">\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" id={sectionId} />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={sectionId}\n aria-label={mainNavMenuOpen ? `Collapse ${title}` : `Expand ${title}`}\n className=\"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <nav className=\"mt-4 flex flex-col gap-2\" role=\"region\" aria-labelledby={sectionId}>\n {lists?.map((item: any) => (\n <Link href={`${getLocalizedPath(item?.link, locale)}?ref=footer`} 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 </nav>\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 const { locale = 'us' } = useAiuiContext()\n\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\" role=\"list\" aria-label=\"Download apps\">\n {apps?.map((appItem: any) => (\n <Link\n key={appItem?.id}\n href={getLocalizedPath(appItem?.link, locale)}\n className=\"group flex flex-col items-center gap-[6px]\"\n role=\"listitem\"\n aria-label={appItem?.icon?.alt || appItem?.label || 'Download app'}\n >\n <img\n src={appItem?.icon?.url}\n loading=\"lazy\"\n alt={appItem?.icon?.alt}\n className=\"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n {appItem?.label && (\n <Text\n html={appItem?.label}\n className=\"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white\"\n />\n )}\n </Link>\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 className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <button\n onClick={() => onChangeCountry?.()}\n className=\"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Change country/region, current: ${country?.countryName || country?.country}`}\n >\n <div className=\"group flex items-center gap-2\">\n <CountryIcon\n width={20}\n height={20}\n className=\"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n aria-hidden=\"true\"\n />\n <Text\n as=\"span\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200\"\n />\n </div>\n {isMobile && <ArrowRightIcon width={20} height={20} aria-hidden=\"true\" />}\n </button>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useEffect", "useMemo", "useState", "Text", "Container", "Link", "Subscribe", "FooterNavigationBlockType", "AddIcon", "SubtractIcon", "ArrowRightIcon", "CountryIcon", "useMediaQuery", "cn", "getLocalizedPath", "useAiuiContext", "withLayout", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "locale", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "contactSectionId", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "sectionId", "item", "apps", "appItem", "onChangeCountry", "FooterNavigation_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as A,jsx as n,jsxs as i}from"react/jsx-runtime";import{useCallback as z,useEffect as S,useMemo as B,useState as w}from"react";import{Button as R}from"../../components/index.js";import{HeaderNavigationMenu as g}from"./types.js";import{useNavContext as E}from"./NavProvider.js";import{ResourceSubSubCategoryItemComp as N,ResourceSubSubCategoryContentComp as k}from"./ResourceItem.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{getLocalizedPath as M}from"../../helpers/utils.js";const j=({label:t,onClick:l,active:u})=>i("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":u,children:[n("div",{className:"flex items-center gap-1",children:n("span",{className:"text-sm font-bold leading-[1.4]",children:t})}),n("svg",{className:`size-5 ${u?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:n("path",{d:"M6.91009 4.41009C7.23553 4.08466 7.76304 4.08466 8.08848 4.41009L13.0885 9.41009C13.4139 9.73553 13.4139 10.263 13.0885 10.5885L8.08848 15.5885C7.76304 15.9139 7.23553 15.9139 6.91009 15.5885C6.58466 15.263 6.58466 14.7355 6.91009 14.4101L11.3209 9.99929L6.91009 5.58848C6.58466 5.26304 6.58466 4.73553 6.91009 4.41009Z",fill:"#080A0F"})})]}),G=({resourceCategoriesMetadata:t,resourcesMetadata:l})=>{const{currentMenu:u,setCurrentMenu:c,subSubCategory:s,setSubSubCategory:v,onSidebarNavClick:p,currentResourceMetadata:b,setCurrentResourceMetadata:m}=E(),{locale:d="us"}=_(),[C,L]=w([]),[f,x]=w([]);S(()=>{t?.subcategories?.length&&L(t?.subcategories?.map((a,e)=>({index:e,open:!1})))},[t]),S(()=>{s?.subSubCategories?.length&&x(s?.subSubCategories?.map((a,e)=>({index:e,open:e===0})))},[s]);const h=z(a=>{v?.(a);const e=l?.find(r=>a?.label?.toLowerCase()===r.label?.toLowerCase())||{};c&&c(g.Third),m&&m(e)},[l,c,v,m]);return B(()=>{switch(u){case g.Secondary:return i("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[n("div",{children:t?.subcategories?.map((a,e)=>n("div",{children:n(j,{label:a?.label,active:C.find(r=>r.index===e)?.open,onClick:()=>{h(a),p?.(a,e)}})},`${a.label}-${e}`))}),i("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&n(R,{as:"a",href:`${M(t?.primary?.url,d)}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&n(R,{as:"a",href:M(t?.secondary?.url,d),variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case g.Third:return n("div",{className:"tablet:px-8 laptop:px-16 p-4",children:s?.subSubCategories?s?.subSubCategories?.map((a,e)=>{const r=l?.find(o=>o.label.toLowerCase()===a?.label?.toLowerCase())||{};return i("div",{children:[Reflect.ownKeys(a).length>0&&n(N,{matchResourcesMetadata:r,onSubSubCategoryItemClick:()=>{p?.(a,e),x(o=>o.map((y,$)=>({...y,open:$===e?!y.open:y.open})))},expanded:!!f?.find(o=>o.index===e)?.open}),f?.find(o=>o.index===e)?.open&&n(k,{matchResourcesMetadata:r})]},`${a.label}-${e}`)}):i(A,{children:[Reflect.ownKeys(b).length>0&&n(N,{matchResourcesMetadata:b}),n(k,{matchResourcesMetadata:b})]})});default:return null}},[u,t,l,C,f,s,b,h,p,d])};export{G as MobileResourceSidebarMenu};
|
|
2
2
|
//# sourceMappingURL=MobileResourceSidebarMenu.js.map
|