@anker-in/headless-ui 1.0.20-alpha.1761276598634 → 1.0.20-alpha.1761288173557
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 +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var B=Object.create;var h=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var A=(t,a)=>{for(var l in a)h(t,l,{get:a[l],enumerable:!0})},b=(t,a,l,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of C(a))!D.call(t,d)&&d!==l&&h(t,d,{get:()=>a[d],enumerable:!(i=M(a,d))||i.enumerable});return t};var L=(t,a,l)=>(l=t!=null?B(F(t)):{},b(a||!t||!t.__esModule?h(l,"default",{value:t,enumerable:!0}):l,t)),E=t=>b(h({},"__esModule",{value:!0}),t);var P={};A(P,{default:()=>j});module.exports=E(P);var e=require("react/jsx-runtime"),p=require("react"),s=require("../../components/index.js"),y=L(require("../Subscribe/index.js")),k=require("./types.js"),c=require("./icons/index.js"),v=require("react-responsive"),m=require("../../helpers/utils.js"),w=require("../../shared/Styles.js");const S=({data:{footerNavigation:t}={},currentCountry:a,event:l})=>{const[i,d]=(0,p.useState)(!1),x=(0,v.useMediaQuery)({query:"(max-width: 1440px)"});(0,p.useEffect)(()=>{d(x)},[x]);const r=(0,p.useMemo)(()=>t?.footerBlocks?.find(o=>o?.blockType===k.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsxs)(s.Container,{childClassName:"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8",children:[(0,e.jsx)(s.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.footerBlocks?.map(o=>{if(o?.blockType===k.FooterNavigationBlockType.Signup)return(0,e.jsx)(T,{data:o,onSubmit:l?.signup});if(o?.blockType===k.FooterNavigationBlockType.Brand)return(0,e.jsx)(O,{data:o,isMobile:i,event:l,currentCountry:a});if(o?.blockType===k.FooterNavigationBlockType.Main)return(0,e.jsx)(z,{data:{...o,country:r},event:l,isMobile:i,currentCountry:a})})]})},T=({data:t,onSubmit:a})=>(0,e.jsxs)("div",{className:"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-xl bg-[#1D1D1F] px-4 py-8",children:[(0,e.jsx)(y.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:a}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(l=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)(s.Picture,{source:l?.icon?.url,alt:l?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})]},l?.id))})]}),(0,e.jsx)("div",{className:"w-px bg-[#3D3E3F] hidden desktop:block"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(l=>(0,e.jsx)(s.Link,{href:l?.link,asChild:!l?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},l?.id))})]})]})]}),z=({data:t,event:a,isMobile:l,currentCountry:i})=>{const[d,x]=(0,p.useState)(!1),{services:r,mainNav:o,country:f}=t;return(0,e.jsxs)("div",{className:"flex flex-col gap-8",children:[(0,e.jsxs)("div",{className:(0,m.cn)({"desktop:gap-16 flex":r?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("w-full",{"desktop:flex-[1260]":r?.download?.title}),children:[(0,e.jsx)(s.Text,{html:r?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,m.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":r?.download?.title}),children:r?.storeBenefits?.reasons?.map(n=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:n?.link,asChild:!n?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:n?.label,className:"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]"})})]},n?.id))})]}),(0,e.jsx)(N,{className:(0,m.cn)({"desktop:flex-[404] hidden desktop:block":r?.download?.title}),title:r?.download?.title,apps:r?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(u,{title:o?.products?.title,lists:o?.products?.products}),(0,e.jsx)(u,{title:o?.explore?.title,lists:o?.explore?.explores}),(0,e.jsx)(u,{title:o?.support?.title,lists:o?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(s.Text,{as:"p",html:o?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white"}),l&&(0,e.jsx)("button",{onClick:()=>x(!d),children:d?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(d&&l||!l)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",children:o?.contact?.contacts?.map(n=>(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:n?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:n?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})})]},n?.id))}),(0,e.jsx)(g,{country:i||f,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:a?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(N,{title:r?.download?.title,apps:r?.download?.apps})}),(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",children:o?.socials?.map(n=>(0,e.jsx)(s.Link,{href:n?.link,children:(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-8 shrink-0"})},n?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",children:o?.payment?.map(n=>(0,e.jsx)(s.Link,{href:n?.link,children:(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"h-[28px] w-[44px] shrink-0"})},n?.id))})]})]})]})},O=({data:t,isMobile:a,event:l,currentCountry:i})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(s.Text,{html:t?.brand?.currentBrand,className:"text-[#B6B6BA]"}),(0,e.jsx)("div",{className:"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]",children:t?.brand?.brands?.map(d=>(0,e.jsx)(s.Link,{href:d?.link,children:(0,e.jsx)(s.Text,{html:d?.icon,className:"text-[#B6B6BA] hover:text-white"})},d?.id))})]}),(0,e.jsx)(g,{country:i||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:a,onChangeCountry:l?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(s.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:t?.policy?.policies?.map(d=>(0,e.jsx)(s.Link,{href:d?.link,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline",children:d?.label},d?.id))})]})]}),u=({title:t,lists:a,className:l})=>{const[i,d]=(0,p.useState)(!1),[x,r]=(0,p.useState)(!1),o=(0,v.useMediaQuery)({query:"(max-width: 1440px)"});return(0,p.useEffect)(()=>{r(o)},[o]),(0,e.jsxs)("div",{className:(0,m.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>d(!i),children:[(0,e.jsx)(s.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white"}),x&&(0,e.jsx)(e.Fragment,{children:i?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(i&&x||!x)&&(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:a?.map(f=>(0,e.jsx)(s.Link,{href:f?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:f?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},f?.id))})]})},N=({title:t,apps:a,className:l})=>a?.length?(0,e.jsxs)("div",{className:l,children:[(0,e.jsx)(s.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",children:a?.map(i=>(0,e.jsxs)("div",{className:"flex flex-col items-center gap-[6px]",children:[(0,e.jsx)(s.Link,{href:i?.link,children:(0,e.jsx)(s.Picture,{source:i?.icon?.url,alt:i?.icon?.alt,className:"size-10 shrink-0"})}),i?.label&&(0,e.jsx)(s.Text,{html:i?.label,className:"text-xs font-bold text-[#999999]"})]},i?.id))})]}):null,g=({country:t,isMobile:a,className:l,onChangeCountry:i})=>(0,e.jsx)("div",{className:(0,m.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),onClick:()=>i?.(),children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex cursor-pointer items-center gap-2",children:[(0,e.jsx)(c.CountryIcon,{width:20,height:20,className:"shrink-0"}),(0,e.jsx)(s.Text,{as:"p",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white"})]}),a&&(0,e.jsx)("button",{children:(0,e.jsx)(c.ArrowRightIcon,{width:20,height:20})})]})});var j=(0,w.withLayout)(S);
|
|
1
|
+
"use strict";var B=Object.create;var k=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var A=(t,a)=>{for(var l in a)k(t,l,{get:a[l],enumerable:!0})},b=(t,a,l,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of C(a))!D.call(t,d)&&d!==l&&k(t,d,{get:()=>a[d],enumerable:!(o=M(a,d))||o.enumerable});return t};var L=(t,a,l)=>(l=t!=null?B(F(t)):{},b(a||!t||!t.__esModule?k(l,"default",{value:t,enumerable:!0}):l,t)),E=t=>b(k({},"__esModule",{value:!0}),t);var P={};A(P,{default:()=>j});module.exports=E(P);var e=require("react/jsx-runtime"),p=require("react"),s=require("../../components/index.js"),y=L(require("../Subscribe/index.js")),h=require("./types.js"),c=require("./icons/index.js"),v=require("react-responsive"),m=require("../../helpers/utils.js"),w=require("../../shared/Styles.js");const S=({data:{footerNavigation:t}={},currentCountry:a,event:l})=>{const[o,d]=(0,p.useState)(!1),x=(0,v.useMediaQuery)({query:"(max-width: 1440px)"});(0,p.useEffect)(()=>{d(x)},[x]);const r=(0,p.useMemo)(()=>t?.footerBlocks?.find(i=>i?.blockType===h.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsxs)(s.Container,{childClassName:"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8",children:[(0,e.jsx)(s.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.footerBlocks?.map(i=>{if(i?.blockType===h.FooterNavigationBlockType.Signup)return(0,e.jsx)(T,{data:i,onSubmit:l?.signup});if(i?.blockType===h.FooterNavigationBlockType.Brand)return(0,e.jsx)(O,{data:i,isMobile:o,event:l,currentCountry:a});if(i?.blockType===h.FooterNavigationBlockType.Main)return(0,e.jsx)(z,{data:{...i,country:r},event:l,isMobile:o,currentCountry:a})})]})},T=({data:t,onSubmit:a})=>(0,e.jsxs)("div",{className:"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8",children:[(0,e.jsx)(y.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:a}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(l=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)(s.Picture,{source:l?.icon?.url,alt:l?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})]},l?.id))})]}),(0,e.jsx)("div",{className:"w-px bg-[#3D3E3F] hidden desktop:block"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(l=>(0,e.jsx)(s.Link,{href:l?.link,asChild:!l?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},l?.id))})]})]})]}),z=({data:t,event:a,isMobile:l,currentCountry:o})=>{const[d,x]=(0,p.useState)(!1),{services:r,mainNav:i,country:f}=t;return(0,e.jsxs)("div",{className:"flex flex-col gap-8",children:[(0,e.jsxs)("div",{className:(0,m.cn)({"desktop:gap-16 flex":r?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("w-full",{"desktop:flex-[1260]":r?.download?.title}),children:[(0,e.jsx)(s.Text,{html:r?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,m.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":r?.download?.title}),children:r?.storeBenefits?.reasons?.map(n=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:n?.link,asChild:!n?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:n?.label,className:"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]"})})]},n?.id))})]}),(0,e.jsx)(N,{className:(0,m.cn)({"desktop:flex-[404] hidden desktop:block":r?.download?.title}),title:r?.download?.title,apps:r?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(u,{title:i?.products?.title,lists:i?.products?.products}),(0,e.jsx)(u,{title:i?.explore?.title,lists:i?.explore?.explores}),(0,e.jsx)(u,{title:i?.support?.title,lists:i?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(s.Text,{as:"p",html:i?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white"}),l&&(0,e.jsx)("button",{onClick:()=>x(!d),children:d?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(d&&l||!l)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",children:i?.contact?.contacts?.map(n=>(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:n?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:n?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})})]},n?.id))}),(0,e.jsx)(g,{country:o||f,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:a?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(N,{title:r?.download?.title,apps:r?.download?.apps})}),!!i?.socials?.length&&(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",children:i?.socials?.map(n=>(0,e.jsx)(s.Link,{href:n?.link,children:(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"size-8 shrink-0"})},n?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",children:i?.payment?.map(n=>(0,e.jsx)(s.Link,{href:n?.link,children:(0,e.jsx)(s.Picture,{source:n?.icon?.url,alt:n?.icon?.alt,className:"h-[28px] w-[44px] shrink-0"})},n?.id))})]})]})]})},O=({data:t,isMobile:a,event:l,currentCountry:o})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(s.Text,{html:t?.brand?.currentBrand,className:"text-[#B6B6BA]"}),(0,e.jsx)("div",{className:"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]",children:t?.brand?.brands?.map(d=>(0,e.jsx)(s.Link,{href:d?.link,children:(0,e.jsx)(s.Text,{html:d?.icon,className:"text-[#B6B6BA] hover:text-white"})},d?.id))})]}),(0,e.jsx)(g,{country:o||t?.country,className:"desktop:flex-[316] desktop:block hidden mt-5",isMobile:a,onChangeCountry:l?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(s.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:t?.policy?.policies?.map(d=>(0,e.jsx)(s.Link,{href:d?.link,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline",children:d?.label},d?.id))})]})]}),u=({title:t,lists:a,className:l})=>{const[o,d]=(0,p.useState)(!1),[x,r]=(0,p.useState)(!1),i=(0,v.useMediaQuery)({query:"(max-width: 1440px)"});return(0,p.useEffect)(()=>{r(i)},[i]),(0,e.jsxs)("div",{className:(0,m.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>d(!o),children:[(0,e.jsx)(s.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white"}),x&&(0,e.jsx)(e.Fragment,{children:o?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(o&&x||!x)&&(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:a?.map(f=>(0,e.jsx)(s.Link,{href:f?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:f?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},f?.id))})]})},N=({title:t,apps:a,className:l})=>a?.length?(0,e.jsxs)("div",{className:l,children:[(0,e.jsx)(s.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",children:a?.map(o=>(0,e.jsxs)("div",{className:"flex flex-col items-center gap-[6px]",children:[(0,e.jsx)(s.Link,{href:o?.link,children:(0,e.jsx)(s.Picture,{source:o?.icon?.url,alt:o?.icon?.alt,className:"size-10 shrink-0"})}),o?.label&&(0,e.jsx)(s.Text,{html:o?.label,className:"text-xs font-bold text-[#999999]"})]},o?.id))})]}):null,g=({country:t,isMobile:a,className:l,onChangeCountry:o})=>(0,e.jsx)("div",{className:(0,m.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),onClick:()=>o?.(),children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex cursor-pointer items-center gap-2",children:[(0,e.jsx)(c.CountryIcon,{width:20,height:20,className:"shrink-0"}),(0,e.jsx)(s.Text,{as:"p",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white"})]}),a&&(0,e.jsx)("button",{children:(0,e.jsx)(c.ArrowRightIcon,{width:20,height:20})})]})});var j=(0,w.withLayout)(S);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({ data: { footerNavigation } = {}, currentCountry, event }: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit }: { data: any; onSubmit?: (params: any) => void }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-xl bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text\n html={services?.storeBenefits?.title}\n className=\" text-xl font-bold leading-[1.2] text-white\"\n />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BI,IAAAI,EAAA,6BA3BJC,EAA6C,iBAC7CC,EAA+C,qCAC/CC,EAAsB,oCAEtBC,EAA0C,sBAC1CC,EAAmE,4BACnEC,EAA8B,4BAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAmB,CAAC,CAAE,KAAM,CAAE,iBAAAC,CAAiB,EAAI,CAAC,EAAG,eAAAC,EAAgB,MAAAC,CAAM,IAA6B,CAC9G,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EAExCC,KAAa,iBAAc,CAAE,MAAO,qBAAsB,CAAC,KAEjE,aAAU,IAAM,CACdD,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAMC,KAAU,WAAQ,IAEpBN,GAAkB,cAAc,KAAMO,GAAeA,GAAO,YAAc,4BAA0B,KAAK,GACrG,SAAW,CAAC,EAEjB,CAACP,CAAgB,CAAC,EAErB,SACE,QAAC,aAAU,eAAe,gEACxB,oBAAC,QAAK,KAAMA,GAAkB,MAAO,UAAU,mDAAmD,EACjGA,GAAkB,cAAc,IAAKO,GAAe,CACnD,GAAIA,GAAO,YAAc,4BAA0B,OACjD,SAAO,OAACC,EAAA,CAAoB,KAAMD,EAAO,SAAUL,GAAO,OAAQ,EAEpE,GAAIK,GAAO,YAAc,4BAA0B,MACjD,SAAO,OAACE,EAAA,CAAY,KAAMF,EAAO,SAAUJ,EAAU,MAAOD,EAAO,eAAgBD,EAAgB,EAErG,GAAIM,GAAO,YAAc,4BAA0B,KACjD,SACE,OAACG,EAAA,CACC,KAAM,CAAE,GAAGH,EAAO,QAAAD,CAAQ,EAC1B,MAAOJ,EACP,SAAUC,EACV,eAAgBF,EAClB,CAGN,CAAC,GACH,CAEJ,EAQMO,EAAsB,CAAC,CAAE,KAAAG,EAAM,SAAAC,CAAS,OAE1C,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({ data: { footerNavigation } = {}, currentCountry, event }: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit }: { data: any; onSubmit?: (params: any) => void }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text as=\"p\" html={mainNav?.contact?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden mt-5\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["FooterNavigation_exports", "__export", "FooterNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Subscribe", "import_types", "import_icons", "import_react_responsive", "import_utils", "import_Styles", "FooterNavigation", "footerNavigation", "currentCountry", "event", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "Subscribe", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "item", "apps", "appItem", "onChangeCountry"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(t,l)=>{for(var o in l)p(t,o,{get:l[o],enumerable:!0})},T=(t,l,o,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of F(l))!y.call(t,a)&&a!==o&&p(t,a,{get:()=>l[a],enumerable:!(r=B(l,a))||r.enumerable});return t};var D=t=>T(p({},"__esModule",{value:!0}),t);var z={};E(z,{default:()=>A});module.exports=D(z);var e=require("react/jsx-runtime"),m=require("react"),s=require("../../components/index.js"),c=require("../../helpers/utils.js");const S=({subscribeMetadata:t,onSubmit:l,className:o})=>{const[r,a]=(0,m.useState)(null),[x,b]=(0,m.useState)(null),[k,f]=(0,m.useState)(!1),[u,g]=(0,m.useState)(""),w=n=>{n.preventDefault();const i=new FormData(n.target),d=i.get("email"),h=i.get("terms"),v=i.get("news");if(!d){a(t?.emptyError);return}if(!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(d)){a(t?.formatError);return}if(!h){b(t?.termsError);return}l?.({email:d,terms:h,news:v,dealsType:t?.dealsType,onSuccess:()=>{f(!0);let N=setTimeout(()=>{f(!1),clearTimeout(N)},3e3)}})};return(0,e.jsxs)("div",{className:(0,c.cn)("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",o),children:[(0,e.jsx)("style",{jsx:!0,global:!0,children:`
|
|
2
2
|
.subscribe-component input:-webkit-autofill,
|
|
3
3
|
.subscribe-component input:-webkit-autofill:hover,
|
|
4
4
|
.subscribe-component input:-webkit-autofill:focus {
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #fff;
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:w,children:[(0,e.jsxs)("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[(0,e.jsxs)("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[(0,e.jsx)("input",{name:"email",onFocus:()=>a(null),value:u,onChange:n=>g(n.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),(0,e.jsx)("button",{onClick:()=>g(""),className:(0,
|
|
10
|
+
`}),(0,e.jsxs)("div",{className:"laptop:flex-1",children:[(0,e.jsx)(s.Text,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),(0,e.jsx)(s.Text,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),(0,e.jsxs)("form",{className:"laptop:flex-1",onSubmit:w,children:[(0,e.jsxs)("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[(0,e.jsxs)("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[(0,e.jsx)("input",{name:"email",onFocus:()=>a(null),value:u,onChange:n=>g(n.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),(0,e.jsx)("button",{onClick:()=>g(""),className:(0,c.cn)("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!u}),children:"\u2715"})]}),(0,e.jsx)(s.Button,{type:"submit",className:"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:(0,e.jsx)(s.Text,{html:t?.button,className:"text-sm desktop:text-base font-bold leading-[1.2]"})})]}),r&&(0,e.jsx)(s.Text,{as:"p",html:r,className:"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"mt-4 flex flex-col gap-2",children:[(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Checkbox,{name:"terms",id:"terms",size:"base",onCheckedChange:n=>n&&b(null),className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),(0,e.jsx)("label",{htmlFor:"terms",children:(0,e.jsx)(s.Text,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),x&&(0,e.jsx)(s.Text,{as:"p",html:x,className:"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Checkbox,{name:"news",id:"news",size:"base",className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),(0,e.jsx)("label",{htmlFor:"news",children:(0,e.jsx)(s.Text,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),k&&(0,e.jsx)(s.Text,{as:"p",html:t?.successMessage,className:"text-base text-brand-0 font-bold leading-[1.2]"})]})]})]})};var A=S;
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />\n </Button>\n </div>\n {error && <Text as=\"p\" html={error} className=\"mt-2 text-base font-bold leading-[1.2] text-[#F84D4F]\"
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6EM,IAAAI,EAAA,6BA7ENC,EAAgC,iBAChCC,EAAuC,qCACvCC,EAAmB,kCASnB,MAAMC,EAAY,CAAC,CACjB,kBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAgBM,CACJ,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAAwB,IAAI,EAChD,CAACC,EAAYC,CAAa,KAAI,YAAwB,IAAI,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAACC,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EAEvCC,EAAgBC,GAAwC,CAC5DA,EAAE,eAAe,EACjB,MAAMC,EAAW,IAAI,SAASD,EAAE,MAAyB,EACnDH,EAAQI,EAAS,IAAI,OAAO,EAC5BC,EAAQD,EAAS,IAAI,OAAO,EAC5BE,EAAOF,EAAS,IAAI,MAAM,EAChC,GAAI,CAACJ,EAAO,CACVL,EAASJ,GAAmB,UAAU,EACtC,MACF,CACA,GAAI,CAAC,mDAAmD,KAAKS,CAAe,EAAG,CAC7EL,EAASJ,GAAmB,WAAW,EACvC,MACF,CACA,GAAI,CAACc,EAAO,CACVR,EAAcN,GAAmB,UAAU,EAC3C,MACF,CACAC,IAAW,CACT,MAAOQ,EACP,MAAOK,EACP,KAAMC,EACN,UAAWf,GAAmB,UAC9B,UAAW,IAAM,CACfQ,EAAW,EAAI,EACf,IAAIQ,EAAQ,WAAW,IAAM,CAC3BR,EAAW,EAAK,EAChB,aAAaQ,CAAK,CACpB,EAAG,GAAI,CACT,CACF,CAAC,CACH,EAEA,SACE,QAAC,OACC,aAAW,MACT,sGACAd,CACF,EAEA,oBAAC,SAAM,IAAG,GAAC,OAAM,GACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUH,KACA,QAAC,OAAI,UAAU,gBACb,oBAAC,QACC,GAAG,IACH,KAAMF,GAAmB,MACzB,UAAU,+DACZ,KACA,OAAC,QACC,GAAG,IACH,KAAMA,GAAmB,SACzB,UAAU,oFACZ,GACF,KACA,QAAC,QAAK,UAAU,gBAAgB,SAAUW,EACxC,qBAAC,OAAI,UAAU,8CACb,qBAAC,OAAI,UAAU,mEACb,oBAAC,SACC,KAAK,QACL,QAAS,IAAMP,EAAS,IAAI,EAC5B,MAAOK,EACP,SAAUG,GAAKF,EAASE,EAAE,OAAO,KAAK,EACtC,YAAaZ,GAAmB,YAChC,UAAU,kJACZ,KACA,OAAC,UACC,QAAS,IAAMU,EAAS,EAAE,EAC1B,aAAW,MAAG,8EAA+E,CAC3F,OAAQ,CAACD,CACX,CAAC,EACF,kBAED,GACF,KACA,OAAC,UACC,KAAK,SACL,UAAU,+HAEV,mBAAC,QAAK,KAAMT,GAAmB,OAAQ,UAAU,oDAAoD,EACvG,GACF,EACCG,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />\n </Button>\n </div>\n {error && (\n <Text as=\"p\" html={error} className=\"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n )}\n <div className=\"mt-4 flex flex-col gap-2\">\n <div className=\"flex items-start gap-2\">\n <Checkbox\n name=\"terms\"\n id=\"terms\"\n size=\"base\"\n onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"terms\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.terms}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {termsError && <Text as=\"p\" html={termsError} className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\" />}\n <div className=\"flex items-start gap-2\">\n <Checkbox\n name=\"news\"\n id=\"news\"\n size=\"base\"\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"news\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.news}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {success && (\n <Text\n as=\"p\"\n html={subscribeMetadata?.successMessage}\n className=\"text-base text-brand-0 font-bold leading-[1.2]\"\n />\n )}\n </div>\n </form>\n </div>\n )\n}\n\nexport default Subscribe\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Subscribe_exports", "__export", "Subscribe_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "Subscribe", "subscribeMetadata", "onSubmit", "className", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as O,jsx as e,jsxs as l}from"react/jsx-runtime";import{useEffect as b,useMemo as M,useState as
|
|
1
|
+
import{Fragment as O,jsx as e,jsxs as l}from"react/jsx-runtime";import{useEffect as b,useMemo as M,useState as k}from"react";import{Picture as m,Text as n,Container as C,Link as c}from"../../components/index.js";import F from"../Subscribe/index.js";import{FooterNavigationBlockType as u}from"./types.js";import{AddIcon as N,SubtractIcon as g,ArrowRightIcon as D,CountryIcon as A}from"./icons/index.js";import{useMediaQuery as y}from"react-responsive";import{cn as f}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";const E=({data:{footerNavigation:s}={},currentCountry:d,event:t})=>{const[o,r]=k(!1),x=y({query:"(max-width: 1440px)"});b(()=>{r(x)},[x]);const p=M(()=>s?.footerBlocks?.find(a=>a?.blockType===u.Brand)?.country||{},[s]);return l(C,{childClassName:"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8",children:[e(n,{html:s?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),s?.footerBlocks?.map(a=>{if(a?.blockType===u.Signup)return e(S,{data:a,onSubmit:t?.signup});if(a?.blockType===u.Brand)return e(z,{data:a,isMobile:o,event:t,currentCountry:d});if(a?.blockType===u.Main)return e(T,{data:{...a,country:p},event:t,isMobile:o,currentCountry:d})})]})},S=({data:s,onSubmit:d})=>l("div",{className:"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8",children:[e(F,{subscribeMetadata:s?.signup,className:"desktop:flex-[744]",onSubmit:d}),e("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),l("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[l("div",{className:"flex-1",children:[e(n,{html:s?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:s?.enjoy?.enjoys?.map(t=>l("div",{className:"flex-start flex gap-2",children:[e(m,{source:t?.icon?.url,alt:t?.icon?.alt,className:"size-5 shrink-0"}),e(n,{html:t?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})]},t?.id))})]}),e("div",{className:"w-px bg-[#3D3E3F] hidden desktop:block"}),l("div",{className:"flex-1",children:[e(n,{html:s?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex flex-col gap-2",children:s?.benefit?.benefits?.map(t=>e(c,{href:t?.link,asChild:!t?.link,className:"no-underline",children:e(n,{html:t?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},t?.id))})]})]})]}),T=({data:s,event:d,isMobile:t,currentCountry:o})=>{const[r,x]=k(!1),{services:p,mainNav:a,country:h}=s;return l("div",{className:"flex flex-col gap-8",children:[l("div",{className:f({"desktop:gap-16 flex":p?.download?.title}),children:[l("div",{className:f("w-full",{"desktop:flex-[1260]":p?.download?.title}),children:[e(n,{html:p?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:f("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(i=>l("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[e(m,{source:i?.icon?.url,alt:i?.icon?.alt,className:"size-5 shrink-0"}),e(c,{href:i?.link,asChild:!i?.link,className:"no-underline",children:e(n,{html:i?.label,className:"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]"})})]},i?.id))})]}),e(w,{className:f({"desktop:flex-[404] hidden desktop:block":p?.download?.title}),title:p?.download?.title,apps:p?.download?.apps})]}),e("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]"}),l("div",{className:"desktop:grid grid-cols-4 gap-4",children:[e(v,{title:a?.products?.title,lists:a?.products?.products}),e(v,{title:a?.explore?.title,lists:a?.explore?.explores}),e(v,{title:a?.support?.title,lists:a?.support?.supports}),l("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[l("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[e(n,{as:"p",html:a?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white"}),t&&e("button",{onClick:()=>x(!r),children:r?e(g,{width:20,height:20}):e(N,{width:20,height:20})})]}),(r&&t||!t)&&e("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",children:a?.contact?.contacts?.map(i=>l("div",{className:"flex items-start gap-2",children:[e(m,{source:i?.icon?.url,alt:i?.icon?.alt,className:"size-5 shrink-0"}),e(c,{href:i?.link,className:"no-underline",children:e(n,{html:i?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})})]},i?.id))}),e(B,{country:o||h,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:t,onChangeCountry:d?.country}),e("div",{className:"desktop:hidden mt-8",children:e(w,{title:p?.download?.title,apps:p?.download?.apps})}),!!a?.socials?.length&&e("div",{className:"mt-8 flex items-center gap-2",children:a?.socials?.map(i=>e(c,{href:i?.link,children:e(m,{source:i?.icon?.url,alt:i?.icon?.alt,className:"size-8 shrink-0"})},i?.id))}),e("div",{className:"mt-4 flex flex-wrap gap-2",children:a?.payment?.map(i=>e(c,{href:i?.link,children:e(m,{source:i?.icon?.url,alt:i?.icon?.alt,className:"h-[28px] w-[44px] shrink-0"})},i?.id))})]})]})]})},z=({data:s,isMobile:d,event:t,currentCountry:o})=>l("div",{className:"flex flex-col gap-4",children:[l("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[l("div",{className:"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4",children:[e(n,{html:s?.brand?.currentBrand,className:"text-[#B6B6BA]"}),e("div",{className:"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]"}),e("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]",children:s?.brand?.brands?.map(r=>e(c,{href:r?.link,children:e(n,{html:r?.icon,className:"text-[#B6B6BA] hover:text-white"})},r?.id))})]}),e(B,{country:o||s?.country,className:"desktop:flex-[316] desktop:block hidden mt-5",isMobile:d,onChangeCountry:t?.country})]}),e("div",{className:"h-px bg-[#3D3E3F]"}),l("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[e(n,{html:s?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:s?.policy?.policies?.map(r=>e(c,{href:r?.link,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline",children:r?.label},r?.id))})]})]}),v=({title:s,lists:d,className:t})=>{const[o,r]=k(!1),[x,p]=k(!1),a=y({query:"(max-width: 1440px)"});return b(()=>{p(a)},[a]),l("div",{className:f("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",t),children:[l("div",{className:"flex items-center justify-between",onClick:()=>r(!o),children:[e(n,{as:"p",html:s,className:"text-xl font-bold leading-[1.2] text-white"}),x&&e(O,{children:o?e(g,{width:20,height:20}):e(N,{width:20,height:20})})]}),(o&&x||!x)&&e("div",{className:"mt-4 flex flex-col gap-2",children:d?.map(h=>e(c,{href:h?.link,className:"no-underline",children:e(n,{html:h?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},h?.id))})]})},w=({title:s,apps:d,className:t})=>d?.length?l("div",{className:t,children:[e(n,{html:s,className:" text-xl font-bold leading-[1.2] text-white"}),e("div",{className:"mt-4 flex items-center gap-4",children:d?.map(o=>l("div",{className:"flex flex-col items-center gap-[6px]",children:[e(c,{href:o?.link,children:e(m,{source:o?.icon?.url,alt:o?.icon?.alt,className:"size-10 shrink-0"})}),o?.label&&e(n,{html:o?.label,className:"text-xs font-bold text-[#999999]"})]},o?.id))})]}):null,B=({country:s,isMobile:d,className:t,onChangeCountry:o})=>e("div",{className:f("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",t),onClick:()=>o?.(),children:l("div",{className:"flex items-center justify-between",children:[l("div",{className:"flex cursor-pointer items-center gap-2",children:[e(A,{width:20,height:20,className:"shrink-0"}),e(n,{as:"p",html:s?.countryName||s?.country,className:"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white"})]}),d&&e("button",{children:e(D,{width:20,height:20})})]})});var K=L(E);export{K as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({ data: { footerNavigation } = {}, currentCountry, event }: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit }: { data: any; onSubmit?: (params: any) => void }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-xl bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text\n html={services?.storeBenefits?.title}\n className=\" text-xl font-bold leading-[1.2] text-white\"\n />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "AA2BI,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({ data: { footerNavigation } = {}, currentCountry, event }: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return (\n footerNavigation?.footerBlocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)\n ?.country || {}\n )\n }, [footerNavigation])\n\n return (\n <Container childClassName=\"bg-black py-8 laptop:py-16 flex flex-col desktop:gap-16 gap-8\">\n <Text html={footerNavigation?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footerNavigation?.footerBlocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return <MarketingConversion data={block} onSubmit={event?.signup} />\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return <FooterBrand data={block} isMobile={isMobile} event={event} currentCountry={currentCountry} />\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({ data, onSubmit }: { data: any; onSubmit?: (params: any) => void }) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:rounded-2xl laptop:px-8 desktop:flex-row flex flex-col gap-8 rounded-btn bg-[#1D1D1F] px-4 py-8\">\n <Subscribe subscribeMetadata={data?.signup} className=\"desktop:flex-[744]\" onSubmit={onSubmit} />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"w-px bg-[#3D3E3F] hidden desktop:block\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={benefitItem?.link}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={reasonItem?.link} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"text-sm desktop:text-base font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text as=\"p\" html={mainNav?.contact?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={socialItem?.link} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-end desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block hidden h-[20px] w-px bg-[#B6B6BA] laptop:mb-[10px]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4 laptop:mb-[10px]\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={brandItem?.link} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden mt-5\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={policyItem?.link}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline\"\n >\n {policyItem?.label}\n </Link>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={item?.link} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "AA2BI,OA4QM,YAAAA,EA3QJ,OAAAC,EADF,QAAAC,MAAA,oBA3BJ,OAAS,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QAC7C,OAAS,WAAAC,EAAS,QAAAC,EAAM,aAAAC,EAAW,QAAAC,MAAY,4BAC/C,OAAOC,MAAe,wBAEtB,OAAS,6BAAAC,MAAiC,aAC1C,OAAS,WAAAC,EAAS,gBAAAC,EAAc,kBAAAC,EAAgB,eAAAC,MAAmB,mBACnE,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAmB,CAAC,CAAE,KAAM,CAAE,iBAAAC,CAAiB,EAAI,CAAC,EAAG,eAAAC,EAAgB,MAAAC,CAAM,IAA6B,CAC9G,KAAM,CAACC,EAAUC,CAAW,EAAInB,EAAS,EAAK,EAExCoB,EAAaT,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAEjEb,EAAU,IAAM,CACdqB,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAMC,EAAUtB,EAAQ,IAEpBgB,GAAkB,cAAc,KAAMO,GAAeA,GAAO,YAAchB,EAA0B,KAAK,GACrG,SAAW,CAAC,EAEjB,CAACS,CAAgB,CAAC,EAErB,OACElB,EAACM,EAAA,CAAU,eAAe,gEACxB,UAAAP,EAACM,EAAA,CAAK,KAAMa,GAAkB,MAAO,UAAU,mDAAmD,EACjGA,GAAkB,cAAc,IAAKO,GAAe,CACnD,GAAIA,GAAO,YAAchB,EAA0B,OACjD,OAAOV,EAAC2B,EAAA,CAAoB,KAAMD,EAAO,SAAUL,GAAO,OAAQ,EAEpE,GAAIK,GAAO,YAAchB,EAA0B,MACjD,OAAOV,EAAC4B,EAAA,CAAY,KAAMF,EAAO,SAAUJ,EAAU,MAAOD,EAAO,eAAgBD,EAAgB,EAErG,GAAIM,GAAO,YAAchB,EAA0B,KACjD,OACEV,EAAC6B,EAAA,CACC,KAAM,CAAE,GAAGH,EAAO,QAAAD,CAAQ,EAC1B,MAAOJ,EACP,SAAUC,EACV,eAAgBF,EAClB,CAGN,CAAC,GACH,CAEJ,EAQMO,EAAsB,CAAC,CAAE,KAAAG,EAAM,SAAAC,CAAS,IAE1C9B,EAAC,OAAI,UAAU,sIACb,UAAAD,EAACS,EAAA,CAAU,kBAAmBqB,GAAM,OAAQ,UAAU,qBAAqB,SAAUC,EAAU,EAC/F/B,EAAC,OAAI,UAAU,0CAA0C,EACzDC,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OAAI,UAAU,SACb,UAAAD,EAACM,EAAA,CAAK,KAAMwB,GAAM,OAAO,MAAO,UAAU,8CAA8C,EACxF9B,EAAC,OAAI,UAAU,2BACZ,SAAA8B,GAAM,OAAO,QAAQ,IAAKE,GACzB/B,EAAC,OAAwB,UAAU,wBACjC,UAAAD,EAACK,EAAA,CAAQ,OAAQ2B,GAAW,MAAM,IAAK,IAAKA,GAAW,MAAM,IAAK,UAAU,kBAAkB,EAC9FhC,EAACM,EAAA,CACC,KAAM0B,GAAW,MACjB,UAAU,oFACZ,IALQA,GAAW,EAMrB,CACD,EACH,GACF,EACAhC,EAAC,OAAI,UAAU,yCAAyC,EACxDC,EAAC,OAAI,UAAU,SACb,UAAAD,EAACM,EAAA,CAAK,KAAMwB,GAAM,SAAS,MAAO,UAAU,6CAA6C,EACzF9B,EAAC,OAAI,UAAU,2BACZ,SAAA8B,GAAM,SAAS,UAAU,IAAKG,GAC7BjC,EAACQ,EAAA,CACC,KAAMyB,GAAa,KACnB,QAAS,CAACA,GAAa,KAEvB,UAAU,eAEV,SAAAjC,EAACM,EAAA,CACC,KAAM2B,GAAa,MACnB,UAAU,oFACZ,GANKA,GAAa,EAOpB,CACD,EACH,GACF,GACF,GACF,EAaEJ,EAAe,CAAC,CACpB,KAAAC,EACA,MAAAT,EACA,SAAAC,EACA,eAAAF,CACF,IAKM,CACJ,KAAM,CAACc,EAAiBC,CAAkB,EAAI/B,EAAkB,EAAK,EAC/D,CAAE,SAAAgC,EAAU,QAAAC,EAAS,QAAAZ,CAAQ,EAAIK,EACvC,OACE7B,EAAC,OAAI,UAAU,sBACb,UAAAA,EAAC,OACC,UAAWe,EAAG,CACZ,sBAAuBoB,GAAU,UAAU,KAC7C,CAAC,EAED,UAAAnC,EAAC,OACC,UAAWe,EAAG,SAAU,CACtB,sBAAuBoB,GAAU,UAAU,KAC7C,CAAC,EAED,UAAApC,EAACM,EAAA,CAAK,KAAM8B,GAAU,eAAe,MAAO,UAAU,8CAA8C,EACpGpC,EAAC,OACC,UAAWgB,EAAG,0EAA2E,CACvF,wBAAyBoB,GAAU,UAAU,KAC/C,CAAC,EAEA,SAAAA,GAAU,eAAe,SAAS,IAAKE,GACtCrC,EAAC,OAAyB,UAAU,gEAClC,UAAAD,EAACK,EAAA,CAAQ,OAAQiC,GAAY,MAAM,IAAK,IAAKA,GAAY,MAAM,IAAK,UAAU,kBAAkB,EAChGtC,EAACQ,EAAA,CAAK,KAAM8B,GAAY,KAAM,QAAS,CAACA,GAAY,KAAM,UAAU,eAClE,SAAAtC,EAACM,EAAA,CACC,KAAMgC,GAAY,MAClB,UAAU,mEACZ,EACF,IAPQA,GAAY,EAQtB,CACD,EACH,GACF,EACAtC,EAACuC,EAAA,CACC,UAAWvB,EAAG,CACZ,0CAA2CoB,GAAU,UAAU,KACjE,CAAC,EACD,MAAOA,GAAU,UAAU,MAC3B,KAAMA,GAAU,UAAU,KAC5B,GACF,EACApC,EAAC,OAAI,UAAU,yCAAyC,EACxDC,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACwC,EAAA,CAAY,MAAOH,GAAS,UAAU,MAAO,MAAOA,GAAS,UAAU,SAAU,EAClFrC,EAACwC,EAAA,CAAY,MAAOH,GAAS,SAAS,MAAO,MAAOA,GAAS,SAAS,SAAU,EAChFrC,EAACwC,EAAA,CAAY,MAAOH,GAAS,SAAS,MAAO,MAAOA,GAAS,SAAS,SAAU,EAChFpC,EAAC,OAAI,UAAU,kEACb,UAAAA,EAAC,OAAI,UAAU,sDACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,KAAM+B,GAAS,SAAS,MAAO,UAAU,6CAA6C,EAClGf,GACCtB,EAAC,UAAO,QAAS,IAAMmC,EAAmB,CAACD,CAAe,EACvD,SAAAA,EAAkBlC,EAACY,EAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAAKZ,EAACW,EAAA,CAAQ,MAAO,GAAI,OAAQ,GAAI,EAC/F,GAEJ,GACGuB,GAAmBZ,GAAa,CAACA,IAClCtB,EAAC,OAAI,UAAU,qDACZ,SAAAqC,GAAS,SAAS,UAAU,IAAKI,GAChCxC,EAAC,OAA0B,UAAU,yBACnC,UAAAD,EAACK,EAAA,CAAQ,OAAQoC,GAAa,MAAM,IAAK,IAAKA,GAAa,MAAM,IAAK,UAAU,kBAAkB,EAClGzC,EAACQ,EAAA,CAAK,KAAMiC,GAAa,KAAM,UAAU,eACvC,SAAAzC,EAACM,EAAA,CACC,KAAMmC,GAAa,MACnB,UAAU,oFACZ,EACF,IAPQA,GAAa,EAQvB,CACD,EACH,EAEFzC,EAAC0C,EAAA,CACC,QAAStB,GAAkBK,EAC3B,UAAU,2CACV,SAAUH,EACV,gBAAiBD,GAAO,QAC1B,EACArB,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACuC,EAAA,CAAY,MAAOH,GAAU,UAAU,MAAO,KAAMA,GAAU,UAAU,KAAM,EACjF,EACC,CAAC,CAACC,GAAS,SAAS,QACnBrC,EAAC,OAAI,UAAU,+BACZ,SAAAqC,GAAS,SAAS,IAAKM,GACtB3C,EAACQ,EAAA,CAAK,KAAMmC,GAAY,KACtB,SAAA3C,EAACK,EAAA,CAAQ,OAAQsC,GAAY,MAAM,IAAK,IAAKA,GAAY,MAAM,IAAK,UAAU,kBAAkB,GAD/DA,GAAY,EAE/C,CACD,EACH,EAEF3C,EAAC,OAAI,UAAU,4BACZ,SAAAqC,GAAS,SAAS,IAAKO,GACtB5C,EAACQ,EAAA,CAAK,KAAMoC,GAAa,KACvB,SAAA5C,EAACK,EAAA,CACC,OAAQuC,GAAa,MAAM,IAC3B,IAAKA,GAAa,MAAM,IACxB,UAAU,6BACZ,GALkCA,GAAa,EAMjD,CACD,EACH,GACF,GACF,GACF,CAEJ,EAEMhB,EAAc,CAAC,CACnB,KAAAE,EACA,SAAAR,EACA,MAAAD,EACA,eAAAD,CACF,IAOInB,EAAC,OAAI,UAAU,sBACb,UAAAA,EAAC,OAAI,UAAU,kDACb,UAAAA,EAAC,OAAI,UAAU,sFACb,UAAAD,EAACM,EAAA,CAAK,KAAMwB,GAAM,OAAO,aAAc,UAAU,iBAAiB,EAClE9B,EAAC,OAAI,UAAU,kEAAkE,EACjFA,EAAC,OAAI,UAAU,mEACZ,SAAA8B,GAAM,OAAO,QAAQ,IAAKe,GACzB7C,EAACQ,EAAA,CAAK,KAAMqC,GAAW,KACrB,SAAA7C,EAACM,EAAA,CAAK,KAAMuC,GAAW,KAAM,UAAU,kCAAkC,GADzCA,GAAW,EAE7C,CACD,EACH,GACF,EACA7C,EAAC0C,EAAA,CACC,QAAStB,GAAkBU,GAAM,QACjC,UAAU,+CACV,SAAUR,EACV,gBAAiBD,GAAO,QAC1B,GACF,EACArB,EAAC,OAAI,UAAU,oBAAoB,EACnCC,EAAC,OAAI,UAAU,qFACb,UAAAD,EAACM,EAAA,CACC,KAAMwB,GAAM,WAAW,MACvB,UAAU,mEACZ,EACA9B,EAAC,OAAI,UAAU,8CACZ,SAAA8B,GAAM,QAAQ,UAAU,IAAKgB,GAC5B9C,EAACQ,EAAA,CACC,KAAMsC,GAAY,KAElB,UAAU,gFAET,SAAAA,GAAY,OAHRA,GAAY,EAInB,CACD,EACH,GACF,GACF,EAIEN,EAAc,CAAC,CAAE,MAAAO,EAAO,MAAAC,EAAO,UAAAC,CAAU,IAA2D,CACxG,KAAM,CAACf,EAAiBC,CAAkB,EAAI/B,EAAkB,EAAK,EAC/D,CAACkB,EAAUC,CAAW,EAAInB,EAAS,EAAK,EAExCoB,EAAaT,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAEjE,OAAAb,EAAU,IAAM,CACdqB,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAGbvB,EAAC,OAAI,UAAWe,EAAG,kEAAmEiC,CAAS,EAC7F,UAAAhD,EAAC,OAAI,UAAU,oCAAoC,QAAS,IAAMkC,EAAmB,CAACD,CAAe,EACnG,UAAAlC,EAACM,EAAA,CAAK,GAAG,IAAI,KAAMyC,EAAO,UAAU,6CAA6C,EAChFzB,GACCtB,EAAAD,EAAA,CAAG,SAAAmC,EAAkBlC,EAACY,EAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAAKZ,EAACW,EAAA,CAAQ,MAAO,GAAI,OAAQ,GAAI,EAAG,GAEtG,GACGuB,GAAmBZ,GAAa,CAACA,IAClCtB,EAAC,OAAI,UAAU,2BACZ,SAAAgD,GAAO,IAAKE,GACXlD,EAACQ,EAAA,CAAK,KAAM0C,GAAM,KAAqB,UAAU,eAC/C,SAAAlD,EAACM,EAAA,CACC,KAAM4C,GAAM,MACZ,UAAU,oFACZ,GAJ2BA,GAAM,EAKnC,CACD,EACH,GAEJ,CAEJ,EASMX,EAAc,CAAC,CAAE,MAAAQ,EAAO,KAAAI,EAAM,UAAAF,CAAU,IACvCE,GAAM,OAETlD,EAAC,OAAI,UAAWgD,EACd,UAAAjD,EAACM,EAAA,CAAK,KAAMyC,EAAO,UAAU,8CAA8C,EAC3E/C,EAAC,OAAI,UAAU,+BACZ,SAAAmD,GAAM,IAAKC,GACVnD,EAAC,OAAsB,UAAU,uCAC/B,UAAAD,EAACQ,EAAA,CAAK,KAAM4C,GAAS,KACnB,SAAApD,EAACK,EAAA,CAAQ,OAAQ+C,GAAS,MAAM,IAAK,IAAKA,GAAS,MAAM,IAAK,UAAU,mBAAmB,EAC7F,EACCA,GAAS,OAASpD,EAACM,EAAA,CAAK,KAAM8C,GAAS,MAAO,UAAU,oCAAoC,IAJrFA,GAAS,EAKnB,CACD,EACH,GACF,EAdwB,KAwBtBV,EAAgB,CAAC,CACrB,QAAAjB,EACA,SAAAH,EACA,UAAA2B,EACA,gBAAAI,CACF,IAOIrD,EAAC,OACC,UAAWgB,EAAG,kEAAmEiC,CAAS,EAC1F,QAAS,IAAMI,IAAkB,EAEjC,SAAApD,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,yCACb,UAAAD,EAACc,EAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,UAAU,WAAW,EACzDd,EAACM,EAAA,CACC,GAAG,IACH,KAAMmB,GAAS,aAAeA,GAAS,QACvC,UAAU,uFACZ,GACF,EACCH,GACCtB,EAAC,UACC,SAAAA,EAACa,EAAA,CAAe,MAAO,GAAI,OAAQ,GAAI,EACzC,GAEJ,EACF,EAIJ,IAAOyC,EAAQrC,EAAWC,CAAgB",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Text", "Container", "Link", "Subscribe", "FooterNavigationBlockType", "AddIcon", "SubtractIcon", "ArrowRightIcon", "CountryIcon", "useMediaQuery", "cn", "withLayout", "FooterNavigation", "footerNavigation", "currentCountry", "event", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "item", "apps", "appItem", "onChangeCountry", "FooterNavigation_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as o}from"react";import{Text as s,Checkbox as u,Button as F}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";const y=({subscribeMetadata:t,onSubmit:h,className:k})=>{const[i,n]=o(null),[d,
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as o}from"react";import{Text as s,Checkbox as u,Button as F}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";const y=({subscribeMetadata:t,onSubmit:h,className:k})=>{const[i,n]=o(null),[d,p]=o(null),[w,c]=o(!1),[x,b]=o(""),v=a=>{a.preventDefault();const r=new FormData(a.target),m=r.get("email"),f=r.get("terms"),N=r.get("news");if(!m){n(t?.emptyError);return}if(!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(m)){n(t?.formatError);return}if(!f){p(t?.termsError);return}h?.({email:m,terms:f,news:N,dealsType:t?.dealsType,onSuccess:()=>{c(!0);let B=setTimeout(()=>{c(!1),clearTimeout(B)},3e3)}})};return l("div",{className:g("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",k),children:[e("style",{jsx:!0,global:!0,children:`
|
|
2
2
|
.subscribe-component input:-webkit-autofill,
|
|
3
3
|
.subscribe-component input:-webkit-autofill:hover,
|
|
4
4
|
.subscribe-component input:-webkit-autofill:focus {
|
|
@@ -7,5 +7,5 @@ import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as o}from"reac
|
|
|
7
7
|
transition: background-color 9999s ease-in-out 0s !important;
|
|
8
8
|
caret-color: #fff;
|
|
9
9
|
}
|
|
10
|
-
`}),l("div",{className:"laptop:flex-1",children:[e(s,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),e(s,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{className:"laptop:flex-1",onSubmit:v,children:[l("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[l("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[e("input",{name:"email",onFocus:()=>n(null),value:x,onChange:a=>b(a.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),e("button",{onClick:()=>b(""),className:g("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!x}),children:"\u2715"})]}),e(F,{type:"submit",className:"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:e(s,{html:t?.button,className:"text-sm desktop:text-base font-bold leading-[1.2]"})})]}),i&&e(s,{as:"p",html:i,className:"mt-2 text-base font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"mt-4 flex flex-col gap-2",children:[l("div",{className:"flex items-start gap-2",children:[e(u,{name:"terms",id:"terms",size:"base",onCheckedChange:a=>a&&
|
|
10
|
+
`}),l("div",{className:"laptop:flex-1",children:[e(s,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),e(s,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{className:"laptop:flex-1",onSubmit:v,children:[l("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[l("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[e("input",{name:"email",onFocus:()=>n(null),value:x,onChange:a=>b(a.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),e("button",{onClick:()=>b(""),className:g("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!x}),children:"\u2715"})]}),e(F,{type:"submit",className:"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:e(s,{html:t?.button,className:"text-sm desktop:text-base font-bold leading-[1.2]"})})]}),i&&e(s,{as:"p",html:i,className:"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"mt-4 flex flex-col gap-2",children:[l("div",{className:"flex items-start gap-2",children:[e(u,{name:"terms",id:"terms",size:"base",onCheckedChange:a=>a&&p(null),className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),e("label",{htmlFor:"terms",children:e(s,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),d&&e(s,{as:"p",html:d,className:"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"flex items-start gap-2",children:[e(u,{name:"news",id:"news",size:"base",className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),e("label",{htmlFor:"news",children:e(s,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),w&&e(s,{as:"p",html:t?.successMessage,className:"text-base text-brand-0 font-bold leading-[1.2]"})]})]})]})};var A=y;export{A as default};
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />\n </Button>\n </div>\n {error && <Text as=\"p\" html={error} className=\"mt-2 text-base font-bold leading-[1.2] text-[#F84D4F]\"
|
|
5
|
-
"mappings": "AA6EM,cAAAA,EAYA,QAAAC,MAZA,oBA7EN,OAAgB,YAAAC,MAAgB,QAChC,OAAS,QAAAC,EAAM,YAAAC,EAAU,UAAAC,MAAc,4BACvC,OAAS,MAAAC,MAAU,yBASnB,MAAMC,EAAY,CAAC,CACjB,kBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAgBM,CACJ,KAAM,CAACC,EAAOC,CAAQ,EAAIV,EAAwB,IAAI,EAChD,CAACW,EAAYC,CAAa,EAAIZ,EAAwB,IAAI,EAC1D,CAACa,EAASC,CAAU,EAAId,EAAkB,EAAK,EAC/C,CAACe,EAAOC,CAAQ,EAAIhB,EAAiB,EAAE,EAEvCiB,EAAgBC,GAAwC,CAC5DA,EAAE,eAAe,EACjB,MAAMC,EAAW,IAAI,SAASD,EAAE,MAAyB,EACnDH,EAAQI,EAAS,IAAI,OAAO,EAC5BC,EAAQD,EAAS,IAAI,OAAO,EAC5BE,EAAOF,EAAS,IAAI,MAAM,EAChC,GAAI,CAACJ,EAAO,CACVL,EAASJ,GAAmB,UAAU,EACtC,MACF,CACA,GAAI,CAAC,mDAAmD,KAAKS,CAAe,EAAG,CAC7EL,EAASJ,GAAmB,WAAW,EACvC,MACF,CACA,GAAI,CAACc,EAAO,CACVR,EAAcN,GAAmB,UAAU,EAC3C,MACF,CACAC,IAAW,CACT,MAAOQ,EACP,MAAOK,EACP,KAAMC,EACN,UAAWf,GAAmB,UAC9B,UAAW,IAAM,CACfQ,EAAW,EAAI,EACf,IAAIQ,EAAQ,WAAW,IAAM,CAC3BR,EAAW,EAAK,EAChB,aAAaQ,CAAK,CACpB,EAAG,GAAI,CACT,CACF,CAAC,CACH,EAEA,OACEvB,EAAC,OACC,UAAWK,EACT,sGACAI,CACF,EAEA,UAAAV,EAAC,SAAM,IAAG,GAAC,OAAM,GACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUH,EACAC,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CACC,GAAG,IACH,KAAMK,GAAmB,MACzB,UAAU,+DACZ,EACAR,EAACG,EAAA,CACC,GAAG,IACH,KAAMK,GAAmB,SACzB,UAAU,oFACZ,GACF,EACAP,EAAC,QAAK,UAAU,gBAAgB,SAAUkB,EACxC,UAAAlB,EAAC,OAAI,UAAU,8CACb,UAAAA,EAAC,OAAI,UAAU,mEACb,UAAAD,EAAC,SACC,KAAK,QACL,QAAS,IAAMY,EAAS,IAAI,EAC5B,MAAOK,EACP,SAAUG,GAAKF,EAASE,EAAE,OAAO,KAAK,EACtC,YAAaZ,GAAmB,YAChC,UAAU,kJACZ,EACAR,EAAC,UACC,QAAS,IAAMkB,EAAS,EAAE,EAC1B,UAAWZ,EAAG,8EAA+E,CAC3F,OAAQ,CAACW,CACX,CAAC,EACF,kBAED,GACF,EACAjB,EAACK,EAAA,CACC,KAAK,SACL,UAAU,+HAEV,SAAAL,EAACG,EAAA,CAAK,KAAMK,GAAmB,OAAQ,UAAU,oDAAoD,EACvG,GACF,EACCG,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n subscribeMetadata,\n onSubmit,\n className,\n}: {\n subscribeMetadata: any\n onSubmit?: ({\n email,\n terms,\n news,\n dealsType,\n onSuccess,\n }: {\n email: string\n terms: string\n news: string\n dealsType?: string\n onSuccess?: () => void\n }) => void\n className?: string\n}) => {\n const [error, setError] = useState<string | null>(null)\n const [termsError, setTermsError] = useState<string | null>(null)\n const [success, setSuccess] = useState<boolean>(false)\n const [email, setEmail] = useState<string>('')\n\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault()\n const formData = new FormData(e.target as HTMLFormElement)\n const email = formData.get('email')\n const terms = formData.get('terms')\n const news = formData.get('news')\n if (!email) {\n setError(subscribeMetadata?.emptyError)\n return\n }\n if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n setError(subscribeMetadata?.formatError)\n return\n }\n if (!terms) {\n setTermsError(subscribeMetadata?.termsError)\n return\n }\n onSubmit?.({\n email: email as string,\n terms: terms as string,\n news: news as string,\n dealsType: subscribeMetadata?.dealsType,\n onSuccess: () => {\n setSuccess(true)\n let timer = setTimeout(() => {\n setSuccess(false)\n clearTimeout(timer)\n }, 3000)\n },\n })\n }\n\n return (\n <div\n className={cn(\n 'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n className\n )}\n >\n <style jsx global>\n {`\n .subscribe-component input:-webkit-autofill,\n .subscribe-component input:-webkit-autofill:hover,\n .subscribe-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #fff !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #fff;\n }\n `}\n </style>\n <div className=\"laptop:flex-1\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.title}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n />\n <Text\n as=\"p\"\n html={subscribeMetadata?.subtitle}\n className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n />\n </div>\n <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n <input\n name=\"email\"\n onFocus={() => setError(null)}\n value={email}\n onChange={e => setEmail(e.target.value)}\n placeholder={subscribeMetadata?.placeholder}\n className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n />\n <button\n onClick={() => setEmail('')}\n className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n hidden: !email,\n })}\n >\n \u2715\n </button>\n </div>\n <Button\n type=\"submit\"\n className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n >\n <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />\n </Button>\n </div>\n {error && (\n <Text as=\"p\" html={error} className=\"mt-2 laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n )}\n <div className=\"mt-4 flex flex-col gap-2\">\n <div className=\"flex items-start gap-2\">\n <Checkbox\n name=\"terms\"\n id=\"terms\"\n size=\"base\"\n onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"terms\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.terms}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {termsError && <Text as=\"p\" html={termsError} className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\" />}\n <div className=\"flex items-start gap-2\">\n <Checkbox\n name=\"news\"\n id=\"news\"\n size=\"base\"\n className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n />\n <label htmlFor=\"news\">\n <Text\n as=\"p\"\n html={subscribeMetadata?.news}\n className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n />\n </label>\n </div>\n {success && (\n <Text\n as=\"p\"\n html={subscribeMetadata?.successMessage}\n className=\"text-base text-brand-0 font-bold leading-[1.2]\"\n />\n )}\n </div>\n </form>\n </div>\n )\n}\n\nexport default Subscribe\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "Text", "Checkbox", "Button", "cn", "Subscribe", "subscribeMetadata", "onSubmit", "className", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked", "Subscribe_default"]
|
|
7
7
|
}
|