@anker-in/lib 1.0.0-beta.6 → 1.1.0-beta.1

package/src/cart/hooks/feature/useUpdateLineCodeAmountAttributes.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useMemo } from 'react'
+import {
+  CODE_AMOUNT_KEY,
+  CUSTOMER_ATTRIBUTE_KEY,
+  MAIN_PRODUCT_CODE,
+  SCRIPT_CODE_AMOUNT_KEY,
+} from '../../../shopify/utils/const'
+import { updateCartLines as updateCartLinesFetcher } from '../../../shopify/fetchers/update-cart-lines'
+import { Cart } from '../../../shopify/types/cart'
+import { useRequest } from 'ahooks'
+import { LoadingState } from '../../context'
+import { getDiscountEnvAttributeValue } from '../../utils/autoFreeGift'
+import { AttributeInput } from '../../../shopify/gql'
+import { useHeadlessContext } from '../../../context'
+
+export const useUpdateLineCodeAmountAttributes = ({
+  cart,
+  mutateCart,
+  isCartLoading,
+  setLoadingState,
+}: {
+  cart?: Cart
+  mutateCart: (cart: Cart) => void
+  isCartLoading: boolean
+  setLoadingState: React.Dispatch<React.SetStateAction<LoadingState>>
+}) => {
+  const { storefrontToken, storeDomain } = useHeadlessContext()
+  
+  const mainProductDiscountCodes = useMemo(
+    () =>
+      cart?.discountCodes
+        .filter(
+          ({ code, applicable }) =>
+            applicable &&
+            MAIN_PRODUCT_CODE.some((codePrefix) => code.startsWith(codePrefix))
+        )
+        .map(({ code }) => code),
+    [cart]
+  )
+
+  const linesNeedUpdate = useMemo(
+    () =>
+      cart?.lineItems
+        .map((line) => {
+          const attrNeedUpdate: AttributeInput[] = []
+          const attrNeedDelete = []
+
+          const codeDiscount = line.discountAllocations?.find((allocation) =>
+            mainProductDiscountCodes?.includes(allocation.code)
+          )
+
+          // 是否有 _discounts_function_env 属性
+          const hasFunctionEnvAttribute = line.customAttributes?.find(
+            (attr: { key: string; value: string }) => attr.key === CUSTOMER_ATTRIBUTE_KEY
+          )
+          const functionEnvValue = getDiscountEnvAttributeValue(
+            line.customAttributes
+          )
+          // lineItem 折后总价与attr中的不一致的情况
+          const hasSameFunctionEnvAttribute =
+            Number(functionEnvValue.discounted_amount) ===
+            Number(line.totalAmount)
+
+          if (!hasSameFunctionEnvAttribute && hasFunctionEnvAttribute) {
+            attrNeedUpdate.push({
+              key: CUSTOMER_ATTRIBUTE_KEY,
+              value: JSON.stringify({
+                ...functionEnvValue,
+                discounted_amount: Number(line.totalAmount),
+              }),
+            })
+          }
+
+          const codeDiscountAmount = codeDiscount?.amount || 0
+          // 是否有 code_money 属性
+          const hasCodeAmountAttribute = line.customAttributes?.find(
+            (attr: { key: string; value: string }) =>
+              attr.key === CODE_AMOUNT_KEY ||
+              attr.key === SCRIPT_CODE_AMOUNT_KEY
+          )
+          // 两个属性都存在且值相同，则不更新
+          const hasSameCodeAmountAttribute =
+            line.customAttributes?.find(
+              (attr: { key: string; value: string }) =>
+                attr.key === CODE_AMOUNT_KEY &&
+                attr.value === String(codeDiscountAmount)
+            ) &&
+            line.customAttributes?.find(
+              (attr: { key: string; value: string }) =>
+                attr.key === SCRIPT_CODE_AMOUNT_KEY &&
+                attr.value === String(codeDiscountAmount)
+            )
+
+          if (codeDiscount && !hasSameCodeAmountAttribute) {
+            attrNeedUpdate.push({
+              key: CODE_AMOUNT_KEY,
+              value: String(codeDiscountAmount),
+            })
+            attrNeedUpdate.push({
+              key: SCRIPT_CODE_AMOUNT_KEY,
+              value: String(codeDiscountAmount),
+            })
+          } else if (!codeDiscount && hasCodeAmountAttribute) {
+            // 没有 code 需要删除的情况
+            attrNeedDelete.push(CODE_AMOUNT_KEY)
+            attrNeedDelete.push(SCRIPT_CODE_AMOUNT_KEY)
+          }
+
+          return {
+            line,
+            attrNeedUpdate,
+            attrNeedDelete,
+          }
+        })
+        .filter(
+          ({ attrNeedUpdate, attrNeedDelete }) =>
+            attrNeedUpdate.length || attrNeedDelete.length
+        )
+        .map(({ line, attrNeedUpdate, attrNeedDelete }) => {
+          if (attrNeedUpdate.length) {
+            return {
+              id: line.id,
+              attributes: [
+                ...(line.customAttributes?.filter(
+                  (attr: { key: string; value: string }) =>
+                    !attrNeedUpdate.some(
+                      (updateAttr) => updateAttr.key === attr.key
+                    )
+                ) || []),
+                ...attrNeedUpdate,
+              ],
+            }
+          } else if (attrNeedDelete.length) {
+            return {
+              id: line.id,
+              attributes:
+                line.customAttributes?.filter(
+                  (attr: { key: string; value: string }) => !attrNeedDelete.includes(attr.key)
+                ) || [],
+            }
+          } else {
+            return {
+              id: line.id,
+              attributes: line.customAttributes || [],
+            }
+          }
+        }),
+    [cart?.lineItems, mainProductDiscountCodes]
+  )
+
+  const { loading } = useRequest(
+    async () => {
+      if (linesNeedUpdate?.length && !isCartLoading) {
+        const result = await updateCartLinesFetcher({
+          options: {
+            cartId: cart?.id || '',
+            lines: linesNeedUpdate,
+          },
+          config: {
+            storefrontToken,
+            storeDomain,
+          },
+        })
+        if (result) {
+          mutateCart(result)
+        }
+      }
+    },
+    {
+      throttleWait: 3000, // 3 秒内只触发最后一次更新
+      throttleTrailing: true,
+      refreshDeps: [linesNeedUpdate, isCartLoading],
+    }
+  )
+
+  useEffect(() => {
+    setLoadingState((prev) => {
+      return {
+        ...prev,
+        editLineCodeAmountLoading: loading,
+      }
+    })
+  }, [loading, setLoadingState])
+}

