npm - @anker-in/campaign-ui - Versions diffs - 0.2.11-beta.3 → 0.2.11-beta.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

package/dist/cjs/components/credits/creditsMemberPrice/MemberPriceItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var k=(e,r)=>{for(var i in r)d(e,i,{get:r[i],enumerable:!0})},A=(e,r,i,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of V(r))!M.call(e,a)&&a!==i&&d(e,a,{get:()=>r[a],enumerable:!(c=y(r,a))||c.enumerable});return e};var I=e=>A(d({},"__esModule",{value:!0}),e);var $={};k($,{default:()=>B});module.exports=I($);var t=require("react/jsx-runtime"),l=require("@anker-in/headless-ui"),p=require("react"),n=require("../context/utils"),o=require("@anker-in/lib"),g=require("../context/provider"),f=require("../../../constants");function S({itemData:e,copy:r,className:i}){const{brand:c,locale:a}=(0,o.useHeadlessContext)(),{profile:s,openSignUpPopup:b}=(0,g.useCreditsContext)(),v=f.ROUNDED_BRANDS.includes(c),{trigger:N,isMutating:x}=(0,o.useBuyNow)({},{throwOnError:!0}),u=(0,p.useMemo)(()=>e.productVariant?.availableForSale,[e.productVariant?.availableForSale]),h=(0,p.useMemo)(()=>!!s,[s]),P=()=>{const m=(0,n.extractVariantId)(e.productVariant?.id),w=m?`/products/${e.product.handle}?variant=${m}`:`/products/${e.product.handle}`;window.location.href=w},C=()=>{if(!h){b();return}N({customAttributes:[{key:"_member_type",value:String(s?.memberType||0)}],lineItems:[{variant:e.productVariant,quantity:1}]})};return(0,t.jsxs)("div",{className:(0,o.classNames)("relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]",!v&&"rounded-none md:rounded-none",i),children:[r.memberPriceImg&&(0,t.jsx)(l.Picture,{className:"absolute left-[24px] top-[16px] h-[24px] w-auto",imgClassName:"!h-full object-contain",source:r.memberPriceImg.url,alt:r.memberPriceImg.alt||"Member Price"}),(0,t.jsx)("a",{href:(0,n.extractVariantId)(e.productVariant?.id)?`/products/${e.product.handle}?variant=${(0,n.extractVariantId)(e.productVariant?.id)}`:`/products/${e.product.handle}`,className:(0,o.classNames)("relative mx-auto size-[138px]"),children:(0,t.jsx)(l.Picture,{className:"mx-auto size-full",imgClassName:"object-contain",source:e?.productVariant?.metafields?.global?.transparentImg||e?.config?.image?.url||e?.productVariant?.image?.url})}),(0,t.jsxs)("div",{className:(0,o.classNames)("mt-[10px] xl:mt-[8px] w-full"),children:[(0,t.jsx)(l.Text,{html:e?.product?.title,title:e?.product?.title,className:"line-clamp-2 text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]"}),(0,t.jsxs)("div",{className:"mt-[16px] flex flex-col gap-[8px]",children:[(0,t.jsx)(l.Text,{html:r.memberPriceLabel,className:(0,o.classNames)("text-brand-color-0 text-[16px] l-xl:text-[14px] l:text-[12px] w-fit font-bold leading-[1.4] tracking-[-0.28px]",c==="ankersolix"&&"leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent"),as:"p"}),(0,t.jsxs)("div",{className:"flex items-center gap-[4px]",children:[(0,t.jsx)(l.Text,{html:(0,n.formatPrice)({amount:e.memberPrice,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:a}),className:"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]",as:"span"}),(0,t.jsx)(l.Text,{html:(0,n.formatPrice)({amount:e.originalPrice,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:a}),className:"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through",as:"span"})]}),(0,t.jsxs)("div",{className:"flex w-full gap-[8px] l:flex-col",children:[(0,t.jsx)(l.Button,{variant:"secondary",className:"flex-1 md:w-full",size:"lg",onClick:P,disabled:!u,children:r.learnMoreText}),(0,t.jsx)(l.Button,{variant:"primary",className:"flex-1 md:w-full",size:"lg",onClick:C,disabled:!u||x,loading:x,children:r.shopNowText})]})]})]})]})}var B=S;
+"use strict";var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var l in t)g(e,l,{get:t[l],enumerable:!0})},E=(e,t,l,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of M(t))!z.call(e,i)&&i!==l&&g(e,i,{get:()=>t[i],enumerable:!(u=I(t,i))||u.enumerable});return e};var F=e=>E(g({},"__esModule",{value:!0}),e);var q={};L(q,{default:()=>U});module.exports=F(q);var r=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),s=require("react"),c=require("../context/utils"),o=require("@anker-in/lib"),w=require("../context/provider"),P=require("../../../constants");function O({itemData:e,copy:t,className:l}){const{brand:u,locale:i}=(0,o.useHeadlessContext)(),{profile:p,openSignUpPopup:_,cartConfig:m}=(0,w.useCreditsContext)(),T=P.ROUNDED_BRANDS.includes(u),{trigger:V,isMutating:b}=(0,o.useBuyNow)({},{throwOnError:!0}),[v,y]=(0,s.useState)(!1),C=(0,s.useMemo)(()=>e.productVariant?.availableForSale,[e.productVariant?.availableForSale]),k=(0,s.useMemo)(()=>!!p,[p]),d=(0,s.useMemo)(()=>{try{const a=e.productVariant?.metafields?.__discountCodeApp?.data;if(!a)return;const f=a;if(!Array.isArray(f)||f.length===0)return;const N=new Date;return f.find(x=>{const h=x.starts_at?new Date(x.starts_at):null,A=x.ends_at?new Date(x.ends_at):null;return!(h&&h>N||A&&A<N)})?.title}catch(a){console.error("Failed to get discount code:",a);return}},[e.productVariant?.metafields]),S=async()=>{if(!m?.addToCart){console.warn("cartConfig.addToCart is required");return}try{y(!0);const a=[];d&&a.push({key:"_member_price",value:JSON.stringify({code:d})}),await m.addToCart({variantList:[{variant:e.productVariant,quantity:1,attributes:a.length>0?a:void 0}],cartAttributes:{_member_type:String(p?.memberType||0)},discountCodes:d?[d]:void 0})}catch(a){console.error("Add to cart failed:",a)}finally{y(!1)}},B=()=>{if(!k){_();return}const a=[];d&&a.push({key:"_member_price",value:JSON.stringify({code:d})}),V({customAttributes:[{key:"_member_type",value:String(p?.memberType||0)}],lineItems:[{variant:e.productVariant,quantity:1,attributes:a.length>0?a:void 0}]})};return(0,r.jsxs)("div",{className:(0,o.classNames)("relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]",!T&&"rounded-none md:rounded-none",t.badgeLabel&&"pt-[48px] l:pt-[44px]",l),children:[t.badgeLabel&&(0,r.jsx)(n.Badge,{className:"absolute left-[24px] !bg-gradient-brand l:left-[16px] top-[16px] z-10",size:"lg",variant:"promotional",promotionalType:"regular-member",children:t.badgeLabel}),(0,r.jsx)("a",{href:(0,c.extractVariantId)(e.productVariant?.id)?`/products/${e.product.handle}?variant=${(0,c.extractVariantId)(e.productVariant?.id)}`:`/products/${e.product.handle}`,className:(0,o.classNames)("relative mx-auto size-[138px]"),children:(0,r.jsx)(n.Picture,{className:"mx-auto size-full",imgClassName:"object-contain",source:e?.productVariant?.metafields?.global?.transparentImg||e?.config?.image?.url||e?.productVariant?.image?.url})}),(0,r.jsxs)("div",{className:(0,o.classNames)("mt-[10px] xl:mt-[8px] w-full"),children:[(0,r.jsx)(n.Text,{html:e?.product?.title,title:e?.product?.title,className:"line-clamp-2 text-[24px] min-h-[58px] l-xxl:min-h-[48px] l:min-h-[38px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]"}),(0,r.jsxs)("div",{className:"mt-[24px] l:mt-[12px] flex flex-col gap-[8px] l:gap-0",children:[(0,r.jsx)(n.Text,{html:t.memberPriceLabel,className:(0,o.classNames)("text-brand-color-0 text-[16px] l-xl:text-[14px] l:text-[12px] w-fit font-bold leading-[1.4] tracking-[-0.28px]",u==="ankersolix"&&"leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent"),as:"p"}),(0,r.jsxs)("div",{className:"flex items-center gap-[4px]",children:[(0,r.jsx)(n.Text,{html:(0,c.formatPrice)({amount:e.memberPrice,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:i}),className:"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]",as:"span"}),(0,r.jsx)(n.Text,{html:(0,c.formatPrice)({amount:e.originalPrice,currencyCode:e?.productVariant?.price.currencyCode||"USD",locale:i}),className:"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through",as:"span"})]}),(0,r.jsxs)("div",{className:"flex w-full mt-[8px] gap-[8px] l:flex-col",children:[(0,r.jsx)(n.Button,{variant:"secondary",className:"flex-1 md:w-full",size:"lg",onClick:S,disabled:!C||!m?.addToCart||v,loading:v,children:t.addToCart}),(0,r.jsx)(n.Button,{variant:"primary",className:"flex-1 md:w-full",size:"lg",onClick:B,disabled:!C||b,loading:b,children:t.shopNowText})]})]})]})]})}var U=O;
 //# sourceMappingURL=MemberPriceItem.js.map

