@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.4

package/dist/esm/components/credits/context/utils/getFunctionMemberPrice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/context/utils/getFunctionMemberPrice.ts"],
-  "sourcesContent": ["import { formatPrice } from '../utils'\nimport { FunctionMemberPriceConfig, FunctionMemberPriceResult } from '../memberPriceTypes'\nimport { ProductVariant } from '@anker-in/lib'\nimport { functionDiscountCalculate } from './functionDiscountCalculate'\nimport Decimal from 'decimal.js'\nimport { getFunctionMemberPriceDiscountConfig } from './getFunctionMemberPriceDiscountConfig'\nimport variantGetCoupon from './variantGetCoupon'\n\n// \u8BA1\u7B97\u5355\u4EF6\u5546\u54C1\u7684\u4F1A\u5458\u4EF7\nexport const getFunctionMemberPrice = ({\n  memberPriceDiscount,\n  currencyCode,\n  variant,\n  locale,\n}: {\n  memberPriceDiscount?: FunctionMemberPriceConfig[]\n  currencyCode?: string\n  variant?: ProductVariant\n  locale: string\n}) => {\n  const couponData = variantGetCoupon({ variant })\n\n  // variant\u5BF9\u5E94\u7684\u4F1A\u5458\u4EF7\u6298\u6263\u914D\u7F6E\n  const { memberPriceDiscountConfig, activeMemberPriceConfig } = getFunctionMemberPriceDiscountConfig({\n    config: memberPriceDiscount,\n    variant,\n  })\n\n  const useCoupon = !!activeMemberPriceConfig?.discount_combinations.other_product_discounts\n\n  if (!memberPriceDiscountConfig) {\n    return false as false\n  }\n\n  const originalPrice = {\n    amount: variant?.price.amount || 0,\n    priceWithCurrency: formatPrice({\n      amount: variant?.price.amount || 0,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  const salePriceWithoutCouponAmount = memberPriceDiscountConfig\n    ? functionDiscountCalculate({\n        config: memberPriceDiscountConfig,\n        price: variant?.price.amount || 0,\n      })\n    : variant?.price.amount || 0\n  const salePriceWithoutCoupon = {\n    amount: salePriceWithoutCouponAmount,\n    priceWithCurrency: formatPrice({\n      amount: salePriceWithoutCouponAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  // function \u4F1A\u5458\u4EF7\u662F\u5728\u539F\u4EF7\u7684\u57FA\u7840\u4E0A\u8FDB\u884C\u8BA1\u7B97\uFF0C\u6682\u4E0D\u652F\u6301\u6298\u540E\u4EF7\n  let salePriceAmount = salePriceWithoutCouponAmount\n\n  // \u51CF\u53BBcode\u7684\u4F18\u60E0\n  if (couponData?.variant_price4wscode && variant && useCoupon) {\n    if (useCoupon) {\n      // code\u7684\u4F18\u60E0\u91D1\u989D\n      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)\n      salePriceAmount = new Decimal(salePriceWithoutCouponAmount).minus(codeSaveAmountDecimal).toNumber()\n    } else {\n      // \u4E0D\u80FD\u4E0E code \u540C\u65F6\u4F7F\u7528\uFF0C\u9700\u8981\u5224\u65AD\u4F1A\u5458\u4EF7\u662F\u5426\u5C0F\u4E8E code \u7684\u4F18\u60E0\u91D1\u989D\uFF0C\u5982\u679C\u5C0F\u4E8E\u5219\u5F53\u505A\u6CA1\u6709\u4F1A\u5458\u4EF7\n      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)\n      if (salePriceWithoutCouponAmount > codeSaveAmountDecimal.toNumber()) {\n        return false as false\n      }\n    }\n  }\n\n  const salePrice = {\n    amount: salePriceAmount,\n    priceWithCurrency: formatPrice({\n      amount: salePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  const savePriceAmount = new Decimal(originalPrice.amount).minus(salePrice.amount).toNumber()\n  const savePrice = {\n    amount: savePriceAmount,\n    priceWithCurrency: formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    }),\n  }\n\n  const savePriceWithoutCouponAmount = new Decimal(originalPrice.amount)\n    .minus(salePriceWithoutCoupon.amount)\n    .toNumber()\n  const savePriceWithoutCoupon = {\n    amount: savePriceWithoutCouponAmount,\n    priceWithCurrency: formatPrice({\n      amount: savePriceWithoutCouponAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    }),\n  }\n\n  const result: FunctionMemberPriceResult = {\n    // \u662F\u5426\u5B58\u5728\u4F1A\u5458\u4EF7\n    hasMemberPrice: !!memberPriceDiscountConfig,\n    useCoupon,\n    // \u539F\u4EF7\n    originalPrice: originalPrice.amount,\n    originalPriceWithCurrency: originalPrice.priceWithCurrency as string,\n    // \u4F7F\u7528\u5238\u540E\u7684\u6298\u540E\u4EF7\n    salePrice: salePrice.amount,\n    salePriceWithCurrency: salePrice.priceWithCurrency as string,\n\n    // \u4E0D\u4F7F\u7528\u5238\u7684\u6298\u540E\u4EF7\n    salePriceWithoutCoupon: salePriceWithoutCoupon.amount,\n    salePriceWithoutCouponWithCurrency: salePriceWithoutCoupon.priceWithCurrency as string,\n\n    // \u5305\u542B\u4F7F\u7528\u5238\u7684\u8282\u7701\u91D1\u989D\n    savePrice: savePrice.amount,\n    savePriceWithCurrency: savePrice.priceWithCurrency as string,\n\n    // \u4E0D\u4F7F\u7528\u5238\u7684\u8282\u7701\u91D1\u989D\n    savePriceWithoutCoupon: savePriceWithoutCoupon.amount,\n    savePriceWithoutCouponWithCurrency: savePriceWithoutCoupon.priceWithCurrency as string,\n  }\n\n  return result\n}\n"],
+  "sourcesContent": ["import { formatPrice } from '../utils'\nimport { FunctionMemberPriceConfig, FunctionMemberPriceResult } from '../memberPriceTypes'\nimport { NormalizedProductVariant } from '@anker-in/shopify-react'\nimport { functionDiscountCalculate } from './functionDiscountCalculate'\nimport Decimal from 'decimal.js'\nimport { getFunctionMemberPriceDiscountConfig } from './getFunctionMemberPriceDiscountConfig'\nimport variantGetCoupon from './variantGetCoupon'\n\n// \u8BA1\u7B97\u5355\u4EF6\u5546\u54C1\u7684\u4F1A\u5458\u4EF7\nexport const getFunctionMemberPrice = ({\n  memberPriceDiscount,\n  currencyCode,\n  variant,\n  locale,\n}: {\n  memberPriceDiscount?: FunctionMemberPriceConfig[]\n  currencyCode?: string\n  variant?: NormalizedProductVariant\n  locale: string\n}) => {\n  const couponData = variantGetCoupon({ variant })\n\n  // variant\u5BF9\u5E94\u7684\u4F1A\u5458\u4EF7\u6298\u6263\u914D\u7F6E\n  const { memberPriceDiscountConfig, activeMemberPriceConfig } = getFunctionMemberPriceDiscountConfig({\n    config: memberPriceDiscount,\n    variant,\n  })\n\n  const useCoupon = !!activeMemberPriceConfig?.discount_combinations.other_product_discounts\n\n  if (!memberPriceDiscountConfig) {\n    return false as false\n  }\n\n  const originalPrice = {\n    amount: variant?.price.amount || 0,\n    priceWithCurrency: formatPrice({\n      amount: variant?.price.amount || 0,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  const salePriceWithoutCouponAmount = memberPriceDiscountConfig\n    ? functionDiscountCalculate({\n        config: memberPriceDiscountConfig,\n        price: variant?.price.amount || 0,\n      })\n    : variant?.price.amount || 0\n  const salePriceWithoutCoupon = {\n    amount: salePriceWithoutCouponAmount,\n    priceWithCurrency: formatPrice({\n      amount: salePriceWithoutCouponAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  // function \u4F1A\u5458\u4EF7\u662F\u5728\u539F\u4EF7\u7684\u57FA\u7840\u4E0A\u8FDB\u884C\u8BA1\u7B97\uFF0C\u6682\u4E0D\u652F\u6301\u6298\u540E\u4EF7\n  let salePriceAmount = salePriceWithoutCouponAmount\n\n  // \u51CF\u53BBcode\u7684\u4F18\u60E0\n  if (couponData?.variant_price4wscode && variant && useCoupon) {\n    if (useCoupon) {\n      // code\u7684\u4F18\u60E0\u91D1\u989D\n      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)\n      salePriceAmount = new Decimal(salePriceWithoutCouponAmount).minus(codeSaveAmountDecimal).toNumber()\n    } else {\n      // \u4E0D\u80FD\u4E0E code \u540C\u65F6\u4F7F\u7528\uFF0C\u9700\u8981\u5224\u65AD\u4F1A\u5458\u4EF7\u662F\u5426\u5C0F\u4E8E code \u7684\u4F18\u60E0\u91D1\u989D\uFF0C\u5982\u679C\u5C0F\u4E8E\u5219\u5F53\u505A\u6CA1\u6709\u4F1A\u5458\u4EF7\n      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)\n      if (salePriceWithoutCouponAmount > codeSaveAmountDecimal.toNumber()) {\n        return false as false\n      }\n    }\n  }\n\n  const salePrice = {\n    amount: salePriceAmount,\n    priceWithCurrency: formatPrice({\n      amount: salePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n    }),\n  }\n\n  const savePriceAmount = new Decimal(originalPrice.amount).minus(salePrice.amount).toNumber()\n  const savePrice = {\n    amount: savePriceAmount,\n    priceWithCurrency: formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    }),\n  }\n\n  const savePriceWithoutCouponAmount = new Decimal(originalPrice.amount)\n    .minus(salePriceWithoutCoupon.amount)\n    .toNumber()\n  const savePriceWithoutCoupon = {\n    amount: savePriceWithoutCouponAmount,\n    priceWithCurrency: formatPrice({\n      amount: savePriceWithoutCouponAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    }),\n  }\n\n  const result: FunctionMemberPriceResult = {\n    // \u662F\u5426\u5B58\u5728\u4F1A\u5458\u4EF7\n    hasMemberPrice: !!memberPriceDiscountConfig,\n    useCoupon,\n    // \u539F\u4EF7\n    originalPrice: originalPrice.amount,\n    originalPriceWithCurrency: originalPrice.priceWithCurrency as string,\n    // \u4F7F\u7528\u5238\u540E\u7684\u6298\u540E\u4EF7\n    salePrice: salePrice.amount,\n    salePriceWithCurrency: salePrice.priceWithCurrency as string,\n\n    // \u4E0D\u4F7F\u7528\u5238\u7684\u6298\u540E\u4EF7\n    salePriceWithoutCoupon: salePriceWithoutCoupon.amount,\n    salePriceWithoutCouponWithCurrency: salePriceWithoutCoupon.priceWithCurrency as string,\n\n    // \u5305\u542B\u4F7F\u7528\u5238\u7684\u8282\u7701\u91D1\u989D\n    savePrice: savePrice.amount,\n    savePriceWithCurrency: savePrice.priceWithCurrency as string,\n\n    // \u4E0D\u4F7F\u7528\u5238\u7684\u8282\u7701\u91D1\u989D\n    savePriceWithoutCoupon: savePriceWithoutCoupon.amount,\n    savePriceWithoutCouponWithCurrency: savePriceWithoutCoupon.priceWithCurrency as string,\n  }\n\n  return result\n}\n"],
   "mappings": "AAAA,OAAS,eAAAA,MAAmB,WAG5B,OAAS,6BAAAC,MAAiC,8BAC1C,OAAOC,MAAa,aACpB,OAAS,wCAAAC,MAA4C,yCACrD,OAAOC,MAAsB,qBAGtB,MAAMC,EAAyB,CAAC,CACrC,oBAAAC,EACA,aAAAC,EACA,QAAAC,EACA,OAAAC,CACF,IAKM,CACJ,MAAMC,EAAaN,EAAiB,CAAE,QAAAI,CAAQ,CAAC,EAGzC,CAAE,0BAAAG,EAA2B,wBAAAC,CAAwB,EAAIT,EAAqC,CAClG,OAAQG,EACR,QAAAE,CACF,CAAC,EAEKK,EAAY,CAAC,CAACD,GAAyB,sBAAsB,wBAEnE,GAAI,CAACD,EACH,MAAO,GAGT,MAAMG,EAAgB,CACpB,OAAQN,GAAS,MAAM,QAAU,EACjC,kBAAmBR,EAAY,CAC7B,OAAQQ,GAAS,MAAM,QAAU,EACjC,aAAcD,GAAgB,MAC9B,OAAAE,CACF,CAAC,CACH,EAEMM,EAA+BJ,EACjCV,EAA0B,CACxB,OAAQU,EACR,MAAOH,GAAS,MAAM,QAAU,CAClC,CAAC,EACDA,GAAS,MAAM,QAAU,EACvBQ,EAAyB,CAC7B,OAAQD,EACR,kBAAmBf,EAAY,CAC7B,OAAQe,EACR,aAAcR,GAAgB,MAC9B,OAAAE,CACF,CAAC,CACH,EAGA,IAAIQ,EAAkBF,EAGtB,GAAIL,GAAY,sBAAwBF,GAAWK,EACjD,GAAIA,EAAW,CAEb,MAAMK,EAAwB,IAAIhB,EAAQM,EAAQ,MAAM,MAAM,EAAE,MAAME,EAAW,oBAAoB,EACrGO,EAAkB,IAAIf,EAAQa,CAA4B,EAAE,MAAMG,CAAqB,EAAE,SAAS,CACpG,KAAO,CAEL,MAAMA,EAAwB,IAAIhB,EAAQM,EAAQ,MAAM,MAAM,EAAE,MAAME,EAAW,oBAAoB,EACrG,GAAIK,EAA+BG,EAAsB,SAAS,EAChE,MAAO,EAEX,CAGF,MAAMC,EAAY,CAChB,OAAQF,EACR,kBAAmBjB,EAAY,CAC7B,OAAQiB,EACR,aAAcV,GAAgB,MAC9B,OAAAE,CACF,CAAC,CACH,EAEMW,EAAkB,IAAIlB,EAAQY,EAAc,MAAM,EAAE,MAAMK,EAAU,MAAM,EAAE,SAAS,EACrFE,EAAY,CAChB,OAAQD,EACR,kBAAmBpB,EAAY,CAC7B,OAAQoB,EACR,aAAcb,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACH,EAEMa,EAA+B,IAAIpB,EAAQY,EAAc,MAAM,EAClE,MAAME,EAAuB,MAAM,EACnC,SAAS,EACNO,EAAyB,CAC7B,OAAQD,EACR,kBAAmBtB,EAAY,CAC7B,OAAQsB,EACR,aAAcf,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACH,EA0BA,MAxB0C,CAExC,eAAgB,CAAC,CAACE,EAClB,UAAAE,EAEA,cAAeC,EAAc,OAC7B,0BAA2BA,EAAc,kBAEzC,UAAWK,EAAU,OACrB,sBAAuBA,EAAU,kBAGjC,uBAAwBH,EAAuB,OAC/C,mCAAoCA,EAAuB,kBAG3D,UAAWK,EAAU,OACrB,sBAAuBA,EAAU,kBAGjC,uBAAwBE,EAAuB,OAC/C,mCAAoCA,EAAuB,iBAC7D,CAGF",
   "names": ["formatPrice", "functionDiscountCalculate", "Decimal", "getFunctionMemberPriceDiscountConfig", "variantGetCoupon", "getFunctionMemberPrice", "memberPriceDiscount", "currencyCode", "variant", "locale", "couponData", "memberPriceDiscountConfig", "activeMemberPriceConfig", "useCoupon", "originalPrice", "salePriceWithoutCouponAmount", "salePriceWithoutCoupon", "salePriceAmount", "codeSaveAmountDecimal", "salePrice", "savePriceAmount", "savePrice", "savePriceWithoutCouponAmount", "savePriceWithoutCoupon"]
 }

package/dist/esm/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.d.ts

@@ -1,8 +1,8 @@
 import { DiscountConfig, FunctionMemberPriceConfig } from '../memberPriceTypes';