package/src/cart/index.ts

@@ -0,0 +1,19 @@
+// Context
+
+// Basic Hooks
+
+export * from './hooks/basic/useBuyNow'
+
+// Feature Hooks
+
+// Types
+export * from './types'
+
+// Utils
+export * from './utils'
+
+// Constants
+export * from './const'
+
+// Tracking
+export * from './track/fbq'

package/src/cart/track/fbq.ts

@@ -0,0 +1,38 @@
+import { fbq, gtag } from '../../utils/track'
+import { AddToCartLineItems } from '../types'
+
+export const addToCartFbq = ({ lineItems = [] }: { lineItems: AddToCartLineItems }) => {
+  if (lineItems.length && lineItems[0].variant) {
+    const { variant, quantity, finalPrice } = lineItems[0]
+    fbq('track', 'AddToCart', {
+      value: finalPrice?.amount || variant?.price?.amount,
+      num_items: quantity,
+      currency: variant?.price?.currencyCode,
+      content_name: variant?.product?.title, // 产品内容的名字
+      content_type: 'product_group',
+      content_ids: String(variant?.id), // 产品的varaint id
+      content_category: variant?.product?.metafields?.global?.trafficType || 'public', // 产品分类
+    })
+  }
+}
+
+export type FbqBuyNowTrackConfig = {
+  gtagId: string
+  fbqBuyNowEvent: string
+  gtagBuyNowLabel: string
+  gtagBuyNowConversion: string
+}
+
+export const buyNowFbq = ({ trackConfig }: { trackConfig: FbqBuyNowTrackConfig }) => {
+  try {
+    if (trackConfig?.fbqBuyNowEvent) {
+      fbq('trackCustom', trackConfig?.fbqBuyNowEvent)
+    }
+
+    if (trackConfig?.gtagBuyNowLabel) {
+      gtag('event', trackConfig?.gtagBuyNowConversion || 'conversion', {
+        send_to: `${trackConfig?.gtagId}/${trackConfig?.gtagBuyNowLabel}`,
+      })
+    }
+  } catch (error) {}
+}