package/dist/cjs/components/credits/creditsMemberPrice/MemberPriceItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsMemberPrice/MemberPriceItem.tsx"],
-  "sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo } from 'react'\n\nimport { CreditsMemberPriceCopy, MemberPriceProduct } from './type'\nimport { formatPrice, extractVariantId } from '../context/utils'\nimport { classNames as cn, useHeadlessContext, useBuyNow } from '@anker-in/lib'\nimport { useCreditsContext } from '../context/provider'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nfunction MemberPriceItem({\n  itemData,\n  copy,\n  className,\n}: {\n  itemData: MemberPriceProduct\n  copy: CreditsMemberPriceCopy['memberPriceTab']\n  className?: string\n}) {\n  const { brand, locale } = useHeadlessContext()\n  const { profile, openSignUpPopup } = useCreditsContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u4F7F\u7528 buyNow hook \u6765\u5904\u7406\u7ED3\u7B97\n  const { trigger: buyNow, isMutating: isBuying } = useBuyNow({}, { throwOnError: true })\n\n  const isAvailable = useMemo(() => {\n    return itemData.productVariant?.availableForSale\n  }, [itemData.productVariant?.availableForSale])\n\n  const isLogin = useMemo(() => {\n    return !!profile\n  }, [profile])\n\n  // Learn More \u6309\u94AE\u70B9\u51FB - \u8DF3\u8F6C\u5230\u4EA7\u54C1\u8BE6\u60C5\u9875\n  const handleLearnMore = () => {\n    const variantId = extractVariantId(itemData.productVariant?.id)\n    const url = variantId\n      ? `/products/${itemData.product.handle}?variant=${variantId}`\n      : `/products/${itemData.product.handle}`\n    window.location.href = url\n  }\n\n  // Shop Now \u6309\u94AE\u70B9\u51FB - \u68C0\u67E5\u767B\u5F55\u72B6\u6001\u540E\u4F7F\u7528 buyNow \u8FDB\u884C\u7ED3\u7B97\n  const handleShopNow = () => {\n    // \u5982\u679C\u672A\u767B\u5F55\uFF0C\u5F39\u51FA\u767B\u5F55\u5F39\u7A97\n    if (!isLogin) {\n      openSignUpPopup()\n      return\n    }\n\n    // \u5DF2\u767B\u5F55\uFF0C\u6267\u884C\u8D2D\u4E70\n    buyNow({\n      customAttributes: [\n        {\n          key: '_member_type',\n          value: String(profile?.memberType || 0),\n        },\n      ],\n      lineItems: [\n        {\n          variant: itemData.productVariant,\n          quantity: 1,\n        },\n      ],\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]',\n        !rounded && 'rounded-none md:rounded-none',\n        className\n      )}\n    >\n      {/* Member \u6807\u7B7E\u56FE\u7247 */}\n      {copy.memberPriceImg && (\n        <Picture\n          className=\"absolute left-[24px] top-[16px] h-[24px] w-auto\"\n          imgClassName=\"!h-full object-contain\"\n          source={copy.memberPriceImg.url}\n          alt={copy.memberPriceImg.alt || 'Member Price'}\n        />\n      )}\n\n      {/* \u4EA7\u54C1\u56FE\u7247 - \u4F18\u5148\u4F7F\u7528\u4EA7\u54C1\u7684 metafields \u900F\u660E\u56FE */}\n      <a\n        href={\n          extractVariantId(itemData.productVariant?.id)\n            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`\n            : `/products/${itemData.product.handle}`\n        }\n        className={cn('relative mx-auto size-[138px]')}\n      >\n        <Picture\n          className=\"mx-auto size-full\"\n          imgClassName=\"object-contain\"\n          source={\n            itemData?.productVariant?.metafields?.global?.transparentImg ||\n            itemData?.config?.image?.url ||\n            itemData?.productVariant?.image?.url\n          }\n        ></Picture>\n      </a>\n\n      {/* \u4EA7\u54C1\u4FE1\u606F */}\n      <div className={cn('mt-[10px] xl:mt-[8px] w-full')}>\n        {/* \u4EA7\u54C1\u6807\u9898 - \u4F7F\u7528\u4EA7\u54C1\u7684\u771F\u5B9E\u6807\u9898 */}\n        <Text\n          html={itemData?.product?.title}\n          title={itemData?.product?.title}\n          className=\"line-clamp-2 text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]\"\n        />\n\n        {/* \u4EF7\u683C\u4FE1\u606F */}\n        <div className=\"mt-[16px] flex flex-col gap-[8px]\">\n          {/* Member Price \u6807\u7B7E - \u4F7F\u7528 text-brand-color-1 */}\n          <Text\n            html={copy.memberPriceLabel}\n            className={cn(\n              'text-brand-color-0 text-[16px] l-xl:text-[14px] l:text-[12px] w-fit font-bold leading-[1.4] tracking-[-0.28px]',\n              brand === 'ankersolix' &&\n                'leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n            )}\n            as=\"p\"\n          />\n\n          {/* \u4F1A\u5458\u4EF7\u548C\u539F\u4EF7\u5728\u540C\u4E00\u884C */}\n          <div className=\"flex items-center gap-[4px]\">\n            <Text\n              html={formatPrice({\n                amount: itemData.memberPrice,\n                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n                locale: locale,\n              })}\n              className=\"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]\"\n              as=\"span\"\n            />\n            <Text\n              html={formatPrice({\n                amount: itemData.originalPrice,\n                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n                locale: locale,\n              })}\n              className=\"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through\"\n              as=\"span\"\n            />\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"flex w-full gap-[8px] l:flex-col\">\n            {/* Learn More \u6309\u94AE */}\n            <Button\n              variant=\"secondary\"\n              className=\"flex-1 md:w-full\"\n              size=\"lg\"\n              onClick={handleLearnMore}\n              disabled={!isAvailable}\n            >\n              {copy.learnMoreText}\n            </Button>\n\n            {/* Shop Now \u6309\u94AE */}\n            <Button\n              variant=\"primary\"\n              className=\"flex-1 md:w-full\"\n              size=\"lg\"\n              onClick={handleShopNow}\n              disabled={!isAvailable || isBuying}\n              loading={isBuying}\n            >\n              {copy.shopNowText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default MemberPriceItem\n"],
-  "mappings": "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",
-  "names": ["MemberPriceItem_exports", "__export", "MemberPriceItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_utils", "import_lib", "import_provider", "import_constants", "MemberPriceItem", "itemData", "copy", "className", "brand", "locale", "profile", "openSignUpPopup", "rounded", "buyNow", "isBuying", "isAvailable", "isLogin", "handleLearnMore", "variantId", "url", "handleShopNow", "cn"]
+  "sourcesContent": ["import { Button, Text, Picture, Badge } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsMemberPriceCopy, MemberPriceProduct } from './type'\nimport { formatPrice, extractVariantId } from '../context/utils'\nimport { classNames as cn, useHeadlessContext, useBuyNow } from '@anker-in/lib'\nimport { useCreditsContext } from '../context/provider'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nfunction MemberPriceItem({\n  itemData,\n  copy,\n  className,\n}: {\n  itemData: MemberPriceProduct\n  copy: CreditsMemberPriceCopy['memberPriceTab']\n  className?: string\n}) {\n  const { brand, locale } = useHeadlessContext()\n  const { profile, openSignUpPopup, cartConfig } = useCreditsContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u4F7F\u7528 buyNow hook \u6765\u5904\u7406\u7ED3\u7B97\n  const { trigger: buyNow, isMutating: isBuying } = useBuyNow({}, { throwOnError: true })\n\n  // \u672C\u5730 loading \u72B6\u6001\uFF0C\u907F\u514D\u5168\u5C40 loading \u5F71\u54CD\u6240\u6709\u5361\u7247\n  const [isAddingToCart, setIsAddingToCart] = useState(false)\n\n  const isAvailable = useMemo(() => {\n    return itemData.productVariant?.availableForSale\n  }, [itemData.productVariant?.availableForSale])\n\n  const isLogin = useMemo(() => {\n    return !!profile\n  }, [profile])\n\n  // \u4ECE variant metafields \u4E2D\u83B7\u53D6 coupon code\n  const getCouponCode = useMemo(() => {\n    try {\n      const discountData = itemData.productVariant?.metafields?.__discountCodeApp?.data\n      if (!discountData) return undefined\n\n      // discountData \u5DF2\u7ECF\u662F\u5BF9\u8C61\uFF0C\u4E0D\u9700\u8981 JSON.parse\n      const discounts = discountData\n      if (!Array.isArray(discounts) || discounts.length === 0) return undefined\n\n      // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u6709\u6548\u7684 coupon\uFF08\u68C0\u67E5\u65F6\u95F4\u8303\u56F4\uFF09\n      const now = new Date()\n      const validDiscount = discounts.find((discount: any) => {\n        const startsAt = discount.starts_at ? new Date(discount.starts_at) : null\n        const endsAt = discount.ends_at ? new Date(discount.ends_at) : null\n\n        // \u68C0\u67E5 coupon \u662F\u5426\u5728\u6709\u6548\u671F\u5185\n        if (startsAt && startsAt > now) return false\n        if (endsAt && endsAt < now) return false\n\n        return true\n      })\n\n      return validDiscount?.title\n    } catch (error) {\n      console.error('Failed to get discount code:', error)\n      return undefined\n    }\n  }, [itemData.productVariant?.metafields])\n\n  // Add to Cart \u6309\u94AE\u70B9\u51FB - \u8C03\u7528\u52A0\u8D2D\u65B9\u6CD5\n  const handleAddToCart = async () => {\n    if (!cartConfig?.addToCart) {\n      console.warn('cartConfig.addToCart is required')\n      return\n    }\n\n    try {\n      setIsAddingToCart(true)\n\n      // \u6784\u5EFA lineItem attributes\n      const lineItemAttributes: Array<{ key: string; value: string }> = []\n      if (getCouponCode) {\n        lineItemAttributes.push({\n          key: '_member_price',\n          value: JSON.stringify({ code: getCouponCode }),\n        })\n      }\n\n      await cartConfig.addToCart({\n        variantList: [\n          {\n            variant: itemData.productVariant,\n            quantity: 1,\n            attributes: lineItemAttributes.length > 0 ? lineItemAttributes : undefined,\n          },\n        ],\n        cartAttributes: {\n          _member_type: String(profile?.memberType || 0),\n        },\n        discountCodes: getCouponCode ? [getCouponCode] : undefined,\n      })\n    } catch (error) {\n      console.error('Add to cart failed:', error)\n    } finally {\n      setIsAddingToCart(false)\n    }\n  }\n\n  // Shop Now \u6309\u94AE\u70B9\u51FB - \u68C0\u67E5\u767B\u5F55\u72B6\u6001\u540E\u4F7F\u7528 buyNow \u8FDB\u884C\u7ED3\u7B97\n  const handleShopNow = () => {\n    // \u5982\u679C\u672A\u767B\u5F55\uFF0C\u5F39\u51FA\u767B\u5F55\u5F39\u7A97\n    if (!isLogin) {\n      openSignUpPopup()\n      return\n    }\n\n    // \u6784\u5EFA lineItem attributes\n    const lineItemAttributes: Array<{ key: string; value: string }> = []\n    if (getCouponCode) {\n      lineItemAttributes.push({\n        key: '_member_price',\n        value: JSON.stringify({ code: getCouponCode }),\n      })\n    }\n\n    // \u5DF2\u767B\u5F55\uFF0C\u6267\u884C\u8D2D\u4E70\n    buyNow({\n      customAttributes: [\n        {\n          key: '_member_type',\n          value: String(profile?.memberType || 0),\n        },\n      ],\n      lineItems: [\n        {\n          variant: itemData.productVariant,\n          quantity: 1,\n          attributes: lineItemAttributes.length > 0 ? lineItemAttributes : undefined,\n        },\n      ],\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]',\n        !rounded && 'rounded-none md:rounded-none',\n        copy.badgeLabel && 'pt-[48px] l:pt-[44px]',\n        className\n      )}\n    >\n      {/* Member \u6807\u7B7E Badge */}\n      {copy.badgeLabel && (\n        <Badge\n          className=\"absolute left-[24px] !bg-gradient-brand l:left-[16px] top-[16px] z-10\"\n          size=\"lg\"\n          variant=\"promotional\"\n          promotionalType=\"regular-member\"\n        >\n          {copy.badgeLabel}\n        </Badge>\n      )}\n\n      {/* \u4EA7\u54C1\u56FE\u7247 - \u4F18\u5148\u4F7F\u7528\u4EA7\u54C1\u7684 metafields \u900F\u660E\u56FE */}\n      <a\n        href={\n          extractVariantId(itemData.productVariant?.id)\n            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`\n            : `/products/${itemData.product.handle}`\n        }\n        className={cn('relative mx-auto size-[138px]')}\n      >\n        <Picture\n          className=\"mx-auto size-full\"\n          imgClassName=\"object-contain\"\n          source={\n            itemData?.productVariant?.metafields?.global?.transparentImg ||\n            itemData?.config?.image?.url ||\n            itemData?.productVariant?.image?.url\n          }\n        ></Picture>\n      </a>\n\n      {/* \u4EA7\u54C1\u4FE1\u606F */}\n      <div className={cn('mt-[10px] xl:mt-[8px] w-full')}>\n        {/* \u4EA7\u54C1\u6807\u9898 - \u4F7F\u7528\u4EA7\u54C1\u7684\u771F\u5B9E\u6807\u9898 */}\n        <Text\n          html={itemData?.product?.title}\n          title={itemData?.product?.title}\n          className=\"line-clamp-2 text-[24px] min-h-[58px] l-xxl:min-h-[48px] l:min-h-[38px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]\"\n        />\n\n        {/* \u4EF7\u683C\u4FE1\u606F */}\n        <div className=\"mt-[24px] l:mt-[12px] flex flex-col gap-[8px] l:gap-0\">\n          {/* Member Price \u6807\u7B7E - \u4F7F\u7528 text-brand-color-1 */}\n          <Text\n            html={copy.memberPriceLabel}\n            className={cn(\n              'text-brand-color-0 text-[16px] l-xl:text-[14px] l:text-[12px] w-fit font-bold leading-[1.4] tracking-[-0.28px]',\n              brand === 'ankersolix' &&\n                'leading-none bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n            )}\n            as=\"p\"\n          />\n\n          {/* \u4F1A\u5458\u4EF7\u548C\u539F\u4EF7\u5728\u540C\u4E00\u884C */}\n          <div className=\"flex items-center gap-[4px]\">\n            <Text\n              html={formatPrice({\n                amount: itemData.memberPrice,\n                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n                locale: locale,\n              })}\n              className=\"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#080A0F]\"\n              as=\"span\"\n            />\n            <Text\n              html={formatPrice({\n                amount: itemData.originalPrice,\n                currencyCode: itemData?.productVariant?.price.currencyCode || 'USD',\n                locale: locale,\n              })}\n              className=\"text-[24px] l-xxl:text-[20px] l:text-[16px] font-bold leading-[1.2] tracking-[-0.8px] text-[#4A4C56] line-through\"\n              as=\"span\"\n            />\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"flex w-full mt-[8px] gap-[8px] l:flex-col\">\n            {/* Add to Cart \u6309\u94AE */}\n            <Button\n              variant=\"secondary\"\n              className=\"flex-1 md:w-full\"\n              size=\"lg\"\n              onClick={handleAddToCart}\n              disabled={!isAvailable || !cartConfig?.addToCart || isAddingToCart}\n              loading={isAddingToCart}\n            >\n              {copy.addToCart}\n            </Button>\n\n            {/* Shop Now \u6309\u94AE */}\n            <Button\n              variant=\"primary\"\n              className=\"flex-1 md:w-full\"\n              size=\"lg\"\n              onClick={handleShopNow}\n              disabled={!isAvailable || isBuying}\n              loading={isBuying}\n            >\n              {copy.shopNowText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default MemberPriceItem\n"],
+  "mappings": "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",
+  "names": ["MemberPriceItem_exports", "__export", "MemberPriceItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_utils", "import_lib", "import_provider", "import_constants", "MemberPriceItem", "itemData", "copy", "className", "brand", "locale", "profile", "openSignUpPopup", "cartConfig", "rounded", "buyNow", "isBuying", "isAddingToCart", "setIsAddingToCart", "isAvailable", "isLogin", "getCouponCode", "discountData", "discounts", "now", "discount", "startsAt", "endsAt", "error", "handleAddToCart", "lineItemAttributes", "handleShopNow", "cn"]
 }

package/dist/cjs/components/credits/creditsMemberPrice/type.d.ts CHANGED Viewed