-import { ProductVariant } from '@anker-in/lib';
+import { NormalizedProductVariant } from '@anker-in/shopify-react';
 export declare const getFunctionMemberPriceDiscountConfig: ({ config, variant, }: {
     config?: FunctionMemberPriceConfig[];
-    variant?: ProductVariant;
+    variant?: NormalizedProductVariant;
 }) => {
     memberPriceDiscountConfig: DiscountConfig | undefined;
     activeMemberPriceConfig: FunctionMemberPriceConfig | undefined;

package/dist/esm/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.js

@@ -1,2 +1,2 @@
-import{atobID as f}from"./atobID";const b=({config:e,variant:t})=>{let i,r;if(!e||!t)return{memberPriceDiscountConfig:i,activeMemberPriceConfig:r};for(const o of e)if(i=o.result_detail.member_discounts?.find(n=>n.main_products.all_store_variant?n:n.main_products.variants.find(c=>String(c.variant_id)===f(t.id)))?.discount_conf,i){r=o;break}return i?{memberPriceDiscountConfig:i,activeMemberPriceConfig:r}:{memberPriceDiscountConfig:i,activeMemberPriceConfig:r}};export{b as getFunctionMemberPriceDiscountConfig};
+import{atobID as f}from"./atobID";const b=({config:e,variant:o})=>{let i,r;if(!e||!o)return{memberPriceDiscountConfig:i,activeMemberPriceConfig:r};for(const t of e)if(i=t.result_detail.member_discounts?.find(n=>n.main_products.all_store_variant?n:n.main_products.variants.find(c=>String(c.variant_id)===f(o.id)))?.discount_conf,i){r=t;break}return i?{memberPriceDiscountConfig:i,activeMemberPriceConfig:r}:{memberPriceDiscountConfig:i,activeMemberPriceConfig:r}};export{b as getFunctionMemberPriceDiscountConfig};
 //# sourceMappingURL=getFunctionMemberPriceDiscountConfig.js.map

package/dist/esm/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.ts"],
-  "sourcesContent": ["import { DiscountConfig, FunctionMemberPriceConfig } from '../memberPriceTypes'\nimport { ProductVariant } from '@anker-in/lib'\nimport { atobID } from './atobID'\n\n// \u83B7\u53D6\u4F1A\u5458\u4EF7\u6298\u6263\u914D\u7F6E\nexport const getFunctionMemberPriceDiscountConfig = ({\n  config,\n  variant,\n}: {\n  config?: FunctionMemberPriceConfig[]\n  variant?: ProductVariant\n}) => {\n  let memberPriceDiscountConfig: DiscountConfig | undefined\n  let activeMemberPriceConfig: FunctionMemberPriceConfig | undefined\n\n  if (!config || !variant) {\n    return {\n      memberPriceDiscountConfig,\n      activeMemberPriceConfig,\n    }\n  }\n\n  for (const configItem of config) {\n    memberPriceDiscountConfig = configItem.result_detail.member_discounts?.find(discountItem => {\n      if (discountItem.main_products.all_store_variant) {\n        return discountItem\n      }\n\n      return discountItem.main_products.variants.find(\n        variantConfig => String(variantConfig.variant_id) === atobID(variant.id as string)\n      )\n    })?.discount_conf\n\n    if (memberPriceDiscountConfig) {\n      activeMemberPriceConfig = configItem\n      break\n    }\n  }\n\n  if (!memberPriceDiscountConfig) {\n    return {\n      memberPriceDiscountConfig,\n      activeMemberPriceConfig,\n    }\n  }\n\n  return {\n    memberPriceDiscountConfig,\n    activeMemberPriceConfig,\n  }\n}\n"],
+  "sourcesContent": ["import { DiscountConfig, FunctionMemberPriceConfig } from '../memberPriceTypes'\nimport { NormalizedProductVariant } from '@anker-in/shopify-react'\nimport { atobID } from './atobID'\n\n// \u83B7\u53D6\u4F1A\u5458\u4EF7\u6298\u6263\u914D\u7F6E\nexport const getFunctionMemberPriceDiscountConfig = ({\n  config,\n  variant,\n}: {\n  config?: FunctionMemberPriceConfig[]\n  variant?: NormalizedProductVariant\n}) => {\n  let memberPriceDiscountConfig: DiscountConfig | undefined\n  let activeMemberPriceConfig: FunctionMemberPriceConfig | undefined\n\n  if (!config || !variant) {\n    return {\n      memberPriceDiscountConfig,\n      activeMemberPriceConfig,\n    }\n  }\n\n  for (const configItem of config) {\n    memberPriceDiscountConfig = configItem.result_detail.member_discounts?.find(discountItem => {\n      if (discountItem.main_products.all_store_variant) {\n        return discountItem\n      }\n\n      return discountItem.main_products.variants.find(\n        variantConfig => String(variantConfig.variant_id) === atobID(variant.id as string)\n      )\n    })?.discount_conf\n\n    if (memberPriceDiscountConfig) {\n      activeMemberPriceConfig = configItem\n      break\n    }\n  }\n\n  if (!memberPriceDiscountConfig) {\n    return {\n      memberPriceDiscountConfig,\n      activeMemberPriceConfig,\n    }\n  }\n\n  return {\n    memberPriceDiscountConfig,\n    activeMemberPriceConfig,\n  }\n}\n"],
   "mappings": "AAEA,OAAS,UAAAA,MAAc,WAGhB,MAAMC,EAAuC,CAAC,CACnD,OAAAC,EACA,QAAAC,CACF,IAGM,CACJ,IAAIC,EACAC,EAEJ,GAAI,CAACH,GAAU,CAACC,EACd,MAAO,CACL,0BAAAC,EACA,wBAAAC,CACF,EAGF,UAAWC,KAAcJ,EAWvB,GAVAE,EAA4BE,EAAW,cAAc,kBAAkB,KAAKC,GACtEA,EAAa,cAAc,kBACtBA,EAGFA,EAAa,cAAc,SAAS,KACzCC,GAAiB,OAAOA,EAAc,UAAU,IAAMR,EAAOG,EAAQ,EAAY,CACnF,CACD,GAAG,cAEAC,EAA2B,CAC7BC,EAA0BC,EAC1B,KACF,CAGF,OAAKF,EAOE,CACL,0BAAAA,EACA,wBAAAC,CACF,EATS,CACL,0BAAAD,EACA,wBAAAC,CACF,CAOJ",
   "names": ["atobID", "getFunctionMemberPriceDiscountConfig", "config", "variant", "memberPriceDiscountConfig", "activeMemberPriceConfig", "configItem", "discountItem", "variantConfig"]
 }

package/dist/esm/components/credits/context/utils/variantGetCoupon.d.ts

@@ -1,6 +1,6 @@
-import { ProductVariant } from '@anker-in/lib';
+import { NormalizedProductVariant } from '@anker-in/shopify-react';
 declare const variantGetCoupon: ({ variant, channel, }: {
-    variant?: ProductVariant;
+    variant?: NormalizedProductVariant;
     channel?: string;
 }) => any;
 export default variantGetCoupon;

package/dist/esm/components/credits/context/utils/variantGetCoupon.js

@@ -1,2 +1,2 @@
-import{atobID as a}from"./atobID";const r=({variant:e,channel:i=""})=>{if(!e)return;const s="wsch";return(e?.metafields?.discountCodeApp||[])?.filter(t=>{const n=a(e.id);return(!t?.ends_at||new Date(t?.ends_at).getTime()>new Date().getTime())&&new Date(t?.starts_at).getTime()<=new Date().getTime()&&t.variant_shopify_id===+(n||"")&&(i?t?.title?.toLocaleLowerCase().includes(i):!t?.title?.toLocaleLowerCase().includes(s))})?.[0]};var f=r;export{f as default};
+import{atobID as n}from"./atobID";const r=({variant:e,channel:i=""})=>{if(!e)return;const s="wsch";return(e?.metafields?.discountCodeApp||[])?.filter(t=>{const a=n(e.id);return(!t?.ends_at||new Date(t?.ends_at).getTime()>new Date().getTime())&&new Date(t?.starts_at).getTime()<=new Date().getTime()&&t.variant_shopify_id===+(a||"")&&(i?t?.title?.toLocaleLowerCase().includes(i):!t?.title?.toLocaleLowerCase().includes(s))})?.[0]};var f=r;export{f as default};
 //# sourceMappingURL=variantGetCoupon.js.map

package/dist/esm/components/credits/context/utils/variantGetCoupon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/context/utils/variantGetCoupon.ts"],
-  "sourcesContent": ["import { ProductVariant } from '@anker-in/lib'\nimport { atobID } from './atobID'\n\nconst variantGetCoupon = ({\n  variant,\n  channel = '',\n}: {\n  variant?: ProductVariant\n  channel?: string\n}) => {\n  if (!variant) return undefined\n\n  const hideChannel = 'wsch'\n  const discountCodeApp = variant?.metafields?.discountCodeApp || []\n\n  const results = discountCodeApp?.filter((coupon: any) => {\n    const variantId = atobID(variant.id as string)\n    const isActive =\n      (!coupon?.ends_at || new Date(coupon?.ends_at).getTime() > new Date().getTime()) &&\n      new Date(coupon?.starts_at).getTime() <= new Date().getTime() &&\n      coupon.variant_shopify_id === +(variantId || '')\n\n    return (\n      isActive &&\n      (channel\n        ? coupon?.title?.toLocaleLowerCase().includes(channel)\n        : !coupon?.title?.toLocaleLowerCase().includes(hideChannel))\n    )\n  })\n\n  return results?.[0]\n}\n\nexport default variantGetCoupon\n"],
+  "sourcesContent": ["import { NormalizedProductVariant } from '@anker-in/shopify-react'\nimport { atobID } from './atobID'\n\nconst variantGetCoupon = ({\n  variant,\n  channel = '',\n}: {\n  variant?: NormalizedProductVariant\n  channel?: string\n}) => {\n  if (!variant) return undefined\n\n  const hideChannel = 'wsch'\n  const discountCodeApp = variant?.metafields?.discountCodeApp || []\n\n  const results = discountCodeApp?.filter((coupon: any) => {\n    const variantId = atobID(variant.id as string)\n    const isActive =\n      (!coupon?.ends_at || new Date(coupon?.ends_at).getTime() > new Date().getTime()) &&\n      new Date(coupon?.starts_at).getTime() <= new Date().getTime() &&\n      coupon.variant_shopify_id === +(variantId || '')\n\n    return (\n      isActive &&\n      (channel\n        ? coupon?.title?.toLocaleLowerCase().includes(channel)\n        : !coupon?.title?.toLocaleLowerCase().includes(hideChannel))\n    )\n  })\n\n  return results?.[0]\n}\n\nexport default variantGetCoupon\n"],
   "mappings": "AACA,OAAS,UAAAA,MAAc,WAEvB,MAAMC,EAAmB,CAAC,CACxB,QAAAC,EACA,QAAAC,EAAU,EACZ,IAGM,CACJ,GAAI,CAACD,EAAS,OAEd,MAAME,EAAc,OAkBpB,OAjBwBF,GAAS,YAAY,iBAAmB,CAAC,IAEhC,OAAQG,GAAgB,CACvD,MAAMC,EAAYN,EAAOE,EAAQ,EAAY,EAM7C,OAJG,CAACG,GAAQ,SAAW,IAAI,KAAKA,GAAQ,OAAO,EAAE,QAAQ,EAAI,IAAI,KAAK,EAAE,QAAQ,IAC9E,IAAI,KAAKA,GAAQ,SAAS,EAAE,QAAQ,GAAK,IAAI,KAAK,EAAE,QAAQ,GAC5DA,EAAO,qBAAuB,EAAEC,GAAa,MAI5CH,EACGE,GAAQ,OAAO,kBAAkB,EAAE,SAASF,CAAO,EACnD,CAACE,GAAQ,OAAO,kBAAkB,EAAE,SAASD,CAAW,EAEhE,CAAC,IAEgB,CAAC,CACpB,EAEA,IAAOG,EAAQN",
   "names": ["atobID", "variantGetCoupon", "variant", "channel", "hideChannel", "coupon", "variantId", "variantGetCoupon_default"]
 }

package/dist/esm/components/credits/context/utils.d.ts