package/src/cart/track/gtm.ts

@@ -0,0 +1,159 @@
+// GA 埋点
+import { Decimal } from 'decimal.js'
+
+import { AddToCartLineItems, BuyNowLineItems, GtmParams } from '../types'
+import { Cart } from '../../shopify/types/cart'
+import { getQuery } from '../utils'
+
+declare global {
+  interface Window {
+    dataLayer?: any[]
+    gtag?: (...args: any) => void
+  }
+}
+
+export const gaTrack = (data: any) => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  window.dataLayer = window?.dataLayer || []
+  if (!Array.isArray(window.dataLayer)) {
+    return ''
+  }
+
+  try {
+    window?.dataLayer?.push({ event_parameters: null })
+    window?.dataLayer?.push(data || {})
+  } catch (error) {
+    console.log('pageGTMEvent error', error)
+  }
+}
+
+export const addToCartGa = ({
+  lineItems = [],
+  gtmParams = {},
+}: {
+  lineItems: AddToCartLineItems
+  gtmParams?: GtmParams
+}) => {
+  if (!lineItems.length) {
+    return
+  }
+
+  const { variant } = lineItems[0]
+
+  const currencyCode = variant?.price?.currencyCode
+  const totalPrice = lineItems?.reduce(
+    (prev, { variant }) => new Decimal(prev || 0).plus(variant?.price?.amount || 0).toNumber(),
+    0
+  )
+
+  const searchTerm = getQuery().searchTerm
+
+  gaTrack({
+    event: 'ga4Event',
+    event_name: 'add_to_cart',
+    event_parameters: {
+      page_group: gtmParams?.pageGroup,
+      currency: currencyCode,
+      value: totalPrice, // Total price after discount
+      position: gtmParams?.position || '', // Module name
+      ...(searchTerm && {
+        // 站内搜索参数
+        search_term: searchTerm,
+        item_list_name: 'innersite_search',
+      }),
+      items: lineItems?.map(({ variant, quantity }) => ({
+        item_id: variant?.sku,
+        item_name: variant?.product?.title || variant?.product?.name,
+        item_brand: gtmParams?.brand || '',
+        item_category: variant?.product?.productType || '',
+        item_variant: variant?.title || variant?.name,
+        price: variant?.finalPrice?.amount ?? variant?.price?.amount, // Product unit price
+        quantity: quantity || 1,
+      })),
+      ...gtmParams?.ga4Params,
+    },
+  })
+}
+
+export const buyNowGa = ({ lineItems = [], gtmParams = {} }: { lineItems: BuyNowLineItems; gtmParams?: GtmParams }) => {
+  if (!lineItems.length) {
+    return
+  } else {
+    const currencyCode = lineItems[0].variant.price.currencyCode
+    const totalPrice = lineItems?.reduce(
+      (prev, lineItem) =>
+        new Decimal(prev || 0)
+          .plus(lineItem?.finalPrice?.amount ?? (lineItem?.variant.price.amount || 0))
+          .mul(lineItem.quantity || 1)
+          .toNumber(),
+      0
+    )
+    const searchTerm = getQuery().searchTerm
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'begin_checkout',
+      value: totalPrice, // Total price after discount
+      event_parameters: {
+        ...(searchTerm && {
+          search_term: searchTerm, // Use query directly
+          item_list_name: 'innersite_search',
+        }),
+        position: gtmParams?.position,
+        page_group: gtmParams.pageGroup,
+        currency: currencyCode,
+        value: totalPrice, // Total price after discount
+        items: lineItems?.map(lineItem => ({
+          item_id: lineItem.variant.sku,
+          item_name: lineItem.variant.product.title,
+          item_brand: lineItem.variant.product.vendor || gtmParams?.brand || '',
+          item_category: lineItem.variant.product.productType,
+          item_variant: lineItem.variant.title,
+          price: lineItem.finalPrice?.amount || lineItem.variant.price.amount, //产品单价
+          quantity: lineItem.quantity || 1,
+        })),
+        ...gtmParams.ga4Params,
+      },
+    })
+  }
+}
+
+export const cartCheckoutGa = ({ cart, gtmParams = {} }: { cart: Cart; gtmParams?: GtmParams }) => {
+  if (!cart?.lineItems.length) {
+    return
+  }
+
+  gaTrack({
+    event: 'ga4Event',
+    event_name: 'begin_checkout',
+    event_parameters: {
+      page_group: gtmParams?.pageGroup,
+      position: 'Cart Pop Up_Checkout',
+      currency: cart?.currency?.code,
+      value: cart?.totalPrice,
+      items: cart?.lineItems.map(product => {
+        const variant = product?.variant
+        return {
+          item_id: variant?.sku,
+          item_name: product?.name,
+          item_variant: variant?.title,
+          price: variant?.price,
+          quantity: product?.quantity || 1,
+        }
+      }),
+    },
+  })
+}
+
+export function gaNormalClick({ position, label }: { position: string; label: string }) {
+  gaTrack({
+    event: 'ga4Event',
+    event_name: 'lp_button',
+    event_parameters: {
+      page_group: 'soundcoreCredits Rewards Program',
+      position: position,
+      button_name: label,
+    },
+  })
+}

