@anker-in/campaign-ui 0.2.0-beta.10 → 0.2.0-beta.11
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/creditsCash/RedeemableItem.js +1 -1
- package/dist/cjs/components/credits/creditsCash/RedeemableItem.js.map +3 -3
- package/dist/cjs/components/credits/creditsCash/type.d.ts +0 -2
- package/dist/cjs/components/credits/creditsCash/type.js +1 -1
- package/dist/cjs/components/credits/creditsCash/type.js.map +1 -1
- package/dist/cjs/components/credits/type.d.ts +1 -0
- package/dist/cjs/components/credits/type.js +1 -1
- package/dist/cjs/components/credits/type.js.map +1 -1
- 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/creditsCash/RedeemableItem.js +1 -1
- package/dist/esm/components/credits/creditsCash/RedeemableItem.js.map +3 -3
- package/dist/esm/components/credits/creditsCash/type.d.ts +0 -2
- package/dist/esm/components/credits/type.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/credits/creditsCash/CreditsCash.tsx +3 -3
- package/src/components/credits/creditsCash/RedeemableItem.tsx +5 -4
- package/src/components/credits/creditsCash/type.ts +0 -2
- package/src/components/credits/type.ts +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var k=Object.create;var l=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var s in t)l(e,s,{get:t[s],enumerable:!0})},g=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of L(t))!_.call(e,i)&&i!==s&&l(e,i,{get:()=>t[i],enumerable:!(o=D(t,i))||o.enumerable});return e};var f=(e,t,s)=>(s=e!=null?k(S(e)):{},g(t||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),F=e=>g(l({},"__esModule",{value:!0}),e);var M={};B(M,{CreditsCash:()=>H});module.exports=F(M);var n=require("react/jsx-runtime"),c=require("@anker-in/headless-ui"),p=require("react"),h=f(require("./RedeemableItem")),x=f(require("../context/hooks/useRedeemableList")),y=f(require("../modal/rulesModal")),b=require("@anker-in/lib"),v=require("@anker-in/lib"),N=require("../context/provider");const H=({copy:e})=>{const[t,s]=(0,p.useState)(),{redeemableList:o}=(0,x.default)(),{pageCommon:i}=(0,N.useCreditsContext)(),I=[],{data:u}=(0,b.useProductsByHandles)({handles:e?.list?.map(r=>r.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:I}}),R=(0,p.useMemo)(()=>u?.map(r=>{const m=e.list.find(d=>d.products?.[0]?.handle===r.handle),a=o.find(d=>d.id?.toString()===m?.redeemId?.toString()),C=r.variants?.find(d=>d.sku===m?.products?.[0]?.sku)||r.variants?.[0];return!a||!C?null:{product:r,productVariant:C,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:m}}).filter(Boolean),[u,e.list,o]);return(0,n.jsxs)(c.Container,{className:(0,v.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:R?.map((r,m)=>(0,n.jsx)(h.default,{copy:e,itemData:r,setRules:s,currencyCode:u?.[0]?.price.currencyCode||"USD"},m))}),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:i?.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 } 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
|
|
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,
|
|
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"]
|
|
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'\nimport { useCreditsContext } from '../context/provider'\n\nexport const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {\n const [rules, setRules] = useState<string | string[]>()\n const { redeemableList } = useRedeemableList()\n const { pageCommon } = useCreditsContext()\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 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={pageCommon?.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,yBAC1CC,EAAkC,+BAE3B,MAAMT,EAAc,CAAC,CAAE,KAAAU,CAAK,IAAiC,CAClE,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAA4B,EAChD,CAAE,eAAAC,CAAe,KAAI,EAAAC,SAAkB,EACvC,CAAE,WAAAC,CAAW,KAAI,qBAAkB,EAEnCC,EAAqC,CAAC,EAEtC,CAAE,KAAMC,CAAiB,KAAI,wBAAqB,CACtD,QAASP,GAAM,MAAM,IAAIQ,GAAQA,EAAK,WAAW,CAAC,GAAG,MAAM,GAAK,CAAC,EACjE,qBAAsB,CACpB,QAASF,CACX,CACF,CAAC,EAEKG,KAAO,WAAQ,IACZF,GACH,IAAKG,GAAqB,CAC1B,MAAMC,EAASX,EAAK,KAAK,KAAKQ,GAAQA,EAAK,WAAW,CAAC,GAAG,SAAWE,EAAQ,MAAM,EAC7EE,EAAWT,EAAe,KAAKK,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,EAAkBP,EAAK,KAAMG,CAAc,CAAC,EAEhD,SACE,QAAC,aAAU,aAAW,EAAAY,YAAG,cAAc,EACrC,oBAAC,WAAQ,GAAG,KAAK,KAAK,IAAI,KAAMf,EAAK,MAAO,KAC5C,OAAC,OAAI,UAAU,+FACZ,SAAAS,GAAM,IAAI,CAACD,EAAMQ,OAChB,OAAC,EAAAC,QAAA,CAEC,KAAMjB,EACN,SAAUQ,EACV,SAAUN,EACV,aAAcK,IAAmB,CAAC,GAAG,MAAM,cAAgB,OAJtDS,CAKP,CACD,EACH,EAECf,MACC,OAAC,EAAAiB,QAAA,CACC,iBAAiB,+BACjB,UAAU,+BACV,OAAQjB,EAAM,OAAS,EACvB,QAAS,IAAMC,EAAS,CAAC,CAAC,EAC1B,eAAe,gCACf,MAAOD,EACP,gBAAgB,mCAChB,MAAOI,GAAY,UACnB,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", "import_provider", "copy", "rules", "setRules", "redeemableList", "useRedeemableList", "pageCommon", "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 f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var V=(i,e)=>{for(var s in e)f(i,s,{get:e[s],enumerable:!0})},A=(i,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of F(e))!E.call(i,r)&&r!==s&&f(i,r,{get:()=>e[r],enumerable:!(c=k(e,r))||c.enumerable});return i};var L=i=>A(f({},"__esModule",{value:!0}),i);var P={};V(P,{default:()=>O});module.exports=L(P);var t=require("react/jsx-runtime"),l=require("@anker-in/headless-ui"),o=require("react"),C=require("../context/provider"),N=require("../context/hooks/useRedeemAndBuy"),_=require("../context/utils"),a=require("@anker-in/lib"),w=require("../../../components/registration");function B({copy:i,itemData:e,setRules:s,className:c}){const{creditInfo:r,profile:n,openSignUpPopup:y,pageCommon:u,gtm:{pageGroup:v}}=(0,C.useCreditsContext)(),{authCodeActivate:g}=(0,w.useRegistration)(),[b,h]=(0,o.useState)(null),{trigger:R,isMutating:S}=(0,N.useRedeemAndBuy)({},{onError:d=>{h(d.message)}}),p=(0,o.useMemo)(()=>!!n,[n?.activated]),x=(0,o.useMemo)(()=>p&&n?.activated&&e.alpcData?.consumeCredits>Number(r?.available_credit||0),[p,n?.activated,e.alpcData?.consumeCredits,r?.available_credit]),z=(0,o.useMemo)(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||x),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,x]),I=()=>{h(null),p?!n?.activated&&!g.isActivateSuccess?g.open():(R({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),(0,a.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:n?.activated?"active":"not active",event_parameters:{page_group:v,position:i.title,button_name:m,info:e?.alpcData?.id?.toString()}})):y()},m=(0,o.useMemo)(()=>e.productVariant?.availableForSale?p?i.btnRedeem:i.unlockRewards:i?.soldOut||"Sold Out",[p,e.productVariant?.availableForSale,i.btnRedeem,i.unlockRewards,i?.soldOut]);return(0,t.jsxs)("div",{className:(0,a.classNames)("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",c),children:[(0,t.jsx)("div",{className:(0,a.classNames)("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:(0,t.jsx)(l.Picture,{className:"mx-auto h-full w-auto",imgClassName:"h-full object-contain",source:e?.config?.image?.url||e?.productVariant?.metafields?.global?.transparentImg||e?.productVariant?.image?.url})}),(0,t.jsxs)("div",{className:(0,a.classNames)("mt-[22px] w-full l:mt-[8px]"),children:[(0,t.jsx)(l.Text,{html:e?.product?.title,title:e.config?.title||e.alpcData?.title||e.product?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e?.config?.rules?.split("<br>")?.length>0&&(0,t.jsx)("button",{type:"button",onClick:()=>{s(e?.config?.rules?.split("<br>")),(0,a.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:n?.activated?"active":"not active",event_parameters:{page_group:v,position:i.title,button_name:u?.ruleLabel,info:e?.alpcData?.id?.toString()}})},className:"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]",tabIndex:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&d.preventDefault()},children:u?.ruleLabel}),(0,t.jsxs)("div",{className:"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[(0,t.jsx)(l.Picture,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),(0,t.jsx)(l.Text,{html:`${(0,_.numberFormat)(e?.alpcData?.consumeCredits)} + ${e?.config?.price}`,size:2,as:"p",className:"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "})]}),(0,t.jsxs)("div",{className:"group relative w-full",children:[(0,t.jsx)(l.Button,{disabled:z,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:S,onClick:()=>{I()},title:x?u.insufficientCredits:m,children:m}),(0,t.jsx)("div",{className:(0,a.classNames)("absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]",x?"block":"hidden"),children:(0,t.jsxs)("div",{className:"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",children:[(0,t.jsx)(l.Text,{as:"p",size:"2",html:u?.insufficientCredits,className:"text-[14px]"}),(0,t.jsx)("div",{className:"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),b&&(0,t.jsx)("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:b})]})}var O=B;
|
|
2
2
|
//# sourceMappingURL=RedeemableItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/RedeemableItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name:
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["RedeemableItem_exports", "__export", "RedeemableItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_provider", "import_useRedeemAndBuy", "import_utils", "import_lib", "import_registration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "cn", "e"]
|
|
4
|
+
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div className=\"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]\">\n <Text as=\"p\" size=\"2\" html={pageCommon?.insufficientCredits} className=\"text-[14px]\" />\n <div className=\"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n </div>\n {error && <div className=\"mt-[8px] text-[14px] text-[#FF0000]\">{error}</div>}\n </div>\n )\n}\n\nexport default RedeemableItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["RedeemableItem_exports", "__export", "RedeemableItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_provider", "import_useRedeemAndBuy", "import_utils", "import_lib", "import_registration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "cn", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!d.call(t,r)&&r!==o&&n(t,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return t};var u=t=>g(n({},"__esModule",{value:!0}),t);var a={};module.exports=u(a);
|
|
2
2
|
//# sourceMappingURL=type.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/type.ts"],
|
|
4
|
-
"sourcesContent": ["import { ProductVariant, Product } from '@anker-in/lib'\nimport { AlpcConsumeType } from '../context/const'\n\ntype RedeemableItemConfig = {\n title: string\n desc: string\n price: string\n credit: string\n rules: string\n image: {\n url: string\n }\n mobileImage: {\n url: string\n }\n redeemId: number\n}\n\nexport type CreditsCashCopy = {\n title: string\n list: (RedeemableItemConfig & {\n products: { handle: string; sku: string }[]\n })[]\n soldOut: string\n
|
|
4
|
+
"sourcesContent": ["import { ProductVariant, Product } from '@anker-in/lib'\nimport { AlpcConsumeType } from '../context/const'\n\ntype RedeemableItemConfig = {\n title: string\n desc: string\n price: string\n credit: string\n rules: string\n image: {\n url: string\n }\n mobileImage: {\n url: string\n }\n redeemId: number\n}\n\nexport type CreditsCashCopy = {\n title: string\n list: (RedeemableItemConfig & {\n products: { handle: string; sku: string }[]\n })[]\n soldOut: string\n unlockRewards: string\n btnRedeem: string\n off: string\n}\n\nexport type RedeemItem = {\n product: Product\n productVariant: ProductVariant\n alpcData: {\n id: number\n consumeCredits: number\n remainingInventory: number\n isLimited: boolean\n consumeType: AlpcConsumeType.Product\n showCredit: boolean\n title: string\n desc: string\n }\n config: RedeemableItemConfig\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["type_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(i,
|
|
1
|
+
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(e,i,s,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of a(i))!g.call(e,t)&&t!==s&&n(e,t,{get:()=>i[t],enumerable:!(r=o(i,t))||r.enumerable});return e};var d=e=>p(n({},"__esModule",{value:!0}),e);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 infoIcon?: 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"],
|
|
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 infoIcon?: 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 insufficientCredits?: string\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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as
|
|
1
|
+
import{jsx as i,jsxs as R}from"react/jsx-runtime";import{Container as f,Heading as C}from"@anker-in/headless-ui";import{useMemo as g,useState as h}from"react";import x from"./RedeemableItem";import y from"../context/hooks/useRedeemableList";import b from"../modal/rulesModal";import{useProductsByHandles as v}from"@anker-in/lib";import{classNames as N}from"@anker-in/lib";import{useCreditsContext as I}from"../context/provider";const O=({copy:s})=>{const[n,m]=h(),{redeemableList:d}=y(),{pageCommon:c}=I(),p=[],{data:o}=v({handles:s?.list?.map(e=>e.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:p}}),u=g(()=>o?.map(e=>{const r=s.list.find(a=>a.products?.[0]?.handle===e.handle),t=d.find(a=>a.id?.toString()===r?.redeemId?.toString()),l=e.variants?.find(a=>a.sku===r?.products?.[0]?.sku)||e.variants?.[0];return!t||!l?null:{product:e,productVariant:l,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,d]);return R(f,{className:N("bg-[#F5F5F5]"),children:[i(C,{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:u?.map((e,r)=>i(x,{copy:s,itemData:e,setRules:m,currencyCode:o?.[0]?.price.currencyCode||"USD"},r))}),n&&i(b,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:n.length>0,onClose:()=>m([]),titleClassName:"border-b-transparent h-[56px]",rules:n,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:c?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{O 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 } 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
|
|
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,
|
|
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"]
|
|
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'\nimport { useCreditsContext } from '../context/provider'\n\nexport const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {\n const [rules, setRules] = useState<string | string[]>()\n const { redeemableList } = useRedeemableList()\n const { pageCommon } = useCreditsContext()\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 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={pageCommon?.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,gBAC1C,OAAS,qBAAAC,MAAyB,sBAE3B,MAAMC,EAAc,CAAC,CAAE,KAAAC,CAAK,IAAiC,CAClE,KAAM,CAACC,EAAOC,CAAQ,EAAIV,EAA4B,EAChD,CAAE,eAAAW,CAAe,EAAIT,EAAkB,EACvC,CAAE,WAAAU,CAAW,EAAIN,EAAkB,EAEnCO,EAAqC,CAAC,EAEtC,CAAE,KAAMC,CAAiB,EAAIV,EAAqB,CACtD,QAASI,GAAM,MAAM,IAAIO,GAAQA,EAAK,WAAW,CAAC,GAAG,MAAM,GAAK,CAAC,EACjE,qBAAsB,CACpB,QAASF,CACX,CACF,CAAC,EAEKG,EAAOjB,EAAQ,IACZe,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,OACEf,EAACC,EAAA,CAAU,UAAWQ,EAAG,cAAc,EACrC,UAAAV,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMU,EAAK,MAAO,EAC5Cb,EAAC,OAAI,UAAU,+FACZ,SAAAqB,GAAM,IAAI,CAACD,EAAMO,IAChB3B,EAACM,EAAA,CAEC,KAAMO,EACN,SAAUO,EACV,SAAUL,EACV,aAAcI,IAAmB,CAAC,GAAG,MAAM,cAAgB,OAJtDQ,CAKP,CACD,EACH,EAECb,GACCd,EAACQ,EAAA,CACC,iBAAiB,+BACjB,UAAU,+BACV,OAAQM,EAAM,OAAS,EACvB,QAAS,IAAMC,EAAS,CAAC,CAAC,EAC1B,eAAe,gCACf,MAAOD,EACP,gBAAgB,mCAChB,MAAOG,GAAY,UACnB,cAAc,2BAChB,GAEJ,CAEJ",
|
|
6
|
+
"names": ["jsx", "jsxs", "Container", "Heading", "useMemo", "useState", "RedeemableItem", "useRedeemableList", "RulesModal", "useProductsByHandles", "cn", "useCreditsContext", "CreditsCash", "copy", "rules", "setRules", "redeemableList", "pageCommon", "variantMetafieldIdentifiers", "productByHandles", "item", "list", "product", "config", "alpcData", "productVariant", "variant", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Button as z,Text as u,Picture as b}from"@anker-in/headless-ui";import{useMemo as p,useState as I}from"react";import{useCreditsContext as k}from"../context/provider";import{useRedeemAndBuy as F}from"../context/hooks/useRedeemAndBuy";import{numberFormat as E}from"../context/utils";import{gaTrack as h,classNames as d}from"@anker-in/lib";import{useRegistration as V}from"../../../components/registration";function A({copy:i,itemData:e,setRules:C,className:N}){const{creditInfo:x,profile:l,openSignUpPopup:_,pageCommon:o,gtm:{pageGroup:m}}=k(),{authCodeActivate:f}=V(),[v,g]=I(null),{trigger:w,isMutating:y}=F({},{onError:a=>{g(a.message)}}),r=p(()=>!!l,[l?.activated]),s=p(()=>r&&l?.activated&&e.alpcData?.consumeCredits>Number(x?.available_credit||0),[r,l?.activated,e.alpcData?.consumeCredits,x?.available_credit]),R=p(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||s),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,s]),S=()=>{g(null),r?!l?.activated&&!f.isActivateSuccess?f.open():(w({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),h({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:i.title,button_name:c,info:e?.alpcData?.id?.toString()}})):_()},c=p(()=>e.productVariant?.availableForSale?r?i.btnRedeem:i.unlockRewards:i?.soldOut||"Sold Out",[r,e.productVariant?.availableForSale,i.btnRedeem,i.unlockRewards,i?.soldOut]);return n("div",{className:d("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",N),children:[t("div",{className:d("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:t(b,{className:"mx-auto h-full w-auto",imgClassName:"h-full object-contain",source:e?.config?.image?.url||e?.productVariant?.metafields?.global?.transparentImg||e?.productVariant?.image?.url})}),n("div",{className:d("mt-[22px] w-full l:mt-[8px]"),children:[t(u,{html:e?.product?.title,title:e.config?.title||e.alpcData?.title||e.product?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e?.config?.rules?.split("<br>")?.length>0&&t("button",{type:"button",onClick:()=>{C(e?.config?.rules?.split("<br>")),h({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:i.title,button_name:o?.ruleLabel,info:e?.alpcData?.id?.toString()}})},className:"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]",tabIndex:0,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&a.preventDefault()},children:o?.ruleLabel}),n("div",{className:"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[t(b,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),t(u,{html:`${E(e?.alpcData?.consumeCredits)} + ${e?.config?.price}`,size:2,as:"p",className:"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "})]}),n("div",{className:"group relative w-full",children:[t(z,{disabled:R,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:y,onClick:()=>{S()},title:s?o.insufficientCredits:c,children:c}),t("div",{className:d("absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]",s?"block":"hidden"),children:n("div",{className:"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",children:[t(u,{as:"p",size:"2",html:o?.insufficientCredits,className:"text-[14px]"}),t("div",{className:"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),v&&t("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:v})]})}var j=A;export{j as default};
|
|
2
2
|
//# sourceMappingURL=RedeemableItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/RedeemableItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name:
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "numberFormat", "gaTrack", "cn", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "e", "RedeemableItem_default"]
|
|
4
|
+
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div className=\"relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]\">\n <Text as=\"p\" size=\"2\" html={pageCommon?.insufficientCredits} className=\"text-[14px]\" />\n <div className=\"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n </div>\n {error && <div className=\"mt-[8px] text-[14px] text-[#FF0000]\">{error}</div>}\n </div>\n )\n}\n\nexport default RedeemableItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "numberFormat", "gaTrack", "cn", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "e", "RedeemableItem_default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -7,10 +7,12 @@ import RulesModal from '../modal/rulesModal'
|
|
|
7
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 { useCreditsContext } from '../context/provider'
|
|
10
11
|
|
|
11
12
|
export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
|
|
12
13
|
const [rules, setRules] = useState<string | string[]>()
|
|
13
14
|
const { redeemableList } = useRedeemableList()
|
|
15
|
+
const { pageCommon } = useCreditsContext()
|
|
14
16
|
|
|
15
17
|
const variantMetafieldIdentifiers: any[] = []
|
|
16
18
|
|
|
@@ -47,8 +49,6 @@ export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
|
|
|
47
49
|
.filter(Boolean) as unknown as RedeemItem[]
|
|
48
50
|
}, [productByHandles, copy.list, redeemableList])
|
|
49
51
|
|
|
50
|
-
console.log('list', list)
|
|
51
|
-
|
|
52
52
|
return (
|
|
53
53
|
<Container className={cn('bg-[#F5F5F5]')}>
|
|
54
54
|
<Heading as="h2" size="4" html={copy.title} />
|
|
@@ -73,7 +73,7 @@ export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
|
|
|
73
73
|
titleClassName="border-b-transparent h-[56px]"
|
|
74
74
|
rules={rules}
|
|
75
75
|
scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
|
|
76
|
-
title={
|
|
76
|
+
title={pageCommon?.ruleLabel}
|
|
77
77
|
ruleClassName="text-[#1d1d1f] font-bold"
|
|
78
78
|
/>
|
|
79
79
|
)}
|
|
@@ -24,6 +24,7 @@ function RedeemableItem({
|
|
|
24
24
|
creditInfo,
|
|
25
25
|
profile,
|
|
26
26
|
openSignUpPopup,
|
|
27
|
+
pageCommon,
|
|
27
28
|
gtm: { pageGroup },
|
|
28
29
|
} = useCreditsContext()
|
|
29
30
|
const { authCodeActivate } = useRegistration()
|
|
@@ -143,7 +144,7 @@ function RedeemableItem({
|
|
|
143
144
|
event_parameters: {
|
|
144
145
|
page_group: pageGroup,
|
|
145
146
|
position: copy.title,
|
|
146
|
-
button_name:
|
|
147
|
+
button_name: pageCommon?.ruleLabel,
|
|
147
148
|
info: itemData?.alpcData?.id?.toString(),
|
|
148
149
|
},
|
|
149
150
|
})
|
|
@@ -156,7 +157,7 @@ function RedeemableItem({
|
|
|
156
157
|
}
|
|
157
158
|
}}
|
|
158
159
|
>
|
|
159
|
-
{
|
|
160
|
+
{pageCommon?.ruleLabel}
|
|
160
161
|
</button>
|
|
161
162
|
)}
|
|
162
163
|
<div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
|
|
@@ -182,7 +183,7 @@ function RedeemableItem({
|
|
|
182
183
|
onClick={() => {
|
|
183
184
|
handleRedeem()
|
|
184
185
|
}}
|
|
185
|
-
title={inSufficientCredit ?
|
|
186
|
+
title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
|
|
186
187
|
>
|
|
187
188
|
{redeemButtonText}
|
|
188
189
|
</Button>
|
|
@@ -193,7 +194,7 @@ function RedeemableItem({
|
|
|
193
194
|
)}
|
|
194
195
|
>
|
|
195
196
|
<div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]">
|
|
196
|
-
<Text as="p" size="2" html={
|
|
197
|
+
<Text as="p" size="2" html={pageCommon?.insufficientCredits} className="text-[14px]" />
|
|
197
198
|
<div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
|
|
198
199
|
</div>
|
|
199
200
|
</div>
|
|
@@ -22,11 +22,9 @@ export type CreditsCashCopy = {
|
|
|
22
22
|
products: { handle: string; sku: string }[]
|
|
23
23
|
})[]
|
|
24
24
|
soldOut: string
|
|
25
|
-
ruleLabel: string
|
|
26
25
|
unlockRewards: string
|
|
27
26
|
btnRedeem: string
|
|
28
27
|
off: string
|
|
29
|
-
insufficientCredits: string
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
export type RedeemItem = {
|