@anker-in/campaign-ui 0.2.1 → 0.2.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.1",
+  "version": "0.2.2-beta.1",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -35,6 +35,20 @@
     "**/*.css",
     "**/**/*.css"
   ],
+  "scripts": {
+    "dev": "pnpm run dev:css & tsup --watch",
+    "dev:css": "postcss src/styles/global.css -o style.css --watch",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
+    "build:js:cjs": "node esbuild-cjs.mjs",
+    "build:js:cjs:types": "tsc --outdir dist/cjs",
+    "build:js:esm": "node esbuild-esm.mjs",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "postcss src/styles/global.css -o style.css",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "echo run @anker-in/campaign-ui tests",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf .turbo node_modules dist style.css"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -63,6 +77,8 @@
     "crypto-js": "^4.1.1"
   },
   "dependencies": {
+    "@anker-in/headless-ui": "workspace:*",
+    "@anker-in/lib": "workspace:*",
     "@copilotkit/react-core": "1.1.2",
     "@copilotkit/react-ui": "1.1.2",
     "@copilotkit/runtime-client-gql": "1.1.2",
@@ -80,15 +96,14 @@
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.7",
+    "decimal.js": "^10.4.3",
     "gsap": "^3.12.5",
     "monaco-editor": "^0.52.0",
     "postcss": "^8.4.38",
     "react-codepen-embed": "^1.1.0",
     "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
-    "@anker-in/headless-ui": "1.0.26",
-    "@anker-in/lib": "1.1.1"
+    "tailwindcss": "^3.4.3"
   },
   "publishConfig": {
     "access": "public",
@@ -96,19 +111,5 @@
   },
   "exclude": [
     "dist/**/*"
-  ],
-  "scripts": {
-    "dev": "pnpm run dev:css & tsup --watch",
-    "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
-    "build:js:cjs": "node esbuild-cjs.mjs",
-    "build:js:cjs:types": "tsc --outdir dist/cjs",
-    "build:js:esm": "node esbuild-esm.mjs",
-    "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "postcss src/styles/global.css -o style.css",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "test": "echo run @anker-in/campaign-ui tests",
-    "type-check": "tsc --noEmit",
-    "clean": "rm -rf .turbo node_modules dist style.css"
-  }
-}
+  ]
+}

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