package/src/cart/types/autoFreeGift.ts

@@ -0,0 +1,169 @@
+import { ProductVariant } from '../../shopify/types/product'
+import { Product } from '../../shopify/types'
+import { LineItem } from '../../shopify/types/cart'
+
+export type AutoFreeGift = {
+  currentTier: {
+    amount: number
+    gift?: ProductVariant
+  }
+  nextTierGoal: {
+    amount: number
+    gift?: ProductVariant
+  }
+}
+
+export type DiscountLabel = {
+  cart_checkout_label: string
+  product_label: string
+  sold_out_label: string
+}
+
+export type AutoFreeGiftMainProduct = {
+  spend_money_type: number
+  variant_id_list: string[]
+  all_store_variant: boolean
+}
+
+export type GiftProduct = {
+  spend_sum_money: number
+  gift_type: number
+  reward_list: {
+    get_unit: number
+    variant_id: string
+    bak_variant_id_list: null
+  }[]
+}
+
+export type AutoFreeGiftConfig = Config[]
+
+// 定义规则条件类型
+export type RuleCondition = {
+  with_special_url_params: string[] // 包含特殊URL参数
+  without_special_url_params: string[] // 不包含特殊URL参数
+  with_user_tags: string[] // 包含用户标签
+  without_user_tags: string[] // 不包含用户标签
+}
+
+// main_product
+export type MainProductInfo = {
+  spend_money_type: SpendMoneyType
+  variant_list: VariantItem[]
+  all_store_variant: boolean
+}
+
+// 定义配置类型 - 根据JSON结构更新
+export type Config = {
+  // 规则ID
+  rule_id: number
+  // 规则类型
+  rule_type: RuleType
+  // 折扣标签
+  discount_label: {
+    cart_checkout_label: string
+    product_label: string
+    sold_out_label: string
+  }
+  // 前端标签
+  frontend_labels: { key: string; label: string; desc: string }[]
+  // 应用单位
+  apply_unit: number
+  // 规则结果
+  rule_result: {
+    // 购买规则类型
+    buy_rule_type: BuyRuleType
+    // 花费获取奖励
+    spend_get_reward: {
+      // 主产品
+      main_product: MainProductInfo
+      // 礼品产品
+      gift_product: GiftProductItem[]
+    }
+    // 买赠奖励
+    buy_get_reward: {
+      // 主产品
+      main_product: MainProductInfo
+      // 礼品产品
+      gift_product: GiftProductItem[] | null
+    }
+  }
+  // 规则条件
+  rule_conditions?: RuleCondition[]
+}
+
+export interface GiftTier {
+  spend_sum_money: number // 消费门槛金额
+  gift_type: number // 礼品类型
+  reward_list: RewardItem[] // 满足此门槛后可获得的奖励列表
+}
+
+export interface RewardItem {
+  get_unit: number // 获得单位
+  variant_list: VariantItem[] // 变体列表
+}
+
+export interface VariantItem {
+  variant_id: string // 变体ID
+  sku: string // 库存单位
+  handle: string // 处理标识
+  discount_value: number // 折扣值
+}
+
+export interface GiftProductItem {
+  spend_sum_money: number // 消费总金额
+  gift_type: number // 礼品类型
+  reward_list: RewardItem[] // 奖励列表
+}
+
+export enum RuleType {
+  AUTO_FREE_GIFT = 1, // 自动赠品
+  BUNDLE = 2, // 组合
+  VOLUME_DISCOUNT = 3, // 量价折扣
+  ORDER_DISCOUNT = 4, // 订单折扣
+  PRICE_DISCOUNT = 5, // 价格折扣
+}
+
+export enum BuyRuleType {
+  BUY_GET_GIFT = 1, // 买赠
+  SPEND_GET_GIFT = 2, // 满赠
+}
+
+export enum SpendMoneyType {
+  ORIGIN_PRICE = 1, // 原价
+  DISCOUNT_PRICE = 2, // 折扣价
+}
+
+// calcAutoFreeGift
+// 计算型 Hook 的返回类型
+export interface FunctionGiftResult {
+  qualifyingGift: FormattedGift | null // 当前应得的赠品
+  nextTierGoal: GiftTier | null // 下一个目标阶梯
+  activeCampaign: Config | null // 当前生效的活动配置
+  isLoading: boolean // 依赖数据是否加载中
+  giftProductsResult?: Product[] | []
+}
+
+// 格式化后的赠品信息，用于添加购物车
+export interface FormattedGift {
+  tier: GiftTier // 原始阶梯信息
+  itemsToAdd: CartLineInput[] // 准备好添加购物车的商品列表
+}
+
+// 购物车行项目输入类型 (Shopify API)
+export interface CartLineInput {
+  variant: {
+    id: string
+    handle: string
+    sku: string
+  }
+  quantity: number
+  attributes: { key: string; value: string }[]
+}
+
+// cart context AutoFreeGift
+export type AutoFreeGiftItem = {
+  line: LineItem
+  isSoldOut: boolean
+}
+
+export type AutoFreeGiftList = AutoFreeGiftItem[] | []

