@anker-in/campaign-ui 0.5.16 → 0.5.18

package/src/components/credits/modal/CreditsUploadReceiptModal.tsx

@@ -2,7 +2,7 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './ModalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext } from '../../../lib'
 import classNames from 'classnames'
 import { ROUNDED_BRANDS } from '../../../constants'
 

package/src/components/credits/modal/ModalContainer.tsx

@@ -1,4 +1,4 @@
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '../../../lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
 import { ROUNDED_BRANDS } from '../../../constants'

package/src/components/credits/modal/RewardsModal.tsx

@@ -9,7 +9,7 @@ import { CreditsModalContainer, type ModalContainerProps } from './ModalContaine
 import Tip from './Tip'
 import LoadingDots from './LoadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext } from '../../../lib'
 import { ROUNDED_BRANDS } from '../../../constants'
 
 export interface RewardsCopy {

package/src/components/credits/modal/RulesModal.tsx

@@ -2,7 +2,7 @@ import { Text } from '@anker-in/headless-ui'
 import { useMemo } from 'react'
 
 import { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'
-import { classNames as cn } from '@anker-in/lib'
+import { classNames as cn } from '../../../lib'
 
 function RulesModal({
   rules,

package/src/components/credits/modal/SubscribeModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
-import { classNames, fetcher, gaTrack, useHeadlessContext } from '@anker-in/lib'
+import { classNames, fetcher, gaTrack, useHeadlessContext } from '../../../lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import sha256 from 'crypto-js/sha256'

package/src/components/credits/modal/Tip.tsx

@@ -1,4 +1,4 @@
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext } from '../../../lib'
 import classNames from 'classnames'
 import { useState } from 'react'
 import { ROUNDED_BRANDS } from '../../../constants'

package/src/components/credits/type.ts

@@ -1,4 +1,4 @@
-import type { Product, ProductVariant } from '@anker-in/lib'
+import type { Product, ProductVariant } from '../../lib'
 import type { AlpcConsumeType, ConsumeType } from './context/const'
 import { MyActivitiesMetafields } from './modal/ActivitiesModal'
 import { RewardsCopy } from './modal/RewardsModal'

package/src/components/memberPopup/MemberPopup.tsx

@@ -2,7 +2,7 @@
 
 import { lazy, Suspense, useState, useCallback, useEffect, type CSSProperties } from 'react'
 import { Picture } from '@anker-in/headless-ui'
-import { gaTrack, type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import { gaTrack, type HeadlessConfig, useHeadlessContext, classNames as cn } from '../../lib'
 import {
   MemberPopupActionType,
   MemberPopupPageScope,

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

@@ -1,5 +1,5 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react'
-import { HeadlessProvider, type HeadlessConfig } from '@anker-in/lib'
+import { HeadlessProvider, type HeadlessConfig } from '../../../lib'
 import { RegistrationProvider } from '../../registration'
 import type { EarnCreditsCopy, MemberPopupContextValue, MemberPopupInternalContextValue } from '../type'
 

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '../../../lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import { emailValidate } from '../../credits/context/utils'

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Text, Button } from '@anker-in/headless-ui'
-import { gaTrack, useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import { gaTrack, useHeadlessContext, classNames as cn } from '../../../../lib'
 import { AlpcErrorCode } from '../../../credits/context/const'
 import { useRedeemCoupon } from './hooks/useRedeemCoupon'
 import useCopy from '../../../credits/context/hooks/useCopy'

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemAndBuy.ts

@@ -1,7 +1,7 @@
-import { useBuyNow } from '@anker-in/lib'
+import { useBuyNow } from '../../../../../lib'
 import { useRedeemCoupon } from './useRedeemCoupon'
 import type { AlpcConfig } from '../../../type'
-import type { ProductVariant } from '@anker-in/lib'
+import type { ProductVariant } from '../../../../../lib'
 
 type RedeemAndBuyArg = {
   productVariant: ProductVariant

package/src/components/memberPopup/panels/ConsumeCredits/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Picture, Button } from '@anker-in/headless-ui'
-import { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '../../../../lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useViewStack } from '../../context/viewStack'
 import { useRedeemableList } from './hooks/useRedeemableList'

package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx

@@ -7,7 +7,7 @@ import {
   useHeadlessContext,
   useEmailValidation,
   useCountDown,
-} from '@anker-in/lib'
+} from '../../../../lib'
 import { Message } from '../../../registration/authCodeActivate/Message'
 import type { AuthCodeActivateCopy } from '../../type'
 import { useRegistration } from '../../../registration'

package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Text } from '@anker-in/headless-ui'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '../../../../lib'
 import type { CompleteProfileCopy } from '../../type'
 import { useUpdateProfile } from './hooks/useUpdateProfile'
 import useCountries from '../../../credits/context/hooks/useCountries'

package/src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Checkbox, Text } from '@anker-in/headless-ui'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '../../../../lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import { emailValidate } from '../../../credits/context/utils'

package/src/components/memberPopup/panels/EarnCredits/hooks/useSubscribed.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useSubscriptions } from '@anker-in/lib'
+import { useSubscriptions } from '../../../../../lib'
 import { TaskSubType } from '../../../../credits/context/const'
 import useActivities from './useActivities'
 

package/src/components/memberPopup/panels/EarnCredits/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '../../../../lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useViewStack } from '../../context/viewStack'
 import { useSubscribed } from './hooks/useSubscribed'

package/src/components/memberPopup/panels/Referral/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Picture } from '@anker-in/headless-ui'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '../../../../lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useReferralOverview } from './hooks/useReferralOverview'
 import { formatPrice } from '../../../credits/context/utils'

package/src/components/registration/authCodeActivate/index.tsx

@@ -6,7 +6,7 @@ import {
   useHeadlessContext,
   useEmailValidation,
   useCountDown,
-} from '@anker-in/lib'
+} from '../../../lib'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Message } from './Message'
 import { AuthCodeActivateProps } from './type'