@@ -6,8 +6,9 @@ import { useCreditsContext } from '../provider'
 import { useHeadlessContext } from '@anker-in/lib'
 
 function useActivities({ page, pageSize, options = {} }: { page: number; pageSize: number; options?: any }) {
-  const { profile, isLoadingProfile } = useCreditsContext()
-  const { brand } = useHeadlessContext()
+  const { profile, isLoadingProfile, alpcBrand } = useCreditsContext()
+  const { brand: headlessBrand } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
   const [activities, setActivities] = useState<CreditLogResponse[]>([])
   const [total, setTotal] = useState(0)
 

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

@@ -192,11 +192,13 @@ export const useAlpcFetch = <TData>(
   swrOptions?: UseAlpcFetchOptionsSwrOptions<TData, Error>
 ) => {
   const [retry, setRetry] = useState(false)
-  const { removeProfile } = useCreditsContext()
+  const { removeProfile, alpcBrand } = useCreditsContext()
 
   const { enable, ...otherSwrOptions } = swrOptions || {}
 
-  const { locale = '', brand } = useHeadlessContext()
+  const { locale = '', brand: headlessBrand } = useHeadlessContext()
+  // 优先使用 creditsContext 中的 alpcBrand，如果没有则使用 headlessConfig 中的 brand
+  const brand = alpcBrand || headlessBrand
 
   const { queryKey = [], body: fetchBody = {}, headers, ...fetchOptions } = options
   const fetchEnable = enable ?? true
@@ -249,9 +251,11 @@ export const useAlpcFetch = <TData>(
 
 export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutationOptions?: UseMutationConfig<TData>) => {
   const [retry, setRetry] = useState(false)
-  const { removeProfile } = useCreditsContext()
+  const { removeProfile, alpcBrand } = useCreditsContext()
 
-  const { locale = '', brand } = useHeadlessContext()
+  const { locale = '', brand: headlessBrand } = useHeadlessContext()
+  // 优先使用 creditsContext 中的 alpcBrand，如果没有则使用 headlessConfig 中的 brand
+  const brand = alpcBrand || headlessBrand
 
   const { url, initData, headers, ...fetchOptions } = options
 

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

@@ -0,0 +1,33 @@
+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/hooks/useMyRewards.ts

@@ -15,8 +15,9 @@ function useMyRewards({
   pageSize: number
   consumeType?: AlpcConsumeType
 }) {
-  const { isLoadingProfile, profile } = useCreditsContext()
-  const { brand, locale, appName } = useHeadlessContext()
+  const { isLoadingProfile, profile, alpcBrand } = useCreditsContext()
+  const { brand: headlessBrand, locale, appName } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
   const isLogin = !!profile
 
   const [myRewards, setMyRewards] = useState<RedeemLogResponse[]>([])

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

@@ -1,6 +1,7 @@
 import { ALPC_COUNTRY_MAP } from '../const'
 import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
 import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../provider'
 
 type RedeemCouponResponse = {
   data: {
@@ -12,7 +13,9 @@ type RedeemCouponResponse = {
 }
 
 export const useRedeemCoupon = (mutationOptions: UseMutationConfig<RedeemCouponResponse> = {}) => {
-  const { locale, appName, brand } = useHeadlessContext()
+  const { alpcBrand } = useCreditsContext()
+  const { locale, appName, brand: headlessBrand } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
 
   return useAlpcMutation<
     RedeemCouponResponse,

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

@@ -1,6 +1,7 @@
 import { ALPC_COUNTRY_MAP } from '../const'
 import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
 import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../provider'
 
 type RedeemProductResponse = {
   code: number
@@ -10,7 +11,9 @@ type RedeemProductResponse = {
 }
 
 export const useRedeemProduct = (mutationOptions: UseMutationConfig<RedeemProductResponse> = {}) => {
-  const { storeDomain, locale, appName, brand } = useHeadlessContext()
+  const { alpcBrand } = useCreditsContext()
+  const { storeDomain, locale, appName, brand: headlessBrand } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
 
   return useAlpcMutation<
     RedeemProductResponse,

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

@@ -8,8 +8,9 @@ import { useHeadlessContext } from '@anker-in/lib'
 
 function useRedeemableList() {
   let locale = '' as string
-  const { profile, isLoadingProfile } = useCreditsContext()
-  const { locale: contextLocale, brand } = useHeadlessContext()
+  const { profile, isLoadingProfile, alpcBrand } = useCreditsContext()
+  const { locale: contextLocale, brand: headlessBrand } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
 
   if (contextLocale === 'pl') {
     locale = 'eu'
@@ -30,7 +31,6 @@ function useRedeemableList() {
       page: 1,
       page_size: 20,
       country: (ALPC_COUNTRY_MAP.get(locale) || locale)?.toUpperCase(),
-      task_target: 1, // 1: 'app', 2: 'website'
     },
   })
 

package/src/components/credits/context/memberPriceConst.ts

@@ -0,0 +1,13 @@
+// Function 折扣类型
+export enum FunctionDiscountType {
+  Percentage = 1,
+  FixedAmount,
+  FixedPrice,
+}
+
+// 小数位取舍方式
+export enum RoundSelected {
+  RoundHighest = 'round_highest',
+  RoundLowest = 'round_lowest',
+  RoundNearest = 'round_nearest',
+}

package/src/components/credits/context/memberPriceTypes.ts

@@ -0,0 +1,54 @@
+import { FunctionDiscountType, RoundSelected } from './memberPriceConst'
+
+// 价格结尾配置
+export type PriceEndingConf = {
+  apply_price_ending: boolean
+  one_decimal_place: string
+  two_decimal_place: string
+  round_selected: RoundSelected
+}
+
+// 折扣配置
+export type DiscountConfig = {
+  discount_type: FunctionDiscountType
+  discount_value: number
+  price_ending_conf?: PriceEndingConf
+}
+
+// 会员价配置类型
+export type FunctionMemberPriceConfig = {
+  rule_id: string
+  result_detail: {
+    member_discounts?: {
+      user_identity: number // 用户身份：1-普通会员，2-高级会员等
+      main_products: {
+        all_store_variant: boolean
+        variants: {
+          variant_id: string
+          sku: string
+          handle: string
+        }[]
+      }
+      discount_conf: DiscountConfig
+    }[]
+  }
+  discount_combinations: {
+    other_product_discounts: boolean
+  }
+}
+
+// 会员价计算结果
+export type FunctionMemberPriceResult = {
+  hasMemberPrice: boolean
+  useCoupon: boolean
+  originalPrice: number
+  originalPriceWithCurrency: string
+  salePrice: number
+  salePriceWithCurrency: string
+  salePriceWithoutCoupon: number
+  salePriceWithoutCouponWithCurrency: string
+  savePrice: number
+  savePriceWithCurrency: string
+  savePriceWithoutCoupon: number
+  savePriceWithoutCouponWithCurrency: string
+}

package/src/components/credits/context/provider.tsx

@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, useContext } from 'react'
 import type { DTC_TASK_TYPE } from './const'
 import type { CreditInfoResponse } from './response'
 import { CreditsPageCommon } from '../type'
+import { FunctionMemberPriceConfig } from './memberPriceTypes'
 
 type Context = {
   profile: any
@@ -18,6 +19,8 @@ type Context = {
     pageGroup: string
   }
   pageCommon: CreditsPageCommon
+  memberPriceDiscount?: FunctionMemberPriceConfig[]
+  alpcBrand?: string
 }
 
 export const CreditsContext = createContext<Context>({
@@ -34,6 +37,8 @@ export const CreditsContext = createContext<Context>({
     pageGroup: '',
   },
   pageCommon: {},
+  memberPriceDiscount: undefined,
+  alpcBrand: undefined,
 })
 
 export function CreditsProvider({
@@ -50,6 +55,8 @@ export function CreditsProvider({
   fetchCreditInfo,
   gtm,
   pageCommon,
+  memberPriceDiscount,
+  alpcBrand,
 }: PropsWithChildren<Context>) {
   return (
     <CreditsContext.Provider
@@ -66,6 +73,8 @@ export function CreditsProvider({
         customerLoading,
         gtm,
         pageCommon,
+        memberPriceDiscount,
+        alpcBrand,
       }}
     >
       {children}

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

@@ -0,0 +1,8 @@
+// 从 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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,34 @@
+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