@@ -23,3 +23,7 @@ export declare function formatVariantPrice({ amount, baseAmount, currencyCode, l
     basePrice: string | undefined;
     discount: string | null;
 };
+/**
+ * 提取 variant id，去掉 gid://shopify/ProductVariant/ 前缀
+ */
+export declare function extractVariantId(id: string | number | undefined): string | null;

package/dist/esm/components/credits/context/utils.js

@@ -1,2 +1,2 @@
-import g from"js-cookie";import{PRICE_SYMBOL as a}from"./const";function k(e=""){let n=!1;const r=g.get("alpcEU");return r===void 0||r===""?["de","eu-de","eu","eu-en","uk","fr","fra"].includes(e)&&(n=!0):Number(r)&&(n=!0),n?"/api/multipass/alpc-eu":"/api/multipass/alpc"}function C(e=0){return typeof Intl>"u"?e:new Intl.NumberFormat().format(e)}const E=e=>/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e),c=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",nz:"en-nz",eu:"en-eu",pl:"pl-pl",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"en-ae",plus:"en-us",cl:"es-cl",es:"es-es",se:"en-se",dk:"en-dk",is:"en-is",no:"en-no",fi:"en-fi"})[e]||"";function f({amount:e,currencyCode:n,locale:r,maximumFractionDigits:t,minimumFractionDigits:u,removeTrailingZeros:o=!1}){let i=new Intl.NumberFormat(c(r)||r,{style:"currency",currency:n||"USD",minimumFractionDigits:t===0?0:u,maximumFractionDigits:t}).format(e);return["eu-de","eu-en","de","eu"].includes(r)&&(i=i?.toString()?.replace(/[\s]/g,"")),o&&(i=i.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),i}function I({amount:e,baseAmount:n,currencyCode:r,locale:t,maximumFractionDigits:u,minimumFractionDigits:o,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${a[t]}${e}`,basePrice:`${a[t]}${n}`,discount:`${a[t]}${n-e||0}`};const i=n>e,m=new Intl.NumberFormat(c(t),{style:"percent"}),p=i?m.format((n-e)/n):null,l=f({amount:e,currencyCode:r,locale:t,removeTrailingZeros:s}),d=i?f({amount:n,currencyCode:r,locale:t,maximumFractionDigits:u,minimumFractionDigits:o,removeTrailingZeros:s}):void 0;return{price:l,basePrice:d,discount:p}}export{E as emailValidate,f as formatPrice,I as formatVariantPrice,k as getAlpcPath,c as languageTerritory,C as numberFormat};
+import g from"js-cookie";import{PRICE_SYMBOL as a}from"./const";function I(e=""){let n=!1;const r=g.get("alpcEU");return r===void 0||r===""?["de","eu-de","eu","eu-en","uk","fr","fra"].includes(e)&&(n=!0):Number(r)&&(n=!0),n?"/api/multipass/alpc-eu":"/api/multipass/alpc"}function P(e=0){return typeof Intl>"u"?e:new Intl.NumberFormat().format(e)}const k=e=>/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e),c=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",nz:"en-nz",eu:"en-eu",pl:"pl-pl",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"en-ae",plus:"en-us",cl:"es-cl",es:"es-es",se:"en-se",dk:"en-dk",is:"en-is",no:"en-no",fi:"en-fi"})[e]||"";function f({amount:e,currencyCode:n,locale:r,maximumFractionDigits:t,minimumFractionDigits:u,removeTrailingZeros:o=!1}){let i=new Intl.NumberFormat(c(r)||r,{style:"currency",currency:n||"USD",minimumFractionDigits:t===0?0:u,maximumFractionDigits:t}).format(e);return["eu-de","eu-en","de","eu"].includes(r)&&(i=i?.toString()?.replace(/[\s]/g,"")),o&&(i=i.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),i}function x({amount:e,baseAmount:n,currencyCode:r,locale:t,maximumFractionDigits:u,minimumFractionDigits:o,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${a[t]}${e}`,basePrice:`${a[t]}${n}`,discount:`${a[t]}${n-e||0}`};const i=n>e,m=new Intl.NumberFormat(c(t),{style:"percent"}),p=i?m.format((n-e)/n):null,l=f({amount:e,currencyCode:r,locale:t,removeTrailingZeros:s}),d=i?f({amount:n,currencyCode:r,locale:t,maximumFractionDigits:u,minimumFractionDigits:o,removeTrailingZeros:s}):void 0;return{price:l,basePrice:d,discount:p}}function C(e){return e?(typeof e=="number"?e.toString():e).replace("gid://shopify/ProductVariant/",""):null}export{k as emailValidate,C as extractVariantId,f as formatPrice,x as formatVariantPrice,I as getAlpcPath,c as languageTerritory,P as numberFormat};
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/credits/context/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/context/utils.ts"],
-  "sourcesContent": ["import Cookies from 'js-cookie'\nimport { PRICE_SYMBOL } from './const'\n\nexport function getAlpcPath(locale = '') {\n  let isEU = false\n  const alpcEUCookie = Cookies.get('alpcEU')\n  if (alpcEUCookie === undefined || alpcEUCookie === '') {\n    if (['de', 'eu-de', 'eu', 'eu-en', 'uk', 'fr', 'fra'].includes(locale)) {\n      isEU = true\n    }\n  } else {\n    let alpcEU = Number(alpcEUCookie)\n    if (alpcEU) {\n      isEU = true\n    }\n  }\n\n  if (isEU) {\n    return '/api/multipass/alpc-eu'\n  }\n\n  return '/api/multipass/alpc'\n}\n\nexport function numberFormat(num: number = 0) {\n  if (typeof Intl === 'undefined') {\n    return num\n  }\n\n  return new Intl.NumberFormat().format(num)\n}\n\nexport const emailValidate = (email: any) => {\n  return /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test(\n    email\n  )\n}\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    nz: 'en-nz',\n    eu: 'en-eu',\n    pl: 'pl-pl',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'en-ae',\n    plus: 'en-us',\n    cl: 'es-cl',\n    es: 'es-es',\n    // Nordic countries\n    se: 'en-se',\n    dk: 'en-dk',\n    is: 'en-is',\n    no: 'en-no',\n    fi: 'en-fi',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale) || locale, {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n"],
-  "mappings": "AAAA,OAAOA,MAAa,YACpB,OAAS,gBAAAC,MAAoB,UAEtB,SAASC,EAAYC,EAAS,GAAI,CACvC,IAAIC,EAAO,GACX,MAAMC,EAAeL,EAAQ,IAAI,QAAQ,EAYzC,OAXIK,IAAiB,QAAaA,IAAiB,GAC7C,CAAC,KAAM,QAAS,KAAM,QAAS,KAAM,KAAM,KAAK,EAAE,SAASF,CAAM,IACnEC,EAAO,IAGI,OAAOC,CAAY,IAE9BD,EAAO,IAIPA,EACK,yBAGF,qBACT,CAEO,SAASE,EAAaC,EAAc,EAAG,CAC5C,OAAI,OAAO,KAAS,IACXA,EAGF,IAAI,KAAK,aAAa,EAAE,OAAOA,CAAG,CAC3C,CAEO,MAAMC,EAAiBC,GACrB,yJAAyJ,KAC9JA,CACF,EAGWC,EAAqBP,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QAEJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASQ,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaP,EAAkBP,CAAM,GAAKA,EAAQ,CAChF,MAAO,WACP,SAAUU,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAAST,CAAM,IAChDc,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGf,EAAaE,CAAmC,CAAC,GAAGS,CAAM,GACpE,UAAW,GAAGX,EAAaE,CAAmC,CAAC,GAAGgB,CAAU,GAC5E,SAAU,GAAGlB,EAAaE,CAAmC,CAAC,GAAGgB,EAAaP,GAAU,CAAC,EAC3F,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaX,EAAkBP,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKmB,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAErFI,EAAQZ,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAV,EAAQ,oBAAAa,CAAoB,CAAC,EACzEQ,EAAYJ,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
-  "names": ["Cookies", "PRICE_SYMBOL", "getAlpcPath", "locale", "isEU", "alpcEUCookie", "numberFormat", "num", "emailValidate", "email", "languageTerritory", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice"]
+  "sourcesContent": ["import Cookies from 'js-cookie'\nimport { PRICE_SYMBOL } from './const'\n\nexport function getAlpcPath(locale = '') {\n  let isEU = false\n  const alpcEUCookie = Cookies.get('alpcEU')\n  if (alpcEUCookie === undefined || alpcEUCookie === '') {\n    if (['de', 'eu-de', 'eu', 'eu-en', 'uk', 'fr', 'fra'].includes(locale)) {\n      isEU = true\n    }\n  } else {\n    let alpcEU = Number(alpcEUCookie)\n    if (alpcEU) {\n      isEU = true\n    }\n  }\n\n  if (isEU) {\n    return '/api/multipass/alpc-eu'\n  }\n\n  return '/api/multipass/alpc'\n}\n\nexport function numberFormat(num: number = 0) {\n  if (typeof Intl === 'undefined') {\n    return num\n  }\n\n  return new Intl.NumberFormat().format(num)\n}\n\nexport const emailValidate = (email: any) => {\n  return /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test(\n    email\n  )\n}\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    nz: 'en-nz',\n    eu: 'en-eu',\n    pl: 'pl-pl',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'en-ae',\n    plus: 'en-us',\n    cl: 'es-cl',\n    es: 'es-es',\n    // Nordic countries\n    se: 'en-se',\n    dk: 'en-dk',\n    is: 'en-is',\n    no: 'en-no',\n    fi: 'en-fi',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale) || locale, {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n\n/**\n * \u63D0\u53D6 variant id\uFF0C\u53BB\u6389 gid://shopify/ProductVariant/ \u524D\u7F00\n */\nexport function extractVariantId(id: string | number | undefined): string | null {\n  if (!id) return null\n  const idStr = typeof id === 'number' ? id.toString() : id\n  return idStr.replace('gid://shopify/ProductVariant/', '')\n}\n"],
+  "mappings": "AAAA,OAAOA,MAAa,YACpB,OAAS,gBAAAC,MAAoB,UAEtB,SAASC,EAAYC,EAAS,GAAI,CACvC,IAAIC,EAAO,GACX,MAAMC,EAAeL,EAAQ,IAAI,QAAQ,EAYzC,OAXIK,IAAiB,QAAaA,IAAiB,GAC7C,CAAC,KAAM,QAAS,KAAM,QAAS,KAAM,KAAM,KAAK,EAAE,SAASF,CAAM,IACnEC,EAAO,IAGI,OAAOC,CAAY,IAE9BD,EAAO,IAIPA,EACK,yBAGF,qBACT,CAEO,SAASE,EAAaC,EAAc,EAAG,CAC5C,OAAI,OAAO,KAAS,IACXA,EAGF,IAAI,KAAK,aAAa,EAAE,OAAOA,CAAG,CAC3C,CAEO,MAAMC,EAAiBC,GACrB,yJAAyJ,KAC9JA,CACF,EAGWC,EAAqBP,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QAEJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASQ,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaP,EAAkBP,CAAM,GAAKA,EAAQ,CAChF,MAAO,WACP,SAAUU,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAAST,CAAM,IAChDc,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGf,EAAaE,CAAmC,CAAC,GAAGS,CAAM,GACpE,UAAW,GAAGX,EAAaE,CAAmC,CAAC,GAAGgB,CAAU,GAC5E,SAAU,GAAGlB,EAAaE,CAAmC,CAAC,GAAGgB,EAAaP,GAAU,CAAC,EAC3F,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaX,EAAkBP,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKmB,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAErFI,EAAQZ,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAV,EAAQ,oBAAAa,CAAoB,CAAC,EACzEQ,EAAYJ,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAV,EACA,sBAAAW,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC,CAKO,SAASG,EAAiBC,EAAgD,CAC/E,OAAKA,GACS,OAAOA,GAAO,SAAWA,EAAG,SAAS,EAAIA,GAC1C,QAAQ,gCAAiC,EAAE,EAFxC,IAGlB",
+  "names": ["Cookies", "PRICE_SYMBOL", "getAlpcPath", "locale", "isEU", "alpcEUCookie", "numberFormat", "num", "emailValidate", "email", "languageTerritory", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice", "extractVariantId", "id"]
 }

package/dist/esm/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.js

@@ -1,2 +1,2 @@
-import{Fragment as A,jsx as e,jsxs as i}from"react/jsx-runtime";import{Button as y,Container as P,Heading as b,Picture as z,Text as _}from"@anker-in/headless-ui";import{ChevronDownIcon as E,ChevronUpIcon as H}from"@heroicons/react/24/outline";import{motion as j}from"framer-motion";import{useMemo as q,useState as d}from"react";import{TaskType as g}from"./type";import{useActions as V}from"../creditsWaysToGetCredits/useActions";import{useCreditsContext as G}from"../context/provider";import{classNames as h,useHeadlessContext as J,ROUNDED_BRANDS as K}from"@anker-in/lib";import{useRegistration as Q}from"../../registration";import{CreditsUploadReceiptModal as W}from"../modal/creditsUploadReceiptModal";import{CreditsSubscribeModal as X}from"../modal/subscribeModal";const re=({copy:s,classNames:Y,id:v})=>{const[l,k]=d(!1),{profile:M}=G(),{authCodeActivate:R}=Q(),{brand:L}=J(),p=K.includes(L),m=!!M,[T,C]=d(!1),[U,x]=d(!1),[F,O]=d(!1),[N,B]=d(!1),{actions:u}=V({copy:s,subscribe:{openSubscribePopup:()=>x(!0),isSuccess:F},uploadReceipt:{openUploadReceiptPopup:()=>C(!0),isSuccess:N}}),w=q(()=>{const t=s.list.map(n=>{if(!u[n.id])return;const{finished:o,notLogin:S,notFinished:f,completed:D}=u[n.id];let r="",c,I;return m?o?(r=D.buttonLabel,c=void 0):(r=f.buttonLabel,c=f.handleClick,I=f.link):(r=S.buttonLabel,c=S.handleClick),{...n,buttonLabel:r,handleClick:c,finished:o,link:I}}).filter(Boolean);return m?t.sort((n,o)=>n?.finished&&!o?.finished?1:!n?.finished&&o?.finished?-1:0):t},[u,s.list,m]),a=w.length>3;return i(P,{id:v,className:"[&>div]:l:!px-0 bg-[#F5F5F7]",children:[e(b,{as:"h2",size:"4",html:s.title,className:"md:px-[16px]"}),i("div",{className:h("mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden",p?"rounded-[8px]":"",!p&&"l:rounded-none"),style:{background:"linear-gradient(180deg, rgba(255, 241, 214, 0) 39.51%, #F4CA81 119.53%)"},children:[e("div",{className:"absolute inset-0 pointer-events-none -z-10",style:{background:"radial-gradient(ellipse 130% 205% at 45% -20%, #FFF6EA 0%, #FFFFFF 73%, #FFF1D6 100%)"}}),i("div",{className:"flex items-center justify-between h-[560px] md:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start",children:[i("div",{className:"flex flex-col gap-[8px]",children:[e(b,{as:"h3",size:4,html:s?.subtitle,className:"text-[32px] font-bold text-[#080a0f] tracking-[-1.28px] leading-[1.2] xl:text-[24px]"}),e("div",{className:"flex items-center gap-[8px]",children:e("p",{className:"text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]",dangerouslySetInnerHTML:{__html:s.equalCredits}})})]}),s.mainImage?.url&&e(z,{className:"w-full max-w-[50%] md:max-w-full md:mt-[24px] l:max-w-full l:mt-[24px]",source:s.mainImage.url})]}),i("div",{className:"relative",children:[i(j.div,{className:h("grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto"),initial:{height:a?512:"auto"},animate:{height:l||!a?"auto":512},transition:{duration:.3},onAnimationComplete:()=>{if(!l&&a&&window.screen.width<768){const t=document.getElementById(v||"ankersolix-task");t&&t.scrollIntoView({behavior:"smooth",block:"end"})}},children:[w.map(t=>i("div",{className:h("flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] md:p-[16px] l:p-[24px]",""),children:[i("div",{children:[e(b,{as:"h4",html:t.title,size:2,className:"text-[24px] font-bold text-[#080a0f] tracking-[-0.96px] leading-[1.2] text-pretty md:text-[18px] l:text-[20px]"}),i("div",{className:"mt-[8px] flex items-center gap-[4px]",children:[e(z,{className:"size-[24px] [&_path]:size-full",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"}),e(_,{as:"p",html:t.credits,size:2,className:"text-[18px] font-bold text-[#080a0f] tracking-[-0.36px] leading-[1.4] md:text-[16px]"})]})]}),t.handleClick&&!(t.id===g.UploadReceipt&&N)&&!(t.id===g.Activate&&R.isActivateSuccess)&&!(t.id===g.Subscribe&&F)?e(y,{as:t.link?"a":"button",...t.link&&{href:t.link},...t.handleClick&&{onClick:t.handleClick},variant:"primary",size:"lg",className:"mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]",children:t.buttonLabel}):e(y,{variant:"primary",size:"lg",className:"mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]",disabled:!0,children:t.buttonLabel})]},t.id)),!l&&a&&e("div",{className:"absolute inset-0 pointer-events-none min-md:hidden",style:{background:"linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)"}})]}),a&&e(A,{children:l?e("button",{className:"mx-auto mt-[12px] block w-fit min-md:hidden",onClick:()=>{k(!1)},children:e(H,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})}):e(A,{children:e("div",{className:"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden",children:e("button",{className:"w-fit",onClick:()=>k(!l),children:e(E,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})})})})})]})]}),s.receipt&&e(W,{isOpen:T,onClose:()=>{C(!1)},copy:s.receipt,onSuccess:()=>{B(!0)}}),s.subscribe&&e(X,{copy:s.subscribe,onSuccess:()=>{O(!0),setTimeout(()=>{x(!1)},3e3)},isOpen:U,onClose:()=>{x(!1)}})]})};export{re as CreditsAnkersolixTask};
+import{Fragment as R,jsx as e,jsxs as l}from"react/jsx-runtime";import{Button as w,Container as j,Heading as I,Picture as y,Text as z}from"@anker-in/headless-ui";import{ChevronDownIcon as E,ChevronUpIcon as _}from"@heroicons/react/24/outline";import{useMemo as H,useState as r,useEffect as q}from"react";import{TaskType as h}from"./type";import{useActions as V}from"../creditsWaysToGetCredits/useActions";import{useCreditsContext as G}from"../context/provider";import{classNames as g,useHeadlessContext as J}from"@anker-in/lib";import{useRegistration as K}from"../../registration";import{CreditsUploadReceiptModal as Q}from"../modal/creditsUploadReceiptModal";import{CreditsSubscribeModal as W}from"../modal/subscribeModal";import{ROUNDED_BRANDS as X}from"../../../constants";const ce=({copy:s,classNames:Y,id:p})=>{const[n,v]=r(!1),{profile:T}=G(),{authCodeActivate:M}=K(),{brand:A}=J(),u=X.includes(A),x=!!T,[L,k]=r(!1),[U,m]=r(!1),[C,O]=r(!1),[F,B]=r(!1),{actions:f}=V({copy:s,subscribe:{openSubscribePopup:()=>m(!0),isSuccess:C},uploadReceipt:{openUploadReceiptPopup:()=>k(!0),isSuccess:F}}),o=(s?.list||[]).length>3;q(()=>{if(!n&&o&&window.screen.width<768){const t=setTimeout(()=>{const i=document.getElementById(p||"ankersolix-task");i&&i.scrollIntoView({behavior:"smooth",block:"end"})},300);return()=>clearTimeout(t)}},[n,o,p]);const D=H(()=>{const t=s.list.map(i=>{if(!f[i.id])return;const{finished:a,notLogin:N,notFinished:b,completed:P}=f[i.id];let d="",c,S;return x?a?(d=P.buttonLabel,c=void 0):(d=b.buttonLabel,c=b.handleClick,S=b.link):(d=N.buttonLabel,c=N.handleClick),{...i,buttonLabel:d,handleClick:c,finished:a,link:S}}).filter(Boolean);return x?t.sort((i,a)=>i?.finished&&!a?.finished?1:!i?.finished&&a?.finished?-1:0):t},[f,s.list,x]);return l(j,{id:p,className:"bg-[#F5F5F7]",children:[e(I,{as:"h2",size:"4",html:s.title}),l("div",{className:g("mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden",u?"rounded-[8px]":"",!u&&"l:rounded-none"),style:{background:"linear-gradient(180deg, rgba(255, 241, 214, 0) 39.51%, #F4CA81 119.53%)"},children:[e("div",{className:"absolute inset-0 pointer-events-none -z-10",style:{background:"radial-gradient(ellipse 130% 205% at 45% -20%, #FFF6EA 0%, #FFFFFF 73%, #FFF1D6 100%)"}}),l("div",{className:"flex items-center justify-between xl-xxl:h-[448px] l-xl:h-[336px] h-[560px] l:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start",children:[l("div",{className:"flex flex-col gap-[8px] l:mt-[8px]",children:[e(I,{as:"h3",size:4,html:s?.subtitle,className:"text-[32px] font-bold text-[#080a0f] tracking-[-1.28px] leading-[1.2] xl:text-[24px]"}),e("div",{className:"flex items-center gap-[8px]",children:e("p",{className:"text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]",dangerouslySetInnerHTML:{__html:s.equalCredits}})})]}),s.mainImage?.url&&e(y,{className:"h-full object-contain l:mx-auto md:h-auto md:w-full md-l:h-[302px]",imgClassName:"!h-full !object-contain",source:s.mainImage.url})]}),l("div",{className:"relative mt-[24px]",children:[l("div",{className:g("grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto transition-all duration-300 ease-in-out"),style:{height:n||!o?"auto":"512px"},children:[D.map(t=>l("div",{className:g("flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] xl:p-[16px]",u?"rounded-[16px]":""),children:[l("div",{children:[e(z,{as:"p",html:t.title,size:2,className:"text-pretty text-[24px] font-bold xxl:text-[20px]"}),l("div",{className:"mt-[8px] l:mt-[4px] flex items-center",children:[e(y,{className:"size-[24px] xxl:size-[18px] [&_path]:size-full",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"}),e(z,{as:"p",html:t.credits,size:2,className:"ml-[4px] mt-[6px] text-[18px] xxl:text-[14px]"})]})]}),t.handleClick&&!(t.id===h.UploadReceipt&&F)&&!(t.id===h.Activate&&M.isActivateSuccess)&&!(t.id===h.Subscribe&&C)?e(w,{as:t.link?"a":"button",...t.link&&{href:t.link},...t.handleClick&&{onClick:t.handleClick},variant:"primary",size:"lg",className:"mt-[24px] w-fit",children:t.buttonLabel}):e(w,{variant:"primary",size:"lg",className:"mt-[24px] w-fit",disabled:!0,children:t.buttonLabel})]},t.id)),!n&&o&&e("div",{className:"absolute inset-0 pointer-events-none min-md:hidden",style:{background:"linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)"}})]}),o&&e(R,{children:n?e("button",{className:"mx-auto mt-[12px] block w-fit min-md:hidden",onClick:()=>{v(!1)},children:e(_,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})}):e(R,{children:e("div",{className:"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden",children:e("button",{className:"w-fit",onClick:()=>v(!n),children:e(E,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})})})})})]})]}),s.receipt&&e(Q,{isOpen:L,onClose:()=>{k(!1)},copy:s.receipt,onSuccess:()=>{B(!0)}}),s.subscribe&&e(W,{copy:s.subscribe,onSuccess:()=>{O(!0),setTimeout(()=>{m(!1)},3e3)},isOpen:U,onClose:()=>{m(!1)}})]})};export{ce as CreditsAnkersolixTask};
 //# sourceMappingURL=CreditsAnkersolixTask.js.map

package/dist/esm/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.tsx"],
-  "sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'\nimport { motion } from 'framer-motion'\nimport { useMemo, useState } from 'react'\n\nimport { TaskType, type CreditsAnkersolixTaskProps } from './type'\nimport { useActions } from '../creditsWaysToGetCredits/useActions'\nimport { useCreditsContext } from '../context/provider'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport { useRegistration } from '../../registration'\nimport { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'\nimport { CreditsSubscribeModal } from '../modal/subscribeModal'\n\nexport const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {\n  const [showMore, setShowMore] = useState(false)\n  const { profile } = useCreditsContext()\n  const { authCodeActivate } = useRegistration()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  const isLogin = !!profile\n\n  const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)\n  const [isSubscribeModalOpen, setIsSubscribeModalOpen] = useState(false)\n  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n  const [isUploadReceiptSuccess, setIsUploadReceiptSuccess] = useState(false)\n\n  const { actions } = useActions({\n    copy,\n    subscribe: {\n      openSubscribePopup: () => setIsSubscribeModalOpen(true),\n      isSuccess: isSubscribeSuccess,\n    },\n    uploadReceipt: {\n      openUploadReceiptPopup: () => setIsUploadReceiptModalOpen(true),\n      isSuccess: isUploadReceiptSuccess,\n    },\n  })\n  const list = useMemo(() => {\n    const list = copy.list\n      .map(item => {\n        if (!actions[item.id as keyof typeof actions]) {\n          return undefined\n        }\n        const { finished, notLogin, notFinished, completed } = actions[item.id as keyof typeof actions]\n        let buttonLabel = ''\n        let handleClick = undefined\n        let link = undefined\n        if (!isLogin) {\n          buttonLabel = notLogin.buttonLabel\n          handleClick = notLogin.handleClick\n        } else if (finished) {\n          buttonLabel = completed.buttonLabel\n          handleClick = undefined\n        } else {\n          buttonLabel = notFinished.buttonLabel\n          handleClick = notFinished.handleClick\n          link = (notFinished as { link: string }).link\n        }\n        return {\n          ...item,\n          buttonLabel,\n          handleClick,\n          finished,\n          link,\n        }\n      })\n      .filter(Boolean) as {\n      title: string\n      credits: string\n      id: TaskType\n      buttonLabel: string\n      finished: boolean\n      link: string\n      handleClick: (() => void) | undefined\n    }[]\n\n    // \u767B\u5F55\u540E\uFF0C\u4FDD\u7559\u539F\u987A\u5E8F\uFF0C\u5C06\u5DF2\u5B8C\u6210\u7684\u4EFB\u52A1\u653E\u5728\u6700\u540E\n    if (isLogin) {\n      return list.sort((a, b) => {\n        if (a?.finished && !b?.finished) {\n          return 1 // a\u5DF2\u5B8C\u6210\uFF0Cb\u672A\u5B8C\u6210\uFF0Ca\u6392\u5728\u540E\u9762\n        }\n        if (!a?.finished && b?.finished) {\n          return -1 // a\u672A\u5B8C\u6210\uFF0Cb\u5DF2\u5B8C\u6210\uFF0Ca\u6392\u5728\u524D\u9762\n        }\n        return 0 // \u90FD\u5DF2\u5B8C\u6210\u6216\u90FD\u672A\u5B8C\u6210\uFF0C\u4FDD\u6301\u539F\u987A\u5E8F\n      })\n    } else {\n      return list\n    }\n  }, [actions, copy.list, isLogin])\n\n  // \u53EA\u6709\u5927\u4E8E3\u4E2A\u4EFB\u52A1\u65F6\u624D\u663E\u793A\u8499\u5C42\n  const shouldShowMask = list.length > 3\n\n  return (\n    <Container id={id} className=\"[&>div]:l:!px-0 bg-[#F5F5F7]\">\n      <Heading as=\"h2\" size=\"4\" html={copy.title} className='md:px-[16px]'/>\n      <div\n        className={cn(\n          'mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden',\n          rounded ? 'rounded-[8px]' : '',\n          !rounded && 'l:rounded-none'\n        )}\n        style={{\n          background: 'linear-gradient(180deg, rgba(255, 241, 214, 0) 39.51%, #F4CA81 119.53%)',\n        }}\n      >\n        {/* \u5F84\u5411\u6E10\u53D8\u80CC\u666F\u5C42 - \u4F7F\u7528\u4F2A\u5143\u7D20\u6A21\u62DF */}\n        <div\n          className=\"absolute inset-0 pointer-events-none -z-10\"\n          style={{\n            background: 'radial-gradient(ellipse 130% 205% at 45% -20%, #FFF6EA 0%, #FFFFFF 73%, #FFF1D6 100%)',\n          }}\n        />\n        {/* \u526F\u6807\u9898\u548C\u88C5\u9970\u56FE\u90E8\u5206 */}\n        <div className=\"flex items-center justify-between h-[560px] md:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start\">\n          <div className=\"flex flex-col gap-[8px]\">\n            <Heading\n              as=\"h3\"\n              size={4}\n              html={copy?.subtitle}\n              className=\"text-[32px] font-bold text-[#080a0f] tracking-[-1.28px] leading-[1.2] xl:text-[24px]\"\n            />\n            <div className=\"flex items-center gap-[8px]\">\n              <p\n                className=\"text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]\"\n                dangerouslySetInnerHTML={{ __html: copy.equalCredits }}\n              />\n            </div>\n          </div>\n          {copy.mainImage?.url && (\n            <Picture className=\"w-full max-w-[50%] md:max-w-full md:mt-[24px] l:max-w-full l:mt-[24px]\" source={copy.mainImage.url} />\n          )}\n        </div>\n\n        {/* \u5361\u7247\u5217\u8868 */}\n        <div className=\"relative\">\n          <motion.div\n            className={cn(\n              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto'\n            )}\n            initial={{ height: shouldShowMask ? 512 : 'auto' }}\n            animate={{ height: showMore || !shouldShowMask ? 'auto' : 512 }}\n            transition={{ duration: 0.3 }}\n            onAnimationComplete={() => {\n              if (!showMore && shouldShowMask && window.screen.width < 768) {\n                const section = document.getElementById(id || 'ankersolix-task')\n                if (section) {\n                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })\n                }\n              }\n            }}\n          >\n            {list.map(item => (\n              <div\n                key={item.id}\n                className={cn(\n                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] md:p-[16px] l:p-[24px]',\n                  rounded ? '' : ''\n                )}\n              >\n                <div>\n                  <Heading\n                    as=\"h4\"\n                    html={item.title}\n                    size={2}\n                    className=\"text-[24px] font-bold text-[#080a0f] tracking-[-0.96px] leading-[1.2] text-pretty md:text-[18px] l:text-[20px]\"\n                  />\n                  <div className=\"mt-[8px] flex items-center gap-[4px]\">\n                    <Picture\n                      className=\"size-[24px] [&_path]:size-full\"\n                      source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450\"\n                    />\n                    <Text\n                      as=\"p\"\n                      html={item.credits}\n                      size={2}\n                      className=\"text-[18px] font-bold text-[#080a0f] tracking-[-0.36px] leading-[1.4] md:text-[16px]\"\n                    />\n                  </div>\n                </div>\n\n                {item.handleClick &&\n                !(item.id === TaskType.UploadReceipt && isUploadReceiptSuccess) &&\n                !(item.id === TaskType.Activate && authCodeActivate.isActivateSuccess) &&\n                !(item.id === TaskType.Subscribe && isSubscribeSuccess) ? (\n                  <Button\n                    as={item.link ? 'a' : 'button'}\n                    {...(item.link && { href: item.link })}\n                    {...(item.handleClick && { onClick: item.handleClick })}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]\"\n                  >\n                    {item.buttonLabel}\n                  </Button>\n                ) : (\n                  <Button\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"mt-[24px] w-fit bg-[#080a0f] text-white text-[16px] font-bold tracking-[-0.64px] leading-[1.2]\"\n                    disabled\n                  >\n                    {item.buttonLabel}\n                  </Button>\n                )}\n              </div>\n            ))}\n            {!showMore && shouldShowMask && (\n              <div\n                className=\"absolute inset-0 pointer-events-none min-md:hidden\"\n                style={{ background: 'linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)' }}\n              ></div>\n            )}\n          </motion.div>\n          {shouldShowMask && (\n            <>\n              {showMore ? (\n                <button\n                  className=\"mx-auto mt-[12px] block w-fit min-md:hidden\"\n                  onClick={() => {\n                    setShowMore(false)\n                  }}\n                >\n                  <ChevronUpIcon className=\"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]\"></ChevronUpIcon>\n                </button>\n              ) : (\n                <>\n                  <div className=\"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden\">\n                    <button className=\"w-fit\" onClick={() => setShowMore(!showMore)}>\n                      <ChevronDownIcon className=\"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]\"></ChevronDownIcon>\n                    </button>\n                  </div>\n                </>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {copy.receipt && (\n        <CreditsUploadReceiptModal\n          isOpen={isUploadReceiptModalOpen}\n          onClose={() => {\n            setIsUploadReceiptModalOpen(false)\n          }}\n          copy={copy.receipt}\n          onSuccess={() => {\n            setIsUploadReceiptSuccess(true)\n          }}\n        />\n      )}\n      {copy.subscribe && (\n        <CreditsSubscribeModal\n          copy={copy.subscribe}\n          onSuccess={() => {\n            setIsSubscribeSuccess(true)\n            setTimeout(() => {\n              setIsSubscribeModalOpen(false)\n            }, 3000)\n          }}\n          isOpen={isSubscribeModalOpen}\n          onClose={() => {\n            setIsSubscribeModalOpen(false)\n          }}\n        />\n      )}\n    </Container>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Button", "Container", "Heading", "Picture", "Text", "ChevronDownIcon", "ChevronUpIcon", "motion", "useMemo", "useState", "TaskType", "useActions", "useCreditsContext", "cn", "useHeadlessContext", "ROUNDED_BRANDS", "useRegistration", "CreditsUploadReceiptModal", "CreditsSubscribeModal", "CreditsAnkersolixTask", "copy", "classNames", "id", "showMore", "setShowMore", "profile", "authCodeActivate", "brand", "rounded", "isLogin", "isUploadReceiptModalOpen", "setIsUploadReceiptModalOpen", "isSubscribeModalOpen", "setIsSubscribeModalOpen", "isSubscribeSuccess", "setIsSubscribeSuccess", "isUploadReceiptSuccess", "setIsUploadReceiptSuccess", "actions", "list", "item", "finished", "notLogin", "notFinished", "completed", "buttonLabel", "handleClick", "link", "a", "b", "shouldShowMask", "section"]
+  "sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'\nimport { useMemo, useState, useRef, useEffect } from 'react'\n\nimport { TaskType, type CreditsAnkersolixTaskProps } from './type'\nimport { useActions } from '../creditsWaysToGetCredits/useActions'\nimport { useCreditsContext } from '../context/provider'\nimport { classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport { useRegistration } from '../../registration'\nimport { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'\nimport { CreditsSubscribeModal } from '../modal/subscribeModal'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {\n  const [showMore, setShowMore] = useState(false)\n  const { profile } = useCreditsContext()\n  const { authCodeActivate } = useRegistration()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  const isLogin = !!profile\n\n  const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)\n  const [isSubscribeModalOpen, setIsSubscribeModalOpen] = useState(false)\n  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)\n  const [isUploadReceiptSuccess, setIsUploadReceiptSuccess] = useState(false)\n\n  const { actions } = useActions({\n    copy,\n    subscribe: {\n      openSubscribePopup: () => setIsSubscribeModalOpen(true),\n      isSuccess: isSubscribeSuccess,\n    },\n    uploadReceipt: {\n      openUploadReceiptPopup: () => setIsUploadReceiptModalOpen(true),\n      isSuccess: isUploadReceiptSuccess,\n    },\n  })\n\n  const shouldShowMask = (copy?.list || []).length > 3\n\n  // Handle scroll after collapse animation\n  useEffect(() => {\n    if (!showMore && shouldShowMask && window.screen.width < 768) {\n      const timer = setTimeout(() => {\n        const section = document.getElementById(id || 'ankersolix-task')\n        if (section) {\n          section.scrollIntoView({ behavior: 'smooth', block: 'end' })\n        }\n      }, 300) // Match transition duration\n      return () => clearTimeout(timer)\n    }\n  }, [showMore, shouldShowMask, id])\n  const list = useMemo(() => {\n    const list = copy.list\n      .map(item => {\n        if (!actions[item.id as keyof typeof actions]) {\n          return undefined\n        }\n        const { finished, notLogin, notFinished, completed } = actions[item.id as keyof typeof actions]\n        let buttonLabel = ''\n        let handleClick = undefined\n        let link = undefined\n        if (!isLogin) {\n          buttonLabel = notLogin.buttonLabel\n          handleClick = notLogin.handleClick\n        } else if (finished) {\n          buttonLabel = completed.buttonLabel\n          handleClick = undefined\n        } else {\n          buttonLabel = notFinished.buttonLabel\n          handleClick = notFinished.handleClick\n          link = (notFinished as { link: string }).link\n        }\n        return {\n          ...item,\n          buttonLabel,\n          handleClick,\n          finished,\n          link,\n        }\n      })\n      .filter(Boolean) as {\n      title: string\n      credits: string\n      id: TaskType\n      buttonLabel: string\n      finished: boolean\n      link: string\n      handleClick: (() => void) | undefined\n    }[]\n\n    // \u767B\u5F55\u540E\uFF0C\u4FDD\u7559\u539F\u987A\u5E8F\uFF0C\u5C06\u5DF2\u5B8C\u6210\u7684\u4EFB\u52A1\u653E\u5728\u6700\u540E\n    if (isLogin) {\n      return list.sort((a, b) => {\n        if (a?.finished && !b?.finished) {\n          return 1 // a\u5DF2\u5B8C\u6210\uFF0Cb\u672A\u5B8C\u6210\uFF0Ca\u6392\u5728\u540E\u9762\n        }\n        if (!a?.finished && b?.finished) {\n          return -1 // a\u672A\u5B8C\u6210\uFF0Cb\u5DF2\u5B8C\u6210\uFF0Ca\u6392\u5728\u524D\u9762\n        }\n        return 0 // \u90FD\u5DF2\u5B8C\u6210\u6216\u90FD\u672A\u5B8C\u6210\uFF0C\u4FDD\u6301\u539F\u987A\u5E8F\n      })\n    } else {\n      return list\n    }\n  }, [actions, copy.list, isLogin])\n\n  return (\n    <Container id={id} className=\"bg-[#F5F5F7]\">\n      <Heading as=\"h2\" size=\"4\" html={copy.title} />\n      <div\n        className={cn(\n          'mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden',\n          rounded ? 'rounded-[8px]' : '',\n          !rounded && 'l:rounded-none'\n        )}\n        style={{\n          background: 'linear-gradient(180deg, rgba(255, 241, 214, 0) 39.51%, #F4CA81 119.53%)',\n        }}\n      >\n        {/* \u5F84\u5411\u6E10\u53D8\u80CC\u666F\u5C42 - \u4F7F\u7528\u4F2A\u5143\u7D20\u6A21\u62DF */}\n        <div\n          className=\"absolute inset-0 pointer-events-none -z-10\"\n          style={{\n            background: 'radial-gradient(ellipse 130% 205% at 45% -20%, #FFF6EA 0%, #FFFFFF 73%, #FFF1D6 100%)',\n          }}\n        />\n        {/* \u526F\u6807\u9898\u548C\u88C5\u9970\u56FE\u90E8\u5206 */}\n        <div className=\"flex items-center justify-between xl-xxl:h-[448px] l-xl:h-[336px] h-[560px] l:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start\">\n          <div className=\"flex flex-col gap-[8px] l:mt-[8px]\">\n            <Heading\n              as=\"h3\"\n              size={4}\n              html={copy?.subtitle}\n              className=\"text-[32px] font-bold text-[#080a0f] tracking-[-1.28px] leading-[1.2] xl:text-[24px]\"\n            />\n            <div className=\"flex items-center gap-[8px]\">\n              <p\n                className=\"text-[48px] font-bold tracking-[-1.92px] leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-43% to-[#00db84] bg-clip-text text-transparent xl-xxl:text-[40px] l-xl:text-[32px] l:text-[24px]\"\n                dangerouslySetInnerHTML={{ __html: copy.equalCredits }}\n              />\n            </div>\n          </div>\n          {copy.mainImage?.url && (\n            <Picture\n              className=\"h-full object-contain l:mx-auto md:h-auto md:w-full md-l:h-[302px]\"\n              imgClassName=\"!h-full !object-contain\"\n              source={copy.mainImage.url}\n            />\n          )}\n        </div>\n\n        {/* \u5361\u7247\u5217\u8868 */}\n        <div className=\"relative mt-[24px]\">\n          <div\n            className={cn(\n              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto transition-all duration-300 ease-in-out'\n            )}\n            style={{\n              height: showMore || !shouldShowMask ? 'auto' : '512px',\n            }}\n          >\n            {list.map(item => (\n              <div\n                key={item.id}\n                className={cn(\n                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] xl:p-[16px]',\n                  rounded ? 'rounded-[16px]' : ''\n                )}\n              >\n                <div>\n                  <Text\n                    as=\"p\"\n                    html={item.title}\n                    size={2}\n                    className=\"text-pretty text-[24px] font-bold xxl:text-[20px]\"\n                  />\n                  <div className=\"mt-[8px] l:mt-[4px] flex items-center\">\n                    <Picture\n                      className=\"size-[24px] xxl:size-[18px] [&_path]:size-full\"\n                      source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450\"\n                    />\n                    <Text\n                      as=\"p\"\n                      html={item.credits}\n                      size={2}\n                      className=\"ml-[4px] mt-[6px] text-[18px] xxl:text-[14px]\"\n                    />\n                  </div>\n                </div>\n\n                {item.handleClick &&\n                !(item.id === TaskType.UploadReceipt && isUploadReceiptSuccess) &&\n                !(item.id === TaskType.Activate && authCodeActivate.isActivateSuccess) &&\n                !(item.id === TaskType.Subscribe && isSubscribeSuccess) ? (\n                  <Button\n                    as={item.link ? 'a' : 'button'}\n                    {...(item.link && { href: item.link })}\n                    {...(item.handleClick && { onClick: item.handleClick })}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"mt-[24px] w-fit\"\n                  >\n                    {item.buttonLabel}\n                  </Button>\n                ) : (\n                  <Button variant=\"primary\" size=\"lg\" className=\"mt-[24px] w-fit\" disabled>\n                    {item.buttonLabel}\n                  </Button>\n                )}\n              </div>\n            ))}\n            {!showMore && shouldShowMask && (\n              <div\n                className=\"absolute inset-0 pointer-events-none min-md:hidden\"\n                style={{ background: 'linear-gradient(180deg, rgba(244, 202, 129, 0) 66.37%, #f4ca81 100%)' }}\n              ></div>\n            )}\n          </div>\n          {shouldShowMask && (\n            <>\n              {showMore ? (\n                <button\n                  className=\"mx-auto mt-[12px] block w-fit min-md:hidden\"\n                  onClick={() => {\n                    setShowMore(false)\n                  }}\n                >\n                  <ChevronUpIcon className=\"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]\"></ChevronUpIcon>\n                </button>\n              ) : (\n                <>\n                  <div className=\"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden\">\n                    <button className=\"w-fit\" onClick={() => setShowMore(!showMore)}>\n                      <ChevronDownIcon className=\"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]\"></ChevronDownIcon>\n                    </button>\n                  </div>\n                </>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {copy.receipt && (\n        <CreditsUploadReceiptModal\n          isOpen={isUploadReceiptModalOpen}\n          onClose={() => {\n            setIsUploadReceiptModalOpen(false)\n          }}\n          copy={copy.receipt}\n          onSuccess={() => {\n            setIsUploadReceiptSuccess(true)\n          }}\n        />\n      )}\n      {copy.subscribe && (\n        <CreditsSubscribeModal\n          copy={copy.subscribe}\n          onSuccess={() => {\n            setIsSubscribeSuccess(true)\n            setTimeout(() => {\n              setIsSubscribeModalOpen(false)\n            }, 3000)\n          }}\n          isOpen={isSubscribeModalOpen}\n          onClose={() => {\n            setIsSubscribeModalOpen(false)\n          }}\n        />\n      )}\n    </Container>\n  )\n}\n"],
+  "mappings": "AA6GM,OA0HU,YAAAA,EA1HV,OAAAC,EAoBI,QAAAC,MApBJ,oBA7GN,OAAS,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC1D,OAAS,mBAAAC,EAAiB,iBAAAC,MAAqB,8BAC/C,OAAS,WAAAC,EAAS,YAAAC,EAAkB,aAAAC,MAAiB,QAErD,OAAS,YAAAC,MAAiD,SAC1D,OAAS,cAAAC,MAAkB,wCAC3B,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,cAAcC,EAAI,sBAAAC,MAA0B,gBACrD,OAAS,mBAAAC,MAAuB,qBAChC,OAAS,6BAAAC,MAAiC,qCAC1C,OAAS,yBAAAC,MAA6B,0BACtC,OAAS,kBAAAC,MAAsB,qBAExB,MAAMC,GAAwB,CAAC,CAAE,KAAAC,EAAM,WAAAC,EAAY,GAAAC,CAAG,IAAoD,CAC/G,KAAM,CAACC,EAAUC,CAAW,EAAIhB,EAAS,EAAK,EACxC,CAAE,QAAAiB,CAAQ,EAAIb,EAAkB,EAChC,CAAE,iBAAAc,CAAiB,EAAIX,EAAgB,EACvC,CAAE,MAAAY,CAAM,EAAIb,EAAmB,EAC/Bc,EAAUV,EAAe,SAASS,CAAK,EACvCE,EAAU,CAAC,CAACJ,EAEZ,CAACK,EAA0BC,CAA2B,EAAIvB,EAAS,EAAK,EACxE,CAACwB,EAAsBC,CAAuB,EAAIzB,EAAS,EAAK,EAChE,CAAC0B,EAAoBC,CAAqB,EAAI3B,EAAS,EAAK,EAC5D,CAAC4B,EAAwBC,CAAyB,EAAI7B,EAAS,EAAK,EAEpE,CAAE,QAAA8B,CAAQ,EAAI3B,EAAW,CAC7B,KAAAS,EACA,UAAW,CACT,mBAAoB,IAAMa,EAAwB,EAAI,EACtD,UAAWC,CACb,EACA,cAAe,CACb,uBAAwB,IAAMH,EAA4B,EAAI,EAC9D,UAAWK,CACb,CACF,CAAC,EAEKG,GAAkBnB,GAAM,MAAQ,CAAC,GAAG,OAAS,EAGnDX,EAAU,IAAM,CACd,GAAI,CAACc,GAAYgB,GAAkB,OAAO,OAAO,MAAQ,IAAK,CAC5D,MAAMC,EAAQ,WAAW,IAAM,CAC7B,MAAMC,EAAU,SAAS,eAAenB,GAAM,iBAAiB,EAC3DmB,GACFA,EAAQ,eAAe,CAAE,SAAU,SAAU,MAAO,KAAM,CAAC,CAE/D,EAAG,GAAG,EACN,MAAO,IAAM,aAAaD,CAAK,CACjC,CACF,EAAG,CAACjB,EAAUgB,EAAgBjB,CAAE,CAAC,EACjC,MAAMoB,EAAOnC,EAAQ,IAAM,CACzB,MAAMmC,EAAOtB,EAAK,KACf,IAAIuB,GAAQ,CACX,GAAI,CAACL,EAAQK,EAAK,EAA0B,EAC1C,OAEF,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,YAAAC,EAAa,UAAAC,CAAU,EAAIT,EAAQK,EAAK,EAA0B,EAC9F,IAAIK,EAAc,GACdC,EACAC,EACJ,OAAKrB,EAGMe,GACTI,EAAcD,EAAU,YACxBE,EAAc,SAEdD,EAAcF,EAAY,YAC1BG,EAAcH,EAAY,YAC1BI,EAAQJ,EAAiC,OARzCE,EAAcH,EAAS,YACvBI,EAAcJ,EAAS,aASlB,CACL,GAAGF,EACH,YAAAK,EACA,YAAAC,EACA,SAAAL,EACA,KAAAM,CACF,CACF,CAAC,EACA,OAAO,OAAO,EAWjB,OAAIrB,EACKa,EAAK,KAAK,CAACS,EAAGC,IACfD,GAAG,UAAY,CAACC,GAAG,SACd,EAEL,CAACD,GAAG,UAAYC,GAAG,SACd,GAEF,CACR,EAEMV,CAEX,EAAG,CAACJ,EAASlB,EAAK,KAAMS,CAAO,CAAC,EAEhC,OACE9B,EAACE,EAAA,CAAU,GAAIqB,EAAI,UAAU,eAC3B,UAAAxB,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMkB,EAAK,MAAO,EAC5CrB,EAAC,OACC,UAAWc,EACT,wEACAe,EAAU,gBAAkB,GAC5B,CAACA,GAAW,gBACd,EACA,MAAO,CACL,WAAY,yEACd,EAGA,UAAA9B,EAAC,OACC,UAAU,6CACV,MAAO,CACL,WAAY,uFACd,EACF,EAEAC,EAAC,OAAI,UAAU,wKACb,UAAAA,EAAC,OAAI,UAAU,qCACb,UAAAD,EAACI,EAAA,CACC,GAAG,KACH,KAAM,EACN,KAAMkB,GAAM,SACZ,UAAU,uFACZ,EACAtB,EAAC,OAAI,UAAU,8BACb,SAAAA,EAAC,KACC,UAAU,2MACV,wBAAyB,CAAE,OAAQsB,EAAK,YAAa,EACvD,EACF,GACF,EACCA,EAAK,WAAW,KACftB,EAACK,EAAA,CACC,UAAU,qEACV,aAAa,0BACb,OAAQiB,EAAK,UAAU,IACzB,GAEJ,EAGArB,EAAC,OAAI,UAAU,qBACb,UAAAA,EAAC,OACC,UAAWc,EACT,oIACF,EACA,MAAO,CACL,OAAQU,GAAY,CAACgB,EAAiB,OAAS,OACjD,EAEC,UAAAG,EAAK,IAAIC,GACR5C,EAAC,OAEC,UAAWc,EACT,oIACAe,EAAU,iBAAmB,EAC/B,EAEA,UAAA7B,EAAC,OACC,UAAAD,EAACM,EAAA,CACC,GAAG,IACH,KAAMuC,EAAK,MACX,KAAM,EACN,UAAU,oDACZ,EACA5C,EAAC,OAAI,UAAU,wCACb,UAAAD,EAACK,EAAA,CACC,UAAU,iDACV,OAAO,0FACT,EACAL,EAACM,EAAA,CACC,GAAG,IACH,KAAMuC,EAAK,QACX,KAAM,EACN,UAAU,gDACZ,GACF,GACF,EAECA,EAAK,aACN,EAAEA,EAAK,KAAOjC,EAAS,eAAiB0B,IACxC,EAAEO,EAAK,KAAOjC,EAAS,UAAYgB,EAAiB,oBACpD,EAAEiB,EAAK,KAAOjC,EAAS,WAAawB,GAClCpC,EAACE,EAAA,CACC,GAAI2C,EAAK,KAAO,IAAM,SACrB,GAAIA,EAAK,MAAQ,CAAE,KAAMA,EAAK,IAAK,EACnC,GAAIA,EAAK,aAAe,CAAE,QAASA,EAAK,WAAY,EACrD,QAAQ,UACR,KAAK,KACL,UAAU,kBAET,SAAAA,EAAK,YACR,EAEA7C,EAACE,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,UAAU,kBAAkB,SAAQ,GACrE,SAAA2C,EAAK,YACR,IA5CGA,EAAK,EA8CZ,CACD,EACA,CAACpB,GAAYgB,GACZzC,EAAC,OACC,UAAU,qDACV,MAAO,CAAE,WAAY,sEAAuE,EAC7F,GAEL,EACCyC,GACCzC,EAAAD,EAAA,CACG,SAAA0B,EACCzB,EAAC,UACC,UAAU,8CACV,QAAS,IAAM,CACb0B,EAAY,EAAK,CACnB,EAEA,SAAA1B,EAACQ,EAAA,CAAc,UAAU,kDAAkD,EAC7E,EAEAR,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,6EACb,SAAAA,EAAC,UAAO,UAAU,QAAQ,QAAS,IAAM0B,EAAY,CAACD,CAAQ,EAC5D,SAAAzB,EAACO,EAAA,CAAgB,UAAU,kDAAkD,EAC/E,EACF,EACF,EAEJ,GAEJ,GACF,EACCe,EAAK,SACJtB,EAACkB,EAAA,CACC,OAAQc,EACR,QAAS,IAAM,CACbC,EAA4B,EAAK,CACnC,EACA,KAAMX,EAAK,QACX,UAAW,IAAM,CACfiB,EAA0B,EAAI,CAChC,EACF,EAEDjB,EAAK,WACJtB,EAACmB,EAAA,CACC,KAAMG,EAAK,UACX,UAAW,IAAM,CACfe,EAAsB,EAAI,EAC1B,WAAW,IAAM,CACfF,EAAwB,EAAK,CAC/B,EAAG,GAAI,CACT,EACA,OAAQD,EACR,QAAS,IAAM,CACbC,EAAwB,EAAK,CAC/B,EACF,GAEJ,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "Button", "Container", "Heading", "Picture", "Text", "ChevronDownIcon", "ChevronUpIcon", "useMemo", "useState", "useEffect", "TaskType", "useActions", "useCreditsContext", "cn", "useHeadlessContext", "useRegistration", "CreditsUploadReceiptModal", "CreditsSubscribeModal", "ROUNDED_BRANDS", "CreditsAnkersolixTask", "copy", "classNames", "id", "showMore", "setShowMore", "profile", "authCodeActivate", "brand", "rounded", "isLogin", "isUploadReceiptModalOpen", "setIsUploadReceiptModalOpen", "isSubscribeModalOpen", "setIsSubscribeModalOpen", "isSubscribeSuccess", "setIsSubscribeSuccess", "isUploadReceiptSuccess", "setIsUploadReceiptSuccess", "actions", "shouldShowMask", "timer", "section", "list", "item", "finished", "notLogin", "notFinished", "completed", "buttonLabel", "handleClick", "link", "a", "b"]
 }

package/dist/esm/components/credits/creditsBanner/index.d.ts

@@ -1,6 +1,8 @@
 type Img = {
     url: string;
     alt: string;
+    width?: number;
+    height?: number;
 };
 export type CreditsBannerCopy = {
     pcImg: Img;

package/dist/esm/components/credits/creditsBanner/index.js

@@ -1,2 +1,13 @@
-import{Fragment as h,jsx as i,jsxs as l}from"react/jsx-runtime";import{Button as s,Container as d,Heading as c,Picture as u,Text as x}from"@anker-in/headless-ui";import f from"classnames";import{useCreditsContext as I}from"../context/provider";function w({copy:t,id:r}){const{profile:e,openSignInPopup:o,openSignUpPopup:g}=I(),n=e?Object.keys(e).length!==0:!1,m=e?.first_name?e?.first_name+" "+e?.last_name:e?.email?.split("@")[0],a=p=>{p==="primary"?g():o()};return i(h,{children:l("div",{id:r,className:" relative w-full",children:[i(u,{className:"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]",source:`${t.pcImg?.url}, ${t.laptopImg?.url} 1024, ${t.mobileImg?.url} 768`,alt:t.pcImg?.alt,loading:"eager"}),n&&i("div",{className:"absolute inset-0 ",style:{background:"linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)"}}),i(d,{className:"l:h-auto !absolute inset-0 mx-auto grid h-full",asChild:!0,children:i("div",{className:"grid grid-cols-12",children:l("div",{className:"l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]",children:[i(c,{as:"h1",size:"5",html:n?t.login.title?.replace("$name",m||""):t.unLogin.title}),i(x,{size:"3",className:"l:mt-[4px] l-xxl:text-[14px] mt-[16px]",html:n?t.login.description:t.unLogin.description}),!n&&l("div",{className:f("mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]",n&&"hidden"),children:[i(s,{variant:"secondary",size:"lg",onClick:()=>{a("primary")},children:t.joinNow}),i(s,{variant:"primary",size:"lg",onClick:()=>{a("secondary")},children:t.loginIn})]})]})})})]})})}export{w as CreditsBanner};
+import{Fragment as v,jsx as i,jsxs as l}from"react/jsx-runtime";import{Button as s,Container as u,Heading as x,Picture as I,Text as f}from"@anker-in/headless-ui";import b from"classnames";import{useCreditsContext as w}from"../context/provider";function B({copy:t,id:r}){const{profile:e,openSignInPopup:m,openSignUpPopup:g}=w(),a=e?Object.keys(e).length!==0:!1,o=e?.first_name?e?.first_name+" "+e?.last_name:e?.email?.split("@")[0],n=h=>{h==="primary"?g():m()},d=t.pcImg?.width&&t.pcImg?.height?`${t.pcImg.width} / ${t.pcImg.height}`:"1920 / 804",p=t.laptopImg?.width&&t.laptopImg?.height?`${t.laptopImg.width} / ${t.laptopImg.height}`:"768 / 660",c=t.mobileImg?.width&&t.mobileImg?.height?`${t.mobileImg.width} / ${t.mobileImg.height}`:"390 / 660";return i(v,{children:l("div",{id:r,className:" relative w-full",children:[i(I,{className:"credits-banner-image w-full",style:{aspectRatio:d},imgClassName:"object-cover w-full h-full",source:`${t.pcImg?.url}, ${t.laptopImg?.url} 1024, ${t.mobileImg?.url} 768`,alt:t.pcImg?.alt,loading:"eager"}),i("style",{children:`
+            @media (max-width: 1024px) and (min-width: 768px) {
+              .credits-banner-image {
+                aspect-ratio: ${p} !important;
+              }
+            }
+            @media (max-width: 767px) {
+              .credits-banner-image {
+                aspect-ratio: ${c} !important;
+              }
+            }
+          `}),a&&i("div",{className:"absolute inset-0 ",style:{background:"linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)"}}),i(u,{className:"l:h-auto !absolute inset-0 mx-auto grid h-full",asChild:!0,children:i("div",{className:"grid grid-cols-12",children:l("div",{className:"l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]",children:[i(x,{as:"h1",size:"5",className:"text-[48px] xl-xxl:text-[40px] l:text-[32px]",html:a?t.login.title?.replace("$name",o||""):t.unLogin.title}),i(f,{size:"3",className:"l:mt-[4px] l-xxl:text-[14px] mt-[16px]",html:a?t.login.description:t.unLogin.description}),!a&&l("div",{className:b("mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]",a&&"hidden"),children:[i(s,{variant:"secondary",size:"lg",onClick:()=>{n("primary")},children:t.joinNow}),i(s,{variant:"primary",size:"lg",onClick:()=>{n("secondary")},children:t.loginIn})]})]})})})]})})}export{B as CreditsBanner};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/credits/creditsBanner/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsBanner/index.tsx"],
-  "sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\n\ntype Img = {\n  url: string\n  alt: string\n}\nexport type CreditsBannerCopy = {\n  pcImg: Img\n  laptopImg: Img\n  mobileImg: Img\n  joinNow: string\n  loginIn: string\n  login: {\n    title: string\n    description: string\n  }\n  unLogin: {\n    title: string\n    description: string\n  }\n}\n\nexport function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: string }) {\n  const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()\n  const isLogin = profile ? Object.keys(profile).length !== 0 : false\n\n  const displayName = profile?.first_name\n    ? profile?.first_name + ' ' + profile?.last_name\n    : profile?.email?.split('@')[0]\n\n  const handleButtonClick = (buttonType: 'primary' | 'secondary') => {\n    buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()\n  }\n\n  return (\n    <>\n      <div id={id} className=\" relative w-full\">\n        <Picture\n          className=\"aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]\"\n          source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}\n          alt={copy.pcImg?.alt}\n          loading=\"eager\"\n        ></Picture>\n        {isLogin && (\n          <div\n            className=\"absolute inset-0 \"\n            style={{\n              background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',\n            }}\n          ></div>\n        )}\n\n        <Container className=\"l:h-auto !absolute inset-0 mx-auto grid h-full\" asChild>\n          <div className=\"grid grid-cols-12\">\n            <div className=\"l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]\">\n              <Heading\n                as=\"h1\"\n                size=\"5\"\n                html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}\n              ></Heading>\n\n              <Text\n                size=\"3\"\n                className=\"l:mt-[4px] l-xxl:text-[14px] mt-[16px]\"\n                html={isLogin ? copy.login.description : copy.unLogin.description}\n              ></Text>\n\n              {!isLogin && (\n                <div\n                  className={classNames(\n                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',\n                    isLogin && 'hidden'\n                  )}\n                >\n                  <Button\n                    variant=\"secondary\"\n                    size=\"lg\"\n                    onClick={() => {\n                      handleButtonClick('primary')\n                    }}\n                  >\n                    {copy.joinNow}\n                  </Button>\n                  <Button\n                    variant=\"primary\"\n                    size=\"lg\"\n                    onClick={() => {\n                      handleButtonClick('secondary')\n                    }}\n                  >\n                    {copy.loginIn}\n                  </Button>\n                </div>\n              )}\n            </div>\n          </div>\n        </Container>\n      </div>\n    </>\n  )\n}\n"],
-  "mappings": "AAqCI,mBAAAA,EAEI,OAAAC,EA+BQ,QAAAC,MAjCZ,oBArCJ,OAAS,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC1D,OAAOC,MAAgB,aACvB,OAAS,qBAAAC,MAAyB,sBAsB3B,SAASC,EAAc,CAAE,KAAAC,EAAM,GAAAC,CAAG,EAA6C,CACpF,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,CAAgB,EAAIN,EAAkB,EAClEO,EAAUH,EAAU,OAAO,KAAKA,CAAO,EAAE,SAAW,EAAI,GAExDI,EAAcJ,GAAS,WACzBA,GAAS,WAAa,IAAMA,GAAS,UACrCA,GAAS,OAAO,MAAM,GAAG,EAAE,CAAC,EAE1BK,EAAqBC,GAAwC,CACjEA,IAAe,UAAYJ,EAAgB,EAAID,EAAgB,CACjE,EAEA,OACEb,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,GAAIU,EAAI,UAAU,mBACrB,UAAAX,EAACK,EAAA,CACC,UAAU,6GACV,OAAQ,GAAGK,EAAK,OAAO,GAAG,KAAKA,EAAK,WAAW,GAAG,UAAUA,EAAK,WAAW,GAAG,OAC/E,IAAKA,EAAK,OAAO,IACjB,QAAQ,QACT,EACAK,GACCf,EAAC,OACC,UAAU,oBACV,MAAO,CACL,WAAY,sEACd,EACD,EAGHA,EAACG,EAAA,CAAU,UAAU,iDAAiD,QAAO,GAC3E,SAAAH,EAAC,OAAI,UAAU,oBACb,SAAAC,EAAC,OAAI,UAAU,qHACb,UAAAD,EAACI,EAAA,CACC,GAAG,KACH,KAAK,IACL,KAAMW,EAAUL,EAAK,MAAM,OAAO,QAAQ,QAASM,GAAe,EAAE,EAAIN,EAAK,QAAQ,MACtF,EAEDV,EAACM,EAAA,CACC,KAAK,IACL,UAAU,yCACV,KAAMS,EAAUL,EAAK,MAAM,YAAcA,EAAK,QAAQ,YACvD,EAEA,CAACK,GACAd,EAAC,OACC,UAAWM,EACT,4DACAQ,GAAW,QACb,EAEA,UAAAf,EAACE,EAAA,CACC,QAAQ,YACR,KAAK,KACL,QAAS,IAAM,CACbe,EAAkB,SAAS,CAC7B,EAEC,SAAAP,EAAK,QACR,EACAV,EAACE,EAAA,CACC,QAAQ,UACR,KAAK,KACL,QAAS,IAAM,CACbe,EAAkB,WAAW,CAC/B,EAEC,SAAAP,EAAK,QACR,GACF,GAEJ,EACF,EACF,GACF,EACF,CAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "Button", "Container", "Heading", "Picture", "Text", "classNames", "useCreditsContext", "CreditsBanner", "copy", "id", "profile", "openSignInPopup", "openSignUpPopup", "isLogin", "displayName", "handleButtonClick", "buttonType"]
+  "sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\n\ntype Img = {\n  url: string\n  alt: string\n  width?: number\n  height?: number\n}\nexport type CreditsBannerCopy = {\n  pcImg: Img\n  laptopImg: Img\n  mobileImg: Img\n  joinNow: string\n  loginIn: string\n  login: {\n    title: string\n    description: string\n  }\n  unLogin: {\n    title: string\n    description: string\n  }\n}\n\nexport function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: string }) {\n  const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()\n  const isLogin = profile ? Object.keys(profile).length !== 0 : false\n\n  const displayName = profile?.first_name\n    ? profile?.first_name + ' ' + profile?.last_name\n    : profile?.email?.split('@')[0]\n\n  const handleButtonClick = (buttonType: 'primary' | 'secondary') => {\n    buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()\n  }\n\n  // \u8BA1\u7B97\u56FE\u7247\u6BD4\u4F8B\uFF0C\u5982\u679C\u6CA1\u6709\u914D\u7F6E\u5219\u4F7F\u7528\u9ED8\u8BA4\u503C\n  const pcAspectRatio =\n    copy.pcImg?.width && copy.pcImg?.height ? `${copy.pcImg.width} / ${copy.pcImg.height}` : '1920 / 804'\n  const laptopAspectRatio =\n    copy.laptopImg?.width && copy.laptopImg?.height ? `${copy.laptopImg.width} / ${copy.laptopImg.height}` : '768 / 660'\n  const mobileAspectRatio =\n    copy.mobileImg?.width && copy.mobileImg?.height ? `${copy.mobileImg.width} / ${copy.mobileImg.height}` : '390 / 660'\n\n  return (\n    <>\n      <div id={id} className=\" relative w-full\">\n        <Picture\n          className=\"credits-banner-image w-full\"\n          style={{\n            aspectRatio: pcAspectRatio,\n          }}\n          imgClassName=\"object-cover w-full h-full\"\n          source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}\n          alt={copy.pcImg?.alt}\n          loading=\"eager\"\n        ></Picture>\n        <style>\n          {`\n            @media (max-width: 1024px) and (min-width: 768px) {\n              .credits-banner-image {\n                aspect-ratio: ${laptopAspectRatio} !important;\n              }\n            }\n            @media (max-width: 767px) {\n              .credits-banner-image {\n                aspect-ratio: ${mobileAspectRatio} !important;\n              }\n            }\n          `}\n        </style>\n        {isLogin && (\n          <div\n            className=\"absolute inset-0 \"\n            style={{\n              background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',\n            }}\n          ></div>\n        )}\n\n        <Container className=\"l:h-auto !absolute inset-0 mx-auto grid h-full\" asChild>\n          <div className=\"grid grid-cols-12\">\n            <div className=\"l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]\">\n              <Heading\n                as=\"h1\"\n                size=\"5\"\n                className=\"text-[48px] xl-xxl:text-[40px] l:text-[32px]\"\n                html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}\n              ></Heading>\n\n              <Text\n                size=\"3\"\n                className=\"l:mt-[4px] l-xxl:text-[14px] mt-[16px]\"\n                html={isLogin ? copy.login.description : copy.unLogin.description}\n              ></Text>\n\n              {!isLogin && (\n                <div\n                  className={classNames(\n                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',\n                    isLogin && 'hidden'\n                  )}\n                >\n                  <Button\n                    variant=\"secondary\"\n                    size=\"lg\"\n                    onClick={() => {\n                      handleButtonClick('primary')\n                    }}\n                  >\n                    {copy.joinNow}\n                  </Button>\n                  <Button\n                    variant=\"primary\"\n                    size=\"lg\"\n                    onClick={() => {\n                      handleButtonClick('secondary')\n                    }}\n                  >\n                    {copy.loginIn}\n                  </Button>\n                </div>\n              )}\n            </div>\n          </div>\n        </Container>\n      </div>\n    </>\n  )\n}\n"],
+  "mappings": "AA+CI,mBAAAA,EAEI,OAAAC,EAkDQ,QAAAC,MApDZ,oBA/CJ,OAAS,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBAC1D,OAAOC,MAAgB,aACvB,OAAS,qBAAAC,MAAyB,sBAwB3B,SAASC,EAAc,CAAE,KAAAC,EAAM,GAAAC,CAAG,EAA6C,CACpF,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,CAAgB,EAAIN,EAAkB,EAClEO,EAAUH,EAAU,OAAO,KAAKA,CAAO,EAAE,SAAW,EAAI,GAExDI,EAAcJ,GAAS,WACzBA,GAAS,WAAa,IAAMA,GAAS,UACrCA,GAAS,OAAO,MAAM,GAAG,EAAE,CAAC,EAE1BK,EAAqBC,GAAwC,CACjEA,IAAe,UAAYJ,EAAgB,EAAID,EAAgB,CACjE,EAGMM,EACJT,EAAK,OAAO,OAASA,EAAK,OAAO,OAAS,GAAGA,EAAK,MAAM,KAAK,MAAMA,EAAK,MAAM,MAAM,GAAK,aACrFU,EACJV,EAAK,WAAW,OAASA,EAAK,WAAW,OAAS,GAAGA,EAAK,UAAU,KAAK,MAAMA,EAAK,UAAU,MAAM,GAAK,YACrGW,EACJX,EAAK,WAAW,OAASA,EAAK,WAAW,OAAS,GAAGA,EAAK,UAAU,KAAK,MAAMA,EAAK,UAAU,MAAM,GAAK,YAE3G,OACEV,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,GAAIU,EAAI,UAAU,mBACrB,UAAAX,EAACK,EAAA,CACC,UAAU,8BACV,MAAO,CACL,YAAac,CACf,EACA,aAAa,6BACb,OAAQ,GAAGT,EAAK,OAAO,GAAG,KAAKA,EAAK,WAAW,GAAG,UAAUA,EAAK,WAAW,GAAG,OAC/E,IAAKA,EAAK,OAAO,IACjB,QAAQ,QACT,EACDV,EAAC,SACE;AAAA;AAAA;AAAA,gCAGqBoB,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKjBC,CAAiB;AAAA;AAAA;AAAA,YAIzC,EACCN,GACCf,EAAC,OACC,UAAU,oBACV,MAAO,CACL,WAAY,sEACd,EACD,EAGHA,EAACG,EAAA,CAAU,UAAU,iDAAiD,QAAO,GAC3E,SAAAH,EAAC,OAAI,UAAU,oBACb,SAAAC,EAAC,OAAI,UAAU,qHACb,UAAAD,EAACI,EAAA,CACC,GAAG,KACH,KAAK,IACL,UAAU,+CACV,KAAMW,EAAUL,EAAK,MAAM,OAAO,QAAQ,QAASM,GAAe,EAAE,EAAIN,EAAK,QAAQ,MACtF,EAEDV,EAACM,EAAA,CACC,KAAK,IACL,UAAU,yCACV,KAAMS,EAAUL,EAAK,MAAM,YAAcA,EAAK,QAAQ,YACvD,EAEA,CAACK,GACAd,EAAC,OACC,UAAWM,EACT,4DACAQ,GAAW,QACb,EAEA,UAAAf,EAACE,EAAA,CACC,QAAQ,YACR,KAAK,KACL,QAAS,IAAM,CACbe,EAAkB,SAAS,CAC7B,EAEC,SAAAP,EAAK,QACR,EACAV,EAACE,EAAA,CACC,QAAQ,UACR,KAAK,KACL,QAAS,IAAM,CACbe,EAAkB,WAAW,CAC/B,EAEC,SAAAP,EAAK,QACR,GACF,GAEJ,EACF,EACF,GACF,EACF,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "Button", "Container", "Heading", "Picture", "Text", "classNames", "useCreditsContext", "CreditsBanner", "copy", "id", "profile", "openSignInPopup", "openSignUpPopup", "isLogin", "displayName", "handleButtonClick", "buttonType", "pcAspectRatio", "laptopAspectRatio", "mobileAspectRatio"]
 }

package/dist/esm/components/credits/creditsBenefits/BenefitItem.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Heading as u,Picture as g,Text as r}from"@anker-in/headless-ui";import{classNames as n,useHeadlessContext as v,ROUNDED_BRANDS as F}from"@anker-in/lib";import N from"./IconInfo";const h=({item:e,handleClick:x,isNoteActive:m,index:p,bigIcon:c,cardBgColor:l,cardBorderColor:d})=>{const{brand:b}=v(),s=F.includes(b),f=c?"mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0":"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0";console.log("cardBgColor in BenefitItem",l);const o={};return l?o.background=l:o.background="linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)",d&&(o.borderColor=d),t("div",{className:n("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!s&&"rounded-none"),style:o,children:i("div",{className:"flex flex-col",children:[t(g,{className:f,alt:e.icon?.alt,source:e.icon?.url}),i("div",{className:"flex items-center",children:[t(u,{html:e.text,size:"2",className:"break-all"}),e.note&&i("div",{role:"button",tabIndex:0,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&a.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>x({item:e,index:p}),children:[t(N,{}),t("div",{className:n("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",m?"block":"hidden"),children:i("div",{className:n("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!s&&"rounded-none"),children:[t(r,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),t("div",{className:n("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!s&&"rounded-none")})]})})]})]}),e.tag&&t(r,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var y=h;export{y as default};
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Heading as v,Picture as F,Text as a}from"@anker-in/headless-ui";import{classNames as o,useHeadlessContext as N}from"@anker-in/lib";import h from"./IconInfo";import{ROUNDED_BRANDS as D}from"../../../constants";const k=({item:e,handleClick:x,isNoteActive:m,index:p,bigIcon:c,cardBgColor:i,cardBorderColor:r})=>{const{brand:b,locale:f}=N(),s=D.includes(b),u=["de","eu-de","fr","eu-fr"].includes(f),g=c?"mb-[16px] size-[64px] xl-xxl:size-[56px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0":"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0";console.log("cardBgColor in BenefitItem",i);const n={};return i?n.background=i:n.background="linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)",r&&(n.borderColor=r),t("div",{className:o("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!s&&"rounded-none"),style:n,children:l("div",{className:"flex flex-col",children:[t(F,{className:g,alt:e.icon?.alt,source:e.icon?.url}),l("div",{className:"flex items-center",children:[t(v,{html:e.text,size:"2",className:o("md-l:line-clamp-3",u&&"break-words")}),e.note&&l("div",{role:"button",tabIndex:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&d.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>x({item:e,index:p}),children:[t(h,{}),t("div",{className:o("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",m?"block":"hidden"),children:l("div",{className:o("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!s&&"rounded-none"),children:[t(a,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),t("div",{className:o("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!s&&"rounded-none")})]})})]})]}),e.tag&&t(a,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var w=k;export{w as default};
 //# sourceMappingURL=BenefitItem.js.map

package/dist/esm/components/credits/creditsBenefits/BenefitItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsBenefits/BenefitItem.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport IconInfo from './IconInfo'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n  bigIcon,\n  cardBgColor,\n  cardBorderColor,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}) => {\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u6839\u636E bigIcon \u8BBE\u7F6E\u4E0D\u540C\u5C4F\u5E55\u4E0B\u7684\u56FE\u6807\u5927\u5C0F\n  // \u5C3A\u5BF8\uFF1A\u22651921px=64px, 1441-1920px=54px, \u22641440px=48px\n  const iconSizeClass = bigIcon\n    ? 'mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n    : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n\n  console.log('cardBgColor in BenefitItem', cardBgColor)\n  // \u80CC\u666F\u8272\u548C\u8FB9\u6846\u8272\u5904\u7406\n  const cardStyle: React.CSSProperties = {}\n  if (cardBgColor) {\n    cardStyle.background = cardBgColor\n  } else {\n    cardStyle.background = 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)'\n  }\n  if (cardBorderColor) {\n    cardStyle.borderColor = cardBorderColor\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={cardStyle}\n    >\n      <div className=\"flex flex-col\">\n        <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />\n        <div className=\"flex items-center\">\n          <Heading html={item.text} size=\"2\" className=\"break-all\" />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
-  "mappings": "AA4DQ,cAAAA,EAsBQ,QAAAC,MAtBR,oBA5DR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,cAAcC,EAAI,sBAAAC,EAAoB,kBAAAC,MAAsB,gBACrE,OAAOC,MAAc,aAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,CACF,IAQM,CACJ,KAAM,CAAE,MAAAC,CAAM,EAAIX,EAAmB,EAC/BY,EAAUX,EAAe,SAASU,CAAK,EAIvCE,EAAgBL,EAClB,+GACA,6EAEJ,QAAQ,IAAI,6BAA8BC,CAAW,EAErD,MAAMK,EAAiC,CAAC,EACxC,OAAIL,EACFK,EAAU,WAAaL,EAEvBK,EAAU,WAAa,6EAErBJ,IACFI,EAAU,YAAcJ,GAIxBhB,EAAC,OACC,UAAWK,EACT,8HACA,CAACa,GAAW,cACd,EACA,MAAOE,EAEP,SAAAnB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CAAQ,UAAWgB,EAAe,IAAKT,EAAK,MAAM,IAAK,OAAQA,EAAK,MAAM,IAAK,EAChFT,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAMQ,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,MACJT,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWoB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMV,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,UAAAb,EAACQ,EAAA,EAAS,EACVR,EAAC,OACC,UAAWK,EACT,qGACAO,EAAe,QAAU,QAC3B,EAEA,SAAAX,EAAC,OACC,UAAWI,EACT,0FACA,CAACa,GAAW,cACd,EAEA,UAAAlB,EAACI,EAAA,CAAK,GAAG,IAAI,KAAK,IAAI,KAAMM,EAAK,KAAM,UAAU,sBAAsB,EACvEV,EAAC,OACC,UAAWK,EACT,mHACA,CAACa,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCR,EAAK,KAAOV,EAACI,EAAA,CAAK,GAAG,MAAM,KAAMM,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOY,EAAQb",
-  "names": ["jsx", "jsxs", "Heading", "Picture", "Text", "cn", "useHeadlessContext", "ROUNDED_BRANDS", "IconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "bigIcon", "cardBgColor", "cardBorderColor", "brand", "rounded", "iconSizeClass", "cardStyle", "e", "BenefitItem_default"]
+  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport IconInfo from './IconInfo'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n  bigIcon,\n  cardBgColor,\n  cardBorderColor,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}) => {\n  const { brand, locale } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u5FB7\u8BED\u548C\u6CD5\u8BED\u9700\u8981\u6298\u884C\n  const shouldBreakWords = ['de', 'eu-de', 'fr', 'eu-fr'].includes(locale)\n\n  // \u6839\u636E bigIcon \u8BBE\u7F6E\u4E0D\u540C\u5C4F\u5E55\u4E0B\u7684\u56FE\u6807\u5927\u5C0F\n  // \u5C3A\u5BF8\uFF1A\u22651921px=64px, 1441-1920px=56px, 1025-1440px=20px, \u22641024px=48px\n  const iconSizeClass = bigIcon\n    ? 'mb-[16px] size-[64px] xl-xxl:size-[56px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n    : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n\n  console.log('cardBgColor in BenefitItem', cardBgColor)\n  // \u80CC\u666F\u8272\u548C\u8FB9\u6846\u8272\u5904\u7406\n  const cardStyle: React.CSSProperties = {}\n  if (cardBgColor) {\n    cardStyle.background = cardBgColor\n  } else {\n    cardStyle.background = 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)'\n  }\n  if (cardBorderColor) {\n    cardStyle.borderColor = cardBorderColor\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={cardStyle}\n    >\n      <div className=\"flex flex-col\">\n        <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />\n        <div className=\"flex items-center\">\n          <Heading\n            html={item.text}\n            size=\"2\"\n            className={cn('md-l:line-clamp-3', shouldBreakWords && 'break-words')}\n          />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
+  "mappings": "AAgEQ,cAAAA,EA0BQ,QAAAC,MA1BR,oBAhER,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,cAAcC,EAAI,sBAAAC,MAA0B,gBACrD,OAAOC,MAAc,aACrB,OAAS,kBAAAC,MAAsB,qBAW/B,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,CACF,IAQM,CACJ,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIZ,EAAmB,EACvCa,EAAUX,EAAe,SAASS,CAAK,EAGvCG,EAAmB,CAAC,KAAM,QAAS,KAAM,OAAO,EAAE,SAASF,CAAM,EAIjEG,EAAgBP,EAClB,+GACA,6EAEJ,QAAQ,IAAI,6BAA8BC,CAAW,EAErD,MAAMO,EAAiC,CAAC,EACxC,OAAIP,EACFO,EAAU,WAAaP,EAEvBO,EAAU,WAAa,6EAErBN,IACFM,EAAU,YAAcN,GAIxBhB,EAAC,OACC,UAAWK,EACT,8HACA,CAACc,GAAW,cACd,EACA,MAAOG,EAEP,SAAArB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CAAQ,UAAWkB,EAAe,IAAKX,EAAK,MAAM,IAAK,OAAQA,EAAK,MAAM,IAAK,EAChFT,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CACC,KAAMQ,EAAK,KACX,KAAK,IACL,UAAWL,EAAG,oBAAqBe,GAAoB,aAAa,EACtE,EACCV,EAAK,MACJT,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWsB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMZ,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,UAAAb,EAACO,EAAA,EAAS,EACVP,EAAC,OACC,UAAWK,EACT,qGACAO,EAAe,QAAU,QAC3B,EAEA,SAAAX,EAAC,OACC,UAAWI,EACT,0FACA,CAACc,GAAW,cACd,EAEA,UAAAnB,EAACI,EAAA,CAAK,GAAG,IAAI,KAAK,IAAI,KAAMM,EAAK,KAAM,UAAU,sBAAsB,EACvEV,EAAC,OACC,UAAWK,EACT,mHACA,CAACc,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCT,EAAK,KAAOV,EAACI,EAAA,CAAK,GAAG,MAAM,KAAMM,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOc,EAAQf",
+  "names": ["jsx", "jsxs", "Heading", "Picture", "Text", "cn", "useHeadlessContext", "IconInfo", "ROUNDED_BRANDS", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "bigIcon", "cardBgColor", "cardBorderColor", "brand", "locale", "rounded", "shouldBreakWords", "iconSizeClass", "cardStyle", "e", "BenefitItem_default"]
 }

package/dist/esm/components/credits/creditsBenefits/IconInfo.js

@@ -1,2 +1,2 @@
-import{jsx as C,jsxs as o}from"react/jsx-runtime";const l=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",className:"size-[18px] cursor-pointer [&_svg]:size-full",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[C("path",{d:"M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z",fill:"#6D6D6F"}),C("path",{d:"M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z",fill:"#6D6D6F"})]});var s=l;export{l as IconInfo,s as default};
+import{jsx as C,jsxs as o}from"react/jsx-runtime";const l=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",className:"size-[20px] cursor-pointer [&_svg]:size-full",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[C("path",{d:"M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z",fill:"#6D6D6F"}),C("path",{d:"M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z",fill:"#6D6D6F"})]});var s=l;export{l as IconInfo,s as default};
 //# sourceMappingURL=IconInfo.js.map

package/dist/esm/components/credits/creditsBenefits/IconInfo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsBenefits/IconInfo.tsx"],
-  "sourcesContent": ["export const IconInfo = () => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      className='size-[18px] cursor-pointer [&_svg]:size-full'\n      width='18'\n      height='18'\n      viewBox='0 0 18 18'\n      fill='none'\n    >\n      <path\n        d='M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z'\n        fill='#6D6D6F'\n      />\n      <path\n        d='M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z'\n        fill='#6D6D6F'\n      />\n    </svg>\n  )\n}\n\nexport default IconInfo\n"],
+  "sourcesContent": ["export const IconInfo = () => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      className='size-[20px] cursor-pointer [&_svg]:size-full'\n      width='18'\n      height='18'\n      viewBox='0 0 18 18'\n      fill='none'\n    >\n      <path\n        d='M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z'\n        fill='#6D6D6F'\n      />\n      <path\n        d='M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z'\n        fill='#6D6D6F'\n      />\n    </svg>\n  )\n}\n\nexport default IconInfo\n"],
   "mappings": "AAEI,OAQE,OAAAA,EARF,QAAAC,MAAA,oBAFG,MAAMC,EAAW,IAEpBD,EAAC,OACC,MAAM,6BACN,UAAU,+CACV,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,UAAAD,EAAC,QACC,EAAE,6rBACF,KAAK,UACP,EACAA,EAAC,QACC,EAAE,+aACF,KAAK,UACP,GACF,EAIJ,IAAOG,EAAQD",
   "names": ["jsx", "jsxs", "IconInfo", "IconInfo_default"]
 }

package/dist/esm/components/credits/creditsBenefits/index.js

@@ -1,4 +1,4 @@
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import"swiper/css";import"swiper/css/grid";import"swiper/css/pagination";import{Container as c,Heading as g}from"@anker-in/headless-ui";import{useState as u}from"react";import{Grid as f,Pagination as b}from"swiper/modules";import{Swiper as C,SwiperSlide as v}from"swiper/react";import s from"./BenefitItem";import{useCreditsContext as B}from"../context/provider";import{gaTrack as w,classNames as x}from"@anker-in/lib";const G=({copy:i,id:d})=>{const[o,n]=u(null),{profile:m,gtm:p}=B(),l=({item:t,index:e})=>{w({event:"ga4Event",event_name:"lp_button",member_active_status:m?.activated?"active":"not active",event_parameters:{page_group:p.pageGroup,position:i.title,button_name:t.text,info:""}}),o===e?n(null):(n(e),setTimeout(()=>{n(null)},5e3))};return a(c,{id:d,className:"!z-[30] bg-[#F5F5F7]",children:[r(g,{as:"h2",size:"4",html:i?.title}),r("div",{className:"mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch",children:i.benefits.map((t,e)=>r(s,{item:t,handleClick:l,isNoteActive:o===e,index:e,bigIcon:i.bigIcon,cardBgColor:i.cardBgColor,cardBorderColor:i.cardBorderColor},e))}),a("div",{className:"mt-[24px] hidden l:block",children:[r(C,{spaceBetween:16,slidesPerView:2,slidesPerGroup:2,grid:{rows:2,fill:"row"},breakpoints:{768:{slidesPerView:3,slidesPerGroup:3}},wrapperClass:"!items-stretch",modules:[f,b],pagination:{clickable:!0,el:"#benefits-pagination",renderBullet(t,e){return`<div class='${e} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
-              </div>`}},children:i.benefits.map((t,e)=>r(v,{className:x("!h-auto !flex",o===e&&"!z-[100]"),children:r(s,{item:t,handleClick:l,isNoteActive:o===e,index:e,bigIcon:i.bigIcon,cardBgColor:i.cardBgColor,cardBorderColor:i.cardBorderColor})},e))}),r("div",{id:"benefits-pagination",className:`mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
-          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),o&&r("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:t=>t.key==="Escape"&&n(null)})]})};export{G as CreditsBenefits};
+import{jsx as r,jsxs as a}from"react/jsx-runtime";import"swiper/css";import"swiper/css/grid";import"swiper/css/pagination";import{Container as c,Heading as g}from"@anker-in/headless-ui";import{useState as u}from"react";import{Grid as f,Pagination as b}from"swiper/modules";import{Swiper as C,SwiperSlide as v}from"swiper/react";import s from"./BenefitItem";import{useCreditsContext as B}from"../context/provider";import{gaTrack as w,classNames as x}from"@anker-in/lib";const G=({copy:t,id:d})=>{const[o,n]=u(null),{profile:m,gtm:p}=B(),l=({item:i,index:e})=>{w({event:"ga4Event",event_name:"lp_button",member_active_status:m?.activated?"active":"not active",event_parameters:{page_group:p.pageGroup,position:t.title,button_name:i.text,info:""}}),o===e?n(null):(n(e),setTimeout(()=>{n(null)},5e3))};return a(c,{id:d,className:"!z-[30] bg-[#F5F5F7]",children:[r(g,{as:"h2",size:"4",html:t?.title}),r("div",{className:"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch",children:t.benefits.map((i,e)=>r(s,{item:i,handleClick:l,isNoteActive:o===e,index:e,bigIcon:t.bigIcon,cardBgColor:t.cardBgColor,cardBorderColor:t.cardBorderColor},e))}),a("div",{className:"mt-[24px] hidden l:block",children:[r(C,{spaceBetween:16,slidesPerView:2,slidesPerGroup:2,grid:{rows:2,fill:"row"},breakpoints:{768:{slidesPerView:3,slidesPerGroup:3}},wrapperClass:"!items-stretch",modules:[f,b],pagination:{clickable:!0,el:"#benefits-pagination",renderBullet(i,e){return`<div class='${e} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
+              </div>`}},children:t.benefits.map((i,e)=>r(v,{className:x("!h-auto !flex",o===e&&"!z-[100]"),children:r(s,{item:i,handleClick:l,isNoteActive:o===e,index:e,bigIcon:t.bigIcon,cardBgColor:t.cardBgColor,cardBorderColor:t.cardBorderColor})},e))}),r("div",{id:"benefits-pagination",className:`mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
+          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full`})]}),o&&r("div",{role:"button",tabIndex:0,className:"fixed inset-0 z-10",onClick:()=>n(null),onKeyDown:i=>i.key==="Escape"&&n(null)})]})};export{G as CreditsBenefits};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/credits/creditsBenefits/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsBenefits/index.tsx"],
-  "sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n  title: string\n  benefits: BenefitItemCopy[]\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n  const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n  const { profile, gtm } = useCreditsContext()\n  const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      member_active_status: profile?.activated ? 'active' : 'not active',\n      event_parameters: {\n        page_group: gtm.pageGroup,\n        position: copy.title,\n        button_name: item.text,\n        info: '',\n      },\n    })\n    if (activeNoteIndex === index) {\n      setActiveNoteIndex(null)\n    } else {\n      setActiveNoteIndex(index)\n      setTimeout(() => {\n        setActiveNoteIndex(null)\n      }, 5000)\n    }\n  }\n\n  return (\n    <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n      <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n      <div className=\"mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch\">\n        {copy.benefits.map((item, index) => (\n          <BenefitItem\n            key={index}\n            item={item}\n            handleClick={handleClick}\n            isNoteActive={activeNoteIndex === index}\n            index={index}\n            bigIcon={copy.bigIcon}\n            cardBgColor={copy.cardBgColor}\n            cardBorderColor={copy.cardBorderColor}\n          />\n        ))}\n      </div>\n      <div className=\"mt-[24px] hidden l:block\">\n        <Swiper\n          spaceBetween={16}\n          slidesPerView={2}\n          slidesPerGroup={2}\n          grid={{\n            rows: 2,\n            fill: 'row',\n          }}\n          breakpoints={{\n            768: {\n              slidesPerView: 3,\n              slidesPerGroup: 3,\n            },\n          }}\n          wrapperClass=\"!items-stretch\"\n          modules={[Grid, Pagination]}\n          pagination={{\n            clickable: true,\n            el: '#benefits-pagination',\n            renderBullet(index, className) {\n              return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n              </div>`\n            },\n          }}\n        >\n          {copy.benefits.map((item, index) => (\n            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n              <BenefitItem\n                item={item}\n                handleClick={handleClick}\n                isNoteActive={activeNoteIndex === index}\n                index={index}\n                bigIcon={copy.bigIcon}\n                cardBgColor={copy.cardBgColor}\n                cardBorderColor={copy.cardBorderColor}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div\n          id=\"benefits-pagination\"\n          className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] \n          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full\"\n        ></div>\n      </div>\n\n      {activeNoteIndex && (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          className=\"fixed inset-0 z-10\"\n          onClick={() => setActiveNoteIndex(null)}\n          onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}\n        />\n      )}\n    </Container>\n  )\n}\n"],
-  "mappings": "AAgDM,cAAAA,EAeA,QAAAC,MAfA,oBAhDN,MAAO,aACP,MAAO,kBACP,MAAO,wBAEP,OAAS,aAAAC,EAAW,WAAAC,MAAe,wBACnC,OAAS,YAAAC,MAAgB,QACzB,OAAS,QAAAC,EAAM,cAAAC,MAAkB,iBACjC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAOC,MAA2C,gBAClD,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,WAAAC,EAAS,cAAcC,MAAU,gBAUnC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,EAAIb,EAAwB,IAAI,EACpE,CAAE,QAAAc,EAAS,IAAAC,CAAI,EAAIT,EAAkB,EACrCU,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBO,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,OACEhB,EAACC,EAAA,CAAU,GAAIa,EAAI,UAAU,uBAC3B,UAAAf,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,UAAU,8EACZ,SAAAc,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACS,EAAA,CAEC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,EACArB,EAAC,OAAI,UAAU,2BACb,UAAAD,EAACO,EAAA,CACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAACF,EAAMC,CAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAagB,EAAOC,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAT,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACQ,EAAA,CAAwB,UAAWI,EAAG,gBAAiBI,IAAoBM,GAAS,UAAU,EAC7F,SAAAtB,EAACS,EAAA,CACC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,EACAtB,EAAC,OACC,GAAG,sBACH,UAAU;AAAA,mGAEX,GACH,EAECgB,GACChB,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAU,qBACV,QAAS,IAAMiB,EAAmB,IAAI,EACtC,UAAWO,GAAKA,EAAE,MAAQ,UAAYP,EAAmB,IAAI,EAC/D,GAEJ,CAEJ",
+  "sourcesContent": ["import 'swiper/css'\nimport 'swiper/css/grid'\nimport 'swiper/css/pagination'\n\nimport { Container, Heading } from '@anker-in/headless-ui'\nimport { useState } from 'react'\nimport { Grid, Pagination } from 'swiper/modules'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nimport BenefitItem, { type BenefitItemCopy } from './BenefitItem'\nimport { useCreditsContext } from '../context/provider'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\n\nexport type CreditsBenefitsCopy = {\n  title: string\n  benefits: BenefitItemCopy[]\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}\n\nexport const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?: string }) => {\n  const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)\n  const { profile, gtm } = useCreditsContext()\n  const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      member_active_status: profile?.activated ? 'active' : 'not active',\n      event_parameters: {\n        page_group: gtm.pageGroup,\n        position: copy.title,\n        button_name: item.text,\n        info: '',\n      },\n    })\n    if (activeNoteIndex === index) {\n      setActiveNoteIndex(null)\n    } else {\n      setActiveNoteIndex(index)\n      setTimeout(() => {\n        setActiveNoteIndex(null)\n      }, 5000)\n    }\n  }\n\n  return (\n    <Container id={id} className=\"!z-[30] bg-[#F5F5F7]\">\n      <Heading as=\"h2\" size=\"4\" html={copy?.title} />\n      <div className=\"mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch\">\n        {copy.benefits.map((item, index) => (\n          <BenefitItem\n            key={index}\n            item={item}\n            handleClick={handleClick}\n            isNoteActive={activeNoteIndex === index}\n            index={index}\n            bigIcon={copy.bigIcon}\n            cardBgColor={copy.cardBgColor}\n            cardBorderColor={copy.cardBorderColor}\n          />\n        ))}\n      </div>\n      <div className=\"mt-[24px] hidden l:block\">\n        <Swiper\n          spaceBetween={16}\n          slidesPerView={2}\n          slidesPerGroup={2}\n          grid={{\n            rows: 2,\n            fill: 'row',\n          }}\n          breakpoints={{\n            768: {\n              slidesPerView: 3,\n              slidesPerGroup: 3,\n            },\n          }}\n          wrapperClass=\"!items-stretch\"\n          modules={[Grid, Pagination]}\n          pagination={{\n            clickable: true,\n            el: '#benefits-pagination',\n            renderBullet(index, className) {\n              return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>\n              </div>`\n            },\n          }}\n        >\n          {copy.benefits.map((item, index) => (\n            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>\n              <BenefitItem\n                item={item}\n                handleClick={handleClick}\n                isNoteActive={activeNoteIndex === index}\n                index={index}\n                bigIcon={copy.bigIcon}\n                cardBgColor={copy.cardBgColor}\n                cardBorderColor={copy.cardBorderColor}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div\n          id=\"benefits-pagination\"\n          className=\"mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] \n          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full\"\n        ></div>\n      </div>\n\n      {activeNoteIndex && (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          className=\"fixed inset-0 z-10\"\n          onClick={() => setActiveNoteIndex(null)}\n          onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}\n        />\n      )}\n    </Container>\n  )\n}\n"],
+  "mappings": "AAgDM,cAAAA,EAeA,QAAAC,MAfA,oBAhDN,MAAO,aACP,MAAO,kBACP,MAAO,wBAEP,OAAS,aAAAC,EAAW,WAAAC,MAAe,wBACnC,OAAS,YAAAC,MAAgB,QACzB,OAAS,QAAAC,EAAM,cAAAC,MAAkB,iBACjC,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,OAAOC,MAA2C,gBAClD,OAAS,qBAAAC,MAAyB,sBAClC,OAAS,WAAAC,EAAS,cAAcC,MAAU,gBAUnC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,GAAAC,CAAG,IAAkD,CAC3F,KAAM,CAACC,EAAiBC,CAAkB,EAAIb,EAAwB,IAAI,EACpE,CAAE,QAAAc,EAAS,IAAAC,CAAI,EAAIT,EAAkB,EACrCU,EAAc,CAAC,CAAE,KAAAC,EAAM,MAAAC,CAAM,IAAgD,CACjFX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,qBAAsBO,GAAS,UAAY,SAAW,aACtD,iBAAkB,CAChB,WAAYC,EAAI,UAChB,SAAUL,EAAK,MACf,YAAaO,EAAK,KAClB,KAAM,EACR,CACF,CAAC,EACGL,IAAoBM,EACtBL,EAAmB,IAAI,GAEvBA,EAAmBK,CAAK,EACxB,WAAW,IAAM,CACfL,EAAmB,IAAI,CACzB,EAAG,GAAI,EAEX,EAEA,OACEhB,EAACC,EAAA,CAAU,GAAIa,EAAI,UAAU,uBAC3B,UAAAf,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAK,IAAI,KAAMW,GAAM,MAAO,EAC7Cd,EAAC,OAAI,UAAU,+DACZ,SAAAc,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACS,EAAA,CAEC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,iBAPjBQ,CAQP,CACD,EACH,EACArB,EAAC,OAAI,UAAU,2BACb,UAAAD,EAACO,EAAA,CACC,aAAc,GACd,cAAe,EACf,eAAgB,EAChB,KAAM,CACJ,KAAM,EACN,KAAM,KACR,EACA,YAAa,CACX,IAAK,CACH,cAAe,EACf,eAAgB,CAClB,CACF,EACA,aAAa,iBACb,QAAS,CAACF,EAAMC,CAAU,EAC1B,WAAY,CACV,UAAW,GACX,GAAI,uBACJ,aAAagB,EAAOC,EAAW,CAC7B,MAAO,eAAeA,CAAS;AAAA,qBAEjC,CACF,EAEC,SAAAT,EAAK,SAAS,IAAI,CAACO,EAAMC,IACxBtB,EAACQ,EAAA,CAAwB,UAAWI,EAAG,gBAAiBI,IAAoBM,GAAS,UAAU,EAC7F,SAAAtB,EAACS,EAAA,CACC,KAAMY,EACN,YAAaD,EACb,aAAcJ,IAAoBM,EAClC,MAAOA,EACP,QAASR,EAAK,QACd,YAAaA,EAAK,YAClB,gBAAiBA,EAAK,gBACxB,GATgBQ,CAUlB,CACD,EACH,EACAtB,EAAC,OACC,GAAG,sBACH,UAAU;AAAA,mGAEX,GACH,EAECgB,GACChB,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAU,qBACV,QAAS,IAAMiB,EAAmB,IAAI,EACtC,UAAWO,GAAKA,EAAE,MAAQ,UAAYP,EAAmB,IAAI,EAC/D,GAEJ,CAEJ",
   "names": ["jsx", "jsxs", "Container", "Heading", "useState", "Grid", "Pagination", "Swiper", "SwiperSlide", "BenefitItem", "useCreditsContext", "gaTrack", "cn", "CreditsBenefits", "copy", "id", "activeNoteIndex", "setActiveNoteIndex", "profile", "gtm", "handleClick", "item", "index", "className", "e"]
 }

package/dist/esm/components/credits/creditsCash/CreditsCash.js

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as k}from"react/jsx-runtime";import{Container as C,Heading as g}from"@anker-in/headless-ui";import{useMemo as x,useState as b}from"react";import h from"./RedeemableItem";import y from"../context/hooks/useRedeemableList";import v from"../modal/rulesModal";import{useProductsByHandles as N}from"@anker-in/lib";import{classNames as I}from"@anker-in/lib";import{useCreditsContext as R}from"../context/provider";const q=({copy:s,id:c})=>{const[n,o]=b(),{redeemableList:d}=y(),{pageCommon:p}=R(),u=[],{data:m}=N({handles:s?.list?.map(e=>e.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:u}}),f=x(()=>m?.map(e=>{const r=s.list.find(i=>i.products?.[0]?.handle===e.handle),t=d.find(i=>i.id?.toString()===r?.redeemId?.toString()),l=e.variants?.find(i=>i.sku===r?.products?.[0]?.sku)||e.variants?.[0];return!t||!l?null:{product:e,productVariant:l,alpcData:{id:t?.id,consumeCredits:t?.consume_credits,remainingInventory:t?.remaining_inventory,isLimited:t?.is_limited,consumeType:t?.consume_type,title:t?.name,desc:t?.note},config:r}}).filter(Boolean),[m,s.list,d]);return k(C,{id:c,className:I("bg-[#F5F5F5]"),children:[a(g,{as:"h2",size:"4",html:s.title}),a("div",{className:"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3",children:f?.map((e,r)=>a(h,{copy:s,itemData:e,setRules:o,currencyCode:m?.[0]?.price.currencyCode||"USD"},r))}),n&&a(v,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:n.length>0,onClose:()=>o([]),titleClassName:"border-b-transparent h-[56px]",rules:n,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:p?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{q as CreditsCash};
+import{jsx as a,jsxs as k}from"react/jsx-runtime";import{Container as C,Heading as g}from"@anker-in/headless-ui";import{useMemo as x,useState as b}from"react";import h from"./RedeemableItem";import y from"../context/hooks/useRedeemableList";import v from"../modal/rulesModal";import{useProductsByHandles as N}from"@anker-in/lib";import{classNames as I}from"@anker-in/lib";import{useCreditsContext as R}from"../context/provider";const q=({copy:s,id:c})=>{const[n,o]=b(),{redeemableList:d}=y(),{pageCommon:p}=R(),u=[],{data:m}=N({handles:s?.list?.map(e=>e.products?.[0]?.handle)||[],metafieldIdentifiers:{variant:u}}),f=x(()=>m?.map(e=>{const r=(s.list||[]).find(i=>i.products?.[0]?.handle===e.handle),t=d.find(i=>i.id?.toString()===r?.redeemId?.toString()),l=e.variants?.find(i=>i.sku===r?.products?.[0]?.sku)||e.variants?.[0];return!t||!l?null:{product:e,productVariant:l,alpcData:{id:t?.id,consumeCredits:t?.consume_credits,remainingInventory:t?.remaining_inventory,isLimited:t?.is_limited,consumeType:t?.consume_type,title:t?.name,desc:t?.note},config:r}}).filter(Boolean),[m,s.list,d]);return k(C,{id:c,className:I("bg-[#F5F5F5]"),children:[a(g,{as:"h2",size:"4",html:s.title}),a("div",{className:"relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3",children:f?.map((e,r)=>a(h,{copy:s,itemData:e,setRules:o,currencyCode:m?.[0]?.price.currencyCode||"USD"},r))}),n&&a(v,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:n.length>0,onClose:()=>o([]),titleClassName:"border-b-transparent h-[56px]",rules:n,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:p?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{q as CreditsCash};
 //# sourceMappingURL=CreditsCash.js.map