package/src/components/registration/modalContainer.tsx

@@ -1,4 +1,4 @@
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '../../lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
 import { ROUNDED_BRANDS } from '../../constants'

package/src/lib/cart/const.ts

@@ -0,0 +1,23 @@
+import { SWRMutationConfiguration } from 'swr/mutation'
+
+export const currencyCodeMapping = {
+  us: 'USD',
+  ca: 'CAD',
+  gb: 'GBP',
+  eu: 'EUR',
+  au: 'AUD',
+  nz: 'NZD',
+  de: 'EUR',
+  fr: 'EUR',
+  es: 'EUR',
+  it: 'EUR',
+  nl: 'EUR',
+  pl: 'EUR',
+  ro: 'EUR',
+} as Record<string, string>
+
+export const defaultSWRMutationConfiguration: SWRMutationConfiguration<any, any, any, any, any> & {
+  throwOnError?: boolean
+} = {
+  throwOnError: false,
+}

package/src/lib/cart/context/index.tsx

@@ -0,0 +1,310 @@
+import React, { createContext, useContext, useState, useMemo, useEffect, useCallback } from 'react'
+import { Cart } from '../../shopify/types/cart'
+
+import { AutoFreeGiftConfig, FunctionGiftResult, AutoFreeGiftList } from '../types/autoFreeGift'
+import { useCalcAutoFreeGift } from '../hooks/feature/useCalcAutoFreeGift'
+import { getCart } from '../../shopify/fetchers/get-cart'
+import { useRequest } from 'ahooks'
+import { useHeadlessContext } from '../../context'
+import { useUpdateCartAttributes } from '../hooks/basic/useUpdateCartAttributes'
+import { useCartAttributes } from '../hooks/feature/useCartAttributes'
+import { AttributeInput } from '../../shopify/gql'
+import { isAttributesEqual } from '../utils'
+import { useUpdateLineCodeAmountAttributes } from '../hooks/feature/useUpdateLineCodeAmountAttributes'
+import useScriptAutoFreeGift, { UseScriptAutoFreeGiftResult } from '../hooks/feature/useScriptAutoFreeGift'
+import {
+  formatScriptAutoFreeGift,
+  formatFunctionAutoFreeGift,
+  getDiscountEnvAttributeValue,
+} from '../utils/autoFreeGift'
+import { CUSTOMER_ATTRIBUTE_KEY, CUSTOMER_SCRIPT_GIFT_KEY } from '../../shopify/utils/const'
+
+export type LoadingState = {
+  editLineQuantityLoading: boolean
+  editLineCodeAmountLoading: boolean
+  listingAutoCodeApplying: boolean
+  userCodeApplying: boolean
+}
+
+type CartContextType = {
+  cart: Cart | undefined
+  isCartLoading: boolean
+  mutateCart: (cart: Cart | undefined) => void
+  triggerFetch: () => void
+  calculatedAutoFreeGift?: FunctionGiftResult | undefined
+  addCustomAttributes: (attributes: AttributeInput[]) => void
+  removeCustomAttributes: (attributes: { key: string }[]) => void
+  setCustomAttributes: (attributes: AttributeInput[]) => void
+  isCodeChanging: boolean
+  setIsCodeChanging: (isCodeChanging: boolean) => void
+  autoFreeGiftConfig?: AutoFreeGiftConfig
+  setLoadingState: React.Dispatch<React.SetStateAction<LoadingState>>
+  loadingState: LoadingState
+  scriptAutoFreeGiftResult?: UseScriptAutoFreeGiftResult
+  scriptAutoFreeGift?: AutoFreeGiftList
+  functionAutoFreeGiftResult?: FunctionGiftResult
+  functionAutoFreeGift?: AutoFreeGiftList
+  setFunctionAutoFreeGift: (functionAutoFreeGift: AutoFreeGiftList) => void
+  setScriptAutoFreeGift: (scriptAutoFreeGift: AutoFreeGiftList) => void
+  giftNeedAddToCartLines: AutoFreeGiftList
+}
+
+const initialState: CartContextType = {
+  cart: undefined,
+  isCartLoading: false,
+  mutateCart: () => {},
+  triggerFetch: () => {},
+  calculatedAutoFreeGift: undefined,
+  addCustomAttributes: () => {},
+  removeCustomAttributes: () => {},
+  setCustomAttributes: () => {},
+  isCodeChanging: false,
+  setIsCodeChanging: () => {},
+  setLoadingState: () => {},
+  loadingState: {
+    editLineQuantityLoading: false,
+    editLineCodeAmountLoading: false,
+    listingAutoCodeApplying: false,
+    userCodeApplying: false,
+  },
+  scriptAutoFreeGift: undefined,
+  functionAutoFreeGift: undefined,
+  scriptAutoFreeGiftResult: undefined,
+  functionAutoFreeGiftResult: undefined,
+  setFunctionAutoFreeGift: () => {},
+  setScriptAutoFreeGift: () => {},
+  giftNeedAddToCartLines: [],
+}
+
+export const CartContext = createContext<CartContextType>(initialState)
+
+type CartProviderProps = {
+  children: React.ReactNode
+  autoFreeGiftConfig?: AutoFreeGiftConfig
+  gradientGiftsConfig: any
+  profile: any
+  customer: any
+}
+
+export const CartProvider = ({
+  children,
+  autoFreeGiftConfig,
+  gradientGiftsConfig,
+  profile,
+  customer,
+}: CartProviderProps) => {
+  const { storefrontToken, storeDomain, cartIdCookieName, locale } = useHeadlessContext()
+  const [customAttributes, setCustomAttributes] = useState<AttributeInput[]>([])
+  const [isCodeChanging, setIsCodeChanging] = useState(false)
+  const [loadingState, setLoadingState] = useState<LoadingState>({
+    editLineQuantityLoading: false,
+    editLineCodeAmountLoading: false,
+    listingAutoCodeApplying: false,
+    userCodeApplying: false,
+  })
+  const [scriptAutoFreeGift, setScriptAutoFreeGift] = useState<AutoFreeGiftList>([])
+  const [functionAutoFreeGift, setFunctionAutoFreeGift] = useState<AutoFreeGiftList>([])
+
+  // 获取购物车逻辑
+  const {
+    run: fetchCart,
+    data: cart,
+    loading: isCartLoading,
+    mutate: mutateCart,
+  } = useRequest(
+    async () => {
+      // 从 cookie 获取 cartId
+      const cartId =
+        typeof window !== 'undefined'
+          ? document.cookie
+              .split('; ')
+              .find(row => row.startsWith(`${cartIdCookieName}=`))
+              ?.split('=')[1]
+          : undefined
+
+      if (!cartId) {
+        return undefined
+      }
+
+      return getCart({
+        options: { cartId },
+        config: {
+          storefrontToken,
+          storeDomain,
+        },
+      })
+    },
+    {
+      refreshDeps: [locale, storefrontToken, storeDomain, cartIdCookieName],
+    }
+  ) as unknown as {
+    run: () => Promise<Cart | undefined>
+    mutate: (cart: Cart | undefined) => void
+    data: Cart | undefined
+    loading: boolean
+  }
+
+  // 更新 attributes
+  const { trigger: updateAttributes } = useUpdateCartAttributes()
+  // 公共 attributes
+  const { attributes } = useCartAttributes({ profile, customer, cart })
+
+  useRequest(
+    async () => {
+      // 去重逻辑
+      const newAttributes = [...attributes, ...customAttributes]
+
+      const needUpdate = cart && !isAttributesEqual(cart.customAttributes, newAttributes)
+
+      // 如果 attributes 没有变化，不更新
+      if (needUpdate && cart) {
+        const updatedCart = await updateAttributes({
+          cartId: cart.id,
+          attributes: newAttributes,
+        })
+        if (updatedCart) {
+          mutateCart(updatedCart)
+        }
+        return updatedCart
+      } else {
+        return Promise.resolve(cart)
+      }
+    },
+    {
+      throttleWait: 1000, // 1 秒内只触发最后一次更新
+      throttleTrailing: true,
+      throttleLeading: false,
+      refreshDeps: [attributes, customAttributes, cart?.id],
+    }
+  )
+
+  // 更新 code 时，同步更新 line item 中的 code amount attribute
+  useUpdateLineCodeAmountAttributes({
+    cart,
+    mutateCart,
+    isCartLoading: isCartLoading || isCodeChanging,
+    setLoadingState,
+  })
+
+  // 计算购物车赠品 - 只计算，不执行副作用
+  const functionAutoFreeGiftResult = useCalcAutoFreeGift(cart, autoFreeGiftConfig || [], customer)
+  const scriptAutoFreeGiftResult = useScriptAutoFreeGift({
+    campaign: gradientGiftsConfig,
+    _giveaway: CUSTOMER_SCRIPT_GIFT_KEY,
+    cart,
+  })
+
+  const formattedScriptGifts = useMemo(() => {
+    return formatScriptAutoFreeGift({
+      scriptAutoFreeGiftResult,
+      gradient_gifts: gradientGiftsConfig,
+      locale,
+    })
+  }, [scriptAutoFreeGiftResult, gradientGiftsConfig, locale])
+
+  const formattedFunctionGifts = useMemo(() => {
+    return formatFunctionAutoFreeGift({
+      qualifyingGift: functionAutoFreeGiftResult?.qualifyingGift || null,
+      giftProductsResult: (functionAutoFreeGiftResult?.giftProductsResult as any[]) || [],
+      locale,
+    })
+  }, [functionAutoFreeGiftResult, locale])
+
+  // 当格式化结果变化时更新状态
+  useEffect(() => {
+    if (
+      loadingState.userCodeApplying ||
+      loadingState.editLineQuantityLoading ||
+      loadingState.editLineCodeAmountLoading ||
+      loadingState.listingAutoCodeApplying
+    ) {
+      return
+    }
+
+    setScriptAutoFreeGift(formattedScriptGifts)
+    setFunctionAutoFreeGift(formattedFunctionGifts)
+  }, [
+    formattedScriptGifts,
+    formattedFunctionGifts,
+    loadingState.userCodeApplying,
+    loadingState.editLineQuantityLoading,
+    loadingState.editLineCodeAmountLoading,
+    loadingState.listingAutoCodeApplying,
+  ])
+
+  const giftNeedAddToCartLines = useMemo(() => {
+    const cartGiftLineItems = cart?.lineItems.filter(line =>
+      line.customAttributes?.some((attr: any) => [CUSTOMER_ATTRIBUTE_KEY, CUSTOMER_SCRIPT_GIFT_KEY].includes(attr.key))
+    )
+    const result = [...scriptAutoFreeGift, ...functionAutoFreeGift].filter(
+      item =>
+        // 如果购物车中已经存在对应赠品，且标记了 function 满赠的属性，则不添加
+        !cartGiftLineItems?.find(line => {
+          return (
+            line.variantId === item.line.variantId &&
+            line.customAttributes?.some((attr: any) => {
+              if (attr.key === '_discounts_function_env') {
+                return getDiscountEnvAttributeValue(line.customAttributes).is_gift
+              }
+
+              return false
+            })
+          )
+        })
+    )
+    return result
+  }, [cart?.lineItems, scriptAutoFreeGift, functionAutoFreeGift])
+
+  const removeCustomAttributes = useCallback((attributes: { key: string }[]) => {
+    setCustomAttributes(prev => prev.filter((attr: AttributeInput) => !attributes.some(a => a.key === attr.key)))
+  }, [])
+
+  const addCustomAttributes = useCallback(
+    (attributes: AttributeInput[]) => {
+      const sameAttributes = attributes.filter(attr => customAttributes.some(a => a.key === attr.key))
+      if (sameAttributes.length) {
+        setCustomAttributes(prev => {
+          // 更新相同的属性
+          const removedAttributes = prev.filter((attr: AttributeInput) => !sameAttributes.some(a => a.key === attr.key))
+          return [...removedAttributes, ...attributes]
+        })
+      } else {
+        // 添加新的属性
+        setCustomAttributes(prev => [...prev, ...attributes])
+      }
+    },
+    [customAttributes]
+  )
+
+  return (
+    <CartContext.Provider
+      value={{
+        cart,
+        mutateCart,
+        triggerFetch: fetchCart,
+        isCartLoading,
+        setCustomAttributes,
+        addCustomAttributes: addCustomAttributes,
+        removeCustomAttributes: removeCustomAttributes,
+        calculatedAutoFreeGift: functionAutoFreeGiftResult || scriptAutoFreeGiftResult,
+        isCodeChanging,
+        setIsCodeChanging,
+        setLoadingState,
+        loadingState,
+        // function满赠
+        functionAutoFreeGift,
+        functionAutoFreeGiftResult,
+        setFunctionAutoFreeGift,
+        // script满赠
+        scriptAutoFreeGift,
+        scriptAutoFreeGiftResult,
+        setScriptAutoFreeGift,
+        giftNeedAddToCartLines,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  )
+}
+
+export const useCartContext = () => useContext(CartContext)