@anker-in/campaign-ui 0.2.0-beta.15 → 0.2.0-beta.16

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.
@@ -1,2 +1,2 @@
1
- "use strict";var v=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var L=(r,e)=>{for(var s in e)v(r,s,{get:e[s],enumerable:!0})},O=(r,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of A(e))!B.call(r,a)&&a!==s&&v(r,a,{get:()=>e[a],enumerable:!(c=F(e,a))||c.enumerable});return r};var P=r=>O(v({},"__esModule",{value:!0}),r);var M={};L(M,{default:()=>U});module.exports=P(M);var t=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),o=require("react"),_=require("../context/provider"),y=require("../context/hooks/useRedeemAndBuy"),m=require("../context/utils"),l=require("@anker-in/lib"),R=require("../../../components/registration");function T({copy:r,itemData:e,setRules:s,className:c}){const{creditInfo:a,profile:i,openSignUpPopup:S,pageCommon:u,gtm:{pageGroup:g}}=(0,_.useCreditsContext)(),{authCodeActivate:b}=(0,R.useRegistration)(),{brand:w,locale:z}=(0,l.useHeadlessContext)(),h=l.ROUNDED_BRANDS.includes(w),[C,N]=(0,o.useState)(null),{trigger:I,isMutating:V}=(0,y.useRedeemAndBuy)({},{onError:d=>{N(d.message)}}),p=(0,o.useMemo)(()=>!!i,[i?.activated]),x=(0,o.useMemo)(()=>p&&i?.activated&&e.alpcData?.consumeCredits>Number(a?.available_credit||0),[p,i?.activated,e.alpcData?.consumeCredits,a?.available_credit]),k=(0,o.useMemo)(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||x),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,x]),E=()=>{N(null),p?!i?.activated&&!b.isActivateSuccess?b.open():(I({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),(0,l.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:r.title,button_name:f,info:e?.alpcData?.id?.toString()}})):S()},f=(0,o.useMemo)(()=>e.productVariant?.availableForSale?p?r.btnRedeem:r.unlockRewards:r?.soldOut||"Sold Out",[p,e.productVariant?.availableForSale,r.btnRedeem,r.unlockRewards,r?.soldOut]);return(0,t.jsxs)("div",{className:(0,l.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]",!h&&"rounded-none",c),children:[(0,t.jsx)("div",{className:(0,l.classNames)("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:(0,t.jsx)(n.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,l.classNames)("mt-[22px] w-full l:mt-[8px]"),children:[(0,t.jsx)(n.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,l.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:r.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.jsx)(n.Text,{html:(0,m.formatPrice)({amount:e?.productVariant?.price.amount,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:z}),className:"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]",as:"p"}),(0,t.jsxs)("div",{className:"flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[(0,t.jsx)(n.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)(n.Text,{html:`${(0,m.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)(n.Button,{disabled:k,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:V,onClick:()=>{E()},title:x?u.insufficientCredits:f,children:f}),(0,t.jsx)("div",{className:(0,l.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:(0,l.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!h&&"rounded-none"),children:[(0,t.jsx)(n.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]"})]})})]})]}),C&&(0,t.jsx)("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:C})]})}var U=T;
1
+ "use strict";var v=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var L=(r,e)=>{for(var s in e)v(r,s,{get:e[s],enumerable:!0})},O=(r,e,s,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of A(e))!B.call(r,o)&&o!==s&&v(r,o,{get:()=>e[o],enumerable:!(u=F(e,o))||u.enumerable});return r};var P=r=>O(v({},"__esModule",{value:!0}),r);var M={};L(M,{default:()=>T});module.exports=P(M);var t=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),i=require("react"),y=require("../context/provider"),S=require("../context/hooks/useRedeemAndBuy"),c=require("../context/utils"),l=require("@anker-in/lib"),R=require("../../../components/registration");function U({copy:r,itemData:e,setRules:s,className:u}){const{creditInfo:o,profile:a,openSignUpPopup:w,pageCommon:x,gtm:{pageGroup:g}}=(0,y.useCreditsContext)(),{authCodeActivate:b}=(0,R.useRegistration)(),{brand:V,locale:h}=(0,l.useHeadlessContext)(),C=l.ROUNDED_BRANDS.includes(V),[N,_]=(0,i.useState)(null),{trigger:z,isMutating:I}=(0,S.useRedeemAndBuy)({},{onError:d=>{_(d.message)}}),p=(0,i.useMemo)(()=>!!a,[a?.activated]),m=(0,i.useMemo)(()=>p&&a?.activated&&e.alpcData?.consumeCredits>Number(o?.available_credit||0),[p,a?.activated,e.alpcData?.consumeCredits,o?.available_credit]),k=(0,i.useMemo)(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||m),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,m]),E=()=>{_(null),p?!a?.activated&&!b.isActivateSuccess?b.open():(z({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),(0,l.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:a?.activated?"active":"not active",event_parameters:{page_group:g,position:r.title,button_name:f,info:e?.alpcData?.id?.toString()}})):w()},f=(0,i.useMemo)(()=>e.productVariant?.availableForSale?p?r.btnRedeem:r.unlockRewards:r?.soldOut||"Sold Out",[p,e.productVariant?.availableForSale,r.btnRedeem,r.unlockRewards,r?.soldOut]);return(0,t.jsxs)("div",{className:(0,l.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&&"rounded-none",u),children:[(0,t.jsx)("div",{className:(0,l.classNames)("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:(0,t.jsx)(n.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,l.classNames)("mt-[22px] w-full l:mt-[8px]"),children:[(0,t.jsx)(n.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,l.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:a?.activated?"active":"not active",event_parameters:{page_group:g,position:r.title,button_name:x?.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:x?.ruleLabel}),(0,t.jsx)(n.Text,{html:(0,c.formatPrice)({amount:e?.productVariant?.price.amount,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:h}),className:"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]",as:"p"}),(0,t.jsxs)("div",{className:"flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[(0,t.jsx)(n.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)(n.Text,{html:`${(0,c.numberFormat)(e?.alpcData?.consumeCredits)} + ${(0,c.formatPrice)({amount:Number(e?.config?.price),currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:h})}`,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)(n.Button,{disabled:k,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:I,onClick:()=>{E()},title:m?x.insufficientCredits:f,children:f}),(0,t.jsx)("div",{className:(0,l.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]",m?"block":"hidden"),children:(0,t.jsxs)("div",{className:(0,l.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!C&&"rounded-none"),children:[(0,t.jsx)(n.Text,{as:"p",size:"2",html:x?.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]"})]})})]})]}),N&&(0,t.jsx)("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:N})]})}var T=U;
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 { formatPrice, numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } 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 { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\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 !rounded && 'rounded-none',\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 <Text\n html={formatPrice({\n amount: itemData?.productVariant?.price.amount,\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}\n className=\"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]\"\n as=\"p\"\n />\n <div className=\"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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\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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",
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 { formatPrice, numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } 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 { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\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 !rounded && 'rounded-none',\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 <Text\n html={formatPrice({\n amount: itemData?.productVariant?.price.amount,\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}\n className=\"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]\"\n as=\"p\"\n />\n <div className=\"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)} + ${formatPrice({\n amount: Number(itemData?.config?.price),\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}`}\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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\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
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", "brand", "locale", "rounded", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "cn", "e"]
7
7
  }
@@ -3,7 +3,7 @@ import { AlpcConsumeType } from '../context/const';
3
3
  type RedeemableItemConfig = {
4
4
  title: string;
5
5
  desc: string;
6
- price: string;
6
+ price: number;
7
7
  credit: string;
8
8
  rules: string;
9
9
  image: {
@@ -1,2 +1,2 @@
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);
1
+ "use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var u=(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 g=t=>u(n({},"__esModule",{value:!0}),t);var a={};module.exports=g(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 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"],
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: number\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
- import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Button as k,Text as d,Picture as h}from"@anker-in/headless-ui";import{useMemo as c,useState as E}from"react";import{useCreditsContext as F}from"../context/provider";import{useRedeemAndBuy as A}from"../context/hooks/useRedeemAndBuy";import{formatPrice as B,numberFormat as L}from"../context/utils";import{gaTrack as C,classNames as i,ROUNDED_BRANDS as O,useHeadlessContext as P}from"@anker-in/lib";import{useRegistration as T}from"../../../components/registration";function U({copy:r,itemData:e,setRules:N,className:_}){const{creditInfo:x,profile:l,openSignUpPopup:y,pageCommon:s,gtm:{pageGroup:m}}=F(),{authCodeActivate:f}=T(),{brand:R,locale:S}=P(),v=O.includes(R),[g,b]=E(null),{trigger:w,isMutating:z}=A({},{onError:a=>{b(a.message)}}),n=c(()=>!!l,[l?.activated]),p=c(()=>n&&l?.activated&&e.alpcData?.consumeCredits>Number(x?.available_credit||0),[n,l?.activated,e.alpcData?.consumeCredits,x?.available_credit]),I=c(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||p),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,p]),V=()=>{b(null),n?!l?.activated&&!f.isActivateSuccess?f.open():(w({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),C({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:r.title,button_name:u,info:e?.alpcData?.id?.toString()}})):y()},u=c(()=>e.productVariant?.availableForSale?n?r.btnRedeem:r.unlockRewards:r?.soldOut||"Sold Out",[n,e.productVariant?.availableForSale,r.btnRedeem,r.unlockRewards,r?.soldOut]);return o("div",{className:i("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!v&&"rounded-none",_),children:[t("div",{className:i("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:t(h,{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})}),o("div",{className:i("mt-[22px] w-full l:mt-[8px]"),children:[t(d,{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:()=>{N(e?.config?.rules?.split("<br>")),C({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:r.title,button_name:s?.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:s?.ruleLabel}),t(d,{html:B({amount:e?.productVariant?.price.amount,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:S}),className:"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]",as:"p"}),o("div",{className:"flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[t(h,{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(d,{html:`${L(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] "})]}),o("div",{className:"group relative w-full",children:[t(k,{disabled:I,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:z,onClick:()=>{V()},title:p?s.insufficientCredits:u,children:u}),t("div",{className:i("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]",p?"block":"hidden"),children:o("div",{className:i("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!v&&"rounded-none"),children:[t(d,{as:"p",size:"2",html:s?.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]"})]})})]})]}),g&&t("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:g})]})}var X=U;export{X as default};
1
+ import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Button as E,Text as d,Picture as C}from"@anker-in/headless-ui";import{useMemo as c,useState as F}from"react";import{useCreditsContext as A}from"../context/provider";import{useRedeemAndBuy as B}from"../context/hooks/useRedeemAndBuy";import{formatPrice as N,numberFormat as L}from"../context/utils";import{gaTrack as _,classNames as a,ROUNDED_BRANDS as O,useHeadlessContext as P}from"@anker-in/lib";import{useRegistration as U}from"../../../components/registration";function T({copy:r,itemData:e,setRules:y,className:S}){const{creditInfo:x,profile:l,openSignUpPopup:R,pageCommon:s,gtm:{pageGroup:m}}=A(),{authCodeActivate:f}=U(),{brand:w,locale:v}=P(),g=O.includes(w),[b,h]=F(null),{trigger:V,isMutating:z}=B({},{onError:o=>{h(o.message)}}),n=c(()=>!!l,[l?.activated]),p=c(()=>n&&l?.activated&&e.alpcData?.consumeCredits>Number(x?.available_credit||0),[n,l?.activated,e.alpcData?.consumeCredits,x?.available_credit]),I=c(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||p),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,p]),k=()=>{h(null),n?!l?.activated&&!f.isActivateSuccess?f.open():(V({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),_({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:r.title,button_name:u,info:e?.alpcData?.id?.toString()}})):R()},u=c(()=>e.productVariant?.availableForSale?n?r.btnRedeem:r.unlockRewards:r?.soldOut||"Sold Out",[n,e.productVariant?.availableForSale,r.btnRedeem,r.unlockRewards,r?.soldOut]);return i("div",{className:a("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!g&&"rounded-none",S),children:[t("div",{className:a("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:t(C,{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})}),i("div",{className:a("mt-[22px] w-full l:mt-[8px]"),children:[t(d,{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:()=>{y(e?.config?.rules?.split("<br>")),_({event:"ga4Event",event_name:"lp_button",member_active_status:l?.activated?"active":"not active",event_parameters:{page_group:m,position:r.title,button_name:s?.ruleLabel,info:e?.alpcData?.id?.toString()}})},className:"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]",tabIndex:0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&o.preventDefault()},children:s?.ruleLabel}),t(d,{html:N({amount:e?.productVariant?.price.amount,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:v}),className:"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]",as:"p"}),i("div",{className:"flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[t(C,{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(d,{html:`${L(e?.alpcData?.consumeCredits)} + ${N({amount:Number(e?.config?.price),currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:v})}`,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] "})]}),i("div",{className:"group relative w-full",children:[t(E,{disabled:I,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:z,onClick:()=>{k()},title:p?s.insufficientCredits:u,children:u}),t("div",{className:a("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]",p?"block":"hidden"),children:i("div",{className:a("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!g&&"rounded-none"),children:[t(d,{as:"p",size:"2",html:s?.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]"})]})})]})]}),b&&t("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:b})]})}var X=T;export{X 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 { formatPrice, numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } 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 { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\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 !rounded && 'rounded-none',\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 <Text\n html={formatPrice({\n amount: itemData?.productVariant?.price.amount,\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}\n className=\"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]\"\n as=\"p\"\n />\n <div className=\"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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\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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",
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 { formatPrice, numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } 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 { brand, locale } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\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 !rounded && 'rounded-none',\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 <Text\n html={formatPrice({\n amount: itemData?.productVariant?.price.amount,\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}\n className=\"mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]\"\n as=\"p\"\n />\n <div className=\"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)} + ${formatPrice({\n amount: Number(itemData?.config?.price),\n currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n locale: locale,\n })}`}\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\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\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
6
  "names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "formatPrice", "numberFormat", "gaTrack", "cn", "ROUNDED_BRANDS", "useHeadlessContext", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "brand", "locale", "rounded", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "e", "RedeemableItem_default"]
7
7
  }
@@ -3,7 +3,7 @@ import { AlpcConsumeType } from '../context/const';
3
3
  type RedeemableItemConfig = {
4
4
  title: string;
5
5
  desc: string;
6
- price: string;
6
+ price: number;
7
7
  credit: string;
8
8
  rules: string;
9
9
  image: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/campaign-ui",
3
- "version": "0.2.0-beta.15",
3
+ "version": "0.2.0-beta.16",
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",
@@ -178,7 +178,11 @@ function RedeemableItem({
178
178
  source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
179
179
  />
180
180
  <Text
181
- html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}
181
+ html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${formatPrice({
182
+ amount: Number(itemData?.config?.price),
183
+ currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
184
+ locale: locale,
185
+ })}`}
182
186
  size={2}
183
187
  as="p"
184
188
  className="ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
@@ -4,7 +4,7 @@ import { AlpcConsumeType } from '../context/const'
4
4
  type RedeemableItemConfig = {
5
5
  title: string
6
6
  desc: string
7
- price: string
7
+ price: number
8
8
  credit: string
9
9
  rules: string
10
10
  image: {