@anker-in/campaign-ui 0.2.0-beta.5 → 0.2.0-beta.7
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/creditsCash/CreditsCash.js +1 -1
- package/dist/cjs/components/credits/creditsCash/CreditsCash.js.map +3 -3
- 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/creditsRedeemList/AddressForm/CountrySelect.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/AddressForm/CountrySelect.js.map +2 -2
- package/dist/cjs/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.js.map +2 -2
- package/dist/cjs/components/credits/type.d.ts +2 -2
- package/dist/cjs/components/credits/type.js +1 -1
- package/dist/cjs/components/credits/type.js.map +1 -1
- package/dist/cjs/templates/credits.d.ts +7 -7
- package/dist/cjs/templates/credits.js +1 -1
- package/dist/cjs/templates/credits.js.map +3 -3
- package/dist/esm/components/credits/creditsCash/CreditsCash.js +1 -1
- package/dist/esm/components/credits/creditsCash/CreditsCash.js.map +3 -3
- 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/creditsRedeemList/AddressForm/CountrySelect.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/AddressForm/CountrySelect.js.map +2 -2
- package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.js.map +3 -3
- package/dist/esm/components/credits/type.d.ts +2 -2
- package/dist/esm/templates/credits.d.ts +7 -7
- package/dist/esm/templates/credits.js +1 -1
- package/dist/esm/templates/credits.js.map +3 -3
- package/package.json +6 -7
- package/src/components/credits/creditsCash/CreditsCash.tsx +3 -6
- package/src/components/credits/creditsInfoCard/index.tsx +4 -4
- package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx +1 -1
- package/src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx +6 -4
- package/src/components/credits/type.ts +2 -2
- package/src/templates/credits.tsx +39 -30
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var I=Object.create;var l=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var s in t)l(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of k(t))!L.call(e,i)&&i!==s&&l(e,i,{get:()=>t[i],enumerable:!(o=R(t,i))||o.enumerable});return e};var f=(e,t,s)=>(s=e!=null?I(D(e)):{},h(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),_=e=>h(l({},"__esModule",{value:!0}),e);var F={};S(F,{CreditsCash:()=>B});module.exports=_(F);var n=require("react/jsx-runtime"),c=require("@anker-in/headless-ui"),p=require("react"),b=f(require("./RedeemableItem")),x=f(require("../context/hooks/useRedeemableList")),y=f(require("../modal/rulesModal")),v=require("@anker-in/lib"),N=require("@anker-in/lib");const B=({copy:e})=>{const[t,s]=(0,p.useState)(),{redeemableList:o}=(0,x.default)(),i=[],{data:u}=(0,v.useProductsByHandles)({handles:e?.list?.map(r=>r.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:i}}),C=(0,p.useMemo)(()=>u?.map(r=>{const d=e.list.find(m=>m.products?.[0]?.handle===r.handle),a=o.find(m=>m.id?.toString()===d?.redeemId?.toString()),g=r.variants?.find(m=>m.sku===d?.products?.[0]?.sku)||r.variants?.[0];return!a||!g?null:{product:r,productVariant:g,alpcData:{id:a?.id,consumeCredits:a?.consume_credits,remainingInventory:a?.remaining_inventory,isLimited:a?.is_limited,consumeType:a?.consume_type,title:a?.name,desc:a?.note},config:d}}).filter(Boolean),[u,e.list,o]);return console.log("list",C),(0,n.jsxs)(c.Container,{className:(0,N.classNames)("bg-[#F5F5F5]"),children:[(0,n.jsx)(c.Heading,{as:"h2",size:"4",html:e.title}),(0,n.jsx)("div",{className:"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3",children:C?.map((r,d)=>(0,n.jsx)(b.default,{copy:e,itemData:r,setRules:s,currencyCode:u?.[0]?.price.currencyCode||"USD"},d))}),t&&(0,n.jsx)(y.default,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:t.length>0,onClose:()=>s([]),titleClassName:"border-b-transparent h-[56px]",rules:t,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:e?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};
|
|
2
2
|
//# sourceMappingURL=CreditsCash.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/CreditsCash.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Container, Heading } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport RedeemableItem from './RedeemableItem'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport RulesModal from '../modal/rulesModal'\nimport { useProductsByHandles
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["CreditsCash_exports", "__export", "CreditsCash", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_RedeemableItem", "import_useRedeemableList", "import_rulesModal", "import_lib", "
|
|
4
|
+
"sourcesContent": ["import { Container, Heading } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport RedeemableItem from './RedeemableItem'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport RulesModal from '../modal/rulesModal'\nimport { useProductsByHandles } from '@anker-in/lib'\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { Product, classNames as cn } from '@anker-in/lib'\n\nexport const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {\n const [rules, setRules] = useState<string | string[]>()\n const { redeemableList } = useRedeemableList()\n\n const variantMetafieldIdentifiers: any[] = []\n\n const { data: productByHandles } = useProductsByHandles({\n handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],\n metafieldIdentifiers: {\n variant: variantMetafieldIdentifiers,\n },\n })\n\n const list = useMemo(() => {\n return productByHandles\n ?.map((product: Product) => {\n const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)\n const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())\n const productVariant =\n product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]\n if (!alpcData || !productVariant) return null\n return {\n product,\n productVariant,\n alpcData: {\n id: alpcData?.id,\n consumeCredits: alpcData?.consume_credits,\n remainingInventory: alpcData?.remaining_inventory,\n isLimited: alpcData?.is_limited,\n consumeType: alpcData?.consume_type,\n title: alpcData?.name,\n desc: alpcData?.note,\n },\n config,\n }\n })\n .filter(Boolean) as unknown as RedeemItem[]\n }, [productByHandles, copy.list, redeemableList])\n\n console.log('list', list)\n\n return (\n <Container className={cn('bg-[#F5F5F5]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n <div className=\"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3\">\n {list?.map((item, index: number) => (\n <RedeemableItem\n key={index}\n copy={copy}\n itemData={item}\n setRules={setRules}\n currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}\n />\n ))}\n </div>\n\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className=\"md:h-fit md:rounded-b-[16px]\"\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={copy?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAoDI,IAAAI,EAAA,6BApDJC,EAAmC,iCACnCC,EAAkC,iBAElCC,EAA2B,+BAC3BC,EAA8B,iDAC9BC,EAAuB,kCACvBC,EAAqC,yBAErCA,EAA0C,yBAEnC,MAAMR,EAAc,CAAC,CAAE,KAAAS,CAAK,IAAiC,CAClE,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAA4B,EAChD,CAAE,eAAAC,CAAe,KAAI,EAAAC,SAAkB,EAEvCC,EAAqC,CAAC,EAEtC,CAAE,KAAMC,CAAiB,KAAI,wBAAqB,CACtD,QAASN,GAAM,MAAM,IAAIO,GAAQA,EAAK,WAAW,CAAC,GAAG,MAAM,GAAK,CAAC,EACjE,qBAAsB,CACpB,QAASF,CACX,CACF,CAAC,EAEKG,KAAO,WAAQ,IACZF,GACH,IAAKG,GAAqB,CAC1B,MAAMC,EAASV,EAAK,KAAK,KAAKO,GAAQA,EAAK,WAAW,CAAC,GAAG,SAAWE,EAAQ,MAAM,EAC7EE,EAAWR,EAAe,KAAKI,GAAQA,EAAK,IAAI,SAAS,IAAMG,GAAQ,UAAU,SAAS,CAAC,EAC3FE,EACJH,EAAQ,UAAU,KAAMI,GAAiBA,EAAQ,MAAQH,GAAQ,WAAW,CAAC,GAAG,GAAG,GAAKD,EAAQ,WAAW,CAAC,EAC9G,MAAI,CAACE,GAAY,CAACC,EAAuB,KAClC,CACL,QAAAH,EACA,eAAAG,EACA,SAAU,CACR,GAAID,GAAU,GACd,eAAgBA,GAAU,gBAC1B,mBAAoBA,GAAU,oBAC9B,UAAWA,GAAU,WACrB,YAAaA,GAAU,aACvB,MAAOA,GAAU,KACjB,KAAMA,GAAU,IAClB,EACA,OAAAD,CACF,CACF,CAAC,EACA,OAAO,OAAO,EAChB,CAACJ,EAAkBN,EAAK,KAAMG,CAAc,CAAC,EAEhD,eAAQ,IAAI,OAAQK,CAAI,KAGtB,QAAC,aAAU,aAAW,EAAAM,YAAG,cAAc,EACrC,oBAAC,WAAQ,GAAG,KAAK,KAAK,IAAI,KAAMd,EAAK,MAAO,KAC5C,OAAC,OAAI,UAAU,+FACZ,SAAAQ,GAAM,IAAI,CAACD,EAAMQ,OAChB,OAAC,EAAAC,QAAA,CAEC,KAAMhB,EACN,SAAUO,EACV,SAAUL,EACV,aAAcI,IAAmB,CAAC,GAAG,MAAM,cAAgB,OAJtDS,CAKP,CACD,EACH,EAECd,MACC,OAAC,EAAAgB,QAAA,CACC,iBAAiB,+BACjB,UAAU,+BACV,OAAQhB,EAAM,OAAS,EACvB,QAAS,IAAMC,EAAS,CAAC,CAAC,EAC1B,eAAe,gCACf,MAAOD,EACP,gBAAgB,mCAChB,MAAOD,GAAM,UACb,cAAc,2BAChB,GAEJ,CAEJ",
|
|
6
|
+
"names": ["CreditsCash_exports", "__export", "CreditsCash", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_RedeemableItem", "import_useRedeemableList", "import_rulesModal", "import_lib", "copy", "rules", "setRules", "redeemableList", "useRedeemableList", "variantMetafieldIdentifiers", "productByHandles", "item", "list", "product", "config", "alpcData", "productVariant", "variant", "cn", "index", "RedeemableItem", "RulesModal"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var z=Object.create;var c=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var T=(t,a)=>{for(var s in a)c(t,s,{get:a[s],enumerable:!0})},g=(t,a,s,x)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of I(a))!D.call(t,o)&&o!==s&&c(t,o,{get:()=>a[o],enumerable:!(x=B(a,o))||x.enumerable});return t};var C=(t,a,s)=>(s=t!=null?z(S(t)):{},g(a||!t||!t.__esModule?c(s,"default",{value:t,enumerable:!0}):s,t)),F=t=>g(c({},"__esModule",{value:!0}),t);var O={};T(O,{CreditsInfoCard:()=>L});module.exports=F(O);var e=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),d=require("react"),N=require("../context/provider"),b=require("../context/utils"),w=C(require("../modal/activitiesModal")),k=C(require("../modal/MyRewardsModal")),i=require("@anker-in/lib"),y=require("../const");function L({copy:t}){const[a,s]=(0,d.useState)(!1),[x,o]=(0,d.useState)(!1),[f,r]=(0,d.useState)(!1),{creditInfo:m,pageCommon:p}=(0,N.useCreditsContext)(),{brand:h}=(0,i.useHeadlessContext)(),v=y.roundedBrands.includes(h),M=(0,d.useCallback)(l=>{if((0,i.gaNormalClick)({position:"info_card",label:l.text}),l.type)switch(l.type){case"activities":s(!0);break;case"rewards":o(!0);break}},[]);return(0,e.jsxs)(n.Container,{asChild:!0,id:"infoCard",className:"-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]",children:[(0,e.jsxs)("div",{className:(0,i.classNames)("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]",!v&&"rounded-none"),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:[(0,e.jsxs)("div",{className:(0,i.classNames)("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:[(0,e.jsxs)("div",{className:"mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]",children:[(0,e.jsx)("div",{className:(0,i.classNames)("mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]"),children:t.balanceLabel}),(0,e.jsxs)("div",{className:"flex items-baseline",children:[(0,e.jsx)("div",{className:(0,i.classNames)("mr-[8px] text-[36px] font-extrabold","min-md:text-[44px]","min-xl:text-[56px]"),children:m?(0,b.numberFormat)(m.available_credit):0}),(0,e.jsx)("div",{className:"text-[16px]",children:t?.pointUnit})]})]}),(0,e.jsxs)("div",{className:"w-fit md:flex-1",children:[(0,e.jsxs)("div",{className:(0,i.classNames)("mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]"),children:[(0,e.jsx)(n.Text,{className:"text-[14px] font-bold xl:text-[16px] min-md:text-[18px]",html:t.comingSoonLabel}),t.comingSoonTips&&(0,e.jsxs)("div",{className:"group relative ml-[4px] flex cursor-pointer items-start",children:[(0,e.jsx)(n.Text,{as:"div",html:t?.infoIcon,className:"size-[18px] cursor-pointer [&_svg]:size-full",onClick:()=>{f?r(!1):(r(!0),setTimeout(()=>{r(!1)},5e3))}}),(0,e.jsx)("div",{className:(0,i.classNames)("absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]",f?"block":"hidden"),children:(0,e.jsxs)("div",{className:(0,i.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!v&&"rounded-none"),children:[(0,e.jsx)(n.Text,{size:"2",html:t.comingSoonTips,className:"desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,i.classNames)("absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!v&&"rounded-none")})]})})]})]}),(0,e.jsxs)("div",{className:"flex items-baseline ",children:[(0,e.jsx)("div",{className:(0,i.classNames)("mr-[8px] text-[36px] font-extrabold","min-l:text-[44px]","min-xl:text-[56px]"),children:m?(0,b.numberFormat)(m.pending_credit):0}),(0,e.jsx)("div",{className:"text-[16px]",children:t?.pointUnit})]})]})]}),(0,e.jsx)("div",{className:(0,i.classNames)("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((l,u)=>(0,e.jsx)(n.Button,{variant:u===0?"secondary":"primary",size:"lg",className:"min-w-[156px] laptop:min-w-[189px]",onClick:()=>{M(l)},children:l.text},u))}),p?.activitiesModal&&(0,e.jsx)(w.default,{isOpen:a,data:p?.activitiesModal,onClose:()=>{s(!1)}}),p?.rewardsModal&&(0,e.jsx)(k.default,{isOpen:x,data:p?.rewardsModal,onClose:()=>{o(!1)}})]}),f&&(0,e.jsx)("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>r(!1),onKeyDown:l=>l.key==="Escape"&&r(!1)})]})}
|
|
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 { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal from '../modal/MyRewardsModal'\nimport { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { roundedBrands } from '../const'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport type CreditsInfoCardCopy = {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n}\n\nexport function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n const { creditInfo, pageCommon } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\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 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 !rounded && 'rounded-none'\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 {copy.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]\">{copy?.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={copy.comingSoonLabel} />\n {copy.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={copy?.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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n !rounded && 'rounded-none'\n )}\n >\n <Text size=\"2\" html={copy.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div\n className={cn(\n 'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n !rounded && 'rounded-none'\n )}\n />\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]\">{copy?.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 {copy.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 {pageCommon?.
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { Button, Container, Text } from '@anker-in/headless-ui'\n\nimport { useCallback, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal from '../modal/MyRewardsModal'\nimport { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { roundedBrands } from '../const'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport type CreditsInfoCardCopy = {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n}\n\nexport function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n const { creditInfo, pageCommon } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\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 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 !rounded && 'rounded-none'\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 {copy.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]\">{copy?.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={copy.comingSoonLabel} />\n {copy.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={copy?.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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n !rounded && 'rounded-none'\n )}\n >\n <Text size=\"2\" html={copy.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div\n className={cn(\n 'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n !rounded && 'rounded-none'\n )}\n />\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]\">{copy?.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 {copy.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 {pageCommon?.activitiesModal && (\n <ActivitiesModal\n isOpen={openActivities}\n data={pageCommon?.activitiesModal}\n onClose={() => {\n setOpenActivities(false)\n }}\n />\n )}\n {pageCommon?.rewardsModal && (\n <MyRewardsModal\n isOpen={openRewards}\n data={pageCommon?.rewardsModal}\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": ["creditsInfoCard_exports", "__export", "CreditsInfoCard", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_provider", "import_utils", "import_activitiesModal", "import_MyRewardsModal", "import_lib", "import_const", "copy", "openActivities", "setOpenActivities", "openRewards", "setOpenRewards", "hover", "setHover", "creditInfo", "pageCommon", "brand", "rounded", "handleButtonClick", "buttonConfig", "cn", "item", "index", "ActivitiesModal", "MyRewardsModal", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var E=Object.create;var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,
|
|
1
|
+
"use strict";var E=Object.create;var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var A=(o,t)=>{for(var n in t)d(o,n,{get:t[n],enumerable:!0})},f=(o,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of D(t))!z.call(o,r)&&r!==n&&d(o,r,{get:()=>t[r],enumerable:!(l=N(t,r))||l.enumerable});return o};var m=(o,t,n)=>(n=o!=null?E(S(o)):{},f(t||!o||!o.__esModule?d(n,"default",{value:o,enumerable:!0}):n,o)),_=o=>f(d({},"__esModule",{value:!0}),o);var F={};A(F,{CountrySelect:()=>P});module.exports=_(F);var s=require("react/jsx-runtime"),g=require("@anker-in/headless-ui"),x=m(require("../../context/hooks/useClickOutside")),a=m(require("classnames")),i=require("react"),b=require("../../const"),v=require("@anker-in/lib");function P({countries:o,loading:t,className:n,value:l,onChange:r}){const[y,c]=(0,i.useState)(!1),[h,p]=(0,i.useState)(""),{brand:C}=(0,v.useHeadlessContext)(),u=b.roundedBrands.includes(C),k=(0,x.default)(()=>{c(!1)});return(0,i.useEffect)(()=>{const e=o.filter(w=>w.code===l);e.length&&p(e[0].name)},[p,o,l]),(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsx)("select",{className:(0,a.default)("!h-[50px] pr-[45px] min-l:hidden",n),style:{WebkitTextFillColor:"black"},disabled:t,value:l,onChange:e=>{r(e.target.value)},children:o.map(e=>(0,s.jsx)("option",{value:e.code,children:e.name},e.code))}),(0,s.jsx)("div",{className:(0,a.default)("absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block",!u&&"rounded-none",n),onClick:()=>{c(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:h}),(0,s.jsx)(g.Picture,{source:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500",className:"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover",alt:"arrow"}),(0,s.jsx)("div",{ref:k,className:(0,a.default)("absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]",!u&&"rounded-none",{"!hidden":!y}),children:(0,s.jsx)("ul",{className:"py-[6px]",children:o.map(e=>(0,s.jsxs)("li",{value:e.code,className:(0,a.default)("relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]",{"!bg-[#EAEAEC]":e.code===l}),children:[(0,s.jsx)("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:e.code,onClick:()=>{p(e.name),c(!1),r(e.code)}}),e.name]},e.code))})})]})}
|
|
2
2
|
//# sourceMappingURL=CountrySelect.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\nimport { roundedBrands } from '../../const'\nimport { useHeadlessContext } from '@anker-in/lib'\n\ninterface Country {\n id: string\n code: string\n name: string\n}\n\ninterface CountrySelectProps {\n countries: Country[]\n loading?: boolean\n className?: string\n value?: string\n onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n const [show, setShow] = useState(false)\n const [display, setDisplay] = useState<any>('')\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\n const dorpdown = useClickOutside<HTMLDivElement>(() => {\n setShow(false)\n })\n\n useEffect(() => {\n const target = countries.filter(item => item.code === value)\n if (target.length) setDisplay(target[0].name)\n }, [setDisplay, countries, value])\n\n return (\n <div className=\"relative\">\n <select\n className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n style={{\n WebkitTextFillColor: 'black',\n }}\n disabled={loading}\n value={value}\n onChange={event => {\n onChange(event.target.value)\n }}\n >\n {countries.map((item: { id: string; name: string; code: string }) => (\n <option key={item.code} value={item.code}>\n {item.name}\n </option>\n ))}\n </select>\n\n <div\n className={classNames(\n 'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n !rounded && 'rounded-none',\n className\n )}\n onClick={() => {\n setShow(true)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {display}\n </div>\n\n <Picture\n source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAiDU,IAAAI,EAAA,6BAjDVC,EAAwB,iCACxBC,EAA4B,kDAC5BC,EAAuB,yBACvBC,EAAoC,iBACpCC,EAA8B,uBAC9BC,EAAmC,yBAgB5B,SAASR,EAAc,CAAE,UAAAS,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAChC,CAACC,EAASC,CAAU,KAAI,YAAc,EAAE,EACxC,CAAE,MAAAC,CAAM,KAAI,sBAAmB,EAC/BC,EAAU,gBAAc,SAASD,CAAK,EACtCE,KAAW,EAAAC,SAAgC,IAAM,CACrDN,EAAQ,EAAK,CACf,CAAC,EAED,sBAAU,IAAM,CACd,MAAMO,EAASb,EAAU,OAAOc,GAAQA,EAAK,OAASX,CAAK,EACvDU,EAAO,QAAQL,EAAWK,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACL,EAAYR,EAAWG,CAAK,CAAC,KAG/B,QAAC,OAAI,UAAU,WACb,oBAAC,UACC,aAAW,EAAAY,SAAW,mCAAoCb,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUa,GAAS,CACjBZ,EAASY,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAhB,EAAU,IAAKc,MACd,OAAC,UAAuB,MAAOA,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,KAEA,OAAC,OACC,aAAW,EAAAC,SACT,4HACA,CAACL,GAAW,eACZR,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,KAEA,OAAC,WACC,OAAO,yFACP,
|
|
4
|
+
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\nimport { roundedBrands } from '../../const'\nimport { useHeadlessContext } from '@anker-in/lib'\n\ninterface Country {\n id: string\n code: string\n name: string\n}\n\ninterface CountrySelectProps {\n countries: Country[]\n loading?: boolean\n className?: string\n value?: string\n onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n const [show, setShow] = useState(false)\n const [display, setDisplay] = useState<any>('')\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\n const dorpdown = useClickOutside<HTMLDivElement>(() => {\n setShow(false)\n })\n\n useEffect(() => {\n const target = countries.filter(item => item.code === value)\n if (target.length) setDisplay(target[0].name)\n }, [setDisplay, countries, value])\n\n return (\n <div className=\"relative\">\n <select\n className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n style={{\n WebkitTextFillColor: 'black',\n }}\n disabled={loading}\n value={value}\n onChange={event => {\n onChange(event.target.value)\n }}\n >\n {countries.map((item: { id: string; name: string; code: string }) => (\n <option key={item.code} value={item.code}>\n {item.name}\n </option>\n ))}\n </select>\n\n <div\n className={classNames(\n 'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n !rounded && 'rounded-none',\n className\n )}\n onClick={() => {\n setShow(true)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {display}\n </div>\n\n <Picture\n source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n className=\"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover\"\n alt=\"arrow\"\n />\n\n <div\n ref={dorpdown}\n className={classNames(\n 'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',\n !rounded && 'rounded-none',\n { '!hidden': !show }\n )}\n >\n <ul className=\"py-[6px]\">\n {countries.map((item: { id: string; name: string; code: string }) => (\n <li\n key={item.code}\n value={item.code}\n className={classNames(\n 'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',\n { '!bg-[#EAEAEC]': item.code === value }\n )}\n >\n <button\n className=\"absolute left-0 top-0 z-1 size-full opacity-0\"\n value={item.code}\n onClick={() => {\n setDisplay(item.name)\n setShow(false)\n onChange(item.code)\n }}\n />\n {item.name}\n </li>\n ))}\n </ul>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAiDU,IAAAI,EAAA,6BAjDVC,EAAwB,iCACxBC,EAA4B,kDAC5BC,EAAuB,yBACvBC,EAAoC,iBACpCC,EAA8B,uBAC9BC,EAAmC,yBAgB5B,SAASR,EAAc,CAAE,UAAAS,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAChC,CAACC,EAASC,CAAU,KAAI,YAAc,EAAE,EACxC,CAAE,MAAAC,CAAM,KAAI,sBAAmB,EAC/BC,EAAU,gBAAc,SAASD,CAAK,EACtCE,KAAW,EAAAC,SAAgC,IAAM,CACrDN,EAAQ,EAAK,CACf,CAAC,EAED,sBAAU,IAAM,CACd,MAAMO,EAASb,EAAU,OAAOc,GAAQA,EAAK,OAASX,CAAK,EACvDU,EAAO,QAAQL,EAAWK,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACL,EAAYR,EAAWG,CAAK,CAAC,KAG/B,QAAC,OAAI,UAAU,WACb,oBAAC,UACC,aAAW,EAAAY,SAAW,mCAAoCb,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUa,GAAS,CACjBZ,EAASY,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAhB,EAAU,IAAKc,MACd,OAAC,UAAuB,MAAOA,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,KAEA,OAAC,OACC,aAAW,EAAAC,SACT,4HACA,CAACL,GAAW,eACZR,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,KAEA,OAAC,WACC,OAAO,yFACP,UAAU,+EACV,IAAI,QACN,KAEA,OAAC,OACC,IAAKI,EACL,aAAW,EAAAI,SACT,yIACA,CAACL,GAAW,eACZ,CAAE,UAAW,CAACL,CAAK,CACrB,EAEA,mBAAC,MAAG,UAAU,WACX,SAAAL,EAAU,IAAKc,MACd,QAAC,MAEC,MAAOA,EAAK,KACZ,aAAW,EAAAC,SACT,+FACA,CAAE,gBAAiBD,EAAK,OAASX,CAAM,CACzC,EAEA,oBAAC,UACC,UAAU,gDACV,MAAOW,EAAK,KACZ,QAAS,IAAM,CACbN,EAAWM,EAAK,IAAI,EACpBR,EAAQ,EAAK,EACbF,EAASU,EAAK,IAAI,CACpB,EACF,EACCA,EAAK,OAhBDA,EAAK,IAiBZ,CACD,EACH,EACF,GACF,CAEJ",
|
|
6
6
|
"names": ["CountrySelect_exports", "__export", "CountrySelect", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_useClickOutside", "import_classnames", "import_react", "import_const", "import_lib", "countries", "loading", "className", "value", "onChange", "show", "setShow", "display", "setDisplay", "brand", "rounded", "dorpdown", "useClickOutside", "target", "item", "classNames", "event"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var u=(t,a)=>{for(var m in a)i(t,m,{get:a[m],enumerable:!0})},f=(t,a,m,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of n(a))!x.call(t,d)&&d!==m&&i(t,d,{get:()=>a[d],enumerable:!(l=c(a,d))||l.enumerable});return t};var v=t=>f(i({},"__esModule",{value:!0}),t);var N={};u(N,{ProductInfo:()=>b});module.exports=v(N);var e=require("react/jsx-runtime"),s=require("@anker-in/headless-ui"),r=require("../../context/utils"),o=require("@anker-in/lib"),p=require("../../context/provider");const b=({item:t,copy:a})=>{const{locale:m}=(0,o.useHeadlessContext)(),{pageCommon:l}=(0,p.useCreditsContext)();return(0,e.jsxs)("div",{className:"flex w-full items-center justify-center md:items-start md:justify-start",children:[(0,e.jsx)(s.Picture,{className:"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",source:t.variant.image?.url||t.product?.images[0]?.url,alt:t.product.title}),(0,e.jsxs)("div",{className:"md:flex md:flex-col",children:[(0,e.jsxs)("div",{className:"md:flex md:items-center",children:[(0,e.jsx)(s.Picture,{className:"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",source:t.variant.image?.url||t.product?.images[0]?.url,alt:t.product.title}),(0,e.jsx)("div",{className:"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden",title:t.product.title,children:t.product.title})]}),(0,e.jsxs)("div",{className:"mt-[16px] md:mt-[12px]",children:[(0,e.jsx)(s.Text,{className:"mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden",html:t.product.title,title:t.product.title}),(0,e.jsxs)("div",{className:"flex font-semibold leading-[1.4] md:flex-col",children:[(0,e.jsxs)("div",{className:"mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]",children:[(0,e.jsxs)("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[(0,e.jsxs)("span",{children:[a.redeemModal.product.variantLabel,": "]}),(0,e.jsx)("span",{className:"ml-1",children:t.variant.title||""})]}),(0,e.jsxs)("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[(0,e.jsxs)("span",{children:[a.redeemModal.product.shippingFeeLabel,": "]}),(0,e.jsx)("span",{className:"ml-1",children:(0,r.formatPrice)({amount:0,currencyCode:t.product.price?.currencyCode,locale:m||"us"})})]})]}),(0,e.jsxs)("div",{className:"text-[15px] font-bold text-[#777] md:text-[12px]",children:[(0,e.jsxs)("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[(0,e.jsxs)("span",{children:[a.redeemModal.product.quantityLabel,": "]}),(0,e.jsx)("span",{className:"ml-1",children:"1"})]}),(0,e.jsxs)("div",{className:"l:flex l:items-center l:justify-between",children:[(0,e.jsxs)("span",{children:[a.redeemModal.product.totalPriceLabel,": "]}),(0,e.jsxs)("span",{className:"ml-1",children:[t.alpc?.consumeCredits," ",l?.pointUnit]})]})]})]})]})]})]})};
|
|
2
2
|
//# sourceMappingURL=ProductInfo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport { formatPrice } from '../../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { useCreditsContext } from '../../context/provider'\n\ntype ProductInfoProps = {\n item: RedeemableItemType\n copy: CreditsRedeemListCopy\n}\n\nexport const ProductInfo = ({ item, copy }: ProductInfoProps) => {\n const { locale } = useHeadlessContext()\n const { pageCommon } = useCreditsContext()\n\n return (\n <div className=\"flex w-full items-center justify-center md:items-start md:justify-start\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"md:flex md:flex-col\">\n <div className=\"md:flex md:items-center\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden\" title={item.product.title}>\n {item.product.title}\n </div>\n </div>\n\n <div className=\"mt-[16px] md:mt-[12px]\">\n <
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAkBM,IAAAI,EAAA,6BAlBNC,
|
|
4
|
+
"sourcesContent": ["import { Picture, Text } from '@anker-in/headless-ui'\nimport { formatPrice } from '../../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { useCreditsContext } from '../../context/provider'\n\ntype ProductInfoProps = {\n item: RedeemableItemType\n copy: CreditsRedeemListCopy\n}\n\nexport const ProductInfo = ({ item, copy }: ProductInfoProps) => {\n const { locale } = useHeadlessContext()\n const { pageCommon } = useCreditsContext()\n\n return (\n <div className=\"flex w-full items-center justify-center md:items-start md:justify-start\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"md:flex md:flex-col\">\n <div className=\"md:flex md:items-center\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden\" title={item.product.title}>\n {item.product.title}\n </div>\n </div>\n\n <div className=\"mt-[16px] md:mt-[12px]\">\n <Text\n className=\"mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden\"\n html={item.product.title}\n title={item.product.title}\n ></Text>\n <div className=\"flex font-semibold leading-[1.4] md:flex-col\">\n <div className=\"mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]\">\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.variantLabel}: </span>\n <span className=\"ml-1\">{item.variant.title || ''}</span>\n </div>\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.shippingFeeLabel}: </span>\n <span className=\"ml-1\">\n {formatPrice({\n amount: 0,\n currencyCode: item.product.price?.currencyCode!,\n locale: locale || 'us',\n })}\n </span>\n </div>\n </div>\n <div className=\"text-[15px] font-bold text-[#777] md:text-[12px]\">\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.quantityLabel}: </span>\n <span className=\"ml-1\">1</span>\n </div>\n <div className=\"l:flex l:items-center l:justify-between\">\n <span>{copy.redeemModal.product.totalPriceLabel}: </span>\n <span className=\"ml-1\">\n {item.alpc?.consumeCredits} {pageCommon?.pointUnit}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAkBM,IAAAI,EAAA,6BAlBNC,EAA8B,iCAC9BC,EAA4B,+BAG5BC,EAAmC,yBACnCC,EAAkC,kCAO3B,MAAMN,EAAc,CAAC,CAAE,KAAAO,EAAM,KAAAC,CAAK,IAAwB,CAC/D,KAAM,CAAE,OAAAC,CAAO,KAAI,sBAAmB,EAChC,CAAE,WAAAC,CAAW,KAAI,qBAAkB,EAEzC,SACE,QAAC,OAAI,UAAU,0EACb,oBAAC,WACC,UAAU,6HACV,OAAQH,EAAK,QAAQ,OAAO,KAAOA,EAAK,SAAS,OAAO,CAAC,GAAG,IAC5D,IAAKA,EAAK,QAAQ,MACnB,KACD,QAAC,OAAI,UAAU,sBACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,UAAU,iIACV,OAAQA,EAAK,QAAQ,OAAO,KAAOA,EAAK,SAAS,OAAO,CAAC,GAAG,IAC5D,IAAKA,EAAK,QAAQ,MACnB,KACD,OAAC,OAAI,UAAU,2DAA2D,MAAOA,EAAK,QAAQ,MAC3F,SAAAA,EAAK,QAAQ,MAChB,GACF,KAEA,QAAC,OAAI,UAAU,yBACb,oBAAC,QACC,UAAU,yDACV,KAAMA,EAAK,QAAQ,MACnB,MAAOA,EAAK,QAAQ,MACrB,KACD,QAAC,OAAI,UAAU,+CACb,qBAAC,OAAI,UAAU,qEACb,qBAAC,OAAI,UAAU,yCACb,qBAAC,QAAM,UAAAC,EAAK,YAAY,QAAQ,aAAa,MAAE,KAC/C,OAAC,QAAK,UAAU,OAAQ,SAAAD,EAAK,QAAQ,OAAS,GAAG,GACnD,KACA,QAAC,OAAI,UAAU,yCACb,qBAAC,QAAM,UAAAC,EAAK,YAAY,QAAQ,iBAAiB,MAAE,KACnD,OAAC,QAAK,UAAU,OACb,2BAAY,CACX,OAAQ,EACR,aAAcD,EAAK,QAAQ,OAAO,aAClC,OAAQE,GAAU,IACpB,CAAC,EACH,GACF,GACF,KACA,QAAC,OAAI,UAAU,mDACb,qBAAC,OAAI,UAAU,yCACb,qBAAC,QAAM,UAAAD,EAAK,YAAY,QAAQ,cAAc,MAAE,KAChD,OAAC,QAAK,UAAU,OAAO,aAAC,GAC1B,KACA,QAAC,OAAI,UAAU,0CACb,qBAAC,QAAM,UAAAA,EAAK,YAAY,QAAQ,gBAAgB,MAAE,KAClD,QAAC,QAAK,UAAU,OACb,UAAAD,EAAK,MAAM,eAAe,IAAEG,GAAY,WAC3C,GACF,GACF,GACF,GACF,GACF,GACF,CAEJ",
|
|
6
6
|
"names": ["ProductInfo_exports", "__export", "ProductInfo", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_utils", "import_lib", "import_provider", "item", "copy", "locale", "pageCommon"]
|
|
7
7
|
}
|
|
@@ -58,8 +58,8 @@ export type CreditsPageCommon = {
|
|
|
58
58
|
url: string;
|
|
59
59
|
};
|
|
60
60
|
};
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
activitiesModal?: MyActivitiesMetafields;
|
|
62
|
+
rewardsModal?: MyRewardsMetafields;
|
|
63
63
|
validatorInfo?: {
|
|
64
64
|
addressInfo: {
|
|
65
65
|
name: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of a(e))!p.call(i,t)&&t!==s&&n(i,t,{get:()=>e[t],enumerable:!(r=o(e,t))||r.enumerable});return i};var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of a(e))!p.call(i,t)&&t!==s&&n(i,t,{get:()=>e[t],enumerable:!(r=o(e,t))||r.enumerable});return i};var d=i=>g(n({},"__esModule",{value:!0}),i);var c={};module.exports=d(c);
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/credits/type.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Product, ProductVariant } from '@anker-in/lib'\nimport type { AlpcConsumeType, ConsumeType } from './context/const'\nimport { MyActivitiesMetafields } from './modal/activitiesModal'\nimport { MyRewardsMetafields } from './modal/MyRewardsModal'\n\nexport interface Subscription {\n preference: {\n subscribe: boolean\n brand: string\n }[]\n}\n\nexport type RedeemableItem = {\n config: {\n title: string\n desc: string\n rules: string[]\n image: {\n url: string\n }\n type: ConsumeType\n value: string\n }\n alpc: {\n id: string\n consumeCredits: number\n remainingInventory: number\n isLimited: boolean\n consumeType: AlpcConsumeType\n showCredit: boolean\n title: string\n }\n product: Product\n variant: ProductVariant\n}\n\nexport interface ShippingCountry {\n id: string\n name: string\n code: string\n provinces: {\n id: string\n name: string\n code: string\n }[]\n}\n\nexport interface ShippingZone {\n name: string\n countries: ShippingCountry[]\n}\n\nexport type CreditsPageCommon = {\n pointUnit?: string\n ruleLabel?: string\n soldOut?: string\n copied?: string\n off?: string\n copy?: string\n giftCardLabel?: string\n imageMapping?: {\n [key in ConsumeType]: {\n url: string\n }\n }\n
|
|
4
|
+
"sourcesContent": ["import type { Product, ProductVariant } from '@anker-in/lib'\nimport type { AlpcConsumeType, ConsumeType } from './context/const'\nimport { MyActivitiesMetafields } from './modal/activitiesModal'\nimport { MyRewardsMetafields } from './modal/MyRewardsModal'\n\nexport interface Subscription {\n preference: {\n subscribe: boolean\n brand: string\n }[]\n}\n\nexport type RedeemableItem = {\n config: {\n title: string\n desc: string\n rules: string[]\n image: {\n url: string\n }\n type: ConsumeType\n value: string\n }\n alpc: {\n id: string\n consumeCredits: number\n remainingInventory: number\n isLimited: boolean\n consumeType: AlpcConsumeType\n showCredit: boolean\n title: string\n }\n product: Product\n variant: ProductVariant\n}\n\nexport interface ShippingCountry {\n id: string\n name: string\n code: string\n provinces: {\n id: string\n name: string\n code: string\n }[]\n}\n\nexport interface ShippingZone {\n name: string\n countries: ShippingCountry[]\n}\n\nexport type CreditsPageCommon = {\n pointUnit?: string\n ruleLabel?: string\n soldOut?: string\n copied?: string\n off?: string\n copy?: string\n giftCardLabel?: string\n imageMapping?: {\n [key in ConsumeType]: {\n url: string\n }\n }\n activitiesModal?: MyActivitiesMetafields\n rewardsModal?: MyRewardsMetafields\n validatorInfo?: {\n addressInfo: {\n name: string\n country: string\n province: string\n city: string\n address: string\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["type_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -9,13 +9,13 @@ import { CreditsRedeemListCopy } from '../components/credits/creditsRedeemList';
|
|
|
9
9
|
import { CreditsCashCopy } from '../components/credits/creditsCash';
|
|
10
10
|
import { CreditsFaqCopy } from '../components/credits/creditsFaq';
|
|
11
11
|
export declare enum ComponentKey {
|
|
12
|
-
Banner = "
|
|
13
|
-
InfoCard = "
|
|
14
|
-
Benefits = "
|
|
15
|
-
WaysToGetCredits = "
|
|
16
|
-
RedeemList = "
|
|
17
|
-
SpendCreditsLikeCash = "
|
|
18
|
-
Faqs = "
|
|
12
|
+
Banner = "creditsBanner",
|
|
13
|
+
InfoCard = "creditsInfoCard",
|
|
14
|
+
Benefits = "creditsBenefits",
|
|
15
|
+
WaysToGetCredits = "creditsWaysToGetCredits",
|
|
16
|
+
RedeemList = "creditsRedeemList",
|
|
17
|
+
SpendCreditsLikeCash = "creditsCash",
|
|
18
|
+
Faqs = "creditsFaq"
|
|
19
19
|
}
|
|
20
20
|
export type CreditsTemplateProps = {
|
|
21
21
|
headlessConfig: HeadlessConfig;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var u=(r,i)=>{for(var t in i)a(r,t,{get:i[t],enumerable:!0})},S=(r,i,t,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of B(i))!L.call(r,n)&&n!==t&&a(r,n,{get:()=>i[n],enumerable:!(d=v(i,n))||d.enumerable});return r};var F=r=>S(a({},"__esModule",{value:!0}),r);var R={};u(R,{ComponentKey:()=>I,CreditsTemplate:()=>K});module.exports=F(R);var e=require("react/jsx-runtime"),p=require("@anker-in/lib"),C=require("../components/registration/context/provider"),m=require("../components/credits/context/provider"),f=require("../components/credits/creditsBanner"),y=require("../components/credits/creditsInfoCard"),c=require("../components/credits/creditsBenefits"),l=require("../components/credits/creditsWaysToGetCredits"),g=require("../components/credits/creditsRedeemList"),T=require("../components/credits/creditsCash"),P=require("../components/credits/creditsFaq"),I=(o=>(o.Banner="creditsBanner",o.InfoCard="creditsInfoCard",o.Benefits="creditsBenefits",o.WaysToGetCredits="creditsWaysToGetCredits",o.RedeemList="creditsRedeemList",o.SpendCreditsLikeCash="creditsCash",o.Faqs="creditsFaq",o))(I||{});const K=({headlessConfig:r,siteConfig:i,userContext:t,pageConfig:d,registrationContext:n,gtm:h})=>(0,e.jsx)(p.HeadlessProvider,{headlessConfig:r,children:(0,e.jsx)(C.RegistrationProvider,{copy:i.registrationsSettings,email:t?.profile?.email,children:(0,e.jsx)(m.CreditsProvider,{profile:t?.profile,removeProfile:t?.removeProfile,isLoadingProfile:t?.isLoadingProfile,openSignInPopup:n.openSignInPopup,openSignUpPopup:n.openSignUpPopup,creditInfo:t?.creditInfo,taskIdToTypeMapping:i.taskIdToTypeMapping,customer:t?.customer,fetchCreditInfo:t?.fetchCreditInfo,customerLoading:t?.customerLoading,gtm:h,pageCommon:d.common,children:(0,e.jsx)("div",{className:(0,p.classNames)("bg-[#f5f5f7] leading-[1.2]"),children:d.order.map(s=>{const o=d.components?.[s];return o?(0,e.jsxs)(e.Fragment,{children:[s==="creditsBanner"&&(0,e.jsx)(f.CreditsBanner,{copy:o}),s==="creditsInfoCard"&&t?.profile&&(0,e.jsx)(y.CreditsInfoCard,{copy:o}),s==="creditsBenefits"&&(0,e.jsx)(c.CreditsBenefits,{copy:o}),s==="creditsWaysToGetCredits"&&(0,e.jsx)(l.CreditsWaysToGetCredits,{copy:o,classNames:r.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),s==="creditsRedeemList"&&(0,e.jsx)(g.CreditsRedeemList,{copy:o}),s==="creditsCash"&&(0,e.jsx)(T.CreditsCash,{copy:o}),s==="creditsFaq"&&(0,e.jsx)(P.CreditsFaq,{copy:o}),s!=="creditsBanner"&&(0,e.jsx)("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});
|
|
2
2
|
//# sourceMappingURL=credits.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/templates/credits.tsx"],
|
|
4
|
-
"sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\n\nexport enum ComponentKey {\n Banner = '
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,oBAAAC,IAAA,eAAAC,EAAAJ,GA6FgB,IAAAK,EAAA,6BA7FhBC,EAA6D,yBAC7DC,EAAqC,uDAGrCA,EAAgC,kDAGhCC,EAAiD,+CACjDC,EAAqD,iDACrDC,EAAqD,iDACrDC,EAAqE,yDACrEC,EAAyD,mDACzDC,EAA6C,6CAC7CC,EAA2C,4CAE/BZ,OACVA,EAAA,OAAS,
|
|
6
|
-
"names": ["credits_exports", "__export", "ComponentKey", "CreditsTemplate", "__toCommonJS", "import_jsx_runtime", "import_lib", "import_provider", "import_creditsBanner", "import_creditsInfoCard", "import_creditsBenefits", "import_creditsWaysToGetCredits", "import_creditsRedeemList", "import_creditsCash", "import_creditsFaq", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "
|
|
4
|
+
"sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\n\nexport enum ComponentKey {\n Banner = 'creditsBanner',\n InfoCard = 'creditsInfoCard',\n Benefits = 'creditsBenefits',\n WaysToGetCredits = 'creditsWaysToGetCredits',\n RedeemList = 'creditsRedeemList',\n SpendCreditsLikeCash = 'creditsCash',\n Faqs = 'creditsFaq',\n}\nexport type CreditsTemplateProps = {\n headlessConfig: HeadlessConfig\n siteConfig: {\n registrationsSettings: {\n authCodeActivate: any\n }\n taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n }\n pageConfig: {\n order: ComponentKey[]\n common: CreditsPageCommon\n components: {\n [ComponentKey.Banner]?: CreditsBannerCopy\n [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n [ComponentKey.Benefits]?: CreditsBenefitsCopy\n [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n [ComponentKey.Faqs]?: CreditsFaqCopy\n }\n }\n userContext: {\n profile: any\n removeProfile: () => void\n isLoadingProfile: boolean\n creditInfo: any\n customer: any\n customerLoading: boolean\n fetchCreditInfo: () => void\n }\n registrationContext: {\n openSignUpPopup: () => void\n openSignInPopup: () => void\n }\n gtm: {\n pageGroup: string\n }\n}\n\nexport const CreditsTemplate = ({\n headlessConfig,\n siteConfig,\n userContext,\n pageConfig,\n registrationContext,\n gtm,\n}: CreditsTemplateProps) => {\n return (\n <HeadlessProvider headlessConfig={headlessConfig}>\n <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n <CreditsProvider\n profile={userContext?.profile}\n removeProfile={userContext?.removeProfile}\n isLoadingProfile={userContext?.isLoadingProfile}\n openSignInPopup={registrationContext.openSignInPopup}\n openSignUpPopup={registrationContext.openSignUpPopup}\n creditInfo={userContext?.creditInfo}\n taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n customer={userContext?.customer}\n fetchCreditInfo={userContext?.fetchCreditInfo}\n customerLoading={userContext?.customerLoading}\n gtm={gtm}\n pageCommon={pageConfig.common}\n >\n <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n {pageConfig.order.map(key => {\n const componentCopy = pageConfig.components?.[key]\n if (!componentCopy) return null\n return (\n <>\n {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}\n {key === ComponentKey.InfoCard && userContext?.profile && (\n <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n )}\n {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}\n {key === ComponentKey.WaysToGetCredits && (\n <CreditsWaysToGetCredits\n copy={componentCopy as CreditsWaysToGetCreditsCopy}\n classNames={\n headlessConfig.brand === 'anker'\n ? {\n subtitle: 'text-white',\n equalCreditsText:\n 'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',\n }\n : {\n subtitle: 'text-[#D1D1D1]',\n equalCreditsText: 'text-[#F6EAD0]',\n }\n }\n />\n )}\n {key === ComponentKey.RedeemList && (\n <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n )}\n {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}\n {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}\n {key !== ComponentKey.Banner && (\n <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n )}\n </>\n )\n })}\n </div>\n </CreditsProvider>\n </RegistrationProvider>\n </HeadlessProvider>\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,oBAAAC,IAAA,eAAAC,EAAAJ,GA6FgB,IAAAK,EAAA,6BA7FhBC,EAA6D,yBAC7DC,EAAqC,uDAGrCA,EAAgC,kDAGhCC,EAAiD,+CACjDC,EAAqD,iDACrDC,EAAqD,iDACrDC,EAAqE,yDACrEC,EAAyD,mDACzDC,EAA6C,6CAC7CC,EAA2C,4CAE/BZ,OACVA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,WAAa,oBACbA,EAAA,qBAAuB,cACvBA,EAAA,KAAO,aAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAY,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,OAEI,OAAC,oBAAiB,eAAgBL,EAChC,mBAAC,wBAAqB,KAAMC,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,mBAAC,mBACC,QAASA,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,mBAAC,OAAI,aAAW,cAAW,4BAA4B,EACpD,SAAAA,EAAW,MAAM,IAAIG,GAAO,CAC3B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAG,EACjD,OAAKC,KAEH,oBACG,UAAAD,IAAQ,oBAAuB,OAAC,iBAAc,KAAMC,EAAoC,EACxFD,IAAQ,mBAAyBJ,GAAa,YAC7C,OAAC,mBAAgB,KAAMK,EAAsC,EAE9DD,IAAQ,sBAAyB,OAAC,mBAAgB,KAAMC,EAAsC,EAC9FD,IAAQ,8BACP,OAAC,2BACC,KAAMC,EACN,WACEP,EAAe,QAAU,QACrB,CACE,SAAU,aACV,iBACE,4EACJ,EACA,CACE,SAAU,iBACV,iBAAkB,gBACpB,EAER,EAEDM,IAAQ,wBACP,OAAC,qBAAkB,KAAMC,EAAwC,EAElED,IAAQ,kBAAqC,OAAC,eAAY,KAAMC,EAAkC,EAClGD,IAAQ,iBAAqB,OAAC,cAAW,KAAMC,EAAiC,EAChFD,IAAQ,oBACP,OAAC,OAAI,UAAU,qEAAqE,GAExF,EAjCyB,IAmC7B,CAAC,EACH,EACF,EACF,EACF",
|
|
6
|
+
"names": ["credits_exports", "__export", "ComponentKey", "CreditsTemplate", "__toCommonJS", "import_jsx_runtime", "import_lib", "import_provider", "import_creditsBanner", "import_creditsInfoCard", "import_creditsBenefits", "import_creditsWaysToGetCredits", "import_creditsRedeemList", "import_creditsCash", "import_creditsFaq", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "key", "componentCopy"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i,jsxs as N}from"react/jsx-runtime";import{Container as u,Heading as f}from"@anker-in/headless-ui";import{useMemo as C,useState as g}from"react";import h from"./RedeemableItem";import b from"../context/hooks/useRedeemableList";import x from"../modal/rulesModal";import{useProductsByHandles as y}from"@anker-in/lib";import{classNames as v}from"@anker-in/lib";const P=({copy:s})=>{const[n,d]=g(),{redeemableList:m}=b(),p=[],{data:o}=y({handles:s?.list?.map(e=>e.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:p}}),l=C(()=>o?.map(e=>{const r=s.list.find(a=>a.products?.[0]?.handle===e.handle),t=m.find(a=>a.id?.toString()===r?.redeemId?.toString()),c=e.variants?.find(a=>a.sku===r?.products?.[0]?.sku)||e.variants?.[0];return!t||!c?null:{product:e,productVariant:c,alpcData:{id:t?.id,consumeCredits:t?.consume_credits,remainingInventory:t?.remaining_inventory,isLimited:t?.is_limited,consumeType:t?.consume_type,title:t?.name,desc:t?.note},config:r}}).filter(Boolean),[o,s.list,m]);return console.log("list",l),N(u,{className:v("bg-[#F5F5F5]"),children:[i(f,{as:"h2",size:"4",html:s.title}),i("div",{className:"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3",children:l?.map((e,r)=>i(h,{copy:s,itemData:e,setRules:d,currencyCode:o?.[0]?.price.currencyCode||"USD"},r))}),n&&i(x,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:n.length>0,onClose:()=>d([]),titleClassName:"border-b-transparent h-[56px]",rules:n,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:s?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{P as CreditsCash};
|
|
2
2
|
//# sourceMappingURL=CreditsCash.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/CreditsCash.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Container, Heading } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport RedeemableItem from './RedeemableItem'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport RulesModal from '../modal/rulesModal'\nimport { useProductsByHandles
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Container", "Heading", "useMemo", "useState", "RedeemableItem", "useRedeemableList", "RulesModal", "useProductsByHandles", "
|
|
4
|
+
"sourcesContent": ["import { Container, Heading } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport RedeemableItem from './RedeemableItem'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport RulesModal from '../modal/rulesModal'\nimport { useProductsByHandles } from '@anker-in/lib'\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { Product, classNames as cn } from '@anker-in/lib'\n\nexport const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {\n const [rules, setRules] = useState<string | string[]>()\n const { redeemableList } = useRedeemableList()\n\n const variantMetafieldIdentifiers: any[] = []\n\n const { data: productByHandles } = useProductsByHandles({\n handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],\n metafieldIdentifiers: {\n variant: variantMetafieldIdentifiers,\n },\n })\n\n const list = useMemo(() => {\n return productByHandles\n ?.map((product: Product) => {\n const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)\n const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())\n const productVariant =\n product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]\n if (!alpcData || !productVariant) return null\n return {\n product,\n productVariant,\n alpcData: {\n id: alpcData?.id,\n consumeCredits: alpcData?.consume_credits,\n remainingInventory: alpcData?.remaining_inventory,\n isLimited: alpcData?.is_limited,\n consumeType: alpcData?.consume_type,\n title: alpcData?.name,\n desc: alpcData?.note,\n },\n config,\n }\n })\n .filter(Boolean) as unknown as RedeemItem[]\n }, [productByHandles, copy.list, redeemableList])\n\n console.log('list', list)\n\n return (\n <Container className={cn('bg-[#F5F5F5]')}>\n <Heading as=\"h2\" size=\"4\" html={copy.title} />\n <div className=\"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3\">\n {list?.map((item, index: number) => (\n <RedeemableItem\n key={index}\n copy={copy}\n itemData={item}\n setRules={setRules}\n currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}\n />\n ))}\n </div>\n\n {rules && (\n <RulesModal\n overlayClassName=\"md:px-[16px] md:items-center\"\n className=\"md:h-fit md:rounded-b-[16px]\"\n isOpen={rules.length > 0}\n onClose={() => setRules([])}\n titleClassName=\"border-b-transparent h-[56px]\"\n rules={rules}\n scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n title={copy?.ruleLabel}\n ruleClassName=\"text-[#1d1d1f] font-bold\"\n />\n )}\n </Container>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAoDI,OACE,OAAAA,EADF,QAAAC,MAAA,oBApDJ,OAAS,aAAAC,EAAW,WAAAC,MAAe,wBACnC,OAAS,WAAAC,EAAS,YAAAC,MAAgB,QAElC,OAAOC,MAAoB,mBAC3B,OAAOC,MAAuB,qCAC9B,OAAOC,MAAgB,sBACvB,OAAS,wBAAAC,MAA4B,gBAErC,OAAkB,cAAcC,MAAU,gBAEnC,MAAMC,EAAc,CAAC,CAAE,KAAAC,CAAK,IAAiC,CAClE,KAAM,CAACC,EAAOC,CAAQ,EAAIT,EAA4B,EAChD,CAAE,eAAAU,CAAe,EAAIR,EAAkB,EAEvCS,EAAqC,CAAC,EAEtC,CAAE,KAAMC,CAAiB,EAAIR,EAAqB,CACtD,QAASG,GAAM,MAAM,IAAIM,GAAQA,EAAK,WAAW,CAAC,GAAG,MAAM,GAAK,CAAC,EACjE,qBAAsB,CACpB,QAASF,CACX,CACF,CAAC,EAEKG,EAAOf,EAAQ,IACZa,GACH,IAAKG,GAAqB,CAC1B,MAAMC,EAAST,EAAK,KAAK,KAAKM,GAAQA,EAAK,WAAW,CAAC,GAAG,SAAWE,EAAQ,MAAM,EAC7EE,EAAWP,EAAe,KAAKG,GAAQA,EAAK,IAAI,SAAS,IAAMG,GAAQ,UAAU,SAAS,CAAC,EAC3FE,EACJH,EAAQ,UAAU,KAAMI,GAAiBA,EAAQ,MAAQH,GAAQ,WAAW,CAAC,GAAG,GAAG,GAAKD,EAAQ,WAAW,CAAC,EAC9G,MAAI,CAACE,GAAY,CAACC,EAAuB,KAClC,CACL,QAAAH,EACA,eAAAG,EACA,SAAU,CACR,GAAID,GAAU,GACd,eAAgBA,GAAU,gBAC1B,mBAAoBA,GAAU,oBAC9B,UAAWA,GAAU,WACrB,YAAaA,GAAU,aACvB,MAAOA,GAAU,KACjB,KAAMA,GAAU,IAClB,EACA,OAAAD,CACF,CACF,CAAC,EACA,OAAO,OAAO,EAChB,CAACJ,EAAkBL,EAAK,KAAMG,CAAc,CAAC,EAEhD,eAAQ,IAAI,OAAQI,CAAI,EAGtBlB,EAACC,EAAA,CAAU,UAAWQ,EAAG,cAAc,EACrC,UAAAV,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMS,EAAK,MAAO,EAC5CZ,EAAC,OAAI,UAAU,+FACZ,SAAAmB,GAAM,IAAI,CAACD,EAAMO,IAChBzB,EAACM,EAAA,CAEC,KAAMM,EACN,SAAUM,EACV,SAAUJ,EACV,aAAcG,IAAmB,CAAC,GAAG,MAAM,cAAgB,OAJtDQ,CAKP,CACD,EACH,EAECZ,GACCb,EAACQ,EAAA,CACC,iBAAiB,+BACjB,UAAU,+BACV,OAAQK,EAAM,OAAS,EACvB,QAAS,IAAMC,EAAS,CAAC,CAAC,EAC1B,eAAe,gCACf,MAAOD,EACP,gBAAgB,mCAChB,MAAOD,GAAM,UACb,cAAc,2BAChB,GAEJ,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "Container", "Heading", "useMemo", "useState", "RedeemableItem", "useRedeemableList", "RulesModal", "useProductsByHandles", "cn", "CreditsCash", "copy", "rules", "setRules", "redeemableList", "variantMetafieldIdentifiers", "productByHandles", "item", "list", "product", "config", "alpcData", "productVariant", "variant", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Button as N,Container as w,Text as x}from"@anker-in/headless-ui";import{useCallback as k,useState as m}from"react";import{useCreditsContext as y}from"../context/provider";import{numberFormat as v}from"../context/utils";import h from"../modal/activitiesModal";import
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Button as N,Container as w,Text as x}from"@anker-in/headless-ui";import{useCallback as k,useState as m}from"react";import{useCreditsContext as y}from"../context/provider";import{numberFormat as v}from"../context/utils";import h from"../modal/activitiesModal";import M from"../modal/MyRewardsModal";import{gaNormalClick as z,classNames as t,useHeadlessContext as B}from"@anker-in/lib";import{roundedBrands as I}from"../const";function A({copy:a}){const[b,p]=m(!1),[u,c]=m(!1),[d,o]=m(!1),{creditInfo:l,pageCommon:n}=y(),{brand:g}=B(),r=I.includes(g),C=k(s=>{if(z({position:"info_card",label:s.text}),s.type)switch(s.type){case"activities":p(!0);break;case"rewards":c(!0);break}},[]);return i(w,{asChild:!0,id:"infoCard",className:"-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]",children:[i("div",{className:t("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]",!r&&"rounded-none"),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:t("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:t("mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]"),children:a.balanceLabel}),i("div",{className:"flex items-baseline",children:[e("div",{className:t("mr-[8px] text-[36px] font-extrabold","min-md:text-[44px]","min-xl:text-[56px]"),children:l?v(l.available_credit):0}),e("div",{className:"text-[16px]",children:a?.pointUnit})]})]}),i("div",{className:"w-fit md:flex-1",children:[i("div",{className:t("mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]"),children:[e(x,{className:"text-[14px] font-bold xl:text-[16px] min-md:text-[18px]",html:a.comingSoonLabel}),a.comingSoonTips&&i("div",{className:"group relative ml-[4px] flex cursor-pointer items-start",children:[e(x,{as:"div",html:a?.infoIcon,className:"size-[18px] cursor-pointer [&_svg]:size-full",onClick:()=>{d?o(!1):(o(!0),setTimeout(()=>{o(!1)},5e3))}}),e("div",{className:t("absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]",d?"block":"hidden"),children:i("div",{className:t("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!r&&"rounded-none"),children:[e(x,{size:"2",html:a.comingSoonTips,className:"desktop:text-[18px]"}),e("div",{className:t("absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!r&&"rounded-none")})]})})]})]}),i("div",{className:"flex items-baseline ",children:[e("div",{className:t("mr-[8px] text-[36px] font-extrabold","min-l:text-[44px]","min-xl:text-[56px]"),children:l?v(l.pending_credit):0}),e("div",{className:"text-[16px]",children:a?.pointUnit})]})]})]}),e("div",{className:t("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:a.buttons?.map((s,f)=>e(N,{variant:f===0?"secondary":"primary",size:"lg",className:"min-w-[156px] laptop:min-w-[189px]",onClick:()=>{C(s)},children:s.text},f))}),n?.activitiesModal&&e(h,{isOpen:b,data:n?.activitiesModal,onClose:()=>{p(!1)}}),n?.rewardsModal&&e(M,{isOpen:u,data:n?.rewardsModal,onClose:()=>{c(!1)}})]}),d&&e("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>o(!1),onKeyDown:s=>s.key==="Escape"&&o(!1)})]})}export{A 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 { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal from '../modal/MyRewardsModal'\nimport { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { roundedBrands } from '../const'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport type CreditsInfoCardCopy = {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n}\n\nexport function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n const { creditInfo, pageCommon } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\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 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 !rounded && 'rounded-none'\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 {copy.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]\">{copy?.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={copy.comingSoonLabel} />\n {copy.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={copy?.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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n !rounded && 'rounded-none'\n )}\n >\n <Text size=\"2\" html={copy.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div\n className={cn(\n 'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n !rounded && 'rounded-none'\n )}\n />\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]\">{copy?.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 {copy.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 {pageCommon?.
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { Button, Container, Text } from '@anker-in/headless-ui'\n\nimport { useCallback, useState } from 'react'\nimport { useCreditsContext } from '../context/provider'\nimport { numberFormat } from '../context/utils'\nimport ActivitiesModal from '../modal/activitiesModal'\nimport MyRewardsModal from '../modal/MyRewardsModal'\nimport { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { roundedBrands } from '../const'\n\ntype ButtonConfig = {\n text: string\n type: 'activities' | 'rewards'\n}\nexport type CreditsInfoCardCopy = {\n balanceLabel: string\n comingSoonLabel: string\n comingSoonTips: string\n buttons: ButtonConfig[]\n pointUnit: string\n infoIcon: string\n}\n\nexport function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {\n const [openActivities, setOpenActivities] = useState(false)\n const [openRewards, setOpenRewards] = useState(false)\n const [hover, setHover] = useState<boolean>(false)\n const { creditInfo, pageCommon } = useCreditsContext()\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\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 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 !rounded && 'rounded-none'\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 {copy.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]\">{copy?.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={copy.comingSoonLabel} />\n {copy.comingSoonTips && (\n <div className=\"group relative ml-[4px] flex cursor-pointer items-start\">\n <Text\n as=\"div\"\n html={copy?.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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n !rounded && 'rounded-none'\n )}\n >\n <Text size=\"2\" html={copy.comingSoonTips} className=\"desktop:text-[18px]\" />\n <div\n className={cn(\n 'absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n !rounded && 'rounded-none'\n )}\n />\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]\">{copy?.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 {copy.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 {pageCommon?.activitiesModal && (\n <ActivitiesModal\n isOpen={openActivities}\n data={pageCommon?.activitiesModal}\n onClose={() => {\n setOpenActivities(false)\n }}\n />\n )}\n {pageCommon?.rewardsModal && (\n <MyRewardsModal\n isOpen={openRewards}\n data={pageCommon?.rewardsModal}\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", "numberFormat", "ActivitiesModal", "MyRewardsModal", "gaNormalClick", "cn", "useHeadlessContext", "roundedBrands", "CreditsInfoCard", "copy", "openActivities", "setOpenActivities", "openRewards", "setOpenRewards", "hover", "setHover", "creditInfo", "pageCommon", "brand", "rounded", "handleButtonClick", "buttonConfig", "item", "index", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Picture as v}from"@anker-in/headless-ui";import y from"../../context/hooks/useClickOutside";import s from"classnames";import{useEffect as h,useState as c}from"react";import{roundedBrands as C}from"../../const";import{useHeadlessContext as k}from"@anker-in/lib";function
|
|
1
|
+
import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Picture as v}from"@anker-in/headless-ui";import y from"../../context/hooks/useClickOutside";import s from"classnames";import{useEffect as h,useState as c}from"react";import{roundedBrands as C}from"../../const";import{useHeadlessContext as k}from"@anker-in/lib";function A({countries:t,loading:u,className:a,value:n,onChange:i}){const[f,r]=c(!1),[m,l]=c(""),{brand:g}=k(),d=C.includes(g),x=y(()=>{r(!1)});return h(()=>{const e=t.filter(b=>b.code===n);e.length&&l(e[0].name)},[l,t,n]),p("div",{className:"relative",children:[o("select",{className:s("!h-[50px] pr-[45px] min-l:hidden",a),style:{WebkitTextFillColor:"black"},disabled:u,value:n,onChange:e=>{i(e.target.value)},children:t.map(e=>o("option",{value:e.code,children:e.name},e.code))}),o("div",{className:s("absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block",!d&&"rounded-none",a),onClick:()=>{r(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:m}),o(v,{source:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500",className:"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover",alt:"arrow"}),o("div",{ref:x,className:s("absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]",!d&&"rounded-none",{"!hidden":!f}),children:o("ul",{className:"py-[6px]",children:t.map(e=>p("li",{value:e.code,className:s("relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]",{"!bg-[#EAEAEC]":e.code===n}),children:[o("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:e.code,onClick:()=>{l(e.name),r(!1),i(e.code)}}),e.name]},e.code))})})]})}export{A as CountrySelect};
|
|
2
2
|
//# sourceMappingURL=CountrySelect.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\nimport { roundedBrands } from '../../const'\nimport { useHeadlessContext } from '@anker-in/lib'\n\ninterface Country {\n id: string\n code: string\n name: string\n}\n\ninterface CountrySelectProps {\n countries: Country[]\n loading?: boolean\n className?: string\n value?: string\n onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n const [show, setShow] = useState(false)\n const [display, setDisplay] = useState<any>('')\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\n const dorpdown = useClickOutside<HTMLDivElement>(() => {\n setShow(false)\n })\n\n useEffect(() => {\n const target = countries.filter(item => item.code === value)\n if (target.length) setDisplay(target[0].name)\n }, [setDisplay, countries, value])\n\n return (\n <div className=\"relative\">\n <select\n className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n style={{\n WebkitTextFillColor: 'black',\n }}\n disabled={loading}\n value={value}\n onChange={event => {\n onChange(event.target.value)\n }}\n >\n {countries.map((item: { id: string; name: string; code: string }) => (\n <option key={item.code} value={item.code}>\n {item.name}\n </option>\n ))}\n </select>\n\n <div\n className={classNames(\n 'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n !rounded && 'rounded-none',\n className\n )}\n onClick={() => {\n setShow(true)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {display}\n </div>\n\n <Picture\n source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n
|
|
5
|
-
"mappings": "AAiDU,cAAAA,EA0CE,QAAAC,MA1CF,oBAjDV,OAAS,WAAAC,MAAe,wBACxB,OAAOC,MAAqB,sCAC5B,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,iBAAAC,MAAqB,cAC9B,OAAS,sBAAAC,MAA0B,gBAgB5B,SAASC,EAAc,CAAE,UAAAC,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,EAAIV,EAAS,EAAK,EAChC,CAACW,EAASC,CAAU,EAAIZ,EAAc,EAAE,EACxC,CAAE,MAAAa,CAAM,EAAIX,EAAmB,EAC/BY,EAAUb,EAAc,SAASY,CAAK,EACtCE,EAAWlB,EAAgC,IAAM,CACrDa,EAAQ,EAAK,CACf,CAAC,EAED,OAAAX,EAAU,IAAM,CACd,MAAMiB,EAASZ,EAAU,OAAOa,GAAQA,EAAK,OAASV,CAAK,EACvDS,EAAO,QAAQJ,EAAWI,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACJ,EAAYR,EAAWG,CAAK,CAAC,EAG/BZ,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWI,EAAW,mCAAoCQ,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUW,GAAS,CACjBV,EAASU,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAd,EAAU,IAAKa,GACdvB,EAAC,UAAuB,MAAOuB,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,EAEAvB,EAAC,OACC,UAAWI,EACT,4HACA,CAACgB,GAAW,eACZR,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,EAEAjB,EAACE,EAAA,CACC,OAAO,yFACP,
|
|
4
|
+
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\nimport { roundedBrands } from '../../const'\nimport { useHeadlessContext } from '@anker-in/lib'\n\ninterface Country {\n id: string\n code: string\n name: string\n}\n\ninterface CountrySelectProps {\n countries: Country[]\n loading?: boolean\n className?: string\n value?: string\n onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n const [show, setShow] = useState(false)\n const [display, setDisplay] = useState<any>('')\n const { brand } = useHeadlessContext()\n const rounded = roundedBrands.includes(brand)\n const dorpdown = useClickOutside<HTMLDivElement>(() => {\n setShow(false)\n })\n\n useEffect(() => {\n const target = countries.filter(item => item.code === value)\n if (target.length) setDisplay(target[0].name)\n }, [setDisplay, countries, value])\n\n return (\n <div className=\"relative\">\n <select\n className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n style={{\n WebkitTextFillColor: 'black',\n }}\n disabled={loading}\n value={value}\n onChange={event => {\n onChange(event.target.value)\n }}\n >\n {countries.map((item: { id: string; name: string; code: string }) => (\n <option key={item.code} value={item.code}>\n {item.name}\n </option>\n ))}\n </select>\n\n <div\n className={classNames(\n 'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n !rounded && 'rounded-none',\n className\n )}\n onClick={() => {\n setShow(true)\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {display}\n </div>\n\n <Picture\n source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n className=\"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover\"\n alt=\"arrow\"\n />\n\n <div\n ref={dorpdown}\n className={classNames(\n 'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',\n !rounded && 'rounded-none',\n { '!hidden': !show }\n )}\n >\n <ul className=\"py-[6px]\">\n {countries.map((item: { id: string; name: string; code: string }) => (\n <li\n key={item.code}\n value={item.code}\n className={classNames(\n 'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',\n { '!bg-[#EAEAEC]': item.code === value }\n )}\n >\n <button\n className=\"absolute left-0 top-0 z-1 size-full opacity-0\"\n value={item.code}\n onClick={() => {\n setDisplay(item.name)\n setShow(false)\n onChange(item.code)\n }}\n />\n {item.name}\n </li>\n ))}\n </ul>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAiDU,cAAAA,EA0CE,QAAAC,MA1CF,oBAjDV,OAAS,WAAAC,MAAe,wBACxB,OAAOC,MAAqB,sCAC5B,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,iBAAAC,MAAqB,cAC9B,OAAS,sBAAAC,MAA0B,gBAgB5B,SAASC,EAAc,CAAE,UAAAC,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,EAAIV,EAAS,EAAK,EAChC,CAACW,EAASC,CAAU,EAAIZ,EAAc,EAAE,EACxC,CAAE,MAAAa,CAAM,EAAIX,EAAmB,EAC/BY,EAAUb,EAAc,SAASY,CAAK,EACtCE,EAAWlB,EAAgC,IAAM,CACrDa,EAAQ,EAAK,CACf,CAAC,EAED,OAAAX,EAAU,IAAM,CACd,MAAMiB,EAASZ,EAAU,OAAOa,GAAQA,EAAK,OAASV,CAAK,EACvDS,EAAO,QAAQJ,EAAWI,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACJ,EAAYR,EAAWG,CAAK,CAAC,EAG/BZ,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWI,EAAW,mCAAoCQ,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUW,GAAS,CACjBV,EAASU,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAd,EAAU,IAAKa,GACdvB,EAAC,UAAuB,MAAOuB,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,EAEAvB,EAAC,OACC,UAAWI,EACT,4HACA,CAACgB,GAAW,eACZR,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,EAEAjB,EAACE,EAAA,CACC,OAAO,yFACP,UAAU,+EACV,IAAI,QACN,EAEAF,EAAC,OACC,IAAKqB,EACL,UAAWjB,EACT,yIACA,CAACgB,GAAW,eACZ,CAAE,UAAW,CAACL,CAAK,CACrB,EAEA,SAAAf,EAAC,MAAG,UAAU,WACX,SAAAU,EAAU,IAAKa,GACdtB,EAAC,MAEC,MAAOsB,EAAK,KACZ,UAAWnB,EACT,+FACA,CAAE,gBAAiBmB,EAAK,OAASV,CAAM,CACzC,EAEA,UAAAb,EAAC,UACC,UAAU,gDACV,MAAOuB,EAAK,KACZ,QAAS,IAAM,CACbL,EAAWK,EAAK,IAAI,EACpBP,EAAQ,EAAK,EACbF,EAASS,EAAK,IAAI,CACpB,EACF,EACCA,EAAK,OAhBDA,EAAK,IAiBZ,CACD,EACH,EACF,GACF,CAEJ",
|
|
6
6
|
"names": ["jsx", "jsxs", "Picture", "useClickOutside", "classNames", "useEffect", "useState", "roundedBrands", "useHeadlessContext", "CountrySelect", "countries", "loading", "className", "value", "onChange", "show", "setShow", "display", "setDisplay", "brand", "rounded", "dorpdown", "target", "item", "event"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a,jsxs as e}from"react/jsx-runtime";import{Picture as
|
|
1
|
+
import{jsx as a,jsxs as e}from"react/jsx-runtime";import{Picture as d,Text as i}from"@anker-in/headless-ui";import{formatPrice as r}from"../../context/utils";import{useHeadlessContext as o}from"@anker-in/lib";import{useCreditsContext as p}from"../../context/provider";const b=({item:t,copy:m})=>{const{locale:s}=o(),{pageCommon:l}=p();return e("div",{className:"flex w-full items-center justify-center md:items-start md:justify-start",children:[a(d,{className:"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",source:t.variant.image?.url||t.product?.images[0]?.url,alt:t.product.title}),e("div",{className:"md:flex md:flex-col",children:[e("div",{className:"md:flex md:items-center",children:[a(d,{className:"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",source:t.variant.image?.url||t.product?.images[0]?.url,alt:t.product.title}),a("div",{className:"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden",title:t.product.title,children:t.product.title})]}),e("div",{className:"mt-[16px] md:mt-[12px]",children:[a(i,{className:"mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden",html:t.product.title,title:t.product.title}),e("div",{className:"flex font-semibold leading-[1.4] md:flex-col",children:[e("div",{className:"mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]",children:[e("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[e("span",{children:[m.redeemModal.product.variantLabel,": "]}),a("span",{className:"ml-1",children:t.variant.title||""})]}),e("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[e("span",{children:[m.redeemModal.product.shippingFeeLabel,": "]}),a("span",{className:"ml-1",children:r({amount:0,currencyCode:t.product.price?.currencyCode,locale:s||"us"})})]})]}),e("div",{className:"text-[15px] font-bold text-[#777] md:text-[12px]",children:[e("div",{className:"mb-[8px] flex items-center md:mb-[4px]",children:[e("span",{children:[m.redeemModal.product.quantityLabel,": "]}),a("span",{className:"ml-1",children:"1"})]}),e("div",{className:"l:flex l:items-center l:justify-between",children:[e("span",{children:[m.redeemModal.product.totalPriceLabel,": "]}),e("span",{className:"ml-1",children:[t.alpc?.consumeCredits," ",l?.pointUnit]})]})]})]})]})]})]})};export{b as ProductInfo};
|
|
2
2
|
//# sourceMappingURL=ProductInfo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport { formatPrice } from '../../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { useCreditsContext } from '../../context/provider'\n\ntype ProductInfoProps = {\n item: RedeemableItemType\n copy: CreditsRedeemListCopy\n}\n\nexport const ProductInfo = ({ item, copy }: ProductInfoProps) => {\n const { locale } = useHeadlessContext()\n const { pageCommon } = useCreditsContext()\n\n return (\n <div className=\"flex w-full items-center justify-center md:items-start md:justify-start\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"md:flex md:flex-col\">\n <div className=\"md:flex md:items-center\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden\" title={item.product.title}>\n {item.product.title}\n </div>\n </div>\n\n <div className=\"mt-[16px] md:mt-[12px]\">\n <
|
|
5
|
-
"mappings": "AAkBM,cAAAA,EAME,QAAAC,MANF,oBAlBN,OAAS,WAAAC,
|
|
6
|
-
"names": ["jsx", "jsxs", "Picture", "formatPrice", "useHeadlessContext", "useCreditsContext", "ProductInfo", "item", "copy", "locale", "pageCommon"]
|
|
4
|
+
"sourcesContent": ["import { Picture, Text } from '@anker-in/headless-ui'\nimport { formatPrice } from '../../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { useCreditsContext } from '../../context/provider'\n\ntype ProductInfoProps = {\n item: RedeemableItemType\n copy: CreditsRedeemListCopy\n}\n\nexport const ProductInfo = ({ item, copy }: ProductInfoProps) => {\n const { locale } = useHeadlessContext()\n const { pageCommon } = useCreditsContext()\n\n return (\n <div className=\"flex w-full items-center justify-center md:items-start md:justify-start\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"md:flex md:flex-col\">\n <div className=\"md:flex md:items-center\">\n <Picture\n className=\"mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n source={item.variant.image?.url || item.product?.images[0]?.url}\n alt={item.product.title}\n ></Picture>\n <div className=\"flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden\" title={item.product.title}>\n {item.product.title}\n </div>\n </div>\n\n <div className=\"mt-[16px] md:mt-[12px]\">\n <Text\n className=\"mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden\"\n html={item.product.title}\n title={item.product.title}\n ></Text>\n <div className=\"flex font-semibold leading-[1.4] md:flex-col\">\n <div className=\"mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]\">\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.variantLabel}: </span>\n <span className=\"ml-1\">{item.variant.title || ''}</span>\n </div>\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.shippingFeeLabel}: </span>\n <span className=\"ml-1\">\n {formatPrice({\n amount: 0,\n currencyCode: item.product.price?.currencyCode!,\n locale: locale || 'us',\n })}\n </span>\n </div>\n </div>\n <div className=\"text-[15px] font-bold text-[#777] md:text-[12px]\">\n <div className=\"mb-[8px] flex items-center md:mb-[4px]\">\n <span>{copy.redeemModal.product.quantityLabel}: </span>\n <span className=\"ml-1\">1</span>\n </div>\n <div className=\"l:flex l:items-center l:justify-between\">\n <span>{copy.redeemModal.product.totalPriceLabel}: </span>\n <span className=\"ml-1\">\n {item.alpc?.consumeCredits} {pageCommon?.pointUnit}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAkBM,cAAAA,EAME,QAAAC,MANF,oBAlBN,OAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC9B,OAAS,eAAAC,MAAmB,sBAG5B,OAAS,sBAAAC,MAA0B,gBACnC,OAAS,qBAAAC,MAAyB,yBAO3B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,KAAAC,CAAK,IAAwB,CAC/D,KAAM,CAAE,OAAAC,CAAO,EAAIL,EAAmB,EAChC,CAAE,WAAAM,CAAW,EAAIL,EAAkB,EAEzC,OACEL,EAAC,OAAI,UAAU,0EACb,UAAAD,EAACE,EAAA,CACC,UAAU,6HACV,OAAQM,EAAK,QAAQ,OAAO,KAAOA,EAAK,SAAS,OAAO,CAAC,GAAG,IAC5D,IAAKA,EAAK,QAAQ,MACnB,EACDP,EAAC,OAAI,UAAU,sBACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,iIACV,OAAQM,EAAK,QAAQ,OAAO,KAAOA,EAAK,SAAS,OAAO,CAAC,GAAG,IAC5D,IAAKA,EAAK,QAAQ,MACnB,EACDR,EAAC,OAAI,UAAU,2DAA2D,MAAOQ,EAAK,QAAQ,MAC3F,SAAAA,EAAK,QAAQ,MAChB,GACF,EAEAP,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACG,EAAA,CACC,UAAU,yDACV,KAAMK,EAAK,QAAQ,MACnB,MAAOA,EAAK,QAAQ,MACrB,EACDP,EAAC,OAAI,UAAU,+CACb,UAAAA,EAAC,OAAI,UAAU,qEACb,UAAAA,EAAC,OAAI,UAAU,yCACb,UAAAA,EAAC,QAAM,UAAAQ,EAAK,YAAY,QAAQ,aAAa,MAAE,EAC/CT,EAAC,QAAK,UAAU,OAAQ,SAAAQ,EAAK,QAAQ,OAAS,GAAG,GACnD,EACAP,EAAC,OAAI,UAAU,yCACb,UAAAA,EAAC,QAAM,UAAAQ,EAAK,YAAY,QAAQ,iBAAiB,MAAE,EACnDT,EAAC,QAAK,UAAU,OACb,SAAAI,EAAY,CACX,OAAQ,EACR,aAAcI,EAAK,QAAQ,OAAO,aAClC,OAAQE,GAAU,IACpB,CAAC,EACH,GACF,GACF,EACAT,EAAC,OAAI,UAAU,mDACb,UAAAA,EAAC,OAAI,UAAU,yCACb,UAAAA,EAAC,QAAM,UAAAQ,EAAK,YAAY,QAAQ,cAAc,MAAE,EAChDT,EAAC,QAAK,UAAU,OAAO,aAAC,GAC1B,EACAC,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,QAAM,UAAAQ,EAAK,YAAY,QAAQ,gBAAgB,MAAE,EAClDR,EAAC,QAAK,UAAU,OACb,UAAAO,EAAK,MAAM,eAAe,IAAEG,GAAY,WAC3C,GACF,GACF,GACF,GACF,GACF,GACF,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "Picture", "Text", "formatPrice", "useHeadlessContext", "useCreditsContext", "ProductInfo", "item", "copy", "locale", "pageCommon"]
|
|
7
7
|
}
|
|
@@ -58,8 +58,8 @@ export type CreditsPageCommon = {
|
|
|
58
58
|
url: string;
|
|
59
59
|
};
|
|
60
60
|
};
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
activitiesModal?: MyActivitiesMetafields;
|
|
62
|
+
rewardsModal?: MyRewardsMetafields;
|
|
63
63
|
validatorInfo?: {
|
|
64
64
|
addressInfo: {
|
|
65
65
|
name: string;
|
|
@@ -9,13 +9,13 @@ import { CreditsRedeemListCopy } from '../components/credits/creditsRedeemList';
|
|
|
9
9
|
import { CreditsCashCopy } from '../components/credits/creditsCash';
|
|
10
10
|
import { CreditsFaqCopy } from '../components/credits/creditsFaq';
|
|
11
11
|
export declare enum ComponentKey {
|
|
12
|
-
Banner = "
|
|
13
|
-
InfoCard = "
|
|
14
|
-
Benefits = "
|
|
15
|
-
WaysToGetCredits = "
|
|
16
|
-
RedeemList = "
|
|
17
|
-
SpendCreditsLikeCash = "
|
|
18
|
-
Faqs = "
|
|
12
|
+
Banner = "creditsBanner",
|
|
13
|
+
InfoCard = "creditsInfoCard",
|
|
14
|
+
Benefits = "creditsBenefits",
|
|
15
|
+
WaysToGetCredits = "creditsWaysToGetCredits",
|
|
16
|
+
RedeemList = "creditsRedeemList",
|
|
17
|
+
SpendCreditsLikeCash = "creditsCash",
|
|
18
|
+
Faqs = "creditsFaq"
|
|
19
19
|
}
|
|
20
20
|
export type CreditsTemplateProps = {
|
|
21
21
|
headlessConfig: HeadlessConfig;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as v,jsx as o,jsxs as B}from"react/jsx-runtime";import{classNames as a,HeadlessProvider as C}from"@anker-in/lib";import{RegistrationProvider as m}from"../components/registration/context/provider";import{CreditsProvider as f}from"../components/credits/context/provider";import{CreditsBanner as y}from"../components/credits/creditsBanner";import{CreditsInfoCard as c}from"../components/credits/creditsInfoCard";import{CreditsBenefits as l}from"../components/credits/creditsBenefits";import{CreditsWaysToGetCredits as g}from"../components/credits/creditsWaysToGetCredits";import{CreditsRedeemList as T}from"../components/credits/creditsRedeemList";import{CreditsCash as P}from"../components/credits/creditsCash";import{CreditsFaq as I}from"../components/credits/creditsFaq";var h=(e=>(e.Banner="creditsBanner",e.InfoCard="creditsInfoCard",e.Benefits="creditsBenefits",e.WaysToGetCredits="creditsWaysToGetCredits",e.RedeemList="creditsRedeemList",e.SpendCreditsLikeCash="creditsCash",e.Faqs="creditsFaq",e))(h||{});const z=({headlessConfig:s,siteConfig:n,userContext:t,pageConfig:r,registrationContext:d,gtm:p})=>o(C,{headlessConfig:s,children:o(m,{copy:n.registrationsSettings,email:t?.profile?.email,children:o(f,{profile:t?.profile,removeProfile:t?.removeProfile,isLoadingProfile:t?.isLoadingProfile,openSignInPopup:d.openSignInPopup,openSignUpPopup:d.openSignUpPopup,creditInfo:t?.creditInfo,taskIdToTypeMapping:n.taskIdToTypeMapping,customer:t?.customer,fetchCreditInfo:t?.fetchCreditInfo,customerLoading:t?.customerLoading,gtm:p,pageCommon:r.common,children:o("div",{className:a("bg-[#f5f5f7] leading-[1.2]"),children:r.order.map(i=>{const e=r.components?.[i];return e?B(v,{children:[i==="creditsBanner"&&o(y,{copy:e}),i==="creditsInfoCard"&&t?.profile&&o(c,{copy:e}),i==="creditsBenefits"&&o(l,{copy:e}),i==="creditsWaysToGetCredits"&&o(g,{copy:e,classNames:s.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),i==="creditsRedeemList"&&o(T,{copy:e}),i==="creditsCash"&&o(P,{copy:e}),i==="creditsFaq"&&o(I,{copy:e}),i!=="creditsBanner"&&o("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});export{h as ComponentKey,z as CreditsTemplate};
|
|
2
2
|
//# sourceMappingURL=credits.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/templates/credits.tsx"],
|
|
4
|
-
"sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\n\nexport enum ComponentKey {\n Banner = '
|
|
5
|
-
"mappings": "AA6FgB,mBAAAA,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "classNames", "HeadlessProvider", "RegistrationProvider", "CreditsProvider", "CreditsBanner", "CreditsInfoCard", "CreditsBenefits", "CreditsWaysToGetCredits", "CreditsRedeemList", "CreditsCash", "CreditsFaq", "ComponentKey", "CreditsTemplate", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "
|
|
4
|
+
"sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\n\nexport enum ComponentKey {\n Banner = 'creditsBanner',\n InfoCard = 'creditsInfoCard',\n Benefits = 'creditsBenefits',\n WaysToGetCredits = 'creditsWaysToGetCredits',\n RedeemList = 'creditsRedeemList',\n SpendCreditsLikeCash = 'creditsCash',\n Faqs = 'creditsFaq',\n}\nexport type CreditsTemplateProps = {\n headlessConfig: HeadlessConfig\n siteConfig: {\n registrationsSettings: {\n authCodeActivate: any\n }\n taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n }\n pageConfig: {\n order: ComponentKey[]\n common: CreditsPageCommon\n components: {\n [ComponentKey.Banner]?: CreditsBannerCopy\n [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n [ComponentKey.Benefits]?: CreditsBenefitsCopy\n [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n [ComponentKey.Faqs]?: CreditsFaqCopy\n }\n }\n userContext: {\n profile: any\n removeProfile: () => void\n isLoadingProfile: boolean\n creditInfo: any\n customer: any\n customerLoading: boolean\n fetchCreditInfo: () => void\n }\n registrationContext: {\n openSignUpPopup: () => void\n openSignInPopup: () => void\n }\n gtm: {\n pageGroup: string\n }\n}\n\nexport const CreditsTemplate = ({\n headlessConfig,\n siteConfig,\n userContext,\n pageConfig,\n registrationContext,\n gtm,\n}: CreditsTemplateProps) => {\n return (\n <HeadlessProvider headlessConfig={headlessConfig}>\n <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n <CreditsProvider\n profile={userContext?.profile}\n removeProfile={userContext?.removeProfile}\n isLoadingProfile={userContext?.isLoadingProfile}\n openSignInPopup={registrationContext.openSignInPopup}\n openSignUpPopup={registrationContext.openSignUpPopup}\n creditInfo={userContext?.creditInfo}\n taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n customer={userContext?.customer}\n fetchCreditInfo={userContext?.fetchCreditInfo}\n customerLoading={userContext?.customerLoading}\n gtm={gtm}\n pageCommon={pageConfig.common}\n >\n <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n {pageConfig.order.map(key => {\n const componentCopy = pageConfig.components?.[key]\n if (!componentCopy) return null\n return (\n <>\n {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}\n {key === ComponentKey.InfoCard && userContext?.profile && (\n <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n )}\n {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}\n {key === ComponentKey.WaysToGetCredits && (\n <CreditsWaysToGetCredits\n copy={componentCopy as CreditsWaysToGetCreditsCopy}\n classNames={\n headlessConfig.brand === 'anker'\n ? {\n subtitle: 'text-white',\n equalCreditsText:\n 'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',\n }\n : {\n subtitle: 'text-[#D1D1D1]',\n equalCreditsText: 'text-[#F6EAD0]',\n }\n }\n />\n )}\n {key === ComponentKey.RedeemList && (\n <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n )}\n {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}\n {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}\n {key !== ComponentKey.Banner && (\n <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n )}\n </>\n )\n })}\n </div>\n </CreditsProvider>\n </RegistrationProvider>\n </HeadlessProvider>\n )\n}\n"],
|
|
5
|
+
"mappings": "AA6FgB,mBAAAA,EACkC,OAAAC,EADlC,QAAAC,MAAA,oBA7FhB,OAAS,cAAAC,EAA4B,oBAAAC,MAAwB,gBAC7D,OAAS,wBAAAC,MAA4B,8CAGrC,OAAS,mBAAAC,MAAuB,yCAGhC,OAAS,iBAAAC,MAAwC,sCACjD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,2BAAAC,MAA4D,gDACrE,OAAS,qBAAAC,MAAgD,0CACzD,OAAS,eAAAC,MAAoC,oCAC7C,OAAS,cAAAC,MAAkC,mCAEpC,IAAKC,OACVA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,WAAa,oBACbA,EAAA,qBAAuB,cACvBA,EAAA,KAAO,aAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,IAEIpB,EAACG,EAAA,CAAiB,eAAgBY,EAChC,SAAAf,EAACI,EAAA,CAAqB,KAAMY,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,SAAAjB,EAACK,EAAA,CACC,QAASY,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,SAAAlB,EAAC,OAAI,UAAWE,EAAW,4BAA4B,EACpD,SAAAgB,EAAW,MAAM,IAAIG,GAAO,CAC3B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAG,EACjD,OAAKC,EAEHrB,EAAAF,EAAA,CACG,UAAAsB,IAAQ,iBAAuBrB,EAACM,EAAA,CAAc,KAAMgB,EAAoC,EACxFD,IAAQ,mBAAyBJ,GAAa,SAC7CjB,EAACO,EAAA,CAAgB,KAAMe,EAAsC,EAE9DD,IAAQ,mBAAyBrB,EAACQ,EAAA,CAAgB,KAAMc,EAAsC,EAC9FD,IAAQ,2BACPrB,EAACS,EAAA,CACC,KAAMa,EACN,WACEP,EAAe,QAAU,QACrB,CACE,SAAU,aACV,iBACE,4EACJ,EACA,CACE,SAAU,iBACV,iBAAkB,gBACpB,EAER,EAEDM,IAAQ,qBACPrB,EAACU,EAAA,CAAkB,KAAMY,EAAwC,EAElED,IAAQ,eAAqCrB,EAACW,EAAA,CAAY,KAAMW,EAAkC,EAClGD,IAAQ,cAAqBrB,EAACY,EAAA,CAAW,KAAMU,EAAiC,EAChFD,IAAQ,iBACPrB,EAAC,OAAI,UAAU,qEAAqE,GAExF,EAjCyB,IAmC7B,CAAC,EACH,EACF,EACF,EACF",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "classNames", "HeadlessProvider", "RegistrationProvider", "CreditsProvider", "CreditsBanner", "CreditsInfoCard", "CreditsBenefits", "CreditsWaysToGetCredits", "CreditsRedeemList", "CreditsCash", "CreditsFaq", "ComponentKey", "CreditsTemplate", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "key", "componentCopy"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/campaign-ui",
|
|
3
|
-
"version": "0.2.0-beta.
|
|
3
|
+
"version": "0.2.0-beta.7",
|
|
4
4
|
"description": "Campaign UI components and utilities for Anker projects",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"@babel/preset-typescript": "^7.24.6",
|
|
45
45
|
"@testing-library/jest-dom": "^6.4.6",
|
|
46
46
|
"@testing-library/react": "^14.3.1",
|
|
47
|
+
"@types/crypto-js": "^4.2.2",
|
|
47
48
|
"@types/jest": "^29.5.12",
|
|
48
49
|
"@types/node": "^20",
|
|
49
50
|
"babel-jest": "^29.7.0",
|
|
@@ -59,8 +60,7 @@
|
|
|
59
60
|
"typescript": "^5.0.0"
|
|
60
61
|
},
|
|
61
62
|
"peerDependencies": {
|
|
62
|
-
"
|
|
63
|
-
"react-dom": "^18.3.1"
|
|
63
|
+
"crypto-js": "^4.1.1"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@copilotkit/react-core": "1.1.2",
|
|
@@ -75,11 +75,10 @@
|
|
|
75
75
|
"@radix-ui/react-radio-group": "^1.1.3",
|
|
76
76
|
"@radix-ui/react-slot": "^1.0.2",
|
|
77
77
|
"@radix-ui/react-visually-hidden": "^1.0.3",
|
|
78
|
-
"@types/crypto-js": "^4.2.2",
|
|
79
78
|
"autoprefixer": "^10.4.19",
|
|
80
79
|
"class-variance-authority": "^0.7.0",
|
|
81
80
|
"clsx": "^2.1.1",
|
|
82
|
-
"crypto-js": "^4.
|
|
81
|
+
"crypto-js": "^4.2.0",
|
|
83
82
|
"dayjs": "^1.11.7",
|
|
84
83
|
"gsap": "^3.12.5",
|
|
85
84
|
"monaco-editor": "^0.52.0",
|
|
@@ -88,8 +87,8 @@
|
|
|
88
87
|
"swiper": "^11.1.3",
|
|
89
88
|
"tailwind-merge": "^2.3.0",
|
|
90
89
|
"tailwindcss": "^3.4.3",
|
|
91
|
-
"@anker-in/
|
|
92
|
-
"@anker-in/
|
|
90
|
+
"@anker-in/lib": "1.1.0-beta.4",
|
|
91
|
+
"@anker-in/headless-ui": "1.0.26"
|
|
93
92
|
},
|
|
94
93
|
"publishConfig": {
|
|
95
94
|
"access": "public",
|
|
@@ -4,18 +4,13 @@ import { useMemo, useState } from 'react'
|
|
|
4
4
|
import RedeemableItem from './RedeemableItem'
|
|
5
5
|
import useRedeemableList from '../context/hooks/useRedeemableList'
|
|
6
6
|
import RulesModal from '../modal/rulesModal'
|
|
7
|
-
import { useProductsByHandles
|
|
7
|
+
import { useProductsByHandles } from '@anker-in/lib'
|
|
8
8
|
import { CreditsCashCopy, RedeemItem } from './type'
|
|
9
9
|
import { Product, classNames as cn } from '@anker-in/lib'
|
|
10
|
-
import { useRegistration } from '../../../components/registration'
|
|
11
|
-
import { roundedBrands } from '../const'
|
|
12
10
|
|
|
13
11
|
export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
|
|
14
|
-
const { authCodeActivate } = useRegistration()
|
|
15
12
|
const [rules, setRules] = useState<string | string[]>()
|
|
16
13
|
const { redeemableList } = useRedeemableList()
|
|
17
|
-
const { brand } = useHeadlessContext()
|
|
18
|
-
const rounded = roundedBrands.includes(brand)
|
|
19
14
|
|
|
20
15
|
const variantMetafieldIdentifiers: any[] = []
|
|
21
16
|
|
|
@@ -52,6 +47,8 @@ export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
|
|
|
52
47
|
.filter(Boolean) as unknown as RedeemItem[]
|
|
53
48
|
}, [productByHandles, copy.list, redeemableList])
|
|
54
49
|
|
|
50
|
+
console.log('list', list)
|
|
51
|
+
|
|
55
52
|
return (
|
|
56
53
|
<Container className={cn('bg-[#F5F5F5]')}>
|
|
57
54
|
<Heading as="h2" size="4" html={copy.title} />
|
|
@@ -151,19 +151,19 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
|
|
|
151
151
|
))}
|
|
152
152
|
</div>
|
|
153
153
|
|
|
154
|
-
{pageCommon?.
|
|
154
|
+
{pageCommon?.activitiesModal && (
|
|
155
155
|
<ActivitiesModal
|
|
156
156
|
isOpen={openActivities}
|
|
157
|
-
data={pageCommon?.
|
|
157
|
+
data={pageCommon?.activitiesModal}
|
|
158
158
|
onClose={() => {
|
|
159
159
|
setOpenActivities(false)
|
|
160
160
|
}}
|
|
161
161
|
/>
|
|
162
162
|
)}
|
|
163
|
-
{pageCommon?.
|
|
163
|
+
{pageCommon?.rewardsModal && (
|
|
164
164
|
<MyRewardsModal
|
|
165
165
|
isOpen={openRewards}
|
|
166
|
-
data={pageCommon?.
|
|
166
|
+
data={pageCommon?.rewardsModal}
|
|
167
167
|
onClose={() => {
|
|
168
168
|
setOpenRewards(false)
|
|
169
169
|
}}
|
|
@@ -75,7 +75,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
|
|
|
75
75
|
|
|
76
76
|
<Picture
|
|
77
77
|
source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
|
|
78
|
-
|
|
78
|
+
className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
|
|
79
79
|
alt="arrow"
|
|
80
80
|
/>
|
|
81
81
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Picture } from '@anker-in/headless-ui'
|
|
1
|
+
import { Picture, Text } from '@anker-in/headless-ui'
|
|
2
2
|
import { formatPrice } from '../../context/utils'
|
|
3
3
|
import type { RedeemableItem as RedeemableItemType } from '../../type'
|
|
4
4
|
import { CreditsRedeemListCopy } from '../type'
|
|
@@ -34,9 +34,11 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
|
|
|
34
34
|
</div>
|
|
35
35
|
|
|
36
36
|
<div className="mt-[16px] md:mt-[12px]">
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
<Text
|
|
38
|
+
className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden"
|
|
39
|
+
html={item.product.title}
|
|
40
|
+
title={item.product.title}
|
|
41
|
+
></Text>
|
|
40
42
|
<div className="flex font-semibold leading-[1.4] md:flex-col">
|
|
41
43
|
<div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
|
|
42
44
|
<div className="mb-[8px] flex items-center md:mb-[4px]">
|
|
@@ -63,8 +63,8 @@ export type CreditsPageCommon = {
|
|
|
63
63
|
url: string
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
activitiesModal?: MyActivitiesMetafields
|
|
67
|
+
rewardsModal?: MyRewardsMetafields
|
|
68
68
|
validatorInfo?: {
|
|
69
69
|
addressInfo: {
|
|
70
70
|
name: string
|
|
@@ -14,13 +14,13 @@ import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
|
|
|
14
14
|
import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
|
|
15
15
|
|
|
16
16
|
export enum ComponentKey {
|
|
17
|
-
Banner = '
|
|
18
|
-
InfoCard = '
|
|
19
|
-
Benefits = '
|
|
20
|
-
WaysToGetCredits = '
|
|
21
|
-
RedeemList = '
|
|
22
|
-
SpendCreditsLikeCash = '
|
|
23
|
-
Faqs = '
|
|
17
|
+
Banner = 'creditsBanner',
|
|
18
|
+
InfoCard = 'creditsInfoCard',
|
|
19
|
+
Benefits = 'creditsBenefits',
|
|
20
|
+
WaysToGetCredits = 'creditsWaysToGetCredits',
|
|
21
|
+
RedeemList = 'creditsRedeemList',
|
|
22
|
+
SpendCreditsLikeCash = 'creditsCash',
|
|
23
|
+
Faqs = 'creditsFaq',
|
|
24
24
|
}
|
|
25
25
|
export type CreditsTemplateProps = {
|
|
26
26
|
headlessConfig: HeadlessConfig
|
|
@@ -87,32 +87,41 @@ export const CreditsTemplate = ({
|
|
|
87
87
|
pageCommon={pageConfig.common}
|
|
88
88
|
>
|
|
89
89
|
<div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
|
|
90
|
-
{pageConfig.order.map(
|
|
91
|
-
const componentCopy = pageConfig.components?.[
|
|
90
|
+
{pageConfig.order.map(key => {
|
|
91
|
+
const componentCopy = pageConfig.components?.[key]
|
|
92
92
|
if (!componentCopy) return null
|
|
93
93
|
return (
|
|
94
94
|
<>
|
|
95
|
-
{
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
95
|
+
{key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}
|
|
96
|
+
{key === ComponentKey.InfoCard && userContext?.profile && (
|
|
97
|
+
<CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
|
|
98
|
+
)}
|
|
99
|
+
{key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}
|
|
100
|
+
{key === ComponentKey.WaysToGetCredits && (
|
|
101
|
+
<CreditsWaysToGetCredits
|
|
102
|
+
copy={componentCopy as CreditsWaysToGetCreditsCopy}
|
|
103
|
+
classNames={
|
|
104
|
+
headlessConfig.brand === 'anker'
|
|
105
|
+
? {
|
|
106
|
+
subtitle: 'text-white',
|
|
107
|
+
equalCreditsText:
|
|
108
|
+
'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',
|
|
109
|
+
}
|
|
110
|
+
: {
|
|
111
|
+
subtitle: 'text-[#D1D1D1]',
|
|
112
|
+
equalCreditsText: 'text-[#F6EAD0]',
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
/>
|
|
116
|
+
)}
|
|
117
|
+
{key === ComponentKey.RedeemList && (
|
|
118
|
+
<CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
|
|
119
|
+
)}
|
|
120
|
+
{key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}
|
|
121
|
+
{key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}
|
|
122
|
+
{key !== ComponentKey.Banner && (
|
|
123
|
+
<div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
|
|
124
|
+
)}
|
|
116
125
|
</>
|
|
117
126
|
)
|
|
118
127
|
})}
|