@anker-in/campaign-ui 0.2.0-beta.14 → 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.
- 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 +1 -1
- package/dist/cjs/components/credits/creditsCash/type.js +1 -1
- package/dist/cjs/components/credits/creditsCash/type.js.map +1 -1
- 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 +1 -1
- package/package.json +1 -1
- package/src/components/credits/creditsCash/RedeemableItem.tsx +17 -4
- package/src/components/credits/creditsCash/type.ts +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
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 { 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 } = 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 <
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwHQ,IAAAI,EAAA,6BAxHRC,EAAsC,iCACtCC,EAAkC,iBAGlCC,EAAkC,+BAClCC,EAAgC,4CAChCC,
|
|
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", "rounded", "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 { 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
|
+
"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
|
}
|
|
@@ -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
|
|
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:
|
|
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
|
|
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 { 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 } = 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 <
|
|
5
|
-
"mappings": "AAwHQ,cAAAA,
|
|
6
|
-
"names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "numberFormat", "gaTrack", "cn", "ROUNDED_BRANDS", "useHeadlessContext", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "brand", "rounded", "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 { 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
|
+
"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
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react'
|
|
|
4
4
|
import { CreditsCashCopy, RedeemItem } from './type'
|
|
5
5
|
import { useCreditsContext } from '../context/provider'
|
|
6
6
|
import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
|
|
7
|
-
import { numberFormat } from '../context/utils'
|
|
7
|
+
import { formatPrice, numberFormat } from '../context/utils'
|
|
8
8
|
import { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'
|
|
9
9
|
import { useRegistration } from '../../../components/registration'
|
|
10
10
|
|
|
@@ -28,7 +28,7 @@ function RedeemableItem({
|
|
|
28
28
|
gtm: { pageGroup },
|
|
29
29
|
} = useCreditsContext()
|
|
30
30
|
const { authCodeActivate } = useRegistration()
|
|
31
|
-
const { brand } = useHeadlessContext()
|
|
31
|
+
const { brand, locale } = useHeadlessContext()
|
|
32
32
|
const rounded = ROUNDED_BRANDS.includes(brand)
|
|
33
33
|
const [error, setError] = useState<string | null>(null)
|
|
34
34
|
const { trigger, isMutating } = useRedeemAndBuy(
|
|
@@ -163,13 +163,26 @@ function RedeemableItem({
|
|
|
163
163
|
{pageCommon?.ruleLabel}
|
|
164
164
|
</button>
|
|
165
165
|
)}
|
|
166
|
-
<
|
|
166
|
+
<Text
|
|
167
|
+
html={formatPrice({
|
|
168
|
+
amount: itemData?.productVariant?.price.amount,
|
|
169
|
+
currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
|
|
170
|
+
locale: locale,
|
|
171
|
+
})}
|
|
172
|
+
className="mt-[24px] text-[24px] font-bold text-[#D1D1D1] line-through l:text-[14px]"
|
|
173
|
+
as="p"
|
|
174
|
+
/>
|
|
175
|
+
<div className="flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
|
|
167
176
|
<Picture
|
|
168
177
|
className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
|
|
169
178
|
source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
|
|
170
179
|
/>
|
|
171
180
|
<Text
|
|
172
|
-
html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${
|
|
181
|
+
html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${formatPrice({
|
|
182
|
+
amount: Number(itemData?.config?.price),
|
|
183
|
+
currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',
|
|
184
|
+
locale: locale,
|
|
185
|
+
})}`}
|
|
173
186
|
size={2}
|
|
174
187
|
as="p"
|
|
175
188
|
className="ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
|