@anker-in/campaign-ui 0.2.10-beta.17 → 0.2.10-beta.19
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/creditsBanner/index.js +1 -1
- package/dist/cjs/components/credits/creditsBanner/index.js.map +2 -2
- package/dist/cjs/components/credits/creditsBenefits/benefitItem.js +1 -1
- package/dist/cjs/components/credits/creditsBenefits/benefitItem.js.map +2 -2
- package/dist/cjs/components/credits/creditsBenefits/index.js +3 -3
- package/dist/cjs/components/credits/creditsBenefits/index.js.map +2 -2
- package/dist/cjs/components/credits/creditsInfoCard/index.js +1 -1
- package/dist/cjs/components/credits/creditsInfoCard/index.js.map +2 -2
- package/dist/cjs/components/credits/modal/MyRewardsModal.js +1 -1
- package/dist/cjs/components/credits/modal/MyRewardsModal.js.map +3 -3
- package/dist/cjs/components/credits/modal/activitiesModal.js +1 -1
- package/dist/cjs/components/credits/modal/activitiesModal.js.map +2 -2
- package/dist/cjs/components/credits/modal/loadingDots.d.ts +2 -1
- package/dist/cjs/components/credits/modal/loadingDots.js +1 -1
- package/dist/cjs/components/credits/modal/loadingDots.js.map +3 -3
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/credits/creditsBanner/index.js +1 -1
- package/dist/esm/components/credits/creditsBanner/index.js.map +2 -2
- package/dist/esm/components/credits/creditsBenefits/benefitItem.js +1 -1
- package/dist/esm/components/credits/creditsBenefits/benefitItem.js.map +2 -2
- package/dist/esm/components/credits/creditsBenefits/index.js +3 -3
- package/dist/esm/components/credits/creditsBenefits/index.js.map +2 -2
- package/dist/esm/components/credits/creditsInfoCard/index.js +1 -1
- package/dist/esm/components/credits/creditsInfoCard/index.js.map +2 -2
- package/dist/esm/components/credits/modal/MyRewardsModal.js +1 -1
- package/dist/esm/components/credits/modal/MyRewardsModal.js.map +3 -3
- package/dist/esm/components/credits/modal/activitiesModal.js +1 -1
- package/dist/esm/components/credits/modal/activitiesModal.js.map +3 -3
- package/dist/esm/components/credits/modal/loadingDots.d.ts +2 -1
- package/dist/esm/components/credits/modal/loadingDots.js +1 -1
- package/dist/esm/components/credits/modal/loadingDots.js.map +3 -3
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/credits/creditsBanner/index.tsx +1 -1
- package/src/components/credits/creditsBenefits/benefitItem.tsx +1 -1
- package/src/components/credits/creditsBenefits/index.tsx +3 -3
- package/src/components/credits/creditsInfoCard/index.tsx +2 -2
- package/src/components/credits/modal/MyRewardsModal.tsx +73 -69
- package/src/components/credits/modal/activitiesModal.tsx +50 -47
- package/src/components/credits/modal/loadingDots.tsx +9 -7
- package/tailwind.config.ts +10 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as I,jsx as i,jsxs as l}from"react/jsx-runtime";import{Button as s,Container as p,Heading as d,Picture as c,Text as u}from"@anker-in/headless-ui";import f from"classnames";import{useCreditsContext as x}from"../context/provider";function C({copy:t}){const{profile:e,openSignInPopup:r,openSignUpPopup:o}=x(),n=e?Object.keys(e).length!==0:!1,m=e?.first_name?e?.first_name+" "+e?.last_name:e?.email?.split("@")[0],a=g=>{g==="primary"?o():r()};return i(I,{children:l("div",{className:" relative w-full",children:[i(c,{className:"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]",source:`${t.pcImg?.url}, ${t.laptopImg?.url} 1024, ${t.mobileImg?.url} 768`,alt:t.pcImg?.alt,loading:"eager"}),n&&i("div",{className:"absolute inset-0 ",style:{background:"linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)"}}),i(p,{className:"l:h-auto !absolute inset-0 mx-auto grid h-full",asChild:!0,children:i("div",{className:"grid grid-cols-12",children:l("div",{className:"l:col-span-12 l:justify-start l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]",children:[i(d,{as:"h1",size:"5",html:n?t.login.title?.replace("$name",m||""):t.unLogin.title}),i(u,{size:"3",className:"l:mt-[4px] l-xxl:text-[14px] mt-[16px]",html:n?t.login.description:t.unLogin.description}),!n&&l("div",{className:f("mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]",n&&"hidden"),children:[i(s,{variant:"secondary",size:"lg",onClick:()=>{a("primary")},children:t.joinNow}),i(s,{variant:"primary",size:"lg",onClick:()=>{a("secondary")},children:t.loginIn})]})]})})})]})})}export{C as CreditsBanner};
|
|
1
|
+
import{Fragment as I,jsx as i,jsxs as l}from"react/jsx-runtime";import{Button as s,Container as p,Heading as d,Picture as c,Text as u}from"@anker-in/headless-ui";import f from"classnames";import{useCreditsContext as x}from"../context/provider";function C({copy:t}){const{profile:e,openSignInPopup:r,openSignUpPopup:o}=x(),n=e?Object.keys(e).length!==0:!1,m=e?.first_name?e?.first_name+" "+e?.last_name:e?.email?.split("@")[0],a=g=>{g==="primary"?o():r()};return i(I,{children:l("div",{className:" relative w-full",children:[i(c,{className:"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]",source:`${t.pcImg?.url}, ${t.laptopImg?.url} 1024, ${t.mobileImg?.url} 768`,alt:t.pcImg?.alt,loading:"eager"}),n&&i("div",{className:"absolute inset-0 ",style:{background:"linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)"}}),i(p,{className:"l:h-auto !absolute inset-0 mx-auto grid h-full",asChild:!0,children:i("div",{className:"grid grid-cols-12",children:l("div",{className:"l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]",children:[i(d,{as:"h1",size:"5",html:n?t.login.title?.replace("$name",m||""):t.unLogin.title}),i(u,{size:"3",className:"l:mt-[4px] l-xxl:text-[14px] mt-[16px]",html:n?t.login.description:t.unLogin.description}),!n&&l("div",{className:f("mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]",n&&"hidden"),children:[i(s,{variant:"secondary",size:"lg",onClick:()=>{a("primary")},children:t.joinNow}),i(s,{variant:"primary",size:"lg",onClick:()=>{a("secondary")},children:t.loginIn})]})]})})})]})})}export{C as CreditsBanner};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\n\ntype Img = {\n url: string\n alt: string\n}\ntype BannerProps = {\n copy: {\n pcImg: Img\n laptopImg: Img\n mobileImg: Img\n joinNow: string\n loginIn: string\n login: {\n title: string\n description: string\n }\n unLogin: {\n title: string\n description: string\n }\n }\n}\n\nexport function CreditsBanner({ copy }: BannerProps) {\n const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()\n const isLogin = profile ? Object.keys(profile).length !== 0 : false\n\n const displayName = profile?.first_name\n ? profile?.first_name + ' ' + profile?.last_name\n : profile?.email?.split('@')[0]\n\n const handleButtonClick = (buttonType: 'primary' | 'secondary') => {\n buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()\n }\n\n return (\n <>\n <div className=\" relative w-full\">\n <Picture\n className=\"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]\"\n source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}\n alt={copy.pcImg?.alt}\n loading=\"eager\"\n ></Picture>\n {isLogin && (\n <div\n className=\"absolute inset-0 \"\n style={{\n background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',\n }}\n ></div>\n )}\n\n <Container className=\"l:h-auto !absolute inset-0 mx-auto grid h-full\" asChild>\n <div className=\"grid grid-cols-12\">\n <div className=\"l:col-span-12 l:justify-start l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]\">\n <Heading\n as=\"h1\"\n size=\"5\"\n html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}\n ></Heading>\n\n <Text\n size=\"3\"\n className=\"l:mt-[4px] l-xxl:text-[14px] mt-[16px]\"\n html={isLogin ? copy.login.description : copy.unLogin.description}\n ></Text>\n\n {!isLogin && (\n <div\n className={classNames(\n 'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',\n isLogin && 'hidden'\n )}\n >\n <Button\n variant=\"secondary\"\n size=\"lg\"\n onClick={() => {\n handleButtonClick('primary')\n }}\n >\n {copy.joinNow}\n </Button>\n <Button\n variant=\"primary\"\n size=\"lg\"\n onClick={() => {\n handleButtonClick('secondary')\n }}\n >\n {copy.loginIn}\n </Button>\n </div>\n )}\n </div>\n </div>\n </Container>\n </div>\n </>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAuCI,mBAAAA,EAEI,OAAAC,EA+BQ,QAAAC,MAjCZ,oBAvCJ,OAAS,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC1D,OAAOC,MAAgB,aACvB,OAAS,qBAAAC,MAAyB,sBAwB3B,SAASC,EAAc,CAAE,KAAAC,CAAK,EAAgB,CACnD,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,CAAgB,EAAIL,EAAkB,EAClEM,EAAUH,EAAU,OAAO,KAAKA,CAAO,EAAE,SAAW,EAAI,GAExDI,EAAcJ,GAAS,WACzBA,GAAS,WAAa,IAAMA,GAAS,UACrCA,GAAS,OAAO,MAAM,GAAG,EAAE,CAAC,EAE1BK,EAAqBC,GAAwC,CACjEA,IAAe,UAAYJ,EAAgB,EAAID,EAAgB,CACjE,EAEA,OACEZ,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACK,EAAA,CACC,UAAU,6GACV,OAAQ,GAAGK,EAAK,OAAO,GAAG,KAAKA,EAAK,WAAW,GAAG,UAAUA,EAAK,WAAW,GAAG,OAC/E,IAAKA,EAAK,OAAO,IACjB,QAAQ,QACT,EACAI,GACCd,EAAC,OACC,UAAU,oBACV,MAAO,CACL,WAAY,sEACd,EACD,EAGHA,EAACG,EAAA,CAAU,UAAU,iDAAiD,QAAO,GAC3E,SAAAH,EAAC,OAAI,UAAU,oBACb,SAAAC,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\n\ntype Img = {\n url: string\n alt: string\n}\ntype BannerProps = {\n copy: {\n pcImg: Img\n laptopImg: Img\n mobileImg: Img\n joinNow: string\n loginIn: string\n login: {\n title: string\n description: string\n }\n unLogin: {\n title: string\n description: string\n }\n }\n}\n\nexport function CreditsBanner({ copy }: BannerProps) {\n const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()\n const isLogin = profile ? Object.keys(profile).length !== 0 : false\n\n const displayName = profile?.first_name\n ? profile?.first_name + ' ' + profile?.last_name\n : profile?.email?.split('@')[0]\n\n const handleButtonClick = (buttonType: 'primary' | 'secondary') => {\n buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()\n }\n\n return (\n <>\n <div className=\" relative w-full\">\n <Picture\n className=\"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]\"\n source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}\n alt={copy.pcImg?.alt}\n loading=\"eager\"\n ></Picture>\n {isLogin && (\n <div\n className=\"absolute inset-0 \"\n style={{\n background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',\n }}\n ></div>\n )}\n\n <Container className=\"l:h-auto !absolute inset-0 mx-auto grid h-full\" asChild>\n <div className=\"grid grid-cols-12\">\n <div className=\"l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]\">\n <Heading\n as=\"h1\"\n size=\"5\"\n html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}\n ></Heading>\n\n <Text\n size=\"3\"\n className=\"l:mt-[4px] l-xxl:text-[14px] mt-[16px]\"\n html={isLogin ? copy.login.description : copy.unLogin.description}\n ></Text>\n\n {!isLogin && (\n <div\n className={classNames(\n 'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',\n isLogin && 'hidden'\n )}\n >\n <Button\n variant=\"secondary\"\n size=\"lg\"\n onClick={() => {\n handleButtonClick('primary')\n }}\n >\n {copy.joinNow}\n </Button>\n <Button\n variant=\"primary\"\n size=\"lg\"\n onClick={() => {\n handleButtonClick('secondary')\n }}\n >\n {copy.loginIn}\n </Button>\n </div>\n )}\n </div>\n </div>\n </Container>\n </div>\n </>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAuCI,mBAAAA,EAEI,OAAAC,EA+BQ,QAAAC,MAjCZ,oBAvCJ,OAAS,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC1D,OAAOC,MAAgB,aACvB,OAAS,qBAAAC,MAAyB,sBAwB3B,SAASC,EAAc,CAAE,KAAAC,CAAK,EAAgB,CACnD,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,CAAgB,EAAIL,EAAkB,EAClEM,EAAUH,EAAU,OAAO,KAAKA,CAAO,EAAE,SAAW,EAAI,GAExDI,EAAcJ,GAAS,WACzBA,GAAS,WAAa,IAAMA,GAAS,UACrCA,GAAS,OAAO,MAAM,GAAG,EAAE,CAAC,EAE1BK,EAAqBC,GAAwC,CACjEA,IAAe,UAAYJ,EAAgB,EAAID,EAAgB,CACjE,EAEA,OACEZ,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACK,EAAA,CACC,UAAU,6GACV,OAAQ,GAAGK,EAAK,OAAO,GAAG,KAAKA,EAAK,WAAW,GAAG,UAAUA,EAAK,WAAW,GAAG,OAC/E,IAAKA,EAAK,OAAO,IACjB,QAAQ,QACT,EACAI,GACCd,EAAC,OACC,UAAU,oBACV,MAAO,CACL,WAAY,sEACd,EACD,EAGHA,EAACG,EAAA,CAAU,UAAU,iDAAiD,QAAO,GAC3E,SAAAH,EAAC,OAAI,UAAU,oBACb,SAAAC,EAAC,OAAI,UAAU,qHACb,UAAAD,EAACI,EAAA,CACC,GAAG,KACH,KAAK,IACL,KAAMU,EAAUJ,EAAK,MAAM,OAAO,QAAQ,QAASK,GAAe,EAAE,EAAIL,EAAK,QAAQ,MACtF,EAEDV,EAACM,EAAA,CACC,KAAK,IACL,UAAU,yCACV,KAAMQ,EAAUJ,EAAK,MAAM,YAAcA,EAAK,QAAQ,YACvD,EAEA,CAACI,GACAb,EAAC,OACC,UAAWM,EACT,4DACAO,GAAW,QACb,EAEA,UAAAd,EAACE,EAAA,CACC,QAAQ,YACR,KAAK,KACL,QAAS,IAAM,CACbc,EAAkB,SAAS,CAC7B,EAEC,SAAAN,EAAK,QACR,EACAV,EAACE,EAAA,CACC,QAAQ,UACR,KAAK,KACL,QAAS,IAAM,CACbc,EAAkB,WAAW,CAC/B,EAEC,SAAAN,EAAK,QACR,GACF,GAEJ,EACF,EACF,GACF,EACF,CAEJ",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Button", "Container", "Heading", "Picture", "Text", "classNames", "useCreditsContext", "CreditsBanner", "copy", "profile", "openSignInPopup", "openSignUpPopup", "isLogin", "displayName", "handleButtonClick", "buttonType"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as
|
|
1
|
+
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Heading as r,Picture as x,Text as l}from"@anker-in/headless-ui";import{cn as s}from"../../../helpers/utils";import p from"./iconInfo";const m=({item:e,handleClick:a,isNoteActive:n,index:d})=>t("div",{className:"relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",style:{background:"linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)"},children:o("div",{className:"flex flex-col",children:[t(x,{className:"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0",alt:e.icon?.alt,source:e.icon?.url}),o("div",{className:"flex items-center",children:[t(r,{html:e.text,size:"2",className:"break-all"}),e.note&&o("div",{role:"button",tabIndex:0,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&i.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>a({item:e,index:d}),children:[t(p,{}),t("div",{className:s("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",n?"block":"hidden"),children:o("div",{className:"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",children:[t(l,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),t("div",{className:"absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),e.tag&&t(l,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})});var v=m;export{v as default};
|
|
2
2
|
//# sourceMappingURL=benefitItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsBenefits/benefitItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { cn } from '../../../helpers/utils'\nimport IconInfo from './iconInfo'\n\nexport interface BenefitItemCopy {\n icon: {\n alt: string\n url: string\n }\n text: string\n note?: string\n tag?: string\n}\nconst BenefitItem = ({\n item,\n handleClick,\n isNoteActive,\n index,\n}: {\n item: BenefitItemCopy\n handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n isNoteActive: boolean\n index: number\n}) => {\n return (\n <div\n className=\"relative
|
|
5
|
-
"mappings": "AAgCQ,cAAAA,EA0BQ,QAAAC,MA1BR,oBAhCR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAc,aAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,CACF,IAOIX,EAAC,OACC,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { cn } from '../../../helpers/utils'\nimport IconInfo from './iconInfo'\n\nexport interface BenefitItemCopy {\n icon: {\n alt: string\n url: string\n }\n text: string\n note?: string\n tag?: string\n}\nconst BenefitItem = ({\n item,\n handleClick,\n isNoteActive,\n index,\n}: {\n item: BenefitItemCopy\n handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n isNoteActive: boolean\n index: number\n}) => {\n return (\n <div\n className=\"relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]\"\n style={{\n background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',\n }}\n >\n <div className=\"flex flex-col\">\n <Picture\n className=\"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0\"\n alt={item.icon?.alt}\n source={item.icon?.url}\n />\n <div className=\"flex items-center\">\n <Heading html={item.text} size=\"2\" className=\"break-all\" />\n {item.note && (\n <div\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n className=\"relative mb-1 ml-[4px]\"\n onClick={() => handleClick({ item, index })}\n >\n <IconInfo />\n <div\n className={cn(\n 'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n isNoteActive ? 'block' : 'hidden'\n )}\n >\n <div className=\"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow\">\n <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n <div className=\"absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n )}\n </div>\n {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n </div>\n </div>\n )\n}\n\nexport default BenefitItem\n"],
|
|
5
|
+
"mappings": "AAgCQ,cAAAA,EA0BQ,QAAAC,MA1BR,oBAhCR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAc,aAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,CACF,IAOIX,EAAC,OACC,UAAU,8HACV,MAAO,CACL,WAAY,4EACd,EAEA,SAAAC,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CACC,UAAU,6EACV,IAAKK,EAAK,MAAM,IAChB,OAAQA,EAAK,MAAM,IACrB,EACAP,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAMM,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,MACJP,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWW,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMH,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,UAAAX,EAACM,EAAA,EAAS,EACVN,EAAC,OACC,UAAWK,EACT,qGACAK,EAAe,QAAU,QAC3B,EAEA,SAAAT,EAAC,OAAI,UAAU,0FACb,UAAAD,EAACI,EAAA,CAAK,GAAG,IAAI,KAAK,IAAI,KAAMI,EAAK,KAAM,UAAU,sBAAsB,EACvER,EAAC,OAAI,UAAU,mHAAmH,GACpI,EACF,GACF,GAEJ,EACCQ,EAAK,KAAOR,EAACI,EAAA,CAAK,GAAG,MAAM,KAAMI,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,EAIJ,IAAOK,EAAQN",
|
|
6
6
|
"names": ["jsx", "jsxs", "Heading", "Picture", "Text", "cn", "IconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "e", "benefitItem_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
2
|
-
</div>`}},children:
|
|
3
|
-
[&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),
|
|
1
|
+
import{jsx as i,jsxs as a}from"react/jsx-runtime";import"swiper/css";import"swiper/css/grid";import"swiper/css/pagination";import{Container as d,Heading as c}from"@anker-in/headless-ui";import{useState as u}from"react";import{Grid as f,Pagination as g}from"swiper/modules";import{Swiper as v,SwiperSlide as b}from"swiper/react";import l from"./benefitItem";import{useCreditsContext as w}from"../context/provider";import{gaTrack as C}from"../../../helpers/track";import{cn as x}from"../../../helpers/utils";const G=({copy:s})=>{const[r,n]=u(null),{profile:p,gtm:m}=w(),o=({item:t,index:e})=>{C({event:"ga4Event",event_name:"lp_button",member_active_status:p?.activated?"active":"not active",event_parameters:{page_group:m.pageGroup,position:s.title,button_name:t.text,info:""}}),r===e?n(null):(n(e),setTimeout(()=>{n(null)},5e3))};return a(d,{id:"benefits",className:"!z-[30] bg-[#F5F5F7]",children:[i(c,{as:"h2",size:"4",html:s?.title}),i("div",{className:"mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch",children:s.benefits.map((t,e)=>i(l,{item:t,handleClick:o,isNoteActive:r===e,index:e},e))}),a("div",{className:"mt-[24px] hidden l:block",children:[i(v,{spaceBetween:16,slidesPerView:2,slidesPerGroup:2,grid:{rows:2,fill:"row"},breakpoints:{768:{slidesPerView:3,slidesPerGroup:3}},wrapperClass:"!items-stretch",modules:[f,g],pagination:{clickable:!0,el:"#benefits-pagination",renderBullet(t,e){return`<div class='${e} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
|
|
2
|
+
</div>`}},children:s.benefits.map((t,e)=>i(b,{className:x("!h-auto !flex",r===e&&"!z-[100]"),children:i(l,{item:t,handleClick:o,isNoteActive:r===e,index:e})},e))}),i("div",{id:"benefits-pagination",className:`mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515]
|
|
3
|
+
[&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),r&&i("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:t=>t.key==="Escape"&&n(null)})]})};export{G as CreditsBenefits};
|
|
4
4
|
//# 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 } from '../../../helpers/track'\nimport { cn } from '../../../helpers/utils'\n\ninterface CreditsBenefitsProps {\n copy: {\n title: string\n benefits: BenefitItemCopy[]\n }\n}\n\nexport const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n\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=\"benefits\" className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-
|
|
5
|
-
"mappings": "AAiDM,cAAAA,EAYA,QAAAC,MAZA,oBAjDN,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,MAAe,yBACxB,OAAS,MAAAC,MAAU,yBASZ,MAAMC,EAAkB,CAAC,CAAE,KAAAC,CAAK,IAA4B,CACjE,KAAM,CAACC,EAAiBC,CAAkB,EAAIZ,EAAwB,IAAI,EACpE,CAAE,QAAAa,EAAS,IAAAC,CAAI,EAAIR,EAAkB,EAErCS,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFV,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBM,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUJ,EAAK,MACf,YAAaM,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,OACEf,EAACC,EAAA,CAAU,GAAG,WAAW,UAAU,uBACjC,UAAAF,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,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 } from '../../../helpers/track'\nimport { cn } from '../../../helpers/utils'\n\ninterface CreditsBenefitsProps {\n copy: {\n title: string\n benefits: BenefitItemCopy[]\n }\n}\n\nexport const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {\n const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n const { profile, gtm } = useCreditsContext()\n\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=\"benefits\" className=\"!z-[30] bg-[#F5F5F7]\">\n <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n <div className=\"mt-[24px] grid grid-cols-4 xl:grid-cols-3 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 />\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 />\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>div]:!bg-[#151515] \n [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full\"\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": "AAiDM,cAAAA,EAYA,QAAAC,MAZA,oBAjDN,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,MAAe,yBACxB,OAAS,MAAAC,MAAU,yBASZ,MAAMC,EAAkB,CAAC,CAAE,KAAAC,CAAK,IAA4B,CACjE,KAAM,CAACC,EAAiBC,CAAkB,EAAIZ,EAAwB,IAAI,EACpE,CAAE,QAAAa,EAAS,IAAAC,CAAI,EAAIR,EAAkB,EAErCS,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFV,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBM,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUJ,EAAK,MACf,YAAaM,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,OACEf,EAACC,EAAA,CAAU,GAAG,WAAW,UAAU,uBACjC,UAAAF,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,UAAU,8EACZ,SAAAc,EAAK,SAAS,IAAI,CAACM,EAAMC,IACxBrB,EAACS,EAAA,CAEC,KAAMW,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,GAJFA,CAKP,CACD,EACH,EACApB,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,aAAae,EAAOC,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAR,EAAK,SAAS,IAAI,CAACM,EAAMC,IACxBrB,EAACQ,EAAA,CAAwB,UAAWI,EAAG,gBAAiBG,IAAoBM,GAAS,UAAU,EAC7F,SAAArB,EAACS,EAAA,CACC,KAAMW,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACT,GANgBA,CAOlB,CACD,EACH,EACArB,EAAC,OACC,GAAG,sBACH,UAAU;AAAA,mGAEX,GACH,EAECe,GACCf,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAU,qBACV,QAAS,IAAMgB,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", "activeNoteIndex", "setActiveNoteIndex", "profile", "gtm", "handleClick", "item", "index", "className", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Button as g,Container as u,Text as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Button as g,Container as u,Text as n}from"@anker-in/headless-ui";import{useCallback as y,useState as m}from"react";import{useCreditsContext as w}from"../context/provider";import{cn as l}from"../../../helpers";import{numberFormat as c}from"../context/utils";import N from"../modal/activitiesModal";import C from"../modal/MyRewardsModal";import{gaNormalClick as k}from"../../../helpers/track";function T({data:t}){const[f,p]=m(!1),[v,x]=m(!1),[r,o]=m(!1),b=y(s=>{if(k({position:"info_card",label:s.text}),s.type)switch(s.type){case"activities":p(!0);break;case"rewards":x(!0);break}},[]),{creditInfo:a}=w();return i(u,{asChild:!0,id:"infoCard",className:"-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]",children:[i("div",{className:l("mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]","l:flex-col l:items-start","min-l:px-[48px]","min-xl:px-[100px]"),style:{background:"linear-gradient(119.61deg, rgba(250, 250, 250, 0.6) 38.58%, rgba(255, 255, 255, 0.6) 63.73%, rgba(249, 252, 255, 0.6) 89.37%)",backdropFilter:"blur(8px)"},children:[i("div",{className:l("grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center"),children:[i("div",{className:"mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]",children:[e("div",{className:l("mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]"),children:t.balanceLabel}),i("div",{className:"flex items-baseline",children:[e("div",{className:l("mr-[8px] text-[36px] font-extrabold","min-md:text-[44px]","min-xl:text-[56px]"),children:a?c(a.available_credit):0}),e("div",{className:"text-[16px]",children:t?.pointUnit})]})]}),i("div",{className:"w-fit md:flex-1",children:[i("div",{className:l("mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]"),children:[e(n,{className:"text-[14px] font-bold xl:text-[16px] min-md:text-[18px]",html:t.comingSoonLabel}),t.comingSoonTips&&i("div",{className:"group relative ml-[4px] flex cursor-pointer items-start",children:[e(n,{as:"div",html:t?.infoIcon,className:"size-[18px] cursor-pointer [&_svg]:size-full",onClick:()=>{r?o(!1):(o(!0),setTimeout(()=>{o(!1)},5e3))}}),e("div",{className:l("absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]",r?"block":"hidden"),children:i("div",{className:"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",children:[e(n,{size:"2",html:t.comingSoonTips,className:"desktop:text-[18px]"}),e("div",{className:"absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),i("div",{className:"flex items-baseline ",children:[e("div",{className:l("mr-[8px] text-[36px] font-extrabold","min-l:text-[44px]","min-xl:text-[56px]"),children:a?c(a.pending_credit):0}),e("div",{className:"text-[16px]",children:t?.pointUnit})]})]})]}),e("div",{className:l("grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2"),children:t.buttons?.map((s,d)=>e(g,{variant:d===0?"secondary":"primary",size:"lg",className:"min-w-[156px] laptop:min-w-[189px]",onClick:()=>{b(s)},children:s.text},d))}),t?.myActivities&&e(N,{isOpen:f,data:t?.myActivities,onClose:()=>{p(!1)}}),t?.myRewards&&e(C,{isOpen:v,data:t?.myRewards,onClose:()=>{x(!1)}})]}),r&&e("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>o(!1),onKeyDown:s=>s.key==="Escape"&&o(!1)})]})}export{T as CreditsInfoCard};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsInfoCard/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Container, Text } from '@anker-in/headless-ui'\n\nimport { useCallback, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { cn } from '../../../helpers'\nimport { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'\nimport { type MyActivitiesMetafields } from '../modal/activitiesModal'\nimport { gaNormalClick } from '../../../helpers/track'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport interface InfoCardProps {\n data: {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n myActivities: MyActivitiesMetafields\n myRewards: MyRewardsMetafields\n }\n}\nexport function CreditsInfoCard({ data }: InfoCardProps) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n\n const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {\n gaNormalClick({ position: 'info_card', label: buttonConfig.text })\n\n if (buttonConfig.type) {\n switch (buttonConfig.type) {\n case 'activities':\n setOpenActivities(true)\n break\n case 'rewards':\n setOpenRewards(true)\n break\n }\n }\n }, [])\n\n const { creditInfo } = useCreditsContext()\n\n return (\n <Container asChild id=\"infoCard\" className=\"-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]\">\n <div\n className={cn(\n 'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',\n 'l:flex-col',\n 'min-l:px-[48px]',\n 'min-xl:px-[100px]'\n )}\n style={{\n background:\n 'linear-gradient(119.61deg, rgba(250, 250, 250, 0.6) 38.58%, rgba(255, 255, 255, 0.6) 63.73%, rgba(249, 252, 255, 0.6) 89.37%)',\n backdropFilter: 'blur(8px)',\n }}\n >\n <div\n className={cn(\n 'grid grid-cols-2 gap-[24px] font-bold md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'\n )}\n >\n <div className=\"mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]\">\n <div\n className={cn(\n 'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'\n )}\n >\n {data.balanceLabel}\n </div>\n <div className=\"flex items-baseline\">\n <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>\n {creditInfo ? numberFormat(creditInfo.available_credit) : 0}\n </div>\n <div className=\"text-[16px]\">{data?.pointUnit}</div>\n </div>\n </div>\n <div className=\"w-fit md:flex-1\">\n <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>\n <Text className=\"text-[14px] font-bold xl:text-[16px] min-md:text-[18px]\" html={data.comingSoonLabel} />\n {data.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={data?.infoIcon}\n className=\"size-[18px] cursor-pointer [&_svg]:size-full\"\n onClick={() => {\n if (hover) {\n setHover(false)\n } else {\n setHover(true)\n setTimeout(() => {\n setHover(false)\n }, 5000)\n }\n }}\n />\n <div\n className={cn(\n 'absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]',\n hover ? 'block' : 'hidden'\n )}\n >\n <div className=\"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow\">\n <Text size=\"2\" html={data.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div className=\"absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n )}\n </div>\n <div className=\"flex items-baseline \">\n <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>\n {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}\n </div>\n <div className=\"text-[16px]\">{data?.pointUnit}</div>\n </div>\n </div>\n </div>\n <div\n className={cn(\n 'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'\n )}\n >\n {data.buttons?.map((item, index) => (\n <Button\n key={index}\n variant={index === 0 ? 'secondary' : 'primary'}\n size=\"lg\"\n className=\"min-w-[156px] laptop:min-w-[189px]\"\n onClick={() => {\n handleButtonClick(item)\n }}\n >\n {item.text}\n </Button>\n ))}\n </div>\n\n {data?.myActivities && (\n <ActivitiesModal\n isOpen={openActivities}\n data={data?.myActivities}\n onClose={() => {\n setOpenActivities(false)\n }}\n />\n )}\n {data?.myRewards && (\n <MyRewardsModal\n isOpen={openRewards}\n data={data?.myRewards}\n onClose={() => {\n setOpenRewards(false)\n }}\n ></MyRewardsModal>\n )}\n </div>\n {hover && (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"fixed inset-0 z-10\"\n onClick={() => setHover(false)}\n onKeyDown={e => e.key === 'Escape' && setHover(false)}\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAsEY,cAAAA,EAOA,QAAAC,MAPA,oBAtEZ,OAAS,UAAAC,EAAQ,aAAAC,EAAW,QAAAC,MAAY,wBAExC,OAAS,eAAAC,EAAa,YAAAC,MAAgB,QACtC,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,MAAAC,MAAU,mBACnB,OAAS,gBAAAC,MAAoB,mBAC7B,OAAOC,MAAqB,2BAC5B,OAAOC,MAAkD,0BAEzD,OAAS,iBAAAC,MAAqB,yBAkBvB,SAASC,EAAgB,CAAE,KAAAC,CAAK,EAAkB,CACvD,KAAM,CAACC,EAAgBC,CAAiB,EAAIV,EAAS,EAAK,EACpD,CAACW,EAAaC,CAAc,EAAIZ,EAAS,EAAK,EAC9C,CAACa,EAAOC,CAAQ,EAAId,EAAkB,EAAK,EAE3Ce,EAAoBhB,EAAaiB,GAA+B,CAGpE,GAFAV,EAAc,CAAE,SAAU,YAAa,MAAOU,EAAa,IAAK,CAAC,EAE7DA,EAAa,KACf,OAAQA,EAAa,KAAM,CACzB,IAAK,aACHN,EAAkB,EAAI,EACtB,MACF,IAAK,UACHE,EAAe,EAAI,EACnB,KACJ,CAEJ,EAAG,CAAC,CAAC,EAEC,CAAE,WAAAK,CAAW,EAAIhB,EAAkB,EAEzC,OACEN,EAACE,EAAA,CAAU,QAAO,GAAC,GAAG,WAAW,UAAU,oEACzC,UAAAF,EAAC,OACC,UAAWO,EACT,mGACA,
|
|
4
|
+
"sourcesContent": ["import { Button, Container, Text } from '@anker-in/headless-ui'\n\nimport { useCallback, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { cn } from '../../../helpers'\nimport { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'\nimport { type MyActivitiesMetafields } from '../modal/activitiesModal'\nimport { gaNormalClick } from '../../../helpers/track'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport interface InfoCardProps {\n data: {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n myActivities: MyActivitiesMetafields\n myRewards: MyRewardsMetafields\n }\n}\nexport function CreditsInfoCard({ data }: InfoCardProps) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n\n const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {\n gaNormalClick({ position: 'info_card', label: buttonConfig.text })\n\n if (buttonConfig.type) {\n switch (buttonConfig.type) {\n case 'activities':\n setOpenActivities(true)\n break\n case 'rewards':\n setOpenRewards(true)\n break\n }\n }\n }, [])\n\n const { creditInfo } = useCreditsContext()\n\n return (\n <Container asChild id=\"infoCard\" className=\"-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]\">\n <div\n className={cn(\n 'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',\n 'l:flex-col l:items-start',\n 'min-l:px-[48px]',\n 'min-xl:px-[100px]'\n )}\n style={{\n background:\n 'linear-gradient(119.61deg, rgba(250, 250, 250, 0.6) 38.58%, rgba(255, 255, 255, 0.6) 63.73%, rgba(249, 252, 255, 0.6) 89.37%)',\n backdropFilter: 'blur(8px)',\n }}\n >\n <div\n className={cn(\n 'grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'\n )}\n >\n <div className=\"mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]\">\n <div\n className={cn(\n 'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'\n )}\n >\n {data.balanceLabel}\n </div>\n <div className=\"flex items-baseline\">\n <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>\n {creditInfo ? numberFormat(creditInfo.available_credit) : 0}\n </div>\n <div className=\"text-[16px]\">{data?.pointUnit}</div>\n </div>\n </div>\n <div className=\"w-fit md:flex-1\">\n <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>\n <Text className=\"text-[14px] font-bold xl:text-[16px] min-md:text-[18px]\" html={data.comingSoonLabel} />\n {data.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={data?.infoIcon}\n className=\"size-[18px] cursor-pointer [&_svg]:size-full\"\n onClick={() => {\n if (hover) {\n setHover(false)\n } else {\n setHover(true)\n setTimeout(() => {\n setHover(false)\n }, 5000)\n }\n }}\n />\n <div\n className={cn(\n 'absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]',\n hover ? 'block' : 'hidden'\n )}\n >\n <div className=\"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow\">\n <Text size=\"2\" html={data.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div className=\"absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n )}\n </div>\n <div className=\"flex items-baseline \">\n <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>\n {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}\n </div>\n <div className=\"text-[16px]\">{data?.pointUnit}</div>\n </div>\n </div>\n </div>\n <div\n className={cn(\n 'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'\n )}\n >\n {data.buttons?.map((item, index) => (\n <Button\n key={index}\n variant={index === 0 ? 'secondary' : 'primary'}\n size=\"lg\"\n className=\"min-w-[156px] laptop:min-w-[189px]\"\n onClick={() => {\n handleButtonClick(item)\n }}\n >\n {item.text}\n </Button>\n ))}\n </div>\n\n {data?.myActivities && (\n <ActivitiesModal\n isOpen={openActivities}\n data={data?.myActivities}\n onClose={() => {\n setOpenActivities(false)\n }}\n />\n )}\n {data?.myRewards && (\n <MyRewardsModal\n isOpen={openRewards}\n data={data?.myRewards}\n onClose={() => {\n setOpenRewards(false)\n }}\n ></MyRewardsModal>\n )}\n </div>\n {hover && (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"fixed inset-0 z-10\"\n onClick={() => setHover(false)}\n onKeyDown={e => e.key === 'Escape' && setHover(false)}\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "Button", "Container", "Text", "useCallback", "useState", "useCreditsContext", "cn", "numberFormat", "ActivitiesModal", "MyRewardsModal", "gaNormalClick", "CreditsInfoCard", "data", "openActivities", "setOpenActivities", "openRewards", "setOpenRewards", "hover", "setHover", "handleButtonClick", "buttonConfig", "creditInfo", "item", "index", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as l}from"react/jsx-runtime";import{Tabs as
|
|
1
|
+
import{jsx as i,jsxs as l}from"react/jsx-runtime";import{Tabs as E,TabsList as $,TabsTrigger as z,Picture as H}from"@anker-in/headless-ui";import P from"classnames";import K from"copy-to-clipboard";import V from"dayjs";import{useCallback as M,useMemo as p,useState as c}from"react";import{ApprovalStatus as m,AlpcConsumeType as n,RewardType as t}from"../context/const";import{CreditsModalContainer as q}from"./modalContainer";import B from"./tip";import G from"./loadingDots";import w from"../context/hooks/useMyRewards";function J({data:o,...a}){const[r,S]=c(n.Coupon),[d,R]=c(1),[u,F]=c(1),[h,g]=c(-1),_=p(()=>{const e=[];return o.couponTab&&e.push({title:o.couponTab,type:n.Coupon}),o.productTab&&e.push({title:o.productTab,type:n.Product}),e},[o.couponTab,o.productTab]),A=p(()=>({page:a.isOpen?u:0,pageSize:1e3,consumeType:n.Product}),[a.isOpen,u]),D=p(()=>({page:a.isOpen?d:0,pageSize:1e3,consumeType:n.Coupon}),[a.isOpen,d]),{myRewards:v=[],canNext:b,isLoading:O}=w(D),{myRewards:y=[],canNext:x,isLoading:I}=w(A),C=p(()=>r===n.Coupon?v.map(e=>({title:e.goods_title,value:e.consume_credits,type:t.Received,date:new Date(e.create_time*1e3),couponCode:e.coupon_code,orderNumber:""})):r===n.Product?y.map(e=>{let s=t.Pending;return e.fulfillment_status&&e.fulfillment_status!=="null"?e.fulfillment_status==="fulfilled"?s=t.Fulfilled:s=t.Unfulfilled:e.approval_status===m.Success||e.approval_status===m.DoubleConfirm?s=t.ApproveSuccess:e.approval_status===m.Failed&&(s=t.Failed),{title:e.goods_title,value:e.consume_credits,type:s,date:new Date(e.create_time*1e3),orderNumber:e.order_number,couponCode:""}}):[],[r,y,v]),T=p(()=>r===n.Coupon?b:r===n.Product?x:!1,[r,b,x]),k=p(()=>({[t.Received]:o.receivedLabel,[t.Pending]:o.pendingLabel,[t.ApproveFail]:o.failedLabel,[t.ApproveSuccess]:o.approveSuccessLabel,[t.Unfulfilled]:o.unfulfilledLabel,[t.Fulfilled]:o.fulfilledLabel,[t.Failed]:o.failedLabel}),[o]),N=p(()=>({[t.Received]:"",[t.Pending]:o.pendingTip,[t.ApproveFail]:"",[t.ApproveSuccess]:o.confirmedTip,[t.Unfulfilled]:o.processingTip,[t.Fulfilled]:o.ShippedTip,[t.Failed]:""}),[o]),U=p(()=>({[t.Received]:"#52C41A",[t.Pending]:"#999",[t.ApproveFail]:"#F84D4F",[t.ApproveSuccess]:"#999",[t.Unfulfilled]:"#999",[t.Fulfilled]:"#999",[t.Failed]:"#F84D4F"}),[]),Y=M(()=>{T&&(r===n.Coupon?R(d+1):r===n.Product&&F(u+1))},[r,u,d,T]),j=M((e,s)=>{g(s),K(e),setTimeout(()=>{g(-1)},2e3)},[]),L=r===n.Coupon?O:I;return l(q,{title:o.title,className:P("h-[800px] w-[640px]"),useAnimation:!0,animationClassName:"md:translate-y-[100vh]",scrollClassName:"md:mb-0",...a,onScrollEnd:Y,children:[i("div",{className:"",children:i(E,{align:"left",shape:"rounded",value:r.toString(),onValueChange:e=>{S(Number(e))},children:i($,{children:_.map(e=>i(z,{value:e.type.toString(),children:e.title},e.type))})})}),L&&i("div",{className:"flex h-full flex-col items-center justify-center",children:i(G,{})}),!L&&i("div",{className:"mt-[24px] overflow-auto overscroll-contain",children:C.length>0?i("div",{className:"grid gap-[18px] md:gap-[12px]",children:C.map((e,s)=>l("div",{className:"grid gap-[8px]",children:[e?.orderNumber&&l("div",{className:"text-[15px] font-semibold leading-[1.4] text-[#777]",children:[o.orderNumberLabel,": ",e.orderNumber]}),l("div",{className:"flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]",children:[l("div",{className:"grid gap-[4px]",children:[i("div",{className:"text-[16px] font-bold leading-[1.4]",children:e.title}),l("div",{className:"text-[14px] font-semibold text-[#999]",children:[o.valueLabel,": ",e.value," ",o?.pointUnit]}),l("div",{className:"text-[14px] font-semibold text-[#999]",children:[e?.couponCode?`${o?.code||"Code"}: ${e.couponCode} `:"",e?.couponCode&&i("span",{className:"cursor-pointer text-[14px] font-semibold text-brand underline",onClick:()=>{j(e.couponCode,s)},role:"button",tabIndex:0,onKeyDown:f=>{(f.key==="Enter"||f.key===" ")&&f.preventDefault()},children:h===s?o?.copied||"COPIED":o?.copy||"COPY"})]})]}),l("div",{className:"grid gap-[4px] text-right",children:[l("div",{className:P("flex items-center justify-end text-[16px] font-bold leading-[1.4]",`text-[${U[e.type]}]`),children:[i("span",{children:k[e.type]}),N[e.type]&&i(B,{info:N[e.type],index:s})]}),i("div",{className:"text-[14px] font-semibold text-[#999]",children:V(e.date).format("YYYY-MM-DD HH:mm").toString()})]})]})]},s))}):l("div",{className:"flex h-full flex-col items-center justify-center",children:[i(H,{className:"mb-[12px] w-[160px]",source:o?.emptyListImage?.url,alt:o?.emptyListImage?.alt||"empty list image"}),i("div",{className:"text-[16px] font-semibold leading-[1.4]",children:o?.emptyListLabel})]})})]})}var re=J;export{re as default};
|
|
2
2
|
//# sourceMappingURL=MyRewardsModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/modal/MyRewardsModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport clipboard from 'copy-to-clipboard'\nimport dayjs from 'dayjs'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'\nimport { CreditsModalContainer, type ModalContainerProps } from './modalContainer'\nimport Tip from './tip'\nimport LoadingDots from './loadingDots'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport interface MyRewardsMetafields {\n title: string\n orderNumberLabel: string\n valueLabel: string\n receivedLabel: string\n failedLabel: string\n approveSuccessLabel: string\n couponTab: string\n productTab: string\n pendingLabel: string\n unfulfilledLabel: string\n fulfilledLabel: string\n confirmedTip: string\n pendingTip: string\n processingTip: string\n ShippedTip: string\n emptyListLabel: string\n pointUnit: string\n code: string\n copied: string\n copy: string\n emptyListImage: {\n url: string\n alt?: string\n }\n}\ninterface MyRewardsModalProps extends ModalContainerProps {\n data: MyRewardsMetafields\n}\n\nfunction MyRewardsModal({ data, ...props }: MyRewardsModalProps) {\n const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)\n console.log('data123', data)\n\n const [couponPage, setCouponPage] = useState(1)\n const [productPage, setProductPage] = useState(1)\n const [copied, setCopied] = useState(-1)\n\n const tabs = useMemo(() => {\n const availableTabs: { title: string; type: number }[] = []\n\n if (data.couponTab) {\n availableTabs.push({\n title: data.couponTab,\n type: AlpcConsumeType.Coupon,\n })\n }\n\n if (data.productTab) {\n availableTabs.push({\n title: data.productTab,\n type: AlpcConsumeType.Product,\n })\n }\n\n return availableTabs\n }, [data.couponTab, data.productTab])\n\n const myProductRewardsOptions = useMemo(() => {\n return {\n page: props.isOpen ? productPage : 0,\n pageSize: 1000,\n consumeType: AlpcConsumeType.Product,\n }\n }, [props.isOpen, productPage])\n const myCouponRewardsOptions = useMemo(() => {\n return {\n page: props.isOpen ? couponPage : 0,\n pageSize: 1000,\n consumeType: AlpcConsumeType.Coupon,\n }\n }, [props.isOpen, couponPage])\n\n const {\n myRewards: myCouponRewards = [],\n canNext: couponCanNext,\n isLoading: couponIsLoading,\n } = useMyRewards(myCouponRewardsOptions)\n const {\n myRewards: myProductRewards = [],\n canNext: productCanNext,\n isLoading: productIsLoading,\n } = useMyRewards(myProductRewardsOptions)\n\n const list = useMemo(() => {\n if (activeTab === AlpcConsumeType.Coupon) {\n return myCouponRewards.map(item => ({\n title: item.goods_title,\n value: item.consume_credits,\n type: RewardType.Received,\n date: new Date(item.create_time * 1000),\n couponCode: item.coupon_code,\n orderNumber: '',\n }))\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return myProductRewards.map(item => {\n let type = RewardType.Pending\n\n if (item.fulfillment_status && item.fulfillment_status !== 'null') {\n // \u7269\u6D41\u72B6\u6001\n if (item.fulfillment_status === 'fulfilled') {\n type = RewardType.Fulfilled\n } else {\n type = RewardType.Unfulfilled\n }\n } else {\n if (\n item.approval_status === ApprovalStatus.Success ||\n item.approval_status === ApprovalStatus.DoubleConfirm\n ) {\n type = RewardType.ApproveSuccess\n } else if (item.approval_status === ApprovalStatus.Failed) {\n type = RewardType.Failed\n }\n }\n\n return {\n title: item.goods_title,\n value: item.consume_credits,\n type,\n date: new Date(item.create_time * 1000),\n orderNumber: item.order_number,\n couponCode: '',\n }\n })\n }\n\n return []\n }, [activeTab, myProductRewards, myCouponRewards])\n\n const canNext = useMemo(() => {\n if (activeTab === AlpcConsumeType.Coupon) {\n return couponCanNext\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return productCanNext\n }\n\n return false\n }, [activeTab, couponCanNext, productCanNext])\n\n const TypeMap = useMemo(() => {\n return {\n [RewardType.Received]: data.receivedLabel,\n [RewardType.Pending]: data.pendingLabel,\n [RewardType.ApproveFail]: data.failedLabel,\n [RewardType.ApproveSuccess]: data.approveSuccessLabel,\n [RewardType.Unfulfilled]: data.unfulfilledLabel,\n [RewardType.Fulfilled]: data.fulfilledLabel,\n [RewardType.Failed]: data.failedLabel,\n }\n }, [data])\n\n const TipMap = useMemo(() => {\n return {\n [RewardType.Received]: '',\n [RewardType.Pending]: data.pendingTip,\n [RewardType.ApproveFail]: '',\n [RewardType.ApproveSuccess]: data.confirmedTip,\n [RewardType.Unfulfilled]: data.processingTip,\n [RewardType.Fulfilled]: data.ShippedTip,\n [RewardType.Failed]: '',\n }\n }, [data])\n\n const ColorMap = useMemo(() => {\n return {\n [RewardType.Received]: '#52C41A',\n [RewardType.Pending]: '#999',\n [RewardType.ApproveFail]: '#F84D4F',\n [RewardType.ApproveSuccess]: '#999',\n [RewardType.Unfulfilled]: '#999',\n [RewardType.Fulfilled]: '#999',\n [RewardType.Failed]: '#F84D4F',\n }\n }, [])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n\n if (activeTab === AlpcConsumeType.Coupon) {\n setCouponPage(couponPage + 1)\n } else if (activeTab === AlpcConsumeType.Product) {\n setProductPage(productPage + 1)\n }\n }, [activeTab, productPage, couponPage, canNext])\n\n const handleCopy = useCallback((code: string, idx: number) => {\n setCopied(idx)\n clipboard(code)\n setTimeout(() => {\n setCopied(-1)\n }, 2000)\n }, [])\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={classNames('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"min-l:px-0 md:mb-0 md:px-0\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"px-[24px] md:px-[16px]\">\n <Tabs\n align=\"left\"\n shape=\"rounded\"\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n >\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n </div>\n\n <div className=\"mt-[24px] overflow-auto overscroll-contain px-[24px] md:px-[16px]\">\n {!list.length && !couponIsLoading && !productIsLoading && (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <Picture\n className=\"mb-[12px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"text-[16px] font-semibold leading-[1.4]\">{data?.emptyListLabel}</div>\n </div>\n )}\n {couponIsLoading ||\n (productIsLoading && (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n ))}\n <div className=\"grid gap-[18px] md:gap-[12px]\">\n {list.map((item, index) => (\n <div key={index} className=\"grid gap-[8px]\">\n {item?.orderNumber && (\n <div className=\"text-[15px] font-semibold leading-[1.4] text-[#777]\">\n {data.orderNumberLabel}: {item.orderNumber}\n </div>\n )}\n <div className=\"flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]\">\n <div className=\"grid gap-[4px]\">\n <div className=\"text-[16px] font-bold leading-[1.4]\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {data.valueLabel}: {item.value} {data?.pointUnit}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}\n {item?.couponCode && (\n <span\n className=\"cursor-pointer text-[14px] font-semibold text-brand underline\"\n onClick={() => {\n handleCopy(item.couponCode, index)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}\n </span>\n )}\n </div>\n </div>\n <div className=\"grid gap-[4px] text-right\">\n <div\n className={classNames(\n 'flex items-center justify-end text-[16px] font-bold leading-[1.4]',\n `text-[${ColorMap[item.type]}]`\n )}\n >\n <span>{TypeMap[item.type]}</span>\n {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n </CreditsModalContainer>\n )\n}\n\nexport default MyRewardsModal\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "Picture", "classNames", "clipboard", "dayjs", "useCallback", "useMemo", "useState", "ApprovalStatus", "AlpcConsumeType", "RewardType", "CreditsModalContainer", "Tip", "LoadingDots", "useMyRewards", "MyRewardsModal", "data", "props", "activeTab", "setActiveTab", "couponPage", "setCouponPage", "productPage", "setProductPage", "copied", "setCopied", "tabs", "availableTabs", "myProductRewardsOptions", "myCouponRewardsOptions", "myCouponRewards", "couponCanNext", "couponIsLoading", "myProductRewards", "productCanNext", "productIsLoading", "list", "item", "type", "canNext", "TypeMap", "TipMap", "ColorMap", "handleScrollEnd", "handleCopy", "code", "idx", "value", "tab", "index", "e", "MyRewardsModal_default"]
|
|
4
|
+
"sourcesContent": ["import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport clipboard from 'copy-to-clipboard'\nimport dayjs from 'dayjs'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'\nimport { CreditsModalContainer, type ModalContainerProps } from './modalContainer'\nimport Tip from './tip'\nimport LoadingDots from './loadingDots'\nimport useMyRewards from '../context/hooks/useMyRewards'\n\nexport interface MyRewardsMetafields {\n title: string\n orderNumberLabel: string\n valueLabel: string\n receivedLabel: string\n failedLabel: string\n approveSuccessLabel: string\n couponTab: string\n productTab: string\n pendingLabel: string\n unfulfilledLabel: string\n fulfilledLabel: string\n confirmedTip: string\n pendingTip: string\n processingTip: string\n ShippedTip: string\n emptyListLabel: string\n pointUnit: string\n code: string\n copied: string\n copy: string\n emptyListImage: {\n url: string\n alt?: string\n }\n}\ninterface MyRewardsModalProps extends ModalContainerProps {\n data: MyRewardsMetafields\n}\n\nfunction MyRewardsModal({ data, ...props }: MyRewardsModalProps) {\n const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)\n\n const [couponPage, setCouponPage] = useState(1)\n const [productPage, setProductPage] = useState(1)\n const [copied, setCopied] = useState(-1)\n\n const tabs = useMemo(() => {\n const availableTabs: { title: string; type: number }[] = []\n\n if (data.couponTab) {\n availableTabs.push({\n title: data.couponTab,\n type: AlpcConsumeType.Coupon,\n })\n }\n\n if (data.productTab) {\n availableTabs.push({\n title: data.productTab,\n type: AlpcConsumeType.Product,\n })\n }\n\n return availableTabs\n }, [data.couponTab, data.productTab])\n\n const myProductRewardsOptions = useMemo(() => {\n return {\n page: props.isOpen ? productPage : 0,\n pageSize: 1000,\n consumeType: AlpcConsumeType.Product,\n }\n }, [props.isOpen, productPage])\n const myCouponRewardsOptions = useMemo(() => {\n return {\n page: props.isOpen ? couponPage : 0,\n pageSize: 1000,\n consumeType: AlpcConsumeType.Coupon,\n }\n }, [props.isOpen, couponPage])\n\n const {\n myRewards: myCouponRewards = [],\n canNext: couponCanNext,\n isLoading: couponIsLoading,\n } = useMyRewards(myCouponRewardsOptions)\n const {\n myRewards: myProductRewards = [],\n canNext: productCanNext,\n isLoading: productIsLoading,\n } = useMyRewards(myProductRewardsOptions)\n\n const list = useMemo(() => {\n if (activeTab === AlpcConsumeType.Coupon) {\n return myCouponRewards.map(item => ({\n title: item.goods_title,\n value: item.consume_credits,\n type: RewardType.Received,\n date: new Date(item.create_time * 1000),\n couponCode: item.coupon_code,\n orderNumber: '',\n }))\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return myProductRewards.map(item => {\n let type = RewardType.Pending\n\n if (item.fulfillment_status && item.fulfillment_status !== 'null') {\n // \u7269\u6D41\u72B6\u6001\n if (item.fulfillment_status === 'fulfilled') {\n type = RewardType.Fulfilled\n } else {\n type = RewardType.Unfulfilled\n }\n } else {\n if (\n item.approval_status === ApprovalStatus.Success ||\n item.approval_status === ApprovalStatus.DoubleConfirm\n ) {\n type = RewardType.ApproveSuccess\n } else if (item.approval_status === ApprovalStatus.Failed) {\n type = RewardType.Failed\n }\n }\n\n return {\n title: item.goods_title,\n value: item.consume_credits,\n type,\n date: new Date(item.create_time * 1000),\n orderNumber: item.order_number,\n couponCode: '',\n }\n })\n }\n\n return []\n }, [activeTab, myProductRewards, myCouponRewards])\n\n const canNext = useMemo(() => {\n if (activeTab === AlpcConsumeType.Coupon) {\n return couponCanNext\n }\n\n if (activeTab === AlpcConsumeType.Product) {\n return productCanNext\n }\n\n return false\n }, [activeTab, couponCanNext, productCanNext])\n\n const TypeMap = useMemo(() => {\n return {\n [RewardType.Received]: data.receivedLabel,\n [RewardType.Pending]: data.pendingLabel,\n [RewardType.ApproveFail]: data.failedLabel,\n [RewardType.ApproveSuccess]: data.approveSuccessLabel,\n [RewardType.Unfulfilled]: data.unfulfilledLabel,\n [RewardType.Fulfilled]: data.fulfilledLabel,\n [RewardType.Failed]: data.failedLabel,\n }\n }, [data])\n\n const TipMap = useMemo(() => {\n return {\n [RewardType.Received]: '',\n [RewardType.Pending]: data.pendingTip,\n [RewardType.ApproveFail]: '',\n [RewardType.ApproveSuccess]: data.confirmedTip,\n [RewardType.Unfulfilled]: data.processingTip,\n [RewardType.Fulfilled]: data.ShippedTip,\n [RewardType.Failed]: '',\n }\n }, [data])\n\n const ColorMap = useMemo(() => {\n return {\n [RewardType.Received]: '#52C41A',\n [RewardType.Pending]: '#999',\n [RewardType.ApproveFail]: '#F84D4F',\n [RewardType.ApproveSuccess]: '#999',\n [RewardType.Unfulfilled]: '#999',\n [RewardType.Fulfilled]: '#999',\n [RewardType.Failed]: '#F84D4F',\n }\n }, [])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n\n if (activeTab === AlpcConsumeType.Coupon) {\n setCouponPage(couponPage + 1)\n } else if (activeTab === AlpcConsumeType.Product) {\n setProductPage(productPage + 1)\n }\n }, [activeTab, productPage, couponPage, canNext])\n\n const handleCopy = useCallback((code: string, idx: number) => {\n setCopied(idx)\n clipboard(code)\n setTimeout(() => {\n setCopied(-1)\n }, 2000)\n }, [])\n\n const isLoading = activeTab === AlpcConsumeType.Coupon ? couponIsLoading : productIsLoading\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={classNames('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"md:mb-0\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"\">\n <Tabs\n align=\"left\"\n shape=\"rounded\"\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n >\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n </div>\n\n {isLoading && (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <div className=\"mt-[24px] overflow-auto overscroll-contain\">\n {list.length > 0 ? (\n <div className=\"grid gap-[18px] md:gap-[12px]\">\n {list.map((item, index) => (\n <div key={index} className=\"grid gap-[8px]\">\n {item?.orderNumber && (\n <div className=\"text-[15px] font-semibold leading-[1.4] text-[#777]\">\n {data.orderNumberLabel}: {item.orderNumber}\n </div>\n )}\n <div className=\"flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]\">\n <div className=\"grid gap-[4px]\">\n <div className=\"text-[16px] font-bold leading-[1.4]\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {data.valueLabel}: {item.value} {data?.pointUnit}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}\n {item?.couponCode && (\n <span\n className=\"cursor-pointer text-[14px] font-semibold text-brand underline\"\n onClick={() => {\n handleCopy(item.couponCode, index)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}\n </span>\n )}\n </div>\n </div>\n <div className=\"grid gap-[4px] text-right\">\n <div\n className={classNames(\n 'flex items-center justify-end text-[16px] font-bold leading-[1.4]',\n `text-[${ColorMap[item.type]}]`\n )}\n >\n <span>{TypeMap[item.type]}</span>\n {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}\n </div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n ) : (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <Picture\n className=\"mb-[12px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"text-[16px] font-semibold leading-[1.4]\">{data?.emptyListLabel}</div>\n </div>\n )}\n </div>\n )}\n </CreditsModalContainer>\n )\n}\n\nexport default MyRewardsModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Tabs", "TabsList", "TabsTrigger", "Picture", "classNames", "clipboard", "dayjs", "useCallback", "useMemo", "useState", "ApprovalStatus", "AlpcConsumeType", "RewardType", "CreditsModalContainer", "Tip", "LoadingDots", "useMyRewards", "MyRewardsModal", "data", "props", "activeTab", "setActiveTab", "couponPage", "setCouponPage", "productPage", "setProductPage", "copied", "setCopied", "tabs", "availableTabs", "myProductRewardsOptions", "myCouponRewardsOptions", "myCouponRewards", "couponCanNext", "couponIsLoading", "myProductRewards", "productCanNext", "productIsLoading", "list", "item", "type", "canNext", "TypeMap", "TipMap", "ColorMap", "handleScrollEnd", "handleCopy", "code", "idx", "isLoading", "value", "tab", "index", "e", "MyRewardsModal_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as n}from"react/jsx-runtime";import{useCallback as D,useMemo as g,useState as y}from"react";import{useCreditsContext as L}from"../context/provider";import{CreditType as p,DTC_TASK_TYPE as f,TaskSubType as r,TaskType as Y}from"../context/const";import
|
|
1
|
+
import{Fragment as z,jsx as i,jsxs as n}from"react/jsx-runtime";import{useCallback as D,useMemo as g,useState as y}from"react";import{useCreditsContext as L}from"../context/provider";import{CreditType as p,DTC_TASK_TYPE as f,TaskSubType as r,TaskType as Y}from"../context/const";import w from"../context/hooks/useActivities";import{CreditsModalContainer as E}from"./modalContainer";import{cn as b}from"../../../helpers/utils";import{Tabs as R,TabsList as I,TabsTrigger as B}from"@anker-in/headless-ui";import j from"./loadingDots";import{Picture as F,Text as h}from"@anker-in/headless-ui";import N from"dayjs";function O({data:e,...c}){const[l,A]=y(1),{taskIdToTypeMapping:u}=L(),_=g(()=>({page:c.isOpen?l:0,pageSize:1e3}),[c.isOpen,l]),[o,M]=y(p.All),P=g(()=>{const s=[{title:e.allTab,type:p.All},{title:e.earnedTab,type:p.Earned},{title:e.deductedTab,type:p.Deducted}];return e.expiredTab&&s.push({title:e.expiredTab,type:p.Expired}),s},[e]),{activities:v=[],canNext:k,isLoading:x}=w(_),T=g(()=>{const s={[r.Activation]:e.activationTask,[r.UpdateName]:e.updateNameTask,[r.UpdatePhone]:e.updatePhoneTask,[r.UpdateBirthday]:e.updateBirthdayTask,[r.Subscription]:e.subscriptionTask,[r.UpadteAppName]:e.updateAppNameTask,[r.Refund]:e.refundTask,[r.ProductUnApproved]:e.productUnApprovedTask},m={[f.FirstPurchase]:e.firstPurchaseTask,[f.UploadReceipt]:e.uploadReceiptTask,[f.Shopping]:e.shoppingTask};function S(t){return t.task_type===Y.Redeem&&t.task_sub_type===r.ProductUnApproved&&e.productUnApprovedTask?t.task_name.replace("Refund",e.productUnApprovedTask):u?.[String(t.task_rule_id)]?m[u?.[String(t.task_rule_id)]]:s[t.task_sub_type]||t.task_name}let a=v.map(t=>({title:S(t),date:new Date(t.create_time*1e3),value:t.credit,type:t.credit_type,pending_time:t.pending_time,credit_type:t.credit_type,status:t.status}))||[];return o===p.Earned?a=a?.filter(t=>t.type===1):o===p.Deducted?a=a?.filter(t=>t.type===2&&t.status!==3):o===p.Expired&&(a=a?.filter(t=>t.type===2&&t.status===3)),a.map(t=>{let{value:d,...U}=t;return t.type===p.Deducted&&d>0&&(d=-d),{value:d,...U}})},[e.activationTask,e.updateNameTask,e.updatePhoneTask,e.updateBirthdayTask,e.subscriptionTask,e.updateAppNameTask,e.refundTask,e.productUnApprovedTask,e.firstPurchaseTask,e.uploadReceiptTask,e.shoppingTask,v,o,u]),C=D(()=>{k&&A(l+1)},[l,k]);return n(E,{title:e.title,className:b("h-[800px] w-[640px]"),useAnimation:!0,animationClassName:"md:translate-y-[100vh]",scrollClassName:"",...c,onScrollEnd:C,children:[i("div",{className:"w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto",children:i(R,{align:"left",shape:"rounded",value:o.toString(),onValueChange:s=>{M(Number(s))},className:"",children:i(I,{children:P.map(s=>i(B,{value:s.type.toString(),children:s.title},s.type))})})}),n("div",{className:"grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]",children:[x&&i("div",{className:"flex h-full flex-col items-center justify-center",children:i(j,{})}),!x&&i(z,{children:T.length>0?T.map((s,m)=>n("div",{className:"flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]",children:[n("div",{className:"grid gap-[6px]",children:[i("div",{className:"font-bold",children:s.title}),i("div",{className:"text-[14px] font-semibold text-[#999]",children:N(s.date).format("YYYY-MM-DD HH:mm").toString()}),!e.pendingTips&&n("div",{className:`hidden text-[14px] font-semibold text-[#777] ${s.status===2&&s.credit_type===1?"!flex":""}`,children:[i(h,{html:e.pendingTips}),i("span",{children:N.unix(s.pending_time).add(1,"day").format("YYYY-MM-DD")}),e.pendingTips2&&i(h,{html:e.pendingTips2})]})]}),n("div",{className:b("font-bold",s.value>=0||s.credit_type===p.Expired?"text-[#52C41A]":"text-[#F84D4F]"),children:[s.value>=0&&"+",s.value]})]},m)):n("div",{className:"flex h-full flex-col items-center justify-center",children:[i(F,{className:"mb-[16px] h-[120px] w-[160px]",source:e?.emptyListImage?.url,alt:e?.emptyListImage?.alt||"empty list image"}),i("div",{className:"leading-1.4 text-[16px] font-semibold",children:e?.emptyListLabel})]})})]}),T.length>0&&i("div",{className:"mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]",children:e.tips})]})}var ee=O;export{ee as default};
|
|
2
2
|
//# sourceMappingURL=activitiesModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/modal/activitiesModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'\nimport useActivities from '../context/hooks/useActivities'\nimport type { Task } from '../context/response'\nimport { CreditsModalContainer, type ModalContainerProps } from './modalContainer'\nimport { cn } from '../../../helpers/utils'\nimport { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport LoadingDots from './loadingDots'\nimport { Picture, Text } from '@anker-in/headless-ui'\nimport dayjs from 'dayjs'\n\nexport interface MyActivitiesMetafields {\n title: string\n tips: string\n allTab: string\n earnedTab: string\n deductedTab: string\n expiredTab: string\n activationTask: string\n updateNameTask: string\n updatePhoneTask: string\n updateBirthdayTask: string\n updateAppNameTask: string\n subscriptionTask: string\n refundTask: string\n productUnApprovedTask: string\n pendingTips?: string\n pendingTips2?: string\n firstPurchaseTask: string\n uploadReceiptTask: string\n shoppingTask: string\n emptyListImage: {\n url: string\n alt?: string\n }\n emptyListLabel: string\n}\n\ninterface ActivitiesModalProps extends ModalContainerProps {\n data: MyActivitiesMetafields\n}\n\nfunction ActivitiesModal({ data, ...props }: ActivitiesModalProps) {\n const [page, setPage] = useState(1)\n const { taskIdToTypeMapping } = useCreditsContext()\n\n const myActivitiesOptions = useMemo(() => {\n return {\n page: props.isOpen ? page : 0,\n pageSize: 1000,\n }\n }, [props.isOpen, page])\n\n const [activeTab, setActiveTab] = useState(CreditType.All)\n const tabs = useMemo(() => {\n const tabs = [\n {\n title: data.allTab,\n type: CreditType.All,\n },\n {\n title: data.earnedTab,\n type: CreditType.Earned,\n },\n {\n title: data.deductedTab,\n type: CreditType.Deducted,\n },\n ]\n if (data.expiredTab) {\n tabs.push({\n title: data.expiredTab,\n type: CreditType.Expired,\n })\n }\n return tabs\n }, [data])\n\n const { activities = [], canNext, isLoading } = useActivities(myActivitiesOptions)\n\n const list = useMemo(() => {\n const taskNameMap = {\n [TaskSubType.Activation]: data.activationTask,\n [TaskSubType.UpdateName]: data.updateNameTask,\n [TaskSubType.UpdatePhone]: data.updatePhoneTask,\n [TaskSubType.UpdateBirthday]: data.updateBirthdayTask,\n [TaskSubType.Subscription]: data.subscriptionTask,\n [TaskSubType.UpadteAppName]: data.updateAppNameTask,\n [TaskSubType.Refund]: data.refundTask,\n [TaskSubType.ProductUnApproved]: data.productUnApprovedTask,\n }\n const dtcTaskTypeToNameMap = {\n [DTC_TASK_TYPE.FirstPurchase]: data.firstPurchaseTask,\n [DTC_TASK_TYPE.UploadReceipt]: data.uploadReceiptTask,\n [DTC_TASK_TYPE.Shopping]: data.shoppingTask,\n }\n\n function getTitle(item: Task) {\n if (\n item.task_type === TaskType.Redeem &&\n item.task_sub_type === TaskSubType.ProductUnApproved &&\n data.productUnApprovedTask\n ) {\n // \u65B0\u589E\u7684\u90E8\u5206\u4EFB\u52A1\u90FD\u4F7F\u7528\u4E86 alpc \u540C\u4E00\u4E2A\u4EFB\u52A1\u7C7B\u578B\uFF0C\u9700\u8981\u7528\u4EFB\u52A1 id \u6765\u533A\u5206\n return item.task_name.replace('Refund', data.productUnApprovedTask)\n } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {\n return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]]\n } else {\n return taskNameMap[item.task_sub_type] || item.task_name\n }\n }\n\n const all = activities.map(item => ({\n title: getTitle(item),\n date: new Date(item.create_time * 1000),\n value: item.credit,\n type: item.credit_type,\n pending_time: item.pending_time,\n credit_type: item.credit_type,\n status: item.status,\n }))\n\n let filtered = all || []\n if (activeTab === CreditType.Earned) {\n filtered = filtered?.filter(item => item.type === 1)\n } else if (activeTab === CreditType.Deducted) {\n filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)\n } else if (activeTab === CreditType.Expired) {\n filtered = filtered?.filter(item => item.type === 2 && item.status === 3)\n }\n\n return filtered.map(item => {\n let { value, ...otherItem } = item\n if (item.type === CreditType.Deducted && value > 0) {\n value = -value\n }\n\n return {\n value,\n ...otherItem,\n }\n })\n }, [\n data.activationTask,\n data.updateNameTask,\n data.updatePhoneTask,\n data.updateBirthdayTask,\n data.subscriptionTask,\n data.updateAppNameTask,\n data.refundTask,\n data.productUnApprovedTask,\n data.firstPurchaseTask,\n data.uploadReceiptTask,\n data.shoppingTask,\n activities,\n activeTab,\n taskIdToTypeMapping,\n ])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n setPage(page + 1)\n }, [page, canNext])\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={cn('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"
|
|
5
|
-
"mappings": "AA6Lc,
|
|
6
|
-
"names": ["jsx", "jsxs", "useCallback", "useMemo", "useState", "useCreditsContext", "CreditType", "DTC_TASK_TYPE", "TaskSubType", "TaskType", "useActivities", "CreditsModalContainer", "cn", "Tabs", "TabsList", "TabsTrigger", "LoadingDots", "Picture", "Text", "dayjs", "ActivitiesModal", "data", "props", "page", "setPage", "taskIdToTypeMapping", "myActivitiesOptions", "activeTab", "setActiveTab", "tabs", "activities", "canNext", "isLoading", "list", "taskNameMap", "dtcTaskTypeToNameMap", "getTitle", "item", "filtered", "value", "otherItem", "handleScrollEnd", "tab", "index", "activitiesModal_default"]
|
|
4
|
+
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'\nimport useActivities from '../context/hooks/useActivities'\nimport type { Task } from '../context/response'\nimport { CreditsModalContainer, type ModalContainerProps } from './modalContainer'\nimport { cn } from '../../../helpers/utils'\nimport { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport LoadingDots from './loadingDots'\nimport { Picture, Text } from '@anker-in/headless-ui'\nimport dayjs from 'dayjs'\n\nexport interface MyActivitiesMetafields {\n title: string\n tips: string\n allTab: string\n earnedTab: string\n deductedTab: string\n expiredTab: string\n activationTask: string\n updateNameTask: string\n updatePhoneTask: string\n updateBirthdayTask: string\n updateAppNameTask: string\n subscriptionTask: string\n refundTask: string\n productUnApprovedTask: string\n pendingTips?: string\n pendingTips2?: string\n firstPurchaseTask: string\n uploadReceiptTask: string\n shoppingTask: string\n emptyListImage: {\n url: string\n alt?: string\n }\n emptyListLabel: string\n}\n\ninterface ActivitiesModalProps extends ModalContainerProps {\n data: MyActivitiesMetafields\n}\n\nfunction ActivitiesModal({ data, ...props }: ActivitiesModalProps) {\n const [page, setPage] = useState(1)\n const { taskIdToTypeMapping } = useCreditsContext()\n\n const myActivitiesOptions = useMemo(() => {\n return {\n page: props.isOpen ? page : 0,\n pageSize: 1000,\n }\n }, [props.isOpen, page])\n\n const [activeTab, setActiveTab] = useState(CreditType.All)\n const tabs = useMemo(() => {\n const tabs = [\n {\n title: data.allTab,\n type: CreditType.All,\n },\n {\n title: data.earnedTab,\n type: CreditType.Earned,\n },\n {\n title: data.deductedTab,\n type: CreditType.Deducted,\n },\n ]\n if (data.expiredTab) {\n tabs.push({\n title: data.expiredTab,\n type: CreditType.Expired,\n })\n }\n return tabs\n }, [data])\n\n const { activities = [], canNext, isLoading } = useActivities(myActivitiesOptions)\n\n const list = useMemo(() => {\n const taskNameMap = {\n [TaskSubType.Activation]: data.activationTask,\n [TaskSubType.UpdateName]: data.updateNameTask,\n [TaskSubType.UpdatePhone]: data.updatePhoneTask,\n [TaskSubType.UpdateBirthday]: data.updateBirthdayTask,\n [TaskSubType.Subscription]: data.subscriptionTask,\n [TaskSubType.UpadteAppName]: data.updateAppNameTask,\n [TaskSubType.Refund]: data.refundTask,\n [TaskSubType.ProductUnApproved]: data.productUnApprovedTask,\n }\n const dtcTaskTypeToNameMap = {\n [DTC_TASK_TYPE.FirstPurchase]: data.firstPurchaseTask,\n [DTC_TASK_TYPE.UploadReceipt]: data.uploadReceiptTask,\n [DTC_TASK_TYPE.Shopping]: data.shoppingTask,\n }\n\n function getTitle(item: Task) {\n if (\n item.task_type === TaskType.Redeem &&\n item.task_sub_type === TaskSubType.ProductUnApproved &&\n data.productUnApprovedTask\n ) {\n // \u65B0\u589E\u7684\u90E8\u5206\u4EFB\u52A1\u90FD\u4F7F\u7528\u4E86 alpc \u540C\u4E00\u4E2A\u4EFB\u52A1\u7C7B\u578B\uFF0C\u9700\u8981\u7528\u4EFB\u52A1 id \u6765\u533A\u5206\n return item.task_name.replace('Refund', data.productUnApprovedTask)\n } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {\n return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]]\n } else {\n return taskNameMap[item.task_sub_type] || item.task_name\n }\n }\n\n const all = activities.map(item => ({\n title: getTitle(item),\n date: new Date(item.create_time * 1000),\n value: item.credit,\n type: item.credit_type,\n pending_time: item.pending_time,\n credit_type: item.credit_type,\n status: item.status,\n }))\n\n let filtered = all || []\n if (activeTab === CreditType.Earned) {\n filtered = filtered?.filter(item => item.type === 1)\n } else if (activeTab === CreditType.Deducted) {\n filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)\n } else if (activeTab === CreditType.Expired) {\n filtered = filtered?.filter(item => item.type === 2 && item.status === 3)\n }\n\n return filtered.map(item => {\n let { value, ...otherItem } = item\n if (item.type === CreditType.Deducted && value > 0) {\n value = -value\n }\n\n return {\n value,\n ...otherItem,\n }\n })\n }, [\n data.activationTask,\n data.updateNameTask,\n data.updatePhoneTask,\n data.updateBirthdayTask,\n data.subscriptionTask,\n data.updateAppNameTask,\n data.refundTask,\n data.productUnApprovedTask,\n data.firstPurchaseTask,\n data.uploadReceiptTask,\n data.shoppingTask,\n activities,\n activeTab,\n taskIdToTypeMapping,\n ])\n\n const handleScrollEnd = useCallback(() => {\n if (!canNext) {\n return\n }\n setPage(page + 1)\n }, [page, canNext])\n\n return (\n <CreditsModalContainer\n title={data.title}\n className={cn('h-[800px] w-[640px]')}\n useAnimation\n animationClassName=\"md:translate-y-[100vh]\"\n scrollClassName=\"\"\n {...props}\n onScrollEnd={handleScrollEnd}\n >\n <div className=\"w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto\">\n <Tabs\n align=\"left\"\n shape=\"rounded\"\n value={activeTab.toString()}\n onValueChange={value => {\n setActiveTab(Number(value))\n }}\n className=\"\"\n >\n <TabsList>\n {tabs.map(tab => (\n <TabsTrigger key={tab.type} value={tab.type.toString()}>\n {tab.title}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n </div>\n\n <div className=\"grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]\">\n {isLoading && (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <LoadingDots />\n </div>\n )}\n\n {!isLoading && (\n <>\n {list.length > 0 ? (\n list.map((item, index) => (\n <div\n key={index}\n className=\"flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]\"\n >\n <div className=\"grid gap-[6px]\">\n <div className=\"font-bold\">{item.title}</div>\n <div className=\"text-[14px] font-semibold text-[#999]\">\n {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}\n </div>\n {!data.pendingTips && (\n <div\n className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}\n >\n <Text html={data.pendingTips} />\n <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>\n {data.pendingTips2 && <Text html={data.pendingTips2} />}\n </div>\n )}\n </div>\n <div\n className={cn(\n 'font-bold',\n item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'\n )}\n >\n {item.value >= 0 && '+'}\n {item.value}\n </div>\n </div>\n ))\n ) : (\n <div className=\"flex h-full flex-col items-center justify-center\">\n <Picture\n className=\"mb-[16px] h-[120px] w-[160px]\"\n source={data?.emptyListImage?.url}\n alt={data?.emptyListImage?.alt || 'empty list image'}\n ></Picture>\n <div className=\"leading-1.4 text-[16px] font-semibold\">{data?.emptyListLabel}</div>\n </div>\n )}\n </>\n )}\n </div>\n {/* \u79EF\u5206\u5230\u8D26\u65F6\u95F4\u63D0\u9192 */}\n {list.length > 0 && <div className=\"mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]\">{data.tips}</div>}\n </CreditsModalContainer>\n )\n}\n\nexport default ActivitiesModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useCallback", "useMemo", "useState", "useCreditsContext", "CreditType", "DTC_TASK_TYPE", "TaskSubType", "TaskType", "useActivities", "CreditsModalContainer", "cn", "Tabs", "TabsList", "TabsTrigger", "LoadingDots", "Picture", "Text", "dayjs", "ActivitiesModal", "data", "props", "page", "setPage", "taskIdToTypeMapping", "myActivitiesOptions", "activeTab", "setActiveTab", "tabs", "activities", "canNext", "isLoading", "list", "taskNameMap", "dtcTaskTypeToNameMap", "getTitle", "item", "filtered", "value", "otherItem", "handleScrollEnd", "tab", "index", "activitiesModal_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a,jsxs as
|
|
1
|
+
import{jsx as a,jsxs as l}from"react/jsx-runtime";import s from"classnames";const t=n=>{const{className:e}=n;return l("span",{className:s("inline-flex min-h-[19px] items-center text-center leading-7",e),children:[a("span",{className:"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current"},"dot_1"),a("span",{className:"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.2s]"},"dot_2"),a("span",{className:"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.4s]"},"dot_3")]})};var r=t;export{r as default};
|
|
2
2
|
//# sourceMappingURL=loadingDots.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/modal/loadingDots.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "
|
|
4
|
+
"sourcesContent": ["import classNames from 'classnames'\nimport { FC } from 'react'\n\ninterface LoadingProps {\n className?: string\n}\n\nconst LoadingDots: FC<LoadingProps> = props => {\n const { className } = props\n return (\n <span className={classNames('inline-flex min-h-[19px] items-center text-center leading-7', className)}>\n <span className=\"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current\" key={`dot_1`} />\n <span className=\"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.2s]\" key={`dot_2`} />\n <span className=\"animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.4s]\" key={`dot_3`} />\n </span>\n )\n}\n\nexport default LoadingDots\n"],
|
|
5
|
+
"mappings": "AAUI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAVJ,OAAOC,MAAgB,aAOvB,MAAMC,EAAgCC,GAAS,CAC7C,KAAM,CAAE,UAAAC,CAAU,EAAID,EACtB,OACEH,EAAC,QAAK,UAAWC,EAAW,8DAA+DG,CAAS,EAClG,UAAAL,EAAC,QAAK,UAAU,wDAA4D,OAAS,EACrFA,EAAC,QAAK,UAAU,+EAAmF,OAAS,EAC5GA,EAAC,QAAK,UAAU,+EAAmF,OAAS,GAC9G,CAEJ,EAEA,IAAOM,EAAQH",
|
|
6
|
+
"names": ["jsx", "jsxs", "classNames", "LoadingDots", "props", "className", "loadingDots_default"]
|
|
7
7
|
}
|