@anker-in/campaign-ui 0.4.5-beta.4 → 0.4.5-beta.5
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/components/credits/creditsBenefits/index.js +2 -3
- package/dist/cjs/components/credits/creditsBenefits/index.js.map +2 -2
- package/dist/esm/components/credits/creditsBenefits/index.js +2 -3
- package/dist/esm/components/credits/creditsBenefits/index.js.map +2 -2
- package/package.json +1 -1
- package/src/components/credits/creditsBenefits/index.tsx +1 -2
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";var B=Object.create;var
|
|
2
|
-
</div>`}},children:e.benefits.map((
|
|
3
|
-
[&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),t&&(0,o.jsx)("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:l=>l.key==="Escape"&&n(null)})]})};
|
|
1
|
+
"use strict";var B=Object.create;var l=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,i)=>{for(var t in i)l(e,t,{get:i[t],enumerable:!0})},u=(e,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of x(i))!k.call(e,a)&&a!==t&&l(e,a,{get:()=>i[a],enumerable:!(n=w(i,a))||n.enumerable});return e};var h=(e,i,t)=>(t=e!=null?B(I(e)):{},u(i||!e||!e.__esModule?l(t,"default",{value:e,enumerable:!0}):t,e)),_=e=>u(l({},"__esModule",{value:!0}),e);var z={};N(z,{CreditsBenefits:()=>S});module.exports=_(z);var o=require("react/jsx-runtime"),y=require("swiper/css"),D=require("swiper/css/grid"),G=require("swiper/css/pagination"),d=require("@anker-in/headless-ui"),C=require("react"),m=require("swiper/modules"),c=require("swiper/react"),g=h(require("./BenefitItem")),b=require("../context/provider"),p=require("@anker-in/lib");const S=({copy:e,id:i})=>{const[t,n]=(0,C.useState)(null),{profile:a,gtm:v}=(0,b.useCreditsContext)(),f=({item:s,index:r})=>{(0,p.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:a?.activated?"active":"not active",event_parameters:{page_group:v.pageGroup,position:e.title,button_name:s.text,info:""}}),t===r?n(null):(n(r),setTimeout(()=>{n(null)},5e3))};return(0,o.jsxs)(d.Container,{id:i,className:"!z-[30] bg-[#F5F5F7]",children:[(0,o.jsx)(d.Heading,{as:"h2",size:"4",html:e?.title}),(0,o.jsx)("div",{className:"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch",children:e.benefits.map((s,r)=>(0,o.jsx)(g.default,{item:s,handleClick:f,isNoteActive:t===r,index:r,bigIcon:e.bigIcon,cardBgColor:e.cardBgColor,cardBorderColor:e.cardBorderColor},r))}),(0,o.jsxs)("div",{className:"mt-[24px] hidden l:block",children:[(0,o.jsx)(c.Swiper,{spaceBetween:16,slidesPerView:2,slidesPerGroup:2,grid:{rows:2,fill:"row"},breakpoints:{768:{slidesPerView:3,slidesPerGroup:3}},wrapperClass:"!items-stretch",modules:[m.Grid,m.Pagination],pagination:{clickable:!0,el:"#benefits-pagination",renderBullet(s,r){return`<div class='${r} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
|
|
2
|
+
</div>`}},children:e.benefits.map((s,r)=>(0,o.jsx)(c.SwiperSlide,{className:(0,p.classNames)("!h-auto !flex",t===r&&"!z-[100]"),children:(0,o.jsx)(g.default,{item:s,handleClick:f,isNoteActive:t===r,index:r,bigIcon:e.bigIcon,cardBgColor:e.cardBgColor,cardBorderColor:e.cardBorderColor})},r))}),(0,o.jsx)("div",{id:"benefits-pagination",className:"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]"})]}),t&&(0,o.jsx)("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:s=>s.key==="Escape"&&n(null)})]})};
|
|
4
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsBenefits/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n title: string\n benefits: BenefitItemCopy[]\n bigIcon?: boolean\n cardBgColor?: string\n cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: gtm.pageGroup,\n position: copy.title,\n button_name: item.text,\n info: '',\n },\n })\n if (activeNoteIndex === index) {\n setActiveNoteIndex(null)\n } else {\n setActiveNoteIndex(index)\n setTimeout(() => {\n setActiveNoteIndex(null)\n }, 5000)\n }\n }\n\n return (\n <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch\">\n {copy.benefits.map((item, index) => (\n <BenefitItem\n key={index}\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n ))}\n </div>\n <div className=\"mt-[24px] hidden l:block\">\n <Swiper\n spaceBetween={16}\n slidesPerView={2}\n slidesPerGroup={2}\n grid={{\n rows: 2,\n fill: 'row',\n }}\n breakpoints={{\n 768: {\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n }}\n wrapperClass=\"!items-stretch\"\n modules={[Grid, Pagination]}\n pagination={{\n clickable: true,\n el: '#benefits-pagination',\n renderBullet(index, className) {\n return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n </div>`\n },\n }}\n >\n {copy.benefits.map((item, index) => (\n <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n <BenefitItem\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n <div\n id=\"benefits-pagination\"\n className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,IAAA,eAAAC,EAAAH,GAgDM,IAAAI,EAAA,6BAhDNC,EAAO,sBACPC,EAAO,2BACPC,EAAO,iCAEPC,EAAmC,iCACnCC,EAAyB,iBACzBC,EAAiC,0BACjCD,EAAoC,wBAEpCE,EAAkD,4BAClDC,EAAkC,+BAClCC,EAA0C,yBAUnC,MAAMX,EAAkB,CAAC,CAAE,KAAAY,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,KAAI,YAAwB,IAAI,EACpE,CAAE,QAAAC,EAAS,IAAAC,CAAI,KAAI,qBAAkB,EACrCC,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,IACjF,WAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBJ,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,SACE,QAAC,aAAU,GAAIF,EAAI,UAAU,uBAC3B,oBAAC,WAAQ,GAAG,KAAK,KAAK,IAAI,KAAMD,GAAM,MAAO,KAC7C,OAAC,OAAI,UAAU,+DACZ,SAAAA,EAAK,SAAS,IAAI,CAACO,EAAMC,OACxB,OAAC,EAAAC,QAAA,CAEC,KAAMF,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,KACA,QAAC,OAAI,UAAU,2BACb,oBAAC,UACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAAC,OAAM,YAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAaA,EAAOE,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAV,EAAK,SAAS,IAAI,CAACO,EAAMC,OACxB,OAAC,eAAwB,aAAW,EAAAG,YAAG,gBAAiBT,IAAoBM,GAAS,UAAU,EAC7F,mBAAC,EAAAC,QAAA,CACC,KAAMF,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,KACA,OAAC,OACC,GAAG,sBACH,UAAU
|
|
4
|
+
"sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n title: string\n benefits: BenefitItemCopy[]\n bigIcon?: boolean\n cardBgColor?: string\n cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: gtm.pageGroup,\n position: copy.title,\n button_name: item.text,\n info: '',\n },\n })\n if (activeNoteIndex === index) {\n setActiveNoteIndex(null)\n } else {\n setActiveNoteIndex(index)\n setTimeout(() => {\n setActiveNoteIndex(null)\n }, 5000)\n }\n }\n\n return (\n <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch\">\n {copy.benefits.map((item, index) => (\n <BenefitItem\n key={index}\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n ))}\n </div>\n <div className=\"mt-[24px] hidden l:block\">\n <Swiper\n spaceBetween={16}\n slidesPerView={2}\n slidesPerGroup={2}\n grid={{\n rows: 2,\n fill: 'row',\n }}\n breakpoints={{\n 768: {\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n }}\n wrapperClass=\"!items-stretch\"\n modules={[Grid, Pagination]}\n pagination={{\n clickable: true,\n el: '#benefits-pagination',\n renderBullet(index, className) {\n return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n </div>`\n },\n }}\n >\n {copy.benefits.map((item, index) => (\n <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n <BenefitItem\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n <div\n id=\"benefits-pagination\"\n className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]\"\n ></div>\n </div>\n\n {activeNoteIndex && (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"fixed inset-0 z-10\"\n onClick={() => setActiveNoteIndex(null)}\n onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,IAAA,eAAAC,EAAAH,GAgDM,IAAAI,EAAA,6BAhDNC,EAAO,sBACPC,EAAO,2BACPC,EAAO,iCAEPC,EAAmC,iCACnCC,EAAyB,iBACzBC,EAAiC,0BACjCD,EAAoC,wBAEpCE,EAAkD,4BAClDC,EAAkC,+BAClCC,EAA0C,yBAUnC,MAAMX,EAAkB,CAAC,CAAE,KAAAY,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,KAAI,YAAwB,IAAI,EACpE,CAAE,QAAAC,EAAS,IAAAC,CAAI,KAAI,qBAAkB,EACrCC,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,IACjF,WAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBJ,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,SACE,QAAC,aAAU,GAAIF,EAAI,UAAU,uBAC3B,oBAAC,WAAQ,GAAG,KAAK,KAAK,IAAI,KAAMD,GAAM,MAAO,KAC7C,OAAC,OAAI,UAAU,+DACZ,SAAAA,EAAK,SAAS,IAAI,CAACO,EAAMC,OACxB,OAAC,EAAAC,QAAA,CAEC,KAAMF,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,KACA,QAAC,OAAI,UAAU,2BACb,oBAAC,UACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAAC,OAAM,YAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAaA,EAAOE,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAV,EAAK,SAAS,IAAI,CAACO,EAAMC,OACxB,OAAC,eAAwB,aAAW,EAAAG,YAAG,gBAAiBT,IAAoBM,GAAS,UAAU,EAC7F,mBAAC,EAAAC,QAAA,CACC,KAAMF,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,KACA,OAAC,OACC,GAAG,sBACH,UAAU,iGACX,GACH,EAECN,MACC,OAAC,OACC,KAAK,SACL,SAAU,EACV,UAAU,qBACV,QAAS,IAAMC,EAAmB,IAAI,EACtC,UAAWS,GAAKA,EAAE,MAAQ,UAAYT,EAAmB,IAAI,EAC/D,GAEJ,CAEJ",
|
|
6
6
|
"names": ["creditsBenefits_exports", "__export", "CreditsBenefits", "__toCommonJS", "import_jsx_runtime", "import_css", "import_grid", "import_pagination", "import_headless_ui", "import_react", "import_modules", "import_BenefitItem", "import_provider", "import_lib", "copy", "id", "activeNoteIndex", "setActiveNoteIndex", "profile", "gtm", "handleClick", "item", "index", "BenefitItem", "className", "cn", "e"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import{jsx as r,jsxs as
|
|
2
|
-
</div>`}},children:t.benefits.map((i,e)=>r(v,{className:x("!h-auto !flex",o===e&&"!z-[100]"),children:r(
|
|
3
|
-
[&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),o&&r("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:i=>i.key==="Escape"&&n(null)})]})};export{G as CreditsBenefits};
|
|
1
|
+
import{jsx as r,jsxs as l}from"react/jsx-runtime";import"swiper/css";import"swiper/css/grid";import"swiper/css/pagination";import{Container as p,Heading as g}from"@anker-in/headless-ui";import{useState as f}from"react";import{Grid as u,Pagination as C}from"swiper/modules";import{Swiper as b,SwiperSlide as v}from"swiper/react";import a from"./BenefitItem";import{useCreditsContext as B}from"../context/provider";import{gaTrack as w,classNames as x}from"@anker-in/lib";const G=({copy:t,id:d})=>{const[o,n]=f(null),{profile:m,gtm:c}=B(),s=({item:i,index:e})=>{w({event:"ga4Event",event_name:"lp_button",member_active_status:m?.activated?"active":"not active",event_parameters:{page_group:c.pageGroup,position:t.title,button_name:i.text,info:""}}),o===e?n(null):(n(e),setTimeout(()=>{n(null)},5e3))};return l(p,{id:d,className:"!z-[30] bg-[#F5F5F7]",children:[r(g,{as:"h2",size:"4",html:t?.title}),r("div",{className:"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch",children:t.benefits.map((i,e)=>r(a,{item:i,handleClick:s,isNoteActive:o===e,index:e,bigIcon:t.bigIcon,cardBgColor:t.cardBgColor,cardBorderColor:t.cardBorderColor},e))}),l("div",{className:"mt-[24px] hidden l:block",children:[r(b,{spaceBetween:16,slidesPerView:2,slidesPerGroup:2,grid:{rows:2,fill:"row"},breakpoints:{768:{slidesPerView:3,slidesPerGroup:3}},wrapperClass:"!items-stretch",modules:[u,C],pagination:{clickable:!0,el:"#benefits-pagination",renderBullet(i,e){return`<div class='${e} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
|
|
2
|
+
</div>`}},children:t.benefits.map((i,e)=>r(v,{className:x("!h-auto !flex",o===e&&"!z-[100]"),children:r(a,{item:i,handleClick:s,isNoteActive:o===e,index:e,bigIcon:t.bigIcon,cardBgColor:t.cardBgColor,cardBorderColor:t.cardBorderColor})},e))}),r("div",{id:"benefits-pagination",className:"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]"})]}),o&&r("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:i=>i.key==="Escape"&&n(null)})]})};export{G as CreditsBenefits};
|
|
4
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsBenefits/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n title: string\n benefits: BenefitItemCopy[]\n bigIcon?: boolean\n cardBgColor?: string\n cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: gtm.pageGroup,\n position: copy.title,\n button_name: item.text,\n info: '',\n },\n })\n if (activeNoteIndex === index) {\n setActiveNoteIndex(null)\n } else {\n setActiveNoteIndex(index)\n setTimeout(() => {\n setActiveNoteIndex(null)\n }, 5000)\n }\n }\n\n return (\n <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch\">\n {copy.benefits.map((item, index) => (\n <BenefitItem\n key={index}\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n ))}\n </div>\n <div className=\"mt-[24px] hidden l:block\">\n <Swiper\n spaceBetween={16}\n slidesPerView={2}\n slidesPerGroup={2}\n grid={{\n rows: 2,\n fill: 'row',\n }}\n breakpoints={{\n 768: {\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n }}\n wrapperClass=\"!items-stretch\"\n modules={[Grid, Pagination]}\n pagination={{\n clickable: true,\n el: '#benefits-pagination',\n renderBullet(index, className) {\n return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n </div>`\n },\n }}\n >\n {copy.benefits.map((item, index) => (\n <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n <BenefitItem\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n <div\n id=\"benefits-pagination\"\n className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active
|
|
5
|
-
"mappings": "AAgDM,cAAAA,EAeA,QAAAC,MAfA,oBAhDN,MAAO,aACP,MAAO,kBACP,MAAO,wBAEP,OAAS,aAAAC,EAAW,WAAAC,MAAe,wBACnC,OAAS,YAAAC,MAAgB,QACzB,OAAS,QAAAC,EAAM,cAAAC,MAAkB,iBACjC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAOC,MAA2C,gBAClD,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,WAAAC,EAAS,cAAcC,MAAU,gBAUnC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,EAAIb,EAAwB,IAAI,EACpE,CAAE,QAAAc,EAAS,IAAAC,CAAI,EAAIT,EAAkB,EACrCU,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBO,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,OACEhB,EAACC,EAAA,CAAU,GAAIa,EAAI,UAAU,uBAC3B,UAAAf,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,UAAU,+DACZ,SAAAc,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACS,EAAA,CAEC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,EACArB,EAAC,OAAI,UAAU,2BACb,UAAAD,EAACO,EAAA,CACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAACF,EAAMC,CAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAagB,EAAOC,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAT,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACQ,EAAA,CAAwB,UAAWI,EAAG,gBAAiBI,IAAoBM,GAAS,UAAU,EAC7F,SAAAtB,EAACS,EAAA,CACC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,EACAtB,EAAC,OACC,GAAG,sBACH,UAAU
|
|
4
|
+
"sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n title: string\n benefits: BenefitItemCopy[]\n bigIcon?: boolean\n cardBgColor?: string\n cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: gtm.pageGroup,\n position: copy.title,\n button_name: item.text,\n info: '',\n },\n })\n if (activeNoteIndex === index) {\n setActiveNoteIndex(null)\n } else {\n setActiveNoteIndex(index)\n setTimeout(() => {\n setActiveNoteIndex(null)\n }, 5000)\n }\n }\n\n return (\n <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch\">\n {copy.benefits.map((item, index) => (\n <BenefitItem\n key={index}\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n ))}\n </div>\n <div className=\"mt-[24px] hidden l:block\">\n <Swiper\n spaceBetween={16}\n slidesPerView={2}\n slidesPerGroup={2}\n grid={{\n rows: 2,\n fill: 'row',\n }}\n breakpoints={{\n 768: {\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n }}\n wrapperClass=\"!items-stretch\"\n modules={[Grid, Pagination]}\n pagination={{\n clickable: true,\n el: '#benefits-pagination',\n renderBullet(index, className) {\n return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n </div>`\n },\n }}\n >\n {copy.benefits.map((item, index) => (\n <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n <BenefitItem\n item={item}\n handleClick={handleClick}\n isNoteActive={activeNoteIndex === index}\n index={index}\n bigIcon={copy.bigIcon}\n cardBgColor={copy.cardBgColor}\n cardBorderColor={copy.cardBorderColor}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n <div\n id=\"benefits-pagination\"\n className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]\"\n ></div>\n </div>\n\n {activeNoteIndex && (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"fixed inset-0 z-10\"\n onClick={() => setActiveNoteIndex(null)}\n onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAgDM,cAAAA,EAeA,QAAAC,MAfA,oBAhDN,MAAO,aACP,MAAO,kBACP,MAAO,wBAEP,OAAS,aAAAC,EAAW,WAAAC,MAAe,wBACnC,OAAS,YAAAC,MAAgB,QACzB,OAAS,QAAAC,EAAM,cAAAC,MAAkB,iBACjC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAOC,MAA2C,gBAClD,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,WAAAC,EAAS,cAAcC,MAAU,gBAUnC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,EAAIb,EAAwB,IAAI,EACpE,CAAE,QAAAc,EAAS,IAAAC,CAAI,EAAIT,EAAkB,EACrCU,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBO,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,OACEhB,EAACC,EAAA,CAAU,GAAIa,EAAI,UAAU,uBAC3B,UAAAf,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,UAAU,+DACZ,SAAAc,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACS,EAAA,CAEC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,EACArB,EAAC,OAAI,UAAU,2BACb,UAAAD,EAACO,EAAA,CACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAACF,EAAMC,CAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAagB,EAAOC,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAT,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACQ,EAAA,CAAwB,UAAWI,EAAG,gBAAiBI,IAAoBM,GAAS,UAAU,EAC7F,SAAAtB,EAACS,EAAA,CACC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,EACAtB,EAAC,OACC,GAAG,sBACH,UAAU,iGACX,GACH,EAECgB,GACChB,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAU,qBACV,QAAS,IAAMiB,EAAmB,IAAI,EACtC,UAAWO,GAAKA,EAAE,MAAQ,UAAYP,EAAmB,IAAI,EAC/D,GAEJ,CAEJ",
|
|
6
6
|
"names": ["jsx", "jsxs", "Container", "Heading", "useState", "Grid", "Pagination", "Swiper", "SwiperSlide", "BenefitItem", "useCreditsContext", "gaTrack", "cn", "CreditsBenefits", "copy", "id", "activeNoteIndex", "setActiveNoteIndex", "profile", "gtm", "handleClick", "item", "index", "className", "e"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -103,8 +103,7 @@ export const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?:
|
|
|
103
103
|
</Swiper>
|
|
104
104
|
<div
|
|
105
105
|
id="benefits-pagination"
|
|
106
|
-
className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active
|
|
107
|
-
[&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full"
|
|
106
|
+
className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]"
|
|
108
107
|
></div>
|
|
109
108
|
</div>
|
|
110
109
|
|