@@ -33,13 +33,10 @@ export type CreditsMemberPriceCopy = {
     tabs: TabConfig[];
     memberPriceTab: {
         memberPriceRuleId: string;
-        learnMoreText: string;
+        addToCart: string;
         shopNowText: string;
         memberPriceLabel: string;
-        memberPriceImg?: {
-            url: string;
-            alt?: string;
-        };
+        badgeLabel?: string;
     };
     redeemTab: {
         list: (RedeemableItemConfig & {
@@ -52,6 +49,7 @@ export type CreditsMemberPriceCopy = {
         unlockRewards: string;
         btnRedeem: string;
         off: string;
+        badgeLabel?: string;
     };
 };
 export type MemberPriceProduct = {

package/dist/cjs/components/credits/creditsMemberPrice/type.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var b=(r,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!o.call(r,t)&&t!==n&&m(r,t,{get:()=>e[t],enumerable:!(i=g(e,t))||i.enumerable});return r};var c=r=>b(m({},"__esModule",{value:!0}),r);var l={};module.exports=c(l);
+"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var o=(r,e,m,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!b.call(r,t)&&t!==m&&n(r,t,{get:()=>e[t],enumerable:!(i=g(e,t))||i.enumerable});return r};var a=r=>o(n({},"__esModule",{value:!0}),r);var d={};module.exports=a(d);
 //# sourceMappingURL=type.js.map

package/dist/cjs/components/credits/creditsMemberPrice/type.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsMemberPrice/type.ts"],
-  "sourcesContent": ["import { Product, ProductVariant } from '@anker-in/lib'\n\n// \u4F1A\u5458\u4EF7\u4EA7\u54C1\u914D\u7F6E\ntype MemberPriceItemConfig = {\n  title: string\n  image: {\n    url: string\n  }\n  mobileImage: {\n    url: string\n  }\n  // \u4F1A\u5458\u4EF7\u89C4\u5219 ID\uFF0C\u7528\u4E8E\u67E5\u627E\u6298\u6263\u914D\u7F6E\n  memberPriceRuleId: string\n  // \u9884\u7559\uFF1A\u4F1A\u5458\u4EF7\u8BA1\u7B97\u903B\u8F91\u76F8\u5173\u5B57\u6BB5\n  memberPrice?: number\n  // \u9884\u7559\uFF1A\u5176\u4ED6\u914D\u7F6E\u5B57\u6BB5\n}\n\n// \u79EF\u5206\u5151\u6362\u4EA7\u54C1\u914D\u7F6E\uFF08\u590D\u7528 creditsCash \u7684\u914D\u7F6E\uFF09\ntype RedeemableItemConfig = {\n  title: string\n  desc: string\n  price: number\n  credit: string\n  rules: string\n  image: {\n    url: string\n  }\n  mobileImage: {\n    url: string\n  }\n  redeemId: number\n}\n\n// Tab \u914D\u7F6E\nexport type TabConfig = {\n  label: string\n  type: 'memberPrice' | 'redeem'\n}\n\n// \u4F1A\u5458\u4EF7\u6A21\u5757\u6574\u4F53\u914D\u7F6E\nexport type CreditsMemberPriceCopy = {\n  title: string\n  tabs: TabConfig[]\n  // \u4F1A\u5458\u4EF7 tab \u914D\u7F6E\uFF08\u4EA7\u54C1\u5217\u8868\u548C\u4EF7\u683C\u5B8C\u5168\u4ECE memberPriceDiscount \u83B7\u53D6\uFF09\n  memberPriceTab: {\n    memberPriceRuleId: string // \u6307\u5B9A\u4F7F\u7528\u54EA\u4E2A\u4F1A\u5458\u4EF7\u89C4\u5219\n    learnMoreText: string\n    shopNowText: string\n    memberPriceLabel: string\n    memberPriceImg?: {\n      url: string\n      alt?: string\n    }\n  }\n  // \u79EF\u5206\u5151\u6362 tab \u914D\u7F6E\uFF08\u590D\u7528 creditsCash \u7684\u914D\u7F6E\uFF09\n  redeemTab: {\n    list: (RedeemableItemConfig & {\n      products: { handle: string; sku: string }[]\n    })[]\n    soldOut: string\n    unlockRewards: string\n    btnRedeem: string\n    off: string\n  }\n}\n\n// \u4F1A\u5458\u4EF7\u4EA7\u54C1\u9879\nexport type MemberPriceProduct = {\n  product: Product\n  productVariant: ProductVariant\n  config?: MemberPriceItemConfig\n  memberPrice: number\n  originalPrice: number\n}\n"],
+  "sourcesContent": ["import { Product, ProductVariant } from '@anker-in/lib'\n\n// \u4F1A\u5458\u4EF7\u4EA7\u54C1\u914D\u7F6E\ntype MemberPriceItemConfig = {\n  title: string\n  image: {\n    url: string\n  }\n  mobileImage: {\n    url: string\n  }\n  // \u4F1A\u5458\u4EF7\u89C4\u5219 ID\uFF0C\u7528\u4E8E\u67E5\u627E\u6298\u6263\u914D\u7F6E\n  memberPriceRuleId: string\n  // \u9884\u7559\uFF1A\u4F1A\u5458\u4EF7\u8BA1\u7B97\u903B\u8F91\u76F8\u5173\u5B57\u6BB5\n  memberPrice?: number\n  // \u9884\u7559\uFF1A\u5176\u4ED6\u914D\u7F6E\u5B57\u6BB5\n}\n\n// \u79EF\u5206\u5151\u6362\u4EA7\u54C1\u914D\u7F6E\uFF08\u590D\u7528 creditsCash \u7684\u914D\u7F6E\uFF09\ntype RedeemableItemConfig = {\n  title: string\n  desc: string\n  price: number\n  credit: string\n  rules: string\n  image: {\n    url: string\n  }\n  mobileImage: {\n    url: string\n  }\n  redeemId: number\n}\n\n// Tab \u914D\u7F6E\nexport type TabConfig = {\n  label: string\n  type: 'memberPrice' | 'redeem'\n}\n\n// \u4F1A\u5458\u4EF7\u6A21\u5757\u6574\u4F53\u914D\u7F6E\nexport type CreditsMemberPriceCopy = {\n  title: string\n  tabs: TabConfig[]\n  // \u4F1A\u5458\u4EF7 tab \u914D\u7F6E\uFF08\u4EA7\u54C1\u5217\u8868\u548C\u4EF7\u683C\u5B8C\u5168\u4ECE memberPriceDiscount \u83B7\u53D6\uFF09\n  memberPriceTab: {\n    memberPriceRuleId: string // \u6307\u5B9A\u4F7F\u7528\u54EA\u4E2A\u4F1A\u5458\u4EF7\u89C4\u5219\n    addToCart: string\n    shopNowText: string\n    memberPriceLabel: string\n    badgeLabel?: string\n  }\n  // \u79EF\u5206\u5151\u6362 tab \u914D\u7F6E\uFF08\u590D\u7528 creditsCash \u7684\u914D\u7F6E\uFF09\n  redeemTab: {\n    list: (RedeemableItemConfig & {\n      products: { handle: string; sku: string }[]\n    })[]\n    soldOut: string\n    unlockRewards: string\n    btnRedeem: string\n    off: string\n    badgeLabel?: string\n  }\n}\n\n// \u4F1A\u5458\u4EF7\u4EA7\u54C1\u9879\nexport type MemberPriceProduct = {\n  product: Product\n  productVariant: ProductVariant\n  config?: MemberPriceItemConfig\n  memberPrice: number\n  originalPrice: number\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["type_exports", "__toCommonJS"]
 }

package/dist/cjs/components/credits/creditsNavigation/CreditsNavigation.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var c in e)v(t,c,{get:e[c],enumerable:!0})},E=(t,e,c,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of I(e))!N.call(t,i)&&i!==c&&v(t,i,{get:()=>e[i],enumerable:!(n=C(e,i))||n.enumerable});return t};var y=t=>E(v({},"__esModule",{value:!0}),t);var R={};k(R,{CreditsNavigation:()=>O});module.exports=y(R);var a=require("react/jsx-runtime"),r=require("react"),b=require("@anker-in/lib"),g=require("@anker-in/headless-ui");const O=({copy:t})=>{const[e,c]=(0,r.useState)(""),n=(0,r.useRef)(null),i=o=>{const l=document.getElementById(o);if(l){const p=l.getBoundingClientRect().top+window.pageYOffset-56;window.scrollTo({top:p,behavior:"smooth"})}},u=(0,r.useCallback)(()=>{n.current&&n.current.disconnect();const o=new Map,l=d=>{d.forEach(s=>{const f=s.target.id;if(!f)return;const x=s.intersectionRect.height,h=s.intersectionRect.width,w=x*h;o.set(f,s.isIntersecting?w:0)});let m=0,p="";o.forEach((s,f)=>{s>m&&(m=s,p=f)}),p&&p!==e&&c(p)};n.current=new IntersectionObserver(l,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1],rootMargin:"-56px 0px 0px 0px"}),t.items.forEach(d=>{const m=document.getElementById(d.targetId);m&&n.current&&n.current.observe(m)})},[t.items,e]);return(0,r.useEffect)(()=>(u(),()=>{n.current&&n.current.disconnect()}),[u]),(0,a.jsx)("nav",{className:(0,b.classNames)("sticky top-0 z-50 bg-white"),children:(0,a.jsx)(g.Container,{asChild:!0,children:(0,a.jsx)("div",{className:(0,b.classNames)("md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]","md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]"),children:(0,a.jsx)("ul",{className:(0,b.classNames)("flex items-end gap-[24px] pt-[16px] md:gap-[16px] md:pr-[16px]"),children:t.items.map((o,l)=>{const d=e===o.targetId;return(0,a.jsx)("li",{className:(0,b.classNames)("md:flex-shrink-0"),children:(0,a.jsx)("button",{onClick:()=>i(o.targetId),className:(0,b.classNames)("pb-[16px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]","transition-all duration-200 relative border-b-4 whitespace-nowrap",d?"text-[#080a0f] border-brand-1":"text-[#4a4c56] hover:text-[#080a0f] border-transparent"),children:o.label})},l)})})})})})};
+"use strict";var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var c in e)v(t,c,{get:e[c],enumerable:!0})},E=(t,e,c,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!N.call(t,r)&&r!==c&&v(t,r,{get:()=>e[r],enumerable:!(n=C(e,r))||n.enumerable});return t};var y=t=>E(v({},"__esModule",{value:!0}),t);var R={};k(R,{CreditsNavigation:()=>O});module.exports=y(R);var a=require("react/jsx-runtime"),o=require("react"),b=require("@anker-in/lib"),u=require("@anker-in/headless-ui");const O=({copy:t})=>{const[e,c]=(0,o.useState)(""),n=(0,o.useRef)(null),r=i=>{const l=document.getElementById(i);if(l){const p=l.getBoundingClientRect().top+window.pageYOffset-56;window.scrollTo({top:p,behavior:"smooth"})}},g=(0,o.useCallback)(()=>{n.current&&n.current.disconnect();const i=new Map,l=d=>{d.forEach(s=>{const f=s.target.id;if(!f)return;const x=s.intersectionRect.height,h=s.intersectionRect.width,w=x*h;i.set(f,s.isIntersecting?w:0)});let m=0,p="";i.forEach((s,f)=>{s>m&&(m=s,p=f)}),p&&p!==e&&c(p)};n.current=new IntersectionObserver(l,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1],rootMargin:"-56px 0px 0px 0px"}),t.items.forEach(d=>{const m=document.getElementById(d.targetId);m&&n.current&&n.current.observe(m)})},[t.items,e]);return(0,o.useEffect)(()=>(g(),()=>{n.current&&n.current.disconnect()}),[g]),(0,a.jsx)("nav",{id:"creditsNavigation",className:(0,b.classNames)("sticky top-0 z-50 bg-white"),children:(0,a.jsx)(u.Container,{asChild:!0,children:(0,a.jsx)("div",{className:(0,b.classNames)("md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]","md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]"),children:(0,a.jsx)("ul",{className:(0,b.classNames)("flex items-end gap-[24px] pt-[16px] md:pt-[12px] md:gap-[16px] md:pr-[16px]"),children:t.items.map((i,l)=>{const d=e===i.targetId;return(0,a.jsx)("li",{className:(0,b.classNames)("md:flex-shrink-0"),children:(0,a.jsx)("button",{onClick:()=>r(i.targetId),className:(0,b.classNames)("pb-[16px] md:pb-[12px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]","transition-all duration-200 relative border-b-4 whitespace-nowrap",d?"text-[#080a0f] border-brand-1":"text-[#4a4c56] hover:text-[#080a0f] border-transparent"),children:i.label})},l)})})})})})};
 //# sourceMappingURL=CreditsNavigation.js.map

package/dist/cjs/components/credits/creditsNavigation/CreditsNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsNavigation/CreditsNavigation.tsx"],
-  "sourcesContent": ["import { useEffect, useState, useRef, useCallback } from 'react'\nimport { classNames as cn } from '@anker-in/lib'\nimport { Container } from '@anker-in/headless-ui'\nimport { CreditsNavigationCopy } from './type'\n\nexport const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) => {\n  const [activeId, setActiveId] = useState<string>('')\n  const observerRef = useRef<IntersectionObserver | null>(null)\n\n  // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u6A21\u5757\n  const scrollToSection = (targetId: string) => {\n    const element = document.getElementById(targetId)\n    if (element) {\n      const navHeight = 56 // \u5BFC\u822A\u680F\u9AD8\u5EA6\n      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset\n      const offsetPosition = elementPosition - navHeight\n\n      window.scrollTo({\n        top: offsetPosition,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  // \u4F7F\u7528 Intersection Observer \u76D1\u542C\u6A21\u5757\u53EF\u89C1\u6027\n  const setupObserver = useCallback(() => {\n    // \u6E05\u7406\u4E4B\u524D\u7684 observer\n    if (observerRef.current) {\n      observerRef.current.disconnect()\n    }\n\n    // \u8BA1\u7B97\u6BCF\u4E2A\u5143\u7D20\u5728\u89C6\u53E3\u4E2D\u7684\u53EF\u89C1\u9762\u79EF\n    const visibilityMap = new Map<string, number>()\n\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach(entry => {\n        const id = entry.target.id\n        if (!id) return\n\n        // \u8BA1\u7B97\u53EF\u89C1\u9762\u79EF\n        const visibleHeight = entry.intersectionRect.height\n        const visibleWidth = entry.intersectionRect.width\n        const visibleArea = visibleHeight * visibleWidth\n\n        visibilityMap.set(id, entry.isIntersecting ? visibleArea : 0)\n      })\n\n      // \u627E\u51FA\u53EF\u89C1\u9762\u79EF\u6700\u5927\u7684\u5143\u7D20\n      let maxArea = 0\n      let maxId = ''\n\n      visibilityMap.forEach((area, id) => {\n        if (area > maxArea) {\n          maxArea = area\n          maxId = id\n        }\n      })\n\n      if (maxId && maxId !== activeId) {\n        setActiveId(maxId)\n      }\n    }\n\n    // \u521B\u5EFA\u65B0\u7684 observer\n    observerRef.current = new IntersectionObserver(observerCallback, {\n      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],\n      rootMargin: '-56px 0px 0px 0px', // \u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n    })\n\n    // \u89C2\u5BDF\u6240\u6709\u76EE\u6807\u5143\u7D20\n    copy.items.forEach(item => {\n      const element = document.getElementById(item.targetId)\n      if (element && observerRef.current) {\n        observerRef.current.observe(element)\n      }\n    })\n  }, [copy.items, activeId])\n\n  useEffect(() => {\n    setupObserver()\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n    }\n  }, [setupObserver])\n\n  return (\n    <nav className={cn('sticky top-0 z-50 bg-white')}>\n      <Container asChild>\n        <div\n          className={cn(\n            'md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]',\n            'md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]'\n          )}\n        >\n          <ul className={cn('flex items-end gap-[24px] pt-[16px] md:gap-[16px] md:pr-[16px]')}>\n            {copy.items.map((item, index) => {\n              const isActive = activeId === item.targetId\n              return (\n                <li key={index} className={cn('md:flex-shrink-0')}>\n                  <button\n                    onClick={() => scrollToSection(item.targetId)}\n                    className={cn(\n                      'pb-[16px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]',\n                      'transition-all duration-200 relative border-b-4 whitespace-nowrap',\n                      isActive\n                        ? 'text-[#080a0f] border-brand-1'\n                        : 'text-[#4a4c56] hover:text-[#080a0f] border-transparent'\n                    )}\n                  >\n                    {item.label}\n                  </button>\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n      </Container>\n    </nav>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAsGkB,IAAAI,EAAA,6BAtGlBC,EAAyD,iBACzDC,EAAiC,yBACjCC,EAA0B,iCAGnB,MAAML,EAAoB,CAAC,CAAE,KAAAM,CAAK,IAAuC,CAC9E,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7CC,KAAc,UAAoC,IAAI,EAGtDC,EAAmBC,GAAqB,CAC5C,MAAMC,EAAU,SAAS,eAAeD,CAAQ,EAChD,GAAIC,EAAS,CAGX,MAAMC,EADkBD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,YAC5B,GAEzC,OAAO,SAAS,CACd,IAAKC,EACL,SAAU,QACZ,CAAC,CACH,CACF,EAGMC,KAAgB,eAAY,IAAM,CAElCL,EAAY,SACdA,EAAY,QAAQ,WAAW,EAIjC,MAAMM,EAAgB,IAAI,IAEpBC,EAAoBC,GAAyC,CACjEA,EAAQ,QAAQC,GAAS,CACvB,MAAMC,EAAKD,EAAM,OAAO,GACxB,GAAI,CAACC,EAAI,OAGT,MAAMC,EAAgBF,EAAM,iBAAiB,OACvCG,EAAeH,EAAM,iBAAiB,MACtCI,EAAcF,EAAgBC,EAEpCN,EAAc,IAAII,EAAID,EAAM,eAAiBI,EAAc,CAAC,CAC9D,CAAC,EAGD,IAAIC,EAAU,EACVC,EAAQ,GAEZT,EAAc,QAAQ,CAACU,EAAMN,IAAO,CAC9BM,EAAOF,IACTA,EAAUE,EACVD,EAAQL,EAEZ,CAAC,EAEGK,GAASA,IAAUjB,GACrBC,EAAYgB,CAAK,CAErB,EAGAf,EAAY,QAAU,IAAI,qBAAqBO,EAAkB,CAC/D,UAAW,CAAC,EAAG,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,CAAC,EAC7D,WAAY,mBACd,CAAC,EAGDV,EAAK,MAAM,QAAQoB,GAAQ,CACzB,MAAMd,EAAU,SAAS,eAAec,EAAK,QAAQ,EACjDd,GAAWH,EAAY,SACzBA,EAAY,QAAQ,QAAQG,CAAO,CAEvC,CAAC,CACH,EAAG,CAACN,EAAK,MAAOC,CAAQ,CAAC,EAEzB,sBAAU,KACRO,EAAc,EAEP,IAAM,CACPL,EAAY,SACdA,EAAY,QAAQ,WAAW,CAEnC,GACC,CAACK,CAAa,CAAC,KAGhB,OAAC,OAAI,aAAW,EAAAa,YAAG,4BAA4B,EAC7C,mBAAC,aAAU,QAAO,GAChB,mBAAC,OACC,aAAW,EAAAA,YACT,qEACA,2GACF,EAEA,mBAAC,MAAG,aAAW,EAAAA,YAAG,gEAAgE,EAC/E,SAAArB,EAAK,MAAM,IAAI,CAACoB,EAAME,IAAU,CAC/B,MAAMC,EAAWtB,IAAamB,EAAK,SACnC,SACE,OAAC,MAAe,aAAW,EAAAC,YAAG,kBAAkB,EAC9C,mBAAC,UACC,QAAS,IAAMjB,EAAgBgB,EAAK,QAAQ,EAC5C,aAAW,EAAAC,YACT,mEACA,oEACAE,EACI,gCACA,wDACN,EAEC,SAAAH,EAAK,MACR,GAZOE,CAaT,CAEJ,CAAC,EACH,EACF,EACF,EACF,CAEJ",
+  "sourcesContent": ["import { useEffect, useState, useRef, useCallback } from 'react'\nimport { classNames as cn } from '@anker-in/lib'\nimport { Container } from '@anker-in/headless-ui'\nimport { CreditsNavigationCopy } from './type'\n\nexport const CreditsNavigation = ({ copy }: { copy: CreditsNavigationCopy }) => {\n  const [activeId, setActiveId] = useState<string>('')\n  const observerRef = useRef<IntersectionObserver | null>(null)\n\n  // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u6A21\u5757\n  const scrollToSection = (targetId: string) => {\n    const element = document.getElementById(targetId)\n    if (element) {\n      const navHeight = 56 // \u5BFC\u822A\u680F\u9AD8\u5EA6\n      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset\n      const offsetPosition = elementPosition - navHeight\n\n      window.scrollTo({\n        top: offsetPosition,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  // \u4F7F\u7528 Intersection Observer \u76D1\u542C\u6A21\u5757\u53EF\u89C1\u6027\n  const setupObserver = useCallback(() => {\n    // \u6E05\u7406\u4E4B\u524D\u7684 observer\n    if (observerRef.current) {\n      observerRef.current.disconnect()\n    }\n\n    // \u8BA1\u7B97\u6BCF\u4E2A\u5143\u7D20\u5728\u89C6\u53E3\u4E2D\u7684\u53EF\u89C1\u9762\u79EF\n    const visibilityMap = new Map<string, number>()\n\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach(entry => {\n        const id = entry.target.id\n        if (!id) return\n\n        // \u8BA1\u7B97\u53EF\u89C1\u9762\u79EF\n        const visibleHeight = entry.intersectionRect.height\n        const visibleWidth = entry.intersectionRect.width\n        const visibleArea = visibleHeight * visibleWidth\n\n        visibilityMap.set(id, entry.isIntersecting ? visibleArea : 0)\n      })\n\n      // \u627E\u51FA\u53EF\u89C1\u9762\u79EF\u6700\u5927\u7684\u5143\u7D20\n      let maxArea = 0\n      let maxId = ''\n\n      visibilityMap.forEach((area, id) => {\n        if (area > maxArea) {\n          maxArea = area\n          maxId = id\n        }\n      })\n\n      if (maxId && maxId !== activeId) {\n        setActiveId(maxId)\n      }\n    }\n\n    // \u521B\u5EFA\u65B0\u7684 observer\n    observerRef.current = new IntersectionObserver(observerCallback, {\n      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],\n      rootMargin: '-56px 0px 0px 0px', // \u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n    })\n\n    // \u89C2\u5BDF\u6240\u6709\u76EE\u6807\u5143\u7D20\n    copy.items.forEach(item => {\n      const element = document.getElementById(item.targetId)\n      if (element && observerRef.current) {\n        observerRef.current.observe(element)\n      }\n    })\n  }, [copy.items, activeId])\n\n  useEffect(() => {\n    setupObserver()\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect()\n      }\n    }\n  }, [setupObserver])\n\n  return (\n    <nav id=\"creditsNavigation\" className={cn('sticky top-0 z-50 bg-white')}>\n      <Container asChild>\n        <div\n          className={cn(\n            'md:overflow-x-auto md:overflow-y-hidden md:-mx-[16px] md:px-[16px]',\n            'md:scrollbar-hide md:[&::-webkit-scrollbar]:hidden md:[-ms-overflow-style:none] md:[scrollbar-width:none]'\n          )}\n        >\n          <ul className={cn('flex items-end gap-[24px] pt-[16px] md:pt-[12px] md:gap-[16px] md:pr-[16px]')}>\n            {copy.items.map((item, index) => {\n              const isActive = activeId === item.targetId\n              return (\n                <li key={index} className={cn('md:flex-shrink-0')}>\n                  <button\n                    onClick={() => scrollToSection(item.targetId)}\n                    className={cn(\n                      'pb-[16px] md:pb-[12px] text-[14px] font-bold tracking-[-0.28px] leading-[1.4]',\n                      'transition-all duration-200 relative border-b-4 whitespace-nowrap',\n                      isActive\n                        ? 'text-[#080a0f] border-brand-1'\n                        : 'text-[#4a4c56] hover:text-[#080a0f] border-transparent'\n                    )}\n                  >\n                    {item.label}\n                  </button>\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n      </Container>\n    </nav>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAsGkB,IAAAI,EAAA,6BAtGlBC,EAAyD,iBACzDC,EAAiC,yBACjCC,EAA0B,iCAGnB,MAAML,EAAoB,CAAC,CAAE,KAAAM,CAAK,IAAuC,CAC9E,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7CC,KAAc,UAAoC,IAAI,EAGtDC,EAAmBC,GAAqB,CAC5C,MAAMC,EAAU,SAAS,eAAeD,CAAQ,EAChD,GAAIC,EAAS,CAGX,MAAMC,EADkBD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,YAC5B,GAEzC,OAAO,SAAS,CACd,IAAKC,EACL,SAAU,QACZ,CAAC,CACH,CACF,EAGMC,KAAgB,eAAY,IAAM,CAElCL,EAAY,SACdA,EAAY,QAAQ,WAAW,EAIjC,MAAMM,EAAgB,IAAI,IAEpBC,EAAoBC,GAAyC,CACjEA,EAAQ,QAAQC,GAAS,CACvB,MAAMC,EAAKD,EAAM,OAAO,GACxB,GAAI,CAACC,EAAI,OAGT,MAAMC,EAAgBF,EAAM,iBAAiB,OACvCG,EAAeH,EAAM,iBAAiB,MACtCI,EAAcF,EAAgBC,EAEpCN,EAAc,IAAII,EAAID,EAAM,eAAiBI,EAAc,CAAC,CAC9D,CAAC,EAGD,IAAIC,EAAU,EACVC,EAAQ,GAEZT,EAAc,QAAQ,CAACU,EAAMN,IAAO,CAC9BM,EAAOF,IACTA,EAAUE,EACVD,EAAQL,EAEZ,CAAC,EAEGK,GAASA,IAAUjB,GACrBC,EAAYgB,CAAK,CAErB,EAGAf,EAAY,QAAU,IAAI,qBAAqBO,EAAkB,CAC/D,UAAW,CAAC,EAAG,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,GAAK,CAAC,EAC7D,WAAY,mBACd,CAAC,EAGDV,EAAK,MAAM,QAAQoB,GAAQ,CACzB,MAAMd,EAAU,SAAS,eAAec,EAAK,QAAQ,EACjDd,GAAWH,EAAY,SACzBA,EAAY,QAAQ,QAAQG,CAAO,CAEvC,CAAC,CACH,EAAG,CAACN,EAAK,MAAOC,CAAQ,CAAC,EAEzB,sBAAU,KACRO,EAAc,EAEP,IAAM,CACPL,EAAY,SACdA,EAAY,QAAQ,WAAW,CAEnC,GACC,CAACK,CAAa,CAAC,KAGhB,OAAC,OAAI,GAAG,oBAAoB,aAAW,EAAAa,YAAG,4BAA4B,EACpE,mBAAC,aAAU,QAAO,GAChB,mBAAC,OACC,aAAW,EAAAA,YACT,qEACA,2GACF,EAEA,mBAAC,MAAG,aAAW,EAAAA,YAAG,6EAA6E,EAC5F,SAAArB,EAAK,MAAM,IAAI,CAACoB,EAAME,IAAU,CAC/B,MAAMC,EAAWtB,IAAamB,EAAK,SACnC,SACE,OAAC,MAAe,aAAW,EAAAC,YAAG,kBAAkB,EAC9C,mBAAC,UACC,QAAS,IAAMjB,EAAgBgB,EAAK,QAAQ,EAC5C,aAAW,EAAAC,YACT,gFACA,oEACAE,EACI,gCACA,wDACN,EAEC,SAAAH,EAAK,MACR,GAZOE,CAaT,CAEJ,CAAC,EACH,EACF,EACF,EACF,CAEJ",
   "names": ["CreditsNavigation_exports", "__export", "CreditsNavigation", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lib", "import_headless_ui", "copy", "activeId", "setActiveId", "observerRef", "scrollToSection", "targetId", "element", "offsetPosition", "setupObserver", "visibilityMap", "observerCallback", "entries", "entry", "id", "visibleHeight", "visibleWidth", "visibleArea", "maxArea", "maxId", "area", "item", "cn", "index", "isActive"]
 }

package/dist/cjs/components/credits/creditsRedeemList/CreditsRedeemList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var W=Object.create;var C=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var te=(e,s)=>{for(var o in s)C(e,o,{get:s[o],enumerable:!0})},S=(e,s,o,b)=>{if(s&&typeof s=="object"||typeof s=="function")for(let m of Y(s))!ee.call(e,m)&&m!==o&&C(e,m,{get:()=>s[m],enumerable:!(b=X(s,m))||b.enumerable});return e};var f=(e,s,o)=>(o=e!=null?W(Z(e)):{},S(s||!e||!e.__esModule?C(o,"default",{value:e,enumerable:!0}):o,e)),se=e=>S(C({},"__esModule",{value:!0}),e);var oe={};te(oe,{CreditsRedeemList:()=>ne});module.exports=se(oe);var n=require("react/jsx-runtime"),r=require("@anker-in/headless-ui"),v=f(require("classnames")),i=require("react"),M=f(require("./RedeemCouponModal")),O=f(require("./RedeemProductModal")),P=require("../context/provider"),D=f(require("../context/hooks/useRedeemableList")),u=require("../context/const"),g=require("@anker-in/lib"),F=require("./RedeemableItem"),H=require("../../../constants"),z=f(require("../modal/rulesModal")),B=require("../../../components/registration"),U=require("../context/utils");const ne=({copy:e,id:s})=>{const{profile:o,openSignUpPopup:b,gtm:{pageGroup:m},pageCommon:j,creditInfo:q}=(0,P.useCreditsContext)(),{authCodeActivate:h}=(0,B.useRegistration)(),{brand:w}=(0,g.useHeadlessContext)(),G=H.ROUNDED_BRANDS.includes(w),L=Object.keys(o||{}).length>0,V=o?.activated,[x,$]=(0,i.useState)(e.list[0].label),[l,R]=(0,i.useState)(void 0),[y,N]=(0,i.useState)(),{listLoading:J,redeemableList:_,getRedeemableList:k}=(0,D.default)(),c=(0,i.useMemo)(()=>_.map(t=>({id:t.id.toString(),title:t.name,consumeCredits:t.consume_credits,remainingInventory:t.remaining_inventory,isLimited:!!t.is_limited,consumeType:t.consume_type,handle:t.sku_handle,sku:t.goods_sku,image:t.goods_url})),[e.list,x,_]),K=c.map(t=>t.handle),{data:I}=(0,g.useProductsByHandles)({handles:K}),Q=(0,i.useMemo)(()=>e.list.find(a=>a.label===x)?.list.filter(a=>c.some(d=>d.id===a.id)).map(a=>{const d=c.find(p=>p.id===a.id),T=I?.find(p=>p.handle===d?.handle),E=T?.variants.find(p=>p.sku===d?.sku);return d?.isLimited&&(!d?.remainingInventory||d.remainingInventory<=0)||d?.consumeType===u.AlpcConsumeType.Product&&(!T||!E)?null:{alpc:c.find(p=>p.id===a.id),config:a,product:T,variant:E}}).filter(a=>a!==null),[c,I]),A=(0,i.useCallback)(t=>{t===u.AlpcErrorCode.CodeLpcRuleInventoryNotEnough&&k()},[k]);return(0,n.jsxs)(r.Container,{id:s,className:(0,v.default)("relative bg-[#F5F5F7]"),children:[(0,n.jsx)(r.Heading,{as:"h2",size:"4",html:e.title}),L&&V&&(0,n.jsx)(r.Text,{html:e.availableCredits?.replace("$credits",(0,U.numberFormat)(q?.available_credit||0).toString()),className:"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]",as:"p"}),(0,n.jsx)(r.Tabs,{shape:G?"rounded":"square",align:"left",className:(0,v.default)("sticky top-0 z-20 py-[24px] md:justify-center"),value:x.toString(),onValueChange:t=>{$(t),(0,g.gaTrack)({event:"ga4Event",event_name:"lp_navigation",event_parameters:{navigation:t,page_group:m}})},children:(0,n.jsx)(r.TabsList,{children:e.list.map(t=>(0,n.jsx)(r.TabsTrigger,{value:t.label,children:t.label},t.label))})}),!!c?.length&&!J&&(0,n.jsx)("div",{className:(0,v.default)("relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3"),children:Q?.map(t=>(0,n.jsx)(F.RedeemableItem,{copy:e,item:t,onRedeem:a=>{L?!o?.activated&&!h.isActivateSuccess?h.open():R(a):b()},onRulesOpen:N},t?.alpc?.id))}),l?.alpc?.consumeType===u.AlpcConsumeType.Coupon&&e?.redeemModal?.coupon&&l&&(0,n.jsx)(M.default,{isOpen:!!l,item:l,copy:e,onError:A,onClose:()=>{R(void 0)}}),l?.alpc?.consumeType===u.AlpcConsumeType.Product&&e?.redeemModal&&l&&(0,n.jsx)(O.default,{isOpen:!!l,item:l,copy:e,onError:A,onClose:()=>{R(void 0)}}),y&&(0,n.jsx)(z.default,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:y.length>0,onClose:()=>N([]),titleClassName:"border-b-transparent h-[56px]",rules:y,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:j?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};
+"use strict";var Q=Object.create;var C=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,a)=>{for(var n in a)C(e,n,{get:a[n],enumerable:!0})},M=(e,a,n,f)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of X(a))!Z.call(e,p)&&p!==n&&C(e,p,{get:()=>a[p],enumerable:!(f=W(a,p))||f.enumerable});return e};var b=(e,a,n)=>(n=e!=null?Q(Y(e)):{},M(a||!e||!e.__esModule?C(n,"default",{value:e,enumerable:!0}):n,e)),te=e=>M(C({},"__esModule",{value:!0}),e);var ae={};ee(ae,{CreditsRedeemList:()=>se});module.exports=te(ae);var s=require("react/jsx-runtime"),i=require("@anker-in/headless-ui"),v=b(require("classnames")),o=require("react"),O=b(require("./RedeemCouponModal")),P=b(require("./RedeemProductModal")),D=require("../context/provider"),F=b(require("../context/hooks/useRedeemableList")),g=require("../context/const"),m=require("@anker-in/lib"),H=require("./RedeemableItem"),$=require("../../../constants"),z=b(require("../modal/rulesModal")),B=require("../../../components/registration"),U=require("../context/utils");const se=({copy:e,id:a})=>{const{profile:n,openSignUpPopup:f,gtm:{pageGroup:p},pageCommon:j,creditInfo:q}=(0,D.useCreditsContext)(),{authCodeActivate:y}=(0,B.useRegistration)(),{brand:L}=(0,m.useHeadlessContext)(),w=$.ROUNDED_BRANDS.includes(L),N=Object.keys(n||{}).length>0,[x,G]=(0,o.useState)(e.list?.[0]?.label||""),[l,R]=(0,o.useState)(void 0),[T,k]=(0,o.useState)(),{listLoading:V,redeemableList:_,getRedeemableList:I}=(0,F.default)(),u=(0,o.useMemo)(()=>_.map(t=>({id:t.id.toString(),title:t.name,consumeCredits:t.consume_credits,remainingInventory:t.remaining_inventory,isLimited:!!t.is_limited,consumeType:t.consume_type,handle:t.sku_handle,sku:t.goods_sku,image:t.goods_url})),[e.list,x,_]),J=u.map(t=>t.handle),{data:A}=(0,m.useProductsByHandles)({handles:J}),K=(0,o.useMemo)(()=>(e.list?.find(r=>r.label===x)?.list||[]).filter(r=>u.some(d=>d.id===r.id)).map(r=>{const d=u.find(c=>c.id===r.id),h=A?.find(c=>c.handle===d?.handle),S=h?.variants.find(c=>c.sku===d?.sku);return d?.isLimited&&(!d?.remainingInventory||d.remainingInventory<=0)||d?.consumeType===g.AlpcConsumeType.Product&&(!h||!S)?null:{alpc:u.find(c=>c.id===r.id),config:r,product:h,variant:S}}).filter(r=>r!==null),[u,A]),E=(0,o.useCallback)(t=>{t===g.AlpcErrorCode.CodeLpcRuleInventoryNotEnough&&I()},[I]);return(0,s.jsxs)(i.Container,{id:a,className:(0,v.default)("relative bg-[#F5F5F7]"),children:[(0,s.jsx)(i.Heading,{as:"h2",size:"4",html:e.title}),N&&e.availableCredits&&(0,s.jsx)("p",{className:"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]",children:e.availableCredits.includes("$credits")?(0,s.jsxs)(s.Fragment,{children:[e.availableCredits.split("$credits")[0],(0,s.jsx)("span",{className:(0,m.classNames)("text-brand-color-0",L==="ankersolix"&&"bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent"),children:(0,U.numberFormat)(q?.available_credit||0).toString()}),e.availableCredits.split("$credits")[1]||""]}):e.availableCredits}),(0,s.jsx)(i.Tabs,{shape:w?"rounded":"square",align:"left",className:(0,v.default)("sticky top-0 z-20 py-[24px] md:justify-center"),value:x.toString(),onValueChange:t=>{G(t),(0,m.gaTrack)({event:"ga4Event",event_name:"lp_navigation",event_parameters:{navigation:t,page_group:p}})},children:(0,s.jsx)(i.TabsList,{children:(e.list||[]).map(t=>(0,s.jsx)(i.TabsTrigger,{value:t.label,children:t.label},t.label))})}),!!u?.length&&!V&&(0,s.jsx)("div",{className:(0,v.default)("relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3"),children:K?.map(t=>(0,s.jsx)(H.RedeemableItem,{copy:e,item:t,onRedeem:r=>{N?!n?.activated&&!y.isActivateSuccess?y.open():R(r):f()},onRulesOpen:k},t?.alpc?.id))}),l?.alpc?.consumeType===g.AlpcConsumeType.Coupon&&e?.redeemModal?.coupon&&l&&(0,s.jsx)(O.default,{isOpen:!!l,item:l,copy:e,onError:E,onClose:()=>{R(void 0)}}),l?.alpc?.consumeType===g.AlpcConsumeType.Product&&e?.redeemModal&&l&&(0,s.jsx)(P.default,{isOpen:!!l,item:l,copy:e,onError:E,onClose:()=>{R(void 0)}}),T&&(0,s.jsx)(z.default,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:T.length>0,onClose:()=>k([]),titleClassName:"border-b-transparent h-[56px]",rules:T,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:j?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};
 //# sourceMappingURL=CreditsRedeemList.js.map

package/dist/cjs/components/credits/creditsRedeemList/CreditsRedeemList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsRedeemList/CreditsRedeemList.tsx"],
-  "sourcesContent": ["import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/rulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n  const {\n    profile,\n    openSignUpPopup,\n    gtm: { pageGroup },\n    pageCommon,\n    creditInfo,\n  } = useCreditsContext()\n  const { authCodeActivate } = useRegistration()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const isLogin = Object.keys(profile || {}).length > 0\n  const isActivated = profile?.activated\n\n  const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)\n\n  const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n  const [rules, setRules] = useState<string | string[]>()\n\n  const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n  const alpcList = useMemo(() => {\n    return redeemableList.map(item => {\n      return {\n        id: item.id.toString(),\n        title: item.name,\n        consumeCredits: item.consume_credits,\n        remainingInventory: item.remaining_inventory,\n        isLimited: !!item.is_limited,\n        consumeType: item.consume_type,\n        handle: item.sku_handle,\n        sku: item.goods_sku,\n        image: item.goods_url,\n      }\n    })\n  }, [copy.list, activeTab, redeemableList])\n\n  const handles = alpcList.map(item => item.handle)\n  const { data: products } = useProductsByHandles({ handles })\n\n  const list = useMemo(() => {\n    const currentList = copy.list.find(item => item.label === activeTab)\n    return currentList?.list\n      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))\n      .map(item => {\n        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)\n        const product = products?.find(product => product.handle === alpcItem?.handle)\n        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n        // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n        if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n        return {\n          alpc: alpcList.find(alpcItem => alpcItem.id === item.id),\n          config: item,\n          product,\n          variant,\n        }\n      })\n      .filter(item => item !== null) as unknown as RedeemableItemType[]\n  }, [alpcList, products])\n\n  const handleRedeemError = useCallback(\n    (errorCode: AlpcErrorCode) => {\n      if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n        getRedeemableList()\n      }\n    },\n    [getRedeemableList]\n  )\n\n  return (\n    <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n      <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n      {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n      {isLogin && isActivated && (\n        <Text\n          html={copy.availableCredits?.replace('$credits', numberFormat(creditInfo?.available_credit || 0).toString())}\n          className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\"\n          as=\"p\"\n        />\n      )}\n\n      <Tabs\n        shape={rounded ? 'rounded' : 'square'}\n        align=\"left\"\n        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}\n        value={activeTab.toString()}\n        onValueChange={value => {\n          setActiveTab(value)\n          gaTrack({\n            event: 'ga4Event',\n            event_name: 'lp_navigation',\n            event_parameters: {\n              navigation: value,\n              page_group: pageGroup,\n            },\n          })\n        }}\n      >\n        <TabsList>\n          {copy.list.map(item => (\n            <TabsTrigger key={item.label} value={item.label}>\n              {item.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n      {/* PC\u7AEF */}\n      {!!alpcList?.length && !listLoading && (\n        <div\n          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}\n        >\n          {list?.map(item => (\n            <RedeemableItem\n              key={item?.alpc?.id}\n              copy={copy}\n              item={item}\n              onRedeem={(item: RedeemableItemType) => {\n                if (!isLogin) {\n                  openSignUpPopup()\n                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n                  authCodeActivate.open()\n                } else {\n                  setPopRedeemData(item)\n                }\n              }}\n              onRulesOpen={setRules}\n            />\n          ))}\n        </div>\n      )}\n\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (\n        <RedeemCouponModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (\n        <RedeemProductModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {rules && (\n        <RulesModal\n          overlayClassName=\"md:px-[16px] md:items-center\"\n          className=\"md:h-fit md:rounded-b-[16px]\"\n          isOpen={rules.length > 0}\n          onClose={() => setRules([])}\n          titleClassName=\"border-b-transparent h-[56px]\"\n          rules={rules}\n          scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n          title={pageCommon?.ruleLabel}\n          ruleClassName=\"text-[#1d1d1f] font-bold\"\n        />\n      )}\n    </Container>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["CreditsRedeemList_exports", "__export", "CreditsRedeemList", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_react", "import_RedeemCouponModal", "import_RedeemProductModal", "import_provider", "import_useRedeemableList", "import_const", "import_lib", "import_RedeemableItem", "import_constants", "import_rulesModal", "import_registration", "import_utils", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "rounded", "isLogin", "isActivated", "activeTab", "setActiveTab", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "useRedeemableList", "alpcList", "item", "handles", "products", "list", "alpcItem", "product", "variant", "handleRedeemError", "errorCode", "classNames", "value", "RedeemCouponModal", "RedeemProductModal", "RulesModal"]
+  "sourcesContent": ["import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport { ROUNDED_BRANDS } from '../../../constants'\nimport RulesModal from '../modal/rulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\nimport { numberFormat } from '../context/utils'\n\nexport const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; id?: string }) => {\n  const {\n    profile,\n    openSignUpPopup,\n    gtm: { pageGroup },\n    pageCommon,\n    creditInfo,\n  } = useCreditsContext()\n  const { authCodeActivate } = useRegistration()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const isLogin = Object.keys(profile || {}).length > 0\n\n  const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')\n\n  const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n  const [rules, setRules] = useState<string | string[]>()\n\n  const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n  const alpcList = useMemo(() => {\n    return redeemableList.map(item => {\n      return {\n        id: item.id.toString(),\n        title: item.name,\n        consumeCredits: item.consume_credits,\n        remainingInventory: item.remaining_inventory,\n        isLimited: !!item.is_limited,\n        consumeType: item.consume_type,\n        handle: item.sku_handle,\n        sku: item.goods_sku,\n        image: item.goods_url,\n      }\n    })\n  }, [copy.list, activeTab, redeemableList])\n\n  const handles = alpcList.map(item => item.handle)\n  const { data: products } = useProductsByHandles({ handles })\n\n  const list = useMemo(() => {\n    const currentList = copy.list?.find(item => item.label === activeTab)\n    return (currentList?.list || [])\n      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))\n      .map(item => {\n        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)\n        const product = products?.find(product => product.handle === alpcItem?.handle)\n        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n        // \u8FC7\u6EE4\u6389\u5E93\u5B58\u4E0D\u8DB3\u7684\u5546\u54C1\n        if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null\n        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n        return {\n          alpc: alpcList.find(alpcItem => alpcItem.id === item.id),\n          config: item,\n          product,\n          variant,\n        }\n      })\n      .filter(item => item !== null) as unknown as RedeemableItemType[]\n  }, [alpcList, products])\n\n  const handleRedeemError = useCallback(\n    (errorCode: AlpcErrorCode) => {\n      if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n        getRedeemableList()\n      }\n    },\n    [getRedeemableList]\n  )\n\n  return (\n    <Container id={id} className={classNames('relative bg-[#F5F5F7]')}>\n      <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n      {/* \u53EF\u7528\u79EF\u5206\u5C55\u793A */}\n      {isLogin && copy.availableCredits && (\n        <p className=\"mt-[12px] text-[20px] l-xxl:text-[18px] l:text-[16px] font-bold text-[#4A4C56]\">\n          {copy.availableCredits.includes('$credits') ? (\n            <>\n              {copy.availableCredits.split('$credits')[0]}\n              <span\n                className={cn(\n                  'text-brand-color-0',\n                  brand === 'ankersolix' &&\n                    'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'\n                )}\n              >\n                {numberFormat(creditInfo?.available_credit || 0).toString()}\n              </span>\n              {copy.availableCredits.split('$credits')[1] || ''}\n            </>\n          ) : (\n            copy.availableCredits\n          )}\n        </p>\n      )}\n\n      <Tabs\n        shape={rounded ? 'rounded' : 'square'}\n        align=\"left\"\n        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}\n        value={activeTab.toString()}\n        onValueChange={value => {\n          setActiveTab(value)\n          gaTrack({\n            event: 'ga4Event',\n            event_name: 'lp_navigation',\n            event_parameters: {\n              navigation: value,\n              page_group: pageGroup,\n            },\n          })\n        }}\n      >\n        <TabsList>\n          {(copy.list || []).map(item => (\n            <TabsTrigger key={item.label} value={item.label}>\n              {item.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n      {/* PC\u7AEF */}\n      {!!alpcList?.length && !listLoading && (\n        <div\n          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}\n        >\n          {list?.map(item => (\n            <RedeemableItem\n              key={item?.alpc?.id}\n              copy={copy}\n              item={item}\n              onRedeem={(item: RedeemableItemType) => {\n                if (!isLogin) {\n                  openSignUpPopup()\n                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n                  authCodeActivate.open()\n                } else {\n                  setPopRedeemData(item)\n                }\n              }}\n              onRulesOpen={setRules}\n            />\n          ))}\n        </div>\n      )}\n\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (\n        <RedeemCouponModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (\n        <RedeemProductModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {rules && (\n        <RulesModal\n          overlayClassName=\"md:px-[16px] md:items-center\"\n          className=\"md:h-fit md:rounded-b-[16px]\"\n          isOpen={rules.length > 0}\n          onClose={() => setRules([])}\n          titleClassName=\"border-b-transparent h-[56px]\"\n          rules={rules}\n          scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n          title={pageCommon?.ruleLabel}\n          ruleClassName=\"text-[#1d1d1f] font-bold\"\n        />\n      )}\n    </Container>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["CreditsRedeemList_exports", "__export", "CreditsRedeemList", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_react", "import_RedeemCouponModal", "import_RedeemProductModal", "import_provider", "import_useRedeemableList", "import_const", "import_lib", "import_RedeemableItem", "import_constants", "import_rulesModal", "import_registration", "import_utils", "copy", "id", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "creditInfo", "authCodeActivate", "brand", "rounded", "isLogin", "activeTab", "setActiveTab", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "useRedeemableList", "alpcList", "item", "handles", "products", "list", "alpcItem", "product", "variant", "handleRedeemError", "errorCode", "classNames", "cn", "value", "RedeemCouponModal", "RedeemProductModal", "RulesModal"]
 }

package/dist/cjs/components/credits/creditsRedeemList/RedeemableItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var I=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var L=(t,a)=>{for(var e in a)c(t,e,{get:a[e],enumerable:!0})},y=(t,a,e,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of S(a))!E.call(t,o)&&o!==e&&c(t,o,{get:()=>a[o],enumerable:!(m=k(a,o))||m.enumerable});return t};var P=(t,a,e)=>(e=t!=null?I(z(t)):{},y(a||!t||!t.__esModule?c(e,"default",{value:t,enumerable:!0}):e,t)),D=t=>y(c({},"__esModule",{value:!0}),t);var F={};L(F,{RedeemableItem:()=>O});module.exports=D(F);var l=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),f=require("react"),u=P(require("classnames")),_=require("../context/provider"),p=require("../context/const"),h=require("../context/utils"),s=require("@anker-in/lib"),N=require("./NonProductValue"),C=require("../../../constants");function O({copy:t,className:a,item:e,onRulesOpen:m,onRedeem:o}){const{creditInfo:v,profile:i,gtm:{pageGroup:g},pageCommon:r}=(0,_.useCreditsContext)(),{brand:R}=(0,s.useHeadlessContext)(),d=Object.keys(i||{}).length>0,T=C.ROUNDED_BRANDS.includes(R),w=(0,f.useMemo)(()=>!!(e.alpc?.remainingInventory<=0&&e.alpc?.isLimited||e.alpc?.consumeType===p.AlpcConsumeType.Product&&!e.variant?.availableForSale||d&&i?.activated&&e.alpc?.consumeCredits>Number(v?.available_credit||0)),[e.alpc?.remainingInventory,e.alpc?.isLimited,e.alpc?.consumeType,e.alpc?.consumeCredits,d,i?.activated,v?.available_credit,e.variant?.availableForSale]),b=(0,f.useMemo)(()=>d?e.alpc?.consumeType===p.AlpcConsumeType.Product?e.variant?.availableForSale?t.btnRedeem:r?.soldOut||"Sold Out":t.btnRedeem:t.unlockRewards,[d,e.alpc?.consumeType,e.variant?.availableForSale,t.btnRedeem,t.unlockRewards,r?.soldOut]);return(0,l.jsxs)("div",{className:(0,u.default)("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!T&&"rounded-none md:rounded-none",a),children:[e.config?.type===p.ConsumeType.Product?(0,l.jsx)("div",{className:(0,u.default)("relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]"),children:(0,l.jsx)(n.Picture,{className:"h-full w-auto [&_img]:h-full [&_img]:object-contain",source:e.config?.image?.url||e.product.images?.[0]?.url})}):(0,l.jsxs)("div",{className:"relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]",children:[(0,l.jsx)(n.Picture,{source:r?.imageMapping?.[e.config?.type]?.url,className:"h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"}),(0,l.jsx)(N.NoneProductValue,{item:e})]}),(0,l.jsxs)("div",{className:(0,u.default)("mt-[22px] flex w-full flex-1 flex-col justify-between"),children:[(0,l.jsx)(n.Text,{html:e.config?.title||e.alpc?.title,title:e.config?.title||e.alpc?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e.config?.rules?.length>0&&(0,l.jsx)("button",{type:"button",onClick:()=>{m(e.config?.rules||[]),(0,s.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:t.title,button_name:r?.ruleLabel,info:e.alpc?.id?.toString()}})},className:"mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0",tabIndex:0,onKeyDown:x=>{(x.key==="Enter"||x.key===" ")&&x.preventDefault()},children:r?.ruleLabel}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]",children:[(0,l.jsx)(n.Picture,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),(0,l.jsx)(n.Text,{html:`${(0,h.numberFormat)(e.alpc?.consumeCredits)}`,size:2,as:"p",className:"ml-[4px] text-[28px] font-bold mt-[4px] leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "})]}),(0,l.jsx)(n.Button,{disabled:w,variant:"primary",size:"lg",className:"mt-[8px] md:px-[8px] l:w-full",onClick:()=>{o(e),(0,s.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:t.title,button_name:b,info:e.alpc?.id?.toString()}})},children:b})]})]})]})}
+"use strict";var I=Object.create;var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var L=(t,a)=>{for(var e in a)d(t,e,{get:a[e],enumerable:!0})},y=(t,a,e,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of S(a))!E.call(t,o)&&o!==e&&d(t,o,{get:()=>a[o],enumerable:!(m=k(a,o))||m.enumerable});return t};var P=(t,a,e)=>(e=t!=null?I(z(t)):{},y(a||!t||!t.__esModule?d(e,"default",{value:t,enumerable:!0}):e,t)),D=t=>y(d({},"__esModule",{value:!0}),t);var F={};L(F,{RedeemableItem:()=>O});module.exports=D(F);var l=require("react/jsx-runtime"),n=require("@anker-in/headless-ui"),f=require("react"),u=P(require("classnames")),_=require("../context/provider"),p=require("../context/const"),h=require("../context/utils"),s=require("@anker-in/lib"),N=require("./NonProductValue"),C=require("../../../constants");function O({copy:t,className:a,item:e,onRulesOpen:m,onRedeem:o}){const{creditInfo:v,profile:i,gtm:{pageGroup:g},pageCommon:r}=(0,_.useCreditsContext)(),{brand:R}=(0,s.useHeadlessContext)(),c=Object.keys(i||{}).length>0,T=C.ROUNDED_BRANDS.includes(R),w=(0,f.useMemo)(()=>!!(e.alpc?.remainingInventory<=0&&e.alpc?.isLimited||e.alpc?.consumeType===p.AlpcConsumeType.Product&&!e.variant?.availableForSale||c&&i?.activated&&e.alpc?.consumeCredits>Number(v?.available_credit||0)),[e.alpc?.remainingInventory,e.alpc?.isLimited,e.alpc?.consumeType,e.alpc?.consumeCredits,c,i?.activated,v?.available_credit,e.variant?.availableForSale]),b=(0,f.useMemo)(()=>c?e.alpc?.consumeType===p.AlpcConsumeType.Product?e.variant?.availableForSale?t.btnRedeem:r?.soldOut||"Sold Out":t.btnRedeem:t.unlockRewards,[c,e.alpc?.consumeType,e.variant?.availableForSale,t.btnRedeem,t.unlockRewards,r?.soldOut]);return(0,l.jsxs)("div",{className:(0,u.default)("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!T&&"rounded-none md:rounded-none",a),children:[e.config?.type===p.ConsumeType.Product?(0,l.jsx)("div",{className:(0,u.default)("relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]"),children:(0,l.jsx)(n.Picture,{className:"h-full w-auto [&_img]:h-full [&_img]:object-contain",source:e.config?.image?.url||e.product.images?.[0]?.url})}):(0,l.jsxs)("div",{className:"relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]",children:[(0,l.jsx)(n.Picture,{source:r?.imageMapping?.[e.config?.type]?.url,className:"h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"}),(0,l.jsx)(N.NoneProductValue,{item:e})]}),(0,l.jsxs)("div",{className:(0,u.default)("mt-[22px] flex w-full flex-1 flex-col justify-between"),children:[(0,l.jsx)(n.Text,{html:e.config?.title||e.alpc?.title,title:e.config?.title||e.alpc?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e.config?.rules?.length>0&&(0,l.jsx)("button",{type:"button",onClick:()=>{m(e.config?.rules||[]),(0,s.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:t.title,button_name:r?.ruleLabel,info:e.alpc?.id?.toString()}})},className:"mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0",tabIndex:0,onKeyDown:x=>{(x.key==="Enter"||x.key===" ")&&x.preventDefault()},children:r?.ruleLabel}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("div",{className:"mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]",children:[(0,l.jsx)(n.Picture,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),(0,l.jsx)(n.Text,{html:`${(0,h.numberFormat)(e.alpc?.consumeCredits)}`,size:2,as:"p",className:"ml-[4px] text-[24px] font-bold mt-[4px] leading-none l-xxl:text-[20px] l:text-[16px] "})]}),(0,l.jsx)(n.Button,{disabled:w,variant:"primary",size:"lg",className:"mt-[8px] md:px-[8px] l:w-full",onClick:()=>{o(e),(0,s.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:g,position:t.title,button_name:b,info:e.alpc?.id?.toString()}})},children:b})]})]})]})}
 //# sourceMappingURL=RedeemableItem.js.map

package/dist/cjs/components/credits/creditsRedeemList/RedeemableItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsRedeemList/RedeemableItem.tsx"],
-  "sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\n\nimport { useMemo } from 'react'\n\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { AlpcConsumeType, ConsumeType } from '../context/const'\nimport { numberFormat } from '../context/utils'\nimport type { CreditsRedeemListCopy } from './type'\nimport { gaTrack, useHeadlessContext } from '@anker-in/lib'\nimport { NoneProductValue } from './NonProductValue'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport function RedeemableItem({\n  copy,\n  className,\n  item,\n  onRulesOpen,\n  onRedeem,\n}: {\n  copy: CreditsRedeemListCopy\n  className?: string\n  item: RedeemableItemType\n  onRulesOpen: (rules: string[]) => void\n  onRedeem: (item: RedeemableItemType) => void\n}) {\n  const {\n    creditInfo,\n    profile,\n    gtm: { pageGroup },\n    pageCommon,\n  } = useCreditsContext()\n  const { brand } = useHeadlessContext()\n  const isLogin = Object.keys(profile || {}).length > 0\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const isDisabled = useMemo(() => {\n    if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {\n      // \u6709\u5E93\u5B58\u9650\u5236\n      return true\n    }\n\n    if (item.alpc?.consumeType === AlpcConsumeType.Product) {\n      if (!item.variant?.availableForSale) {\n        return true\n      }\n    }\n    if (isLogin && profile?.activated && item.alpc?.consumeCredits > Number(creditInfo?.available_credit || 0)) {\n      return true\n    }\n    return false\n  }, [\n    item.alpc?.remainingInventory,\n    item.alpc?.isLimited,\n    item.alpc?.consumeType,\n    item.alpc?.consumeCredits,\n    isLogin,\n    profile?.activated,\n    creditInfo?.available_credit,\n    item.variant?.availableForSale,\n  ])\n\n  const redeemButtonText = useMemo(() => {\n    if (!isLogin) {\n      return copy.unlockRewards\n    }\n\n    // \u7F3A\u8D27\u6587\u6848\n    if (item.alpc?.consumeType === AlpcConsumeType.Product) {\n      return item.variant?.availableForSale ? copy.btnRedeem : pageCommon?.soldOut || 'Sold Out'\n    }\n    return copy.btnRedeem\n  }, [\n    isLogin,\n    item.alpc?.consumeType,\n    item.variant?.availableForSale,\n    copy.btnRedeem,\n    copy.unlockRewards,\n    pageCommon?.soldOut,\n  ])\n\n  return (\n    <div\n      className={classNames(\n        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n        !rounded && 'rounded-none md:rounded-none',\n        className\n      )}\n    >\n      {item.config?.type === ConsumeType.Product ? (\n        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>\n          <Picture\n            className=\"h-full w-auto [&_img]:h-full [&_img]:object-contain\"\n            source={item.config?.image?.url || item.product.images?.[0]?.url}\n          ></Picture>\n        </div>\n      ) : (\n        <div className=\"relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]\">\n          <Picture\n            source={pageCommon?.imageMapping?.[item.config?.type]?.url}\n            className=\"h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n          ></Picture>\n\n          <NoneProductValue item={item} />\n        </div>\n      )}\n      <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>\n        <Text\n          html={item.config?.title || item.alpc?.title}\n          title={item.config?.title || item.alpc?.title}\n          size={2}\n          className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n        />\n        {item.config?.rules?.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={() => {\n              onRulesOpen(item.config?.rules || [])\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'lp_button',\n                member_active_status: profile?.activated ? 'active' : 'not active',\n                event_parameters: {\n                  page_group: pageGroup,\n                  position: copy.title,\n                  button_name: pageCommon?.ruleLabel,\n                  info: item.alpc?.id?.toString(),\n                },\n              })\n            }}\n            className=\"mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0\"\n            tabIndex={0}\n            onKeyDown={e => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault()\n              }\n            }}\n          >\n            {pageCommon?.ruleLabel}\n          </button>\n        )}\n        <div>\n          <div className=\"mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]\">\n            <Picture\n              className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n              source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n            />\n            <Text\n              html={`${numberFormat(item.alpc?.consumeCredits)}`}\n              size={2}\n              as=\"p\"\n              className=\"ml-[4px] text-[28px] font-bold mt-[4px] leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n            />\n          </div>\n\n          <Button\n            disabled={isDisabled}\n            variant=\"primary\"\n            size=\"lg\"\n            className=\"mt-[8px] md:px-[8px] l:w-full\"\n            onClick={() => {\n              onRedeem(item)\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'lp_button',\n                member_active_status: profile?.activated ? 'active' : 'not active',\n                event_parameters: {\n                  page_group: pageGroup,\n                  position: copy.title,\n                  button_name: redeemButtonText,\n                  info: item.alpc?.id?.toString(),\n                },\n              })\n            }}\n          >\n            {redeemButtonText}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\n\nimport { useMemo } from 'react'\n\nimport classNames from 'classnames'\nimport { useCreditsContext } from '../context/provider'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { AlpcConsumeType, ConsumeType } from '../context/const'\nimport { numberFormat } from '../context/utils'\nimport type { CreditsRedeemListCopy } from './type'\nimport { gaTrack, useHeadlessContext } from '@anker-in/lib'\nimport { NoneProductValue } from './NonProductValue'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport function RedeemableItem({\n  copy,\n  className,\n  item,\n  onRulesOpen,\n  onRedeem,\n}: {\n  copy: CreditsRedeemListCopy\n  className?: string\n  item: RedeemableItemType\n  onRulesOpen: (rules: string[]) => void\n  onRedeem: (item: RedeemableItemType) => void\n}) {\n  const {\n    creditInfo,\n    profile,\n    gtm: { pageGroup },\n    pageCommon,\n  } = useCreditsContext()\n  const { brand } = useHeadlessContext()\n  const isLogin = Object.keys(profile || {}).length > 0\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const isDisabled = useMemo(() => {\n    if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {\n      // \u6709\u5E93\u5B58\u9650\u5236\n      return true\n    }\n\n    if (item.alpc?.consumeType === AlpcConsumeType.Product) {\n      if (!item.variant?.availableForSale) {\n        return true\n      }\n    }\n    if (isLogin && profile?.activated && item.alpc?.consumeCredits > Number(creditInfo?.available_credit || 0)) {\n      return true\n    }\n    return false\n  }, [\n    item.alpc?.remainingInventory,\n    item.alpc?.isLimited,\n    item.alpc?.consumeType,\n    item.alpc?.consumeCredits,\n    isLogin,\n    profile?.activated,\n    creditInfo?.available_credit,\n    item.variant?.availableForSale,\n  ])\n\n  const redeemButtonText = useMemo(() => {\n    if (!isLogin) {\n      return copy.unlockRewards\n    }\n\n    // \u7F3A\u8D27\u6587\u6848\n    if (item.alpc?.consumeType === AlpcConsumeType.Product) {\n      return item.variant?.availableForSale ? copy.btnRedeem : pageCommon?.soldOut || 'Sold Out'\n    }\n    return copy.btnRedeem\n  }, [\n    isLogin,\n    item.alpc?.consumeType,\n    item.variant?.availableForSale,\n    copy.btnRedeem,\n    copy.unlockRewards,\n    pageCommon?.soldOut,\n  ])\n\n  return (\n    <div\n      className={classNames(\n        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n        !rounded && 'rounded-none md:rounded-none',\n        className\n      )}\n    >\n      {item.config?.type === ConsumeType.Product ? (\n        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>\n          <Picture\n            className=\"h-full w-auto [&_img]:h-full [&_img]:object-contain\"\n            source={item.config?.image?.url || item.product.images?.[0]?.url}\n          ></Picture>\n        </div>\n      ) : (\n        <div className=\"relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]\">\n          <Picture\n            source={pageCommon?.imageMapping?.[item.config?.type]?.url}\n            className=\"h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain\"\n          ></Picture>\n\n          <NoneProductValue item={item} />\n        </div>\n      )}\n      <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>\n        <Text\n          html={item.config?.title || item.alpc?.title}\n          title={item.config?.title || item.alpc?.title}\n          size={2}\n          className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n        />\n        {item.config?.rules?.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={() => {\n              onRulesOpen(item.config?.rules || [])\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'lp_button',\n                member_active_status: profile?.activated ? 'active' : 'not active',\n                event_parameters: {\n                  page_group: pageGroup,\n                  position: copy.title,\n                  button_name: pageCommon?.ruleLabel,\n                  info: item.alpc?.id?.toString(),\n                },\n              })\n            }}\n            className=\"mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0\"\n            tabIndex={0}\n            onKeyDown={e => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault()\n              }\n            }}\n          >\n            {pageCommon?.ruleLabel}\n          </button>\n        )}\n        <div>\n          <div className=\"mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]\">\n            <Picture\n              className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n              source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n            />\n            <Text\n              html={`${numberFormat(item.alpc?.consumeCredits)}`}\n              size={2}\n              as=\"p\"\n              className=\"ml-[4px] text-[24px] font-bold mt-[4px] leading-none l-xxl:text-[20px] l:text-[16px] \"\n            />\n          </div>\n\n          <Button\n            disabled={isDisabled}\n            variant=\"primary\"\n            size=\"lg\"\n            className=\"mt-[8px] md:px-[8px] l:w-full\"\n            onClick={() => {\n              onRedeem(item)\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'lp_button',\n                member_active_status: profile?.activated ? 'active' : 'not active',\n                event_parameters: {\n                  page_group: pageGroup,\n                  position: copy.title,\n                  button_name: redeemButtonText,\n                  info: item.alpc?.id?.toString(),\n                },\n              })\n            }}\n          >\n            {redeemButtonText}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["RedeemableItem_exports", "__export", "RedeemableItem", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_classnames", "import_provider", "import_const", "import_utils", "import_lib", "import_NonProductValue", "import_constants", "copy", "className", "item", "onRulesOpen", "onRedeem", "creditInfo", "profile", "pageGroup", "pageCommon", "brand", "isLogin", "rounded", "isDisabled", "redeemButtonText", "classNames", "e"]
 }

package/dist/cjs/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var k=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,n)=>{for(var r in n)k(t,r,{get:n[r],enumerable:!0})},J=(t,n,r,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of E(n))!H.call(t,o)&&o!==r&&k(t,o,{get:()=>n[o],enumerable:!(l=q(n,o))||l.enumerable});return t};var K=t=>J(k({},"__esModule",{value:!0}),t);var X={};V(X,{CreditsWaysToGetCredits:()=>Q});module.exports=K(X);var e=require("react/jsx-runtime"),i=require("@anker-in/headless-ui"),f=require("@heroicons/react/24/outline"),I=require("framer-motion"),a=require("react"),x=require("./type"),y=require("./useActions"),D=require("../context/provider"),d=require("@anker-in/lib"),R=require("../../registration"),T=require("../modal/creditsUploadReceiptModal"),U=require("../modal/subscribeModal"),L=require("../../../constants");const Q=({copy:t,classNames:n,id:r})=>{const[l,o]=(0,a.useState)(!1),{profile:M}=(0,D.useCreditsContext)(),{authCodeActivate:O}=(0,R.useRegistration)(),{brand:A}=(0,d.useHeadlessContext)(),C=L.ROUNDED_BRANDS.includes(A),b=!!M,[B,N]=(0,a.useState)(!1),[P,h]=(0,a.useState)(!1),[w,G]=(0,a.useState)(!1),[F,W]=(0,a.useState)(!1),{actions:v}=(0,y.useActions)({copy:t,subscribe:{openSubscribePopup:()=>h(!0),isSuccess:w},uploadReceipt:{openUploadReceiptPopup:()=>N(!0),isSuccess:F}}),_=(0,a.useMemo)(()=>{const s=t.list.map(p=>{if(!v[p.id])return;const{finished:c,notLogin:S,notFinished:g,completed:j}=v[p.id];let m="",u,z;return b?c?(m=j.buttonLabel,u=void 0):(m=g.buttonLabel,u=g.handleClick,z=g.link):(m=S.buttonLabel,u=S.handleClick),{...p,buttonLabel:m,handleClick:u,finished:c,link:z}}).filter(Boolean);return b?s.sort((p,c)=>p?.finished&&!c?.finished?1:!p?.finished&&c?.finished?-1:0):s},[v,t.list,b]);return(0,e.jsxs)(i.Container,{id:r,className:" bg-[#F5F5F7] [&>div]:l:!px-0",children:[(0,e.jsxs)("div",{className:(0,d.classNames)("rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]",!C&&"rounded-none"),children:[(0,e.jsx)(i.Heading,{as:"h2",size:4,html:t?.title,className:"text-center l:pl-[16px] l:text-left"}),(0,e.jsxs)("div",{className:"mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]",children:[(0,e.jsxs)("div",{className:"pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,as:"h3",html:t.subtitle,className:n?.subtitle}),(0,e.jsxs)("div",{className:"mt-[8px] flex items-center",children:[t.creditsIcon?.url&&(0,e.jsx)(i.Picture,{className:"size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand",source:t.creditsIcon.url,alt:t.creditsIcon.alt||"credits"}),(0,e.jsx)(i.Heading,{html:t.equalCredits,size:4,as:"h3",className:(0,d.classNames)("mt-2 text-white md:text-[24px]",n?.equalCreditsText)})]})]}),(0,e.jsx)(i.Picture,{className:"w-full laptop:w-[50%]",source:t.mainImage?.url})]}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)(I.motion.div,{className:(0,d.classNames)("relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden md:mt-[16px] md:grid-cols-1 l:gap-[12px]  min-md:!h-auto md-l:mt-[32px] md-l:grid-cols-2"),initial:{height:512},animate:{height:l?"auto":512},transition:{duration:.3},onAnimationComplete:()=>{if(!l&&window.screen.width<768){const s=document.getElementById("ways-to-get-credits");s&&s.scrollIntoView({behavior:"smooth",block:"end"})}},children:[_.map(s=>(0,e.jsxs)("div",{className:(0,d.classNames)("flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]",!C&&"rounded-none"),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(i.Text,{as:"p",html:s.title,size:2,className:"text-pretty text-[24px] font-bold xl:text-[20px]"}),(0,e.jsxs)("div",{className:"mt-[4px] flex items-center",children:[(0,e.jsx)(i.Picture,{className:"size-[24px] xl:size-[18px] [&_path]:size-full",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"}),(0,e.jsx)(i.Text,{as:"p",html:s.credits,size:2,className:"ml-[4px] mt-[6px] text-[18px] l:text-[14px]"})]})]}),s.handleClick&&!(s.id===x.TaskType.UploadReceipt&&F)&&!(s.id===x.TaskType.Activate&&O.isActivateSuccess)&&!(s.id===x.TaskType.Subscribe&&w)?(0,e.jsx)(i.Button,{as:s.link?"a":"button",...s.link&&{href:s.link},...s.handleClick&&{onClick:s.handleClick},variant:"primary",size:"lg",className:"mt-[24px] w-fit",children:s.buttonLabel}):(0,e.jsx)(i.Button,{variant:"primary",size:"lg",className:"mt-[24px] w-fit",disabled:!0,children:s.buttonLabel})]},s.id)),!l&&(0,e.jsx)("div",{className:"absolute inset-0 pointer-events-none min-md:hidden",style:{background:"linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)"}})]}),l?(0,e.jsx)("button",{className:"mx-auto mt-[12px] block w-fit min-md:hidden",onClick:()=>{o(!1)},children:(0,e.jsx)(f.ChevronUpIcon,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})}):(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden",children:(0,e.jsx)("button",{className:"w-fit",onClick:()=>o(!l),children:(0,e.jsx)(f.ChevronDownIcon,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})})})})]})]}),t.receipt&&(0,e.jsx)(T.CreditsUploadReceiptModal,{isOpen:B,onClose:()=>{N(!1)},copy:t.receipt,onSuccess:()=>{W(!0)}}),t.subscribe&&(0,e.jsx)(U.CreditsSubscribeModal,{copy:t.subscribe,onSuccess:()=>{G(!0),setTimeout(()=>{h(!1)},3e3)},isOpen:P,onClose:()=>{h(!1)}})]})};
+"use strict";var k=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var V=(t,n)=>{for(var p in n)k(t,p,{get:n[p],enumerable:!0})},J=(t,n,p,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of j(n))!q.call(t,a)&&a!==p&&k(t,a,{get:()=>n[a],enumerable:!(o=_(n,a))||o.enumerable});return t};var K=t=>J(k({},"__esModule",{value:!0}),t);var X={};V(X,{CreditsWaysToGetCredits:()=>Q});module.exports=K(X);var e=require("react/jsx-runtime"),i=require("@anker-in/headless-ui"),f=require("@heroicons/react/24/outline"),l=require("react"),x=require("./type"),I=require("./useActions"),R=require("../context/provider"),r=require("@anker-in/lib"),T=require("../../registration"),y=require("../modal/creditsUploadReceiptModal"),D=require("../modal/subscribeModal"),L=require("../../../constants");const Q=({copy:t,classNames:n,id:p})=>{const[o,a]=(0,l.useState)(!1),M=(0,l.useRef)(null),{profile:U}=(0,R.useCreditsContext)(),{authCodeActivate:O}=(0,T.useRegistration)(),{brand:B}=(0,r.useHeadlessContext)(),C=L.ROUNDED_BRANDS.includes(B),b=!!U,[A,N]=(0,l.useState)(!1),[P,h]=(0,l.useState)(!1),[w,E]=(0,l.useState)(!1),[F,W]=(0,l.useState)(!1),{actions:v}=(0,I.useActions)({copy:t,subscribe:{openSubscribePopup:()=>h(!0),isSuccess:w},uploadReceipt:{openUploadReceiptPopup:()=>N(!0),isSuccess:F}}),G=(0,l.useMemo)(()=>{const s=(t.list||[]).map(d=>{if(!v[d.id])return;const{finished:c,notLogin:S,notFinished:g,completed:H}=v[d.id];let u="",m,z;return b?c?(u=H.buttonLabel,m=void 0):(u=g.buttonLabel,m=g.handleClick,z=g.link):(u=S.buttonLabel,m=S.handleClick),{...d,buttonLabel:u,handleClick:m,finished:c,link:z}}).filter(Boolean);return b?s.sort((d,c)=>d?.finished&&!c?.finished?1:!d?.finished&&c?.finished?-1:0):s},[v,t.list,b]);return(0,l.useEffect)(()=>{if(!o&&window.innerWidth<768){const s=document.getElementById("ways-to-get-credits");if(s){const d=setTimeout(()=>{s.scrollIntoView({behavior:"smooth",block:"end"})},300);return()=>clearTimeout(d)}}},[o]),(0,e.jsxs)(i.Container,{id:p,className:" bg-[#F5F5F7] [&>div]:l:!px-0",children:[(0,e.jsxs)("div",{className:(0,r.classNames)("rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]",!C&&"rounded-none"),children:[(0,e.jsx)(i.Heading,{as:"h2",size:4,html:t?.title,className:"text-center l:pl-[16px] l:text-left"}),(0,e.jsxs)("div",{className:"mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]",children:[(0,e.jsxs)("div",{className:"pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,as:"h3",html:t.subtitle,className:n?.subtitle}),(0,e.jsxs)("div",{className:"mt-[8px] flex items-center",children:[t.creditsIcon?.url&&(0,e.jsx)(i.Picture,{className:"size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand",source:t.creditsIcon.url,alt:t.creditsIcon.alt||"credits"}),(0,e.jsx)(i.Heading,{html:t.equalCredits,size:4,as:"h3",className:(0,r.classNames)("mt-2 text-white md:text-[24px]",n?.equalCreditsText)})]})]}),(0,e.jsx)(i.Picture,{className:"w-full laptop:w-[50%]",source:t.mainImage?.url})]}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{ref:M,className:(0,r.classNames)("relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden transition-all duration-300 md:mt-[16px] md:grid-cols-1 l:gap-[12px] md-l:mt-[32px] md-l:grid-cols-2",o?"min-md:!h-auto md:h-auto":"md:h-[512px] min-md:!h-auto"),children:[G.map(s=>(0,e.jsxs)("div",{className:(0,r.classNames)("flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]",!C&&"rounded-none"),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(i.Text,{as:"p",html:s.title,size:2,className:"text-pretty text-[24px] font-bold xl:text-[20px]"}),(0,e.jsxs)("div",{className:"mt-[4px] flex items-center",children:[(0,e.jsx)(i.Picture,{className:"size-[24px] xl:size-[18px] [&_path]:size-full",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"}),(0,e.jsx)(i.Text,{as:"p",html:s.credits,size:2,className:"ml-[4px] mt-[6px] text-[18px] l:text-[14px]"})]})]}),s.handleClick&&!(s.id===x.TaskType.UploadReceipt&&F)&&!(s.id===x.TaskType.Activate&&O.isActivateSuccess)&&!(s.id===x.TaskType.Subscribe&&w)?(0,e.jsx)(i.Button,{as:s.link?"a":"button",...s.link&&{href:s.link},...s.handleClick&&{onClick:s.handleClick},variant:"primary",size:"lg",className:"mt-[24px] w-fit",children:s.buttonLabel}):(0,e.jsx)(i.Button,{variant:"primary",size:"lg",className:"mt-[24px] w-fit",disabled:!0,children:s.buttonLabel})]},s.id)),!o&&(0,e.jsx)("div",{className:"absolute inset-0 pointer-events-none min-md:hidden",style:{background:"linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)"}})]}),o?(0,e.jsx)("button",{className:"mx-auto mt-[12px] block w-fit min-md:hidden",onClick:()=>{a(!1)},children:(0,e.jsx)(f.ChevronUpIcon,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})}):(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:"absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden",children:(0,e.jsx)("button",{className:"w-fit",onClick:()=>a(!o),children:(0,e.jsx)(f.ChevronDownIcon,{className:"size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"})})})})]})]}),t.receipt&&(0,e.jsx)(y.CreditsUploadReceiptModal,{isOpen:A,onClose:()=>{N(!1)},copy:t.receipt,onSuccess:()=>{W(!0)}}),t.subscribe&&(0,e.jsx)(D.CreditsSubscribeModal,{copy:t.subscribe,onSuccess:()=>{E(!0),setTimeout(()=>{h(!1)},3e3)},isOpen:P,onClose:()=>{h(!1)}})]})};
 //# sourceMappingURL=CreditsWaysToGetCredits.js.map

package/dist/cjs/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.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 CreditsWaysToGetCreditsProps } from './type'\nimport { useActions } from './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 CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { 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  return (\n    <Container id={id} className=\" bg-[#F5F5F7] [&>div]:l:!px-0\">\n      <div\n        className={cn(\n          'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',\n          !rounded && 'rounded-none'\n        )}\n      >\n        <Heading as=\"h2\" size={4} html={copy?.title} className=\"text-center l:pl-[16px] l:text-left\" />\n        <div className=\"mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]\">\n          <div className=\"pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]\">\n            <Heading size={3} as=\"h3\" html={copy.subtitle} className={classNames?.subtitle} />\n            <div className=\"mt-[8px] flex items-center\">\n              {copy.creditsIcon?.url && (\n                <Picture\n                  className=\"size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand\"\n                  source={copy.creditsIcon.url}\n                  alt={copy.creditsIcon.alt || 'credits'}\n                />\n              )}\n              <Heading\n                html={copy.equalCredits}\n                size={4}\n                as=\"h3\"\n                className={cn('mt-2 text-white md:text-[24px]', classNames?.equalCreditsText)}\n              />\n            </div>\n          </div>\n          <Picture className=\"w-full laptop:w-[50%]\" source={copy.mainImage?.url} />\n        </div>\n\n        <div className=\"relative\">\n          <motion.div\n            className={cn(\n              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden md:mt-[16px] md:grid-cols-1 l:gap-[12px]  min-md:!h-auto md-l:mt-[32px] md-l:grid-cols-2'\n            )}\n            initial={{ height: 512 }}\n            animate={{ height: showMore ? 'auto' : 512 }}\n            transition={{ duration: 0.3 }}\n            onAnimationComplete={() => {\n              if (!showMore && window.screen.width < 768) {\n                const section = document.getElementById('ways-to-get-credits')\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-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]',\n                  !rounded && 'rounded-none'\n                )}\n              >\n                <div>\n                  <Text\n                    as=\"p\"\n                    html={item.title}\n                    size={2}\n                    className=\"text-pretty text-[24px] font-bold xl:text-[20px]\"\n                  />\n                  <div className=\"mt-[4px] flex items-center\">\n                    <Picture\n                      className=\"size-[24px] xl: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] l: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 && (\n              <div\n                className=\"absolute inset-0 pointer-events-none min-md:hidden\"\n                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}\n              ></div>\n            )}\n          </motion.div>\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        </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": ["CreditsWaysToGetCredits_exports", "__export", "CreditsWaysToGetCredits", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_outline", "import_framer_motion", "import_react", "import_type", "import_useActions", "import_provider", "import_lib", "import_registration", "import_creditsUploadReceiptModal", "import_subscribeModal", "import_constants", "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", "cn", "section"]
+  "sourcesContent": ["import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { TaskType, type CreditsWaysToGetCreditsProps } from './type'\nimport { useActions } from './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 CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {\n  const [showMore, setShowMore] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\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  useEffect(() => {\n    if (!showMore && window.innerWidth < 768) {\n      const section = document.getElementById('ways-to-get-credits')\n      if (section) {\n        const timer = setTimeout(() => {\n          section.scrollIntoView({ behavior: 'smooth', block: 'end' })\n        }, 300)\n        return () => clearTimeout(timer)\n      }\n    }\n  }, [showMore])\n\n  return (\n    <Container id={id} className=\" bg-[#F5F5F7] [&>div]:l:!px-0\">\n      <div\n        className={cn(\n          'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',\n          !rounded && 'rounded-none'\n        )}\n      >\n        <Heading as=\"h2\" size={4} html={copy?.title} className=\"text-center l:pl-[16px] l:text-left\" />\n        <div className=\"mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]\">\n          <div className=\"pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]\">\n            <Heading size={3} as=\"h3\" html={copy.subtitle} className={classNames?.subtitle} />\n            <div className=\"mt-[8px] flex items-center\">\n              {copy.creditsIcon?.url && (\n                <Picture\n                  className=\"size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand\"\n                  source={copy.creditsIcon.url}\n                  alt={copy.creditsIcon.alt || 'credits'}\n                />\n              )}\n              <Heading\n                html={copy.equalCredits}\n                size={4}\n                as=\"h3\"\n                className={cn('mt-2 text-white md:text-[24px]', classNames?.equalCreditsText)}\n              />\n            </div>\n          </div>\n          <Picture className=\"w-full laptop:w-[50%]\" source={copy.mainImage?.url} />\n        </div>\n\n        <div className=\"relative\">\n          <div\n            ref={containerRef}\n            className={cn(\n              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden transition-all duration-300 md:mt-[16px] md:grid-cols-1 l:gap-[12px] md-l:mt-[32px] md-l:grid-cols-2',\n              showMore ? 'min-md:!h-auto md:h-auto' : 'md:h-[512px] min-md:!h-auto'\n            )}\n          >\n            {list.map(item => (\n              <div\n                key={item.id}\n                className={cn(\n                  'flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]',\n                  !rounded && 'rounded-none'\n                )}\n              >\n                <div>\n                  <Text\n                    as=\"p\"\n                    html={item.title}\n                    size={2}\n                    className=\"text-pretty text-[24px] font-bold xl:text-[20px]\"\n                  />\n                  <div className=\"mt-[4px] flex items-center\">\n                    <Picture\n                      className=\"size-[24px] xl: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] l: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 && (\n              <div\n                className=\"absolute inset-0 pointer-events-none min-md:hidden\"\n                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}\n              ></div>\n            )}\n          </div>\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        </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": ["CreditsWaysToGetCredits_exports", "__export", "CreditsWaysToGetCredits", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_outline", "import_react", "import_type", "import_useActions", "import_provider", "import_lib", "import_registration", "import_creditsUploadReceiptModal", "import_subscribeModal", "import_constants", "copy", "classNames", "id", "showMore", "setShowMore", "containerRef", "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", "section", "timer", "cn"]
 }

package/dist/cjs/templates/{credits.d.ts → Credits.d.ts} RENAMED Viewed

@@ -69,5 +69,19 @@ export type CreditsTemplateProps = {
     gtm: {
         pageGroup: string;
     };
+    cartConfig?: {
+        addToCart: (params: {
+            variantList: Array<{
+                variant: any;
+                quantity: number;
+                attributes?: Array<{
+                    key: string;
+                    value: string;
+                }>;
+            }>;
+            cartAttributes?: Record<string, string>;
+            discountCodes?: string[];
+        }) => void | Promise<any>;
+    };
 };
-export declare const CreditsTemplate: ({ headlessConfig, siteConfig, creditsConfig, userContext, pageConfig, registrationContext, gtm, }: CreditsTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditsTemplate: ({ headlessConfig, siteConfig, creditsConfig, userContext, pageConfig, registrationContext, gtm, cartConfig, }: CreditsTemplateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/templates/Credits.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var C=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var N=(s,i)=>{for(var d in i)C(s,d,{get:i[d],enumerable:!0})},S=(s,i,d,r)=>{if(i&&typeof i=="object"\|\|typeof i=="function")for(let t of F(i))!M.call(s,t)&&t!==d&&C(s,t,{get:()=>i[t],enumerable:!(r=K(i,t))\|\|r.enumerable});return s};var x=s=>S(C({},"__esModule",{value:!0}),s);var q={};N(q,{ComponentKey:()=>B,CreditsTemplate:()=>R});module.exports=x(q);var o=require("react/jsx-runtime"),p=require("@anker-in/lib"),c=require("../components/registration/context/provider"),f=require("../components/credits/context/provider"),y=require("../components/credits/creditsBanner"),l=require("../components/credits/creditsInfoCard"),g=require("../components/credits/creditsBenefits"),P=require("../components/credits/creditsWaysToGetCredits"),T=require("../components/credits/creditsAnkersolixTask"),v=require("../components/credits/creditsRedeemList"),u=require("../components/credits/creditsCash"),b=require("../components/credits/creditsMemberPrice"),h=require("../components/credits/creditsFaq"),A=require("../components/credits/creditsNavigation"),B=(a=>(a.Navigation="creditsNavigation",a.Banner="creditsBanner",a.InfoCard="creditsInfoCard",a.Benefits="creditsBenefits",a.WaysToGetCredits="creditsWaysToGetCredits",a.AnkersolixTask="creditsAnkersolixTask",a.RedeemList="creditsRedeemList",a.SpendCreditsLikeCash="creditsCash",a.MemberPrice="creditsMemberPrice",a.Faqs="creditsFaq",a))(B\|\|{});const R=({headlessConfig:s,siteConfig:i,creditsConfig:d,userContext:r,pageConfig:t,registrationContext:m,gtm:I,cartConfig:L})=>(console.log("siteConfig",i),(0,o.jsx)(p.HeadlessProvider,{headlessConfig:s,children:(0,o.jsx)(c.RegistrationProvider,{copy:i.registrationsSettings,email:r?.profile?.email,children:(0,o.jsxs)(f.CreditsProvider,{profile:r?.profile,removeProfile:r?.removeProfile,isLoadingProfile:r?.isLoadingProfile,openSignInPopup:m.openSignInPopup,openSignUpPopup:m.openSignUpPopup,creditInfo:r?.creditInfo,taskIdToTypeMapping:i.taskIdToTypeMapping,customer:r?.customer,fetchCreditInfo:r?.fetchCreditInfo,customerLoading:r?.customerLoading,gtm:I,pageCommon:t.common,memberPriceDiscount:i.memberPriceDiscount,alpcBrand:d?.alpcBrand,cartConfig:L,children:[t.components.creditsNavigation&&(0,o.jsx)(A.CreditsNavigation,{copy:t.components.creditsNavigation}),(0,o.jsx)("div",{className:(0,p.classNames)("bg-[#f5f5f7] leading-[1.2]"),children:t.order.map(e=>{if(e==="creditsNavigation")return null;const n=t.components?.[e];return n?(0,o.jsxs)(o.Fragment,{children:[e==="creditsBanner"&&(0,o.jsx)(y.CreditsBanner,{copy:n,id:e}),e==="creditsInfoCard"&&r?.profile&&(0,o.jsx)(l.CreditsInfoCard,{copy:n,id:e}),e==="creditsBenefits"&&(0,o.jsx)(g.CreditsBenefits,{copy:n,id:e}),e==="creditsWaysToGetCredits"&&(0,o.jsx)(P.CreditsWaysToGetCredits,{copy:n,id:e,classNames:s.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),e==="creditsAnkersolixTask"&&(0,o.jsx)(T.CreditsAnkersolixTask,{copy:n,id:e}),e==="creditsRedeemList"&&(0,o.jsx)(v.CreditsRedeemList,{copy:n,id:e}),e==="creditsCash"&&(0,o.jsx)(u.CreditsCash,{copy:n,id:e}),e==="creditsMemberPrice"&&(0,o.jsx)(b.CreditsMemberPrice,{copy:n,id:e}),e==="creditsFaq"&&(0,o.jsx)(h.CreditsFaq,{copy:n,id:e}),e!=="creditsBanner"&&(0,o.jsx)("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})]})})}));
2	+ //# sourceMappingURL=Credits.js.map