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

package/src/templates/Credits.tsx

@@ -74,6 +74,17 @@ 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 const CreditsTemplate = ({
@@ -84,8 +95,8 @@ export const CreditsTemplate = ({
   pageConfig,
   registrationContext,
   gtm,
+  cartConfig,
 }: CreditsTemplateProps) => {
-
   console.log('siteConfig', siteConfig)
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
@@ -105,6 +116,7 @@ export const CreditsTemplate = ({
           pageCommon={pageConfig.common}
           memberPriceDiscount={siteConfig.memberPriceDiscount}
           alpcBrand={creditsConfig?.alpcBrand}
+          cartConfig={cartConfig}
         >
           {/* 导航组件 - 固定位置，不参与 order 排序 */}
           {pageConfig.components[ComponentKey.Navigation] && (
@@ -122,7 +134,9 @@ export const CreditsTemplate = ({
                   {key === ComponentKey.InfoCard && userContext?.profile && (
                     <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} id={key} />
                   )}
-                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />}
+                  {key === ComponentKey.Benefits && (
+                    <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} id={key} />
+                  )}
                   {key === ComponentKey.WaysToGetCredits && (
                     <CreditsWaysToGetCredits
                       copy={componentCopy as CreditsWaysToGetCreditsCopy}
@@ -142,14 +156,17 @@ export const CreditsTemplate = ({
                     />
                   )}
                   {key === ComponentKey.AnkersolixTask && (
-                    <CreditsAnkersolixTask
-                      copy={componentCopy as CreditsAnkersolixTaskCopy}
-                      id={key}
-                    />
+                    <CreditsAnkersolixTask copy={componentCopy as CreditsAnkersolixTaskCopy} id={key} />
+                  )}
+                  {key === ComponentKey.RedeemList && (
+                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />
+                  )}
+                  {key === ComponentKey.SpendCreditsLikeCash && (
+                    <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />
+                  )}
+                  {key === ComponentKey.MemberPrice && (
+                    <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />
                   )}
-                  {key === ComponentKey.RedeemList && <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} id={key} />}
-                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} id={key} />}
-                  {key === ComponentKey.MemberPrice && <CreditsMemberPrice copy={componentCopy as CreditsMemberPriceCopy} id={key} />}
                   {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} id={key} />}
                   {key !== ComponentKey.Banner && (
                     <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />

package/src/components/credits/context/hooks/useFunctionMemberPrice.ts

@@ -1,33 +0,0 @@
-import { ProductVariant } from '@anker-in/lib'
-import { FunctionMemberPriceResult } from '../memberPriceTypes'
-import { getFunctionMemberPrice } from '../utils/getFunctionMemberPrice'
-import { useMemo } from 'react'
-import { useCreditsContext } from '../provider'
-import { useHeadlessContext } from '@anker-in/lib'
-
-// 计算单件商品的会员价
-export const useFunctionMemberPrice = ({ variant }: { variant?: ProductVariant }) => {
-  const { memberPriceDiscount } = useCreditsContext()
-  const { locale = '' } = useHeadlessContext()
-
-  const memberPrice:
-    | FunctionMemberPriceResult
-    | (Partial<FunctionMemberPriceResult> & {
-        hasMemberPrice: false
-      }) = useMemo(() => {
-    const result = getFunctionMemberPrice({
-      memberPriceDiscount: memberPriceDiscount,
-      currencyCode: variant?.price.currencyCode,
-      variant,
-      locale,
-    })
-
-    if (result) {
-      return result as FunctionMemberPriceResult
-    }
-
-    return { hasMemberPrice: false }
-  }, [locale, memberPriceDiscount, variant])
-
-  return memberPrice
-}

package/src/components/credits/context/utils/atobID.ts

@@ -1,8 +0,0 @@
-// 从 Shopify GraphQL ID 中提取数字 ID
-export function atobID(id: string) {
-  if (id && typeof id === 'string' && id.includes('/')) {
-    return id.split('/').pop()?.split('?')?.shift()
-  } else {
-    return id
-  }
-}

package/src/components/credits/context/utils/functionDiscountCalculate.ts

@@ -1,57 +0,0 @@
-import { FunctionDiscountType, RoundSelected } from '../memberPriceConst'
-import { DiscountConfig } from '../memberPriceTypes'
-import Decimal from 'decimal.js'
-
-// Function 计算折后价
-export const functionDiscountCalculate = ({
-  config,
-  price,
-}: {
-  config: DiscountConfig
-  price: number
-}) => {
-  const { apply_price_ending, one_decimal_place, two_decimal_place, round_selected } =
-    config.price_ending_conf || {}
-
-  let salePrice = new Decimal(price)
-
-  switch (config.discount_type) {
-    // 百分比折扣
-    case FunctionDiscountType.Percentage:
-      salePrice = salePrice.mul(100 - config.discount_value).div(100)
-      break
-    // 固定金额折扣
-    case FunctionDiscountType.FixedAmount:
-      salePrice = salePrice.sub(config.discount_value)
-      break
-    // 固定价格折扣
-    case FunctionDiscountType.FixedPrice:
-      salePrice = new Decimal(config.discount_value)
-      break
-    default:
-      break
-  }
-
-  if (apply_price_ending) {
-    // 小数位取舍
-    switch (round_selected) {
-      case RoundSelected.RoundHighest:
-        salePrice = salePrice.ceil()
-        break
-      case RoundSelected.RoundLowest:
-        salePrice = salePrice.floor()
-        break
-      case RoundSelected.RoundNearest:
-        salePrice = salePrice.round()
-        break
-      default:
-        salePrice = new Decimal(salePrice.toFixed(2, Decimal.ROUND_DOWN))
-        break
-    }
-
-    const priceEnding = salePrice.toString().split('.')
-    salePrice = new Decimal(priceEnding[0] + '.' + one_decimal_place + two_decimal_place)
-  }
-
-  return salePrice.toNumber()
-}

package/src/components/credits/context/utils/getFunctionMemberPrice.ts

@@ -1,135 +0,0 @@
-import { formatPrice } from '../utils'
-import { FunctionMemberPriceConfig, FunctionMemberPriceResult } from '../memberPriceTypes'
-import { ProductVariant } from '@anker-in/lib'
-import { functionDiscountCalculate } from './functionDiscountCalculate'
-import Decimal from 'decimal.js'
-import { getFunctionMemberPriceDiscountConfig } from './getFunctionMemberPriceDiscountConfig'
-import variantGetCoupon from './variantGetCoupon'
-
-// 计算单件商品的会员价
-export const getFunctionMemberPrice = ({
-  memberPriceDiscount,
-  currencyCode,
-  variant,
-  locale,
-}: {
-  memberPriceDiscount?: FunctionMemberPriceConfig[]
-  currencyCode?: string
-  variant?: ProductVariant
-  locale: string
-}) => {
-  const couponData = variantGetCoupon({ variant })
-
-  // variant对应的会员价折扣配置
-  const { memberPriceDiscountConfig, activeMemberPriceConfig } = getFunctionMemberPriceDiscountConfig({
-    config: memberPriceDiscount,
-    variant,
-  })
-
-  const useCoupon = !!activeMemberPriceConfig?.discount_combinations.other_product_discounts
-
-  if (!memberPriceDiscountConfig) {
-    return false as false
-  }
-
-  const originalPrice = {
-    amount: variant?.price.amount || 0,
-    priceWithCurrency: formatPrice({
-      amount: variant?.price.amount || 0,
-      currencyCode: currencyCode || 'USD',
-      locale,
-    }),
-  }
-
-  const salePriceWithoutCouponAmount = memberPriceDiscountConfig
-    ? functionDiscountCalculate({
-        config: memberPriceDiscountConfig,
-        price: variant?.price.amount || 0,
-      })
-    : variant?.price.amount || 0
-  const salePriceWithoutCoupon = {
-    amount: salePriceWithoutCouponAmount,
-    priceWithCurrency: formatPrice({
-      amount: salePriceWithoutCouponAmount,
-      currencyCode: currencyCode || 'USD',
-      locale,
-    }),
-  }
-
-  // function 会员价是在原价的基础上进行计算，暂不支持折后价
-  let salePriceAmount = salePriceWithoutCouponAmount
-
-  // 减去code的优惠
-  if (couponData?.variant_price4wscode && variant && useCoupon) {
-    if (useCoupon) {
-      // code的优惠金额
-      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)
-      salePriceAmount = new Decimal(salePriceWithoutCouponAmount).minus(codeSaveAmountDecimal).toNumber()
-    } else {
-      // 不能与 code 同时使用，需要判断会员价是否小于 code 的优惠金额，如果小于则当做没有会员价
-      const codeSaveAmountDecimal = new Decimal(variant.price.amount).minus(couponData.variant_price4wscode)
-      if (salePriceWithoutCouponAmount > codeSaveAmountDecimal.toNumber()) {
-        return false as false
-      }
-    }
-  }
-
-  const salePrice = {
-    amount: salePriceAmount,
-    priceWithCurrency: formatPrice({
-      amount: salePriceAmount,
-      currencyCode: currencyCode || 'USD',
-      locale,
-    }),
-  }
-
-  const savePriceAmount = new Decimal(originalPrice.amount).minus(salePrice.amount).toNumber()
-  const savePrice = {
-    amount: savePriceAmount,
-    priceWithCurrency: formatPrice({
-      amount: savePriceAmount,
-      currencyCode: currencyCode || 'USD',
-      locale,
-      maximumFractionDigits: 2,
-    }),
-  }
-
-  const savePriceWithoutCouponAmount = new Decimal(originalPrice.amount)
-    .minus(salePriceWithoutCoupon.amount)
-    .toNumber()
-  const savePriceWithoutCoupon = {
-    amount: savePriceWithoutCouponAmount,
-    priceWithCurrency: formatPrice({
-      amount: savePriceWithoutCouponAmount,
-      currencyCode: currencyCode || 'USD',
-      locale,
-      maximumFractionDigits: 2,
-    }),
-  }
-
-  const result: FunctionMemberPriceResult = {
-    // 是否存在会员价
-    hasMemberPrice: !!memberPriceDiscountConfig,
-    useCoupon,
-    // 原价
-    originalPrice: originalPrice.amount,
-    originalPriceWithCurrency: originalPrice.priceWithCurrency as string,
-    // 使用券后的折后价
-    salePrice: salePrice.amount,
-    salePriceWithCurrency: salePrice.priceWithCurrency as string,
-
-    // 不使用券的折后价
-    salePriceWithoutCoupon: salePriceWithoutCoupon.amount,
-    salePriceWithoutCouponWithCurrency: salePriceWithoutCoupon.priceWithCurrency as string,
-
-    // 包含使用券的节省金额
-    savePrice: savePrice.amount,
-    savePriceWithCurrency: savePrice.priceWithCurrency as string,
-
-    // 不使用券的节省金额
-    savePriceWithoutCoupon: savePriceWithoutCoupon.amount,
-    savePriceWithoutCouponWithCurrency: savePriceWithoutCoupon.priceWithCurrency as string,
-  }
-
-  return result
-}

package/src/components/credits/context/utils/getFunctionMemberPriceDiscountConfig.ts

@@ -1,51 +0,0 @@
-import { DiscountConfig, FunctionMemberPriceConfig } from '../memberPriceTypes'
-import { ProductVariant } from '@anker-in/lib'
-import { atobID } from './atobID'
-
-// 获取会员价折扣配置
-export const getFunctionMemberPriceDiscountConfig = ({
-  config,
-  variant,
-}: {
-  config?: FunctionMemberPriceConfig[]
-  variant?: ProductVariant
-}) => {
-  let memberPriceDiscountConfig: DiscountConfig | undefined
-  let activeMemberPriceConfig: FunctionMemberPriceConfig | undefined
-
-  if (!config || !variant) {
-    return {
-      memberPriceDiscountConfig,
-      activeMemberPriceConfig,
-    }
-  }
-
-  for (const configItem of config) {
-    memberPriceDiscountConfig = configItem.result_detail.member_discounts?.find(discountItem => {
-      if (discountItem.main_products.all_store_variant) {
-        return discountItem
-      }
-
-      return discountItem.main_products.variants.find(
-        variantConfig => String(variantConfig.variant_id) === atobID(variant.id as string)
-      )
-    })?.discount_conf
-
-    if (memberPriceDiscountConfig) {
-      activeMemberPriceConfig = configItem
-      break
-    }
-  }
-
-  if (!memberPriceDiscountConfig) {
-    return {
-      memberPriceDiscountConfig,
-      activeMemberPriceConfig,
-    }
-  }
-
-  return {
-    memberPriceDiscountConfig,
-    activeMemberPriceConfig,
-  }
-}

package/src/components/credits/context/utils/variantGetCoupon.ts

@@ -1,34 +0,0 @@
-import { ProductVariant } from '@anker-in/lib'
-import { atobID } from './atobID'
-
-const variantGetCoupon = ({
-  variant,
-  channel = '',
-}: {
-  variant?: ProductVariant
-  channel?: string
-}) => {
-  if (!variant) return undefined
-
-  const hideChannel = 'wsch'
-  const discountCodeApp = variant?.metafields?.discountCodeApp || []
-
-  const results = discountCodeApp?.filter((coupon: any) => {
-    const variantId = atobID(variant.id as string)
-    const isActive =
-      (!coupon?.ends_at || new Date(coupon?.ends_at).getTime() > new Date().getTime()) &&
-      new Date(coupon?.starts_at).getTime() <= new Date().getTime() &&
-      coupon.variant_shopify_id === +(variantId || '')
-
-    return (
-      isActive &&
-      (channel
-        ? coupon?.title?.toLocaleLowerCase().includes(channel)
-        : !coupon?.title?.toLocaleLowerCase().includes(hideChannel))
-    )
-  })
-
-  return results?.[0]
-}
-
-export default variantGetCoupon