package/src/cart/types/index.ts

@@ -0,0 +1,26 @@
+import { Attributes } from '../../shopify'
+import { ProductVariant, ProductPrice } from '../../shopify'
+
+export type AddToCartLineItems = Array<{
+  variant: ProductVariant
+  variantId?: string // 兼容老数据
+  quantity: number
+  finalPrice?: ProductPrice
+  attributes?: Attributes
+  sellingPlanId?: string
+}>
+
+export type BuyNowLineItems = Array<{
+  variant: ProductVariant
+  quantity: number
+  finalPrice?: ProductPrice
+  attributes?: Attributes
+  sellingPlanId?: string
+}>
+
+export type GtmParams = {
+  brand?: string // ga4 brand
+  position?: string // ga4 position
+  pageGroup?: string // ga4 pageGroup
+  ga4Params?: Record<string, any> // ga4 额外埋点字段
+}

package/src/cart/types/orderDiscount.ts

@@ -0,0 +1,38 @@
+import { RuleCondition } from './autoFreeGift'
+
+export enum DiscountType {
+  PERCENTAGE = 1, // 百分比折扣
+  FIXED_AMOUNT = 2, // 固定金额折扣
+  REDUCE_PRICE = 3, // 降低指定价格
+}
+
+export enum BasePriceType {
+  ORIGIN_PRICE = 1, // 原价
+  MIN_DISCOUNTED_PRICE = 2, // 最低折扣价
+}
+
+export type TieredDiscount = {
+  amount: number // 消费门槛金额
+  discount: number // 折扣金额
+  discount_type: DiscountType // 折扣类型
+}
+
+export type OrderDiscountConfig = {
+  rule_id: number
+  rule_type: number
+  rule_conditions?: RuleCondition[]
+  result_detail: {
+    main_product: {
+      variant_list: Array<{
+        variant_id: string
+        sku: string
+        handle: string
+      }>
+      all_store_variant: boolean
+    }
+    order_discount_conf: {
+      base_price: BasePriceType
+      tiered_discounts: TieredDiscount[]
+    }
+  }
+}

package/src/cart/types/priceDiscount.ts

@@ -0,0 +1,21 @@
+export enum DiscountType {
+  PERCENTAGE = 1, // 百分比折扣
+  FIXED_AMOUNT = 2, // 固定金额折扣
+}
+
+export enum BasePriceType {
+  MIN_DISCOUNTED_PRICE = 1, // 最低折扣价
+  MIN_TOTAL_PRICE = 2, // 最低总价
+}
+
+export type PriceDiscountConfig = {
+  rule_id: number
+  rule_type: number
+  discount_type: DiscountType
+  discount_value: number
+  base_price_type: BasePriceType
+  applicable_products: Array<{
+    product_id: string
+    variant_id?: string
+  }>
+}