@anker-in/campaign-ui 0.3.4 → 0.4.0-beta.1

package/dist/esm/templates/Credits.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/templates/Credits.types.ts"],
+  "sourcesContent": ["import { HeadlessConfig } from '@anker-in/lib'\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsPageCommon } from '../components/credits/type'\nimport { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'\nimport { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'\nimport type { CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport type { CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport type { CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport type { CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport type { CreditsAnkersolixTaskCopy } from '../components/credits/creditsAnkersolixTask'\nimport type { CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport type { CreditsGoGiftCopy } from '../components/credits/creditsGoGift'\nimport type { CreditsCashCopy } from '../components/credits/creditsCash'\nimport type { CreditsMemberPriceCopy } from '../components/credits/creditsMemberPrice'\nimport type { CreditsFaqCopy } from '../components/credits/creditsFaq'\nimport type { CreditsNavigationCopy } from '../components/credits/creditsNavigation'\n\n// Re-export copy types for convenience\nexport type {\n  CreditsBannerCopy,\n  CreditsInfoCardCopy,\n  CreditsBenefitsCopy,\n  CreditsWaysToGetCreditsCopy,\n  CreditsAnkersolixTaskCopy,\n  CreditsRedeemListCopy,\n  CreditsGoGiftCopy,\n  CreditsCashCopy,\n  CreditsMemberPriceCopy,\n  CreditsFaqCopy,\n  CreditsNavigationCopy,\n}\n\nexport enum ComponentKey {\n  Navigation = 'creditsNavigation',\n  Banner = 'creditsBanner',\n  InfoCard = 'creditsInfoCard',\n  Benefits = 'creditsBenefits',\n  WaysToGetCredits = 'creditsWaysToGetCredits',\n  AnkersolixTask = 'creditsAnkersolixTask',\n  RedeemList = 'creditsRedeemList',\n  GoGift = 'creditsGoGift',\n  SpendCreditsLikeCash = 'creditsCash',\n  MemberPrice = 'creditsMemberPrice',\n  Faqs = 'creditsFaq',\n}\n\nexport type CreditsTemplateProps = {\n  headlessConfig: HeadlessConfig\n  siteConfig: {\n    registrationsSettings: {\n      authCodeActivate: AuthCodeActivateCopy\n    }\n    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n    memberPriceDiscount?: FunctionMemberPriceConfig[]\n  }\n  creditsConfig?: {\n    alpcBrand?: string\n  }\n  pageConfig: {\n    order: ComponentKey[]\n    common: CreditsPageCommon\n    components: {\n      [ComponentKey.Navigation]?: CreditsNavigationCopy\n      [ComponentKey.Banner]?: CreditsBannerCopy\n      [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n      [ComponentKey.Benefits]?: CreditsBenefitsCopy\n      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n      [ComponentKey.AnkersolixTask]?: CreditsAnkersolixTaskCopy\n      [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n      [ComponentKey.GoGift]?: CreditsGoGiftCopy\n      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n      [ComponentKey.MemberPrice]?: CreditsMemberPriceCopy\n      [ComponentKey.Faqs]?: CreditsFaqCopy\n    }\n  }\n  userContext: {\n    profile: any\n    removeProfile: () => void\n    isLoadingProfile: boolean\n    creditInfo: any\n    customer: any\n    customerLoading: boolean\n    fetchCreditInfo: () => void\n  }\n  registrationContext: {\n    openSignUpPopup: () => void\n    openSignInPopup: () => void\n  }\n  gtm: {\n    pageGroup: string\n    pageHandle?: string\n  }\n  cartConfig?: {\n    addToCart: (params: {\n      variantList: Array<{\n        variant: any\n        quantity: number\n        attributes?: Array<{ key: string; value: string }>\n      }>\n      cartAttributes?: Record<string, string>\n      discountCodes?: string[]\n    }) => void | Promise<any>\n  }\n}\n\nexport type CreditsContentProps = {\n  headlessConfig: HeadlessConfig\n  pageConfig: CreditsTemplateProps['pageConfig']\n  userContext: CreditsTemplateProps['userContext']\n}\n"],
+  "mappings": "AAgCO,IAAKA,OACVA,EAAA,WAAa,oBACbA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,eAAiB,wBACjBA,EAAA,WAAa,oBACbA,EAAA,OAAS,gBACTA,EAAA,qBAAuB,cACvBA,EAAA,YAAc,qBACdA,EAAA,KAAO,aAXGA,OAAA",
+  "names": ["ComponentKey"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.3.4",
+  "version": "0.4.0-beta.01",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -95,7 +95,7 @@
     "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
-    "@anker-in/lib": "1.1.2-beta.2"
+    "@anker-in/lib": "1.1.3"
   },
   "publishConfig": {
     "access": "public",

package/src/components/LiveChatWidget/LiveChatWidget.tsx

@@ -183,6 +183,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
     clearSession,
   } = chatState
 
+  // 初始化加载状态（用户未配置欢迎语时，显示 loading 直到接口返回）
+  const [isInitializing, setIsInitializing] = React.useState(false)
+
   // API 调用
   const { sendMessageStream, createSession } = useChatAPI({
     apiBaseUrl,
@@ -371,6 +374,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
   const handleCreateNewSession = useCallback(async () => {
     if (!userId) return
 
+    // 如果用户没有配置欢迎语，显示 loading 状态
+    if (!welcomeMessage) {
+      setIsInitializing(true)
+    }
+
     try {
       const response = await createSession({
         user_id: userId,
@@ -450,6 +458,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
         ],
         timestamp: Date.now(),
       })
+    } finally {
+      // 接口返回后关闭 loading 状态
+      setIsInitializing(false)
     }
   }, [
     userId,
@@ -470,6 +481,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
    */
   const handleResumeSession = useCallback(
     async (existingSessionId: string) => {
+      // 如果用户没有配置欢迎语，显示 loading 状态
+      if (!welcomeMessage) {
+        setIsInitializing(true)
+      }
+
       try {
         const response = await createSession({
           user_id: userId,
@@ -590,6 +606,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
           clearSession()
           handleCreateNewSession()
         }
+      } finally {
+        // 接口返回后关闭 loading 状态
+        setIsInitializing(false)
       }
     },
     [
@@ -873,6 +892,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
               title={title}
               logoUrl={logoUrl}
               isSending={isStreaming}
+              isLoadingHistory={isInitializing}
               rendererRegistry={rendererRegistry}
               inputPlaceholder=""
               onAddToCart={onAddToCart}

package/src/components/LiveChatWidget/components/MessageContent/PromotionList.tsx

@@ -103,7 +103,7 @@ export const PromotionList: React.FC<PromotionListProps> = ({ data, isUser = fal
   return (
     <div className="space-y-3">
       {results.map(promotion => {
-        const bannerUrl = promotion.banner_url ||promotion?.metadata?.banner_url
+        const bannerUrl = promotion.banner_url || promotion?.metadata?.banner_url
 
         // 没有图片则不展示
         if (!bannerUrl) {

package/src/components/LiveChatWidget/components/MessageList.tsx

@@ -117,33 +117,37 @@ export const MessageList: React.FC<MessageListProps> = ({
   className = '',
   onAddToCart,
 }) => {
-  const listRef = useRef<HTMLDivElement>(null)
+  // 使用 callback ref + state 确保 DOM 挂载后触发重新渲染
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
+  const listRef = useCallback((node: HTMLDivElement | null) => {
+    setListElement(node)
+  }, [])
   const [showScrollButton, setShowScrollButton] = useState(false)
 
   // 检查是否接近底部
-  const isNearBottom = useCallback((threshold = 100) => {
-    const container = listRef.current
-    if (!container) return true
-
-    const { scrollTop, scrollHeight, clientHeight } = container
-    return scrollHeight - scrollTop - clientHeight < threshold
-  }, [])
+  const isNearBottom = useCallback(
+    (threshold = 100) => {
+      if (!listElement) return true
+
+      const { scrollTop, scrollHeight, clientHeight } = listElement
+      return scrollHeight - scrollTop - clientHeight < threshold
+    },
+    [listElement]
+  )
 
   // 平滑滚动到底部
   const scrollToBottom = useCallback(() => {
-    const container = listRef.current
-    if (!container) return
+    if (!listElement) return
 
-    container.scrollTo({
-      top: container.scrollHeight,
+    listElement.scrollTo({
+      top: listElement.scrollHeight,
       behavior: 'smooth',
     })
-  }, [])
+  }, [listElement])
 
   // 监听滚动事件，控制按钮显示
   useEffect(() => {
-    const container = listRef.current
-    if (!container) return
+    if (!listElement) return
 
     const handleScroll = () => {
       setShowScrollButton(!isNearBottom())
@@ -152,9 +156,9 @@ export const MessageList: React.FC<MessageListProps> = ({
     // 初始检查
     handleScroll()
 
-    container.addEventListener('scroll', handleScroll, { passive: true })
-    return () => container.removeEventListener('scroll', handleScroll)
-  }, [isNearBottom])
+    listElement.addEventListener('scroll', handleScroll, { passive: true })
+    return () => listElement.removeEventListener('scroll', handleScroll)
+  }, [listElement, isNearBottom])
 
   // 当消息列表变化时，重新检查按钮状态（但不在自动滚动时）
   useEffect(() => {
@@ -169,22 +173,31 @@ export const MessageList: React.FC<MessageListProps> = ({
 
   // 监听消息列表变化，自动滚动
   useEffect(() => {
-    if (!autoScroll || !listRef.current) return
+    if (!autoScroll || !listElement) return
 
     // 延迟滚动以确保 DOM 已更新
     const timeoutId = setTimeout(() => {
-      if (listRef.current) {
-        listRef.current.scrollTop = listRef.current.scrollHeight
+      if (listElement) {
+        listElement.scrollTop = listElement.scrollHeight
         // 自动滚动到底部后，隐藏按钮
         setShowScrollButton(false)
       }
     }, 100)
 
     return () => clearTimeout(timeoutId)
-  }, [messages, autoScroll])
-
-  // 空状态
-  if (messages.length === 0 && !isLoadingHistory) {
+  }, [messages, autoScroll, listElement])
+
+  // 空状态 + 加载中
+  if (messages.length === 0) {
+    if (isLoadingHistory) {
+      // 加载中，显示 loading
+      return (
+        <div className={`flex flex-1 items-center justify-center overflow-hidden ${className}`}>
+          <LoadingIndicator />
+        </div>
+      )
+    }
+    // 空状态
     return (
       <div className={`flex-1 overflow-hidden ${className}`}>{emptyPlaceholder || <DefaultEmptyPlaceholder />}</div>
     )
@@ -199,9 +212,6 @@ export const MessageList: React.FC<MessageListProps> = ({
           ${className}
         `}
       >
-        {/* 加载历史消息指示器 */}
-        {isLoadingHistory && <LoadingIndicator />}
-
         {/* 消息列表 */}
         <div className="flex flex-col gap-1">
           {messages.map(message => (
@@ -223,22 +233,7 @@ export const MessageList: React.FC<MessageListProps> = ({
       {/* 回到底部按钮 */}
       <button
         onClick={scrollToBottom}
-        className={`flex -translate-x-1/2 items-center justify-center ${showScrollButton ? '' : 'pointer-events-none'}`}
-        style={{
-          position: 'absolute',
-          bottom: '24px',
-          left: '50%',
-          zIndex: 10,
-          width: '40px',
-          height: '40px',
-          borderRadius: '50%',
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-          transition: 'all 300ms ease-in-out',
-          opacity: showScrollButton ? 1 : 0,
-          cursor: 'pointer',
-          border: 'none',
-        }}
+        className={`livechat-scroll-to-bottom ${showScrollButton ? 'visible' : 'hidden'}`}
         aria-label="Scroll to bottom"
         aria-hidden={!showScrollButton}
       >

package/src/components/LiveChatWidget/hooks/useChatState.ts

@@ -357,8 +357,9 @@ export interface UseChatStateOptions {
 
   /**
    * AI 回复促销卡片时触发
+   * @param promotions 促销活动数组数据
    */
-  onPromotionList?: () => void
+  onPromotionList?: (promotions: any[]) => void
 
   /**
    * 商品添加到购物车回调
@@ -852,8 +853,8 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
             // ========== 6. 促销活动列表 (Promotion List) ==========
             // 后端格式: {type: "promotion_list", data: {found, count, total, results: [...]}}
             else if (contentType === 'promotion_list' && contentData.found !== undefined) {
-              // 触发促销卡片回调
-              onPromotionList?.()
+              // 触发促销卡片回调，传递促销活动数组
+              onPromotionList?.(contentData.results || [])
 
               messageContent = {
                 type: 'promotion_list',

package/src/components/LiveChatWidget/types.ts

@@ -923,8 +923,9 @@ export interface LiveChatWidgetProps {
 
   /**
    * AI 回复促销卡片时触发
+   * @param promotions 促销活动数组数据
    */
-  onPromotionList?: () => void
+  onPromotionList?: (promotions: PromotionItem[]) => void
 
   /**
    * 商品操作回调

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

@@ -16,6 +16,7 @@ export enum ConsumeType {
 export enum AlpcConsumeType {
   Coupon = 1,
   Product = 2,
+  ExternalProduct = 5,
 }
 
 export enum TaskType {
@@ -54,6 +55,13 @@ export enum RewardType {
   Unfulfilled = 4,
   Fulfilled = 5,
   Failed = 6,
+  GogiftPending = 7,
+  GogiftApproved = 8,
+  GogiftSecondConfirm = 9,
+  GogiftRejected = 10,
+  GogiftCallbackPending = 11,
+  GogiftCallbackSuccess = 12,
+  GogiftCallbackTimeout = 13,
 }
 
 export enum AlpcErrorCode {

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

@@ -15,16 +15,13 @@ function useMyRewards({
   pageSize: number
   consumeType?: AlpcConsumeType
 }) {
-  const { isLoadingProfile, profile, alpcBrand } = useCreditsContext()
+  const {  profile, alpcBrand } = useCreditsContext()
   const { brand: headlessBrand, locale, appName } = useHeadlessContext()
   const brand = alpcBrand || headlessBrand
-  const isLogin = !!profile
 
   const [myRewards, setMyRewards] = useState<RedeemLogResponse[]>([])
   const [total, setTotal] = useState(0)
 
-  const [currentPage, setCurrentPage] = useState(0)
-
   const { isMutating: isLoading, trigger } = useAlpcMutation<
     { data: { redeem_logs: RedeemLogResponse[]; total: number } },
     {
@@ -42,32 +39,8 @@ function useMyRewards({
     },
   })
 
-  useEffect(() => {
-    if (isLoadingProfile || !profile || isLoading) {
-      return
-    }
-
-    if (page !== currentPage && page) {
-      trigger(
-        {
-          consume_type: consumeType || AlpcConsumeType.Coupon,
-          page,
-          page_size: pageSize,
-          user_id: profile?.user_id,
-        },
-        {
-          onSuccess(responseData) {
-            setCurrentPage(page)
-            setTotal(responseData?.data?.total)
-            setMyRewards(myRewards.concat(responseData?.data?.redeem_logs || []))
-          },
-        }
-      )
-    }
-  }, [trigger, myRewards, consumeType, page, pageSize, currentPage, profile, isLoadingProfile, isLoading])
-
   const getMyRewards = useCallback(async () => {
-    if (isLoadingProfile || !isLogin || !profile || isLoading) {
+    if (!profile?.user_id) {
       return
     }
     await trigger(
@@ -78,13 +51,16 @@ function useMyRewards({
         user_id: profile?.user_id,
       },
       {
-        // 仅支持1页的
         onSuccess(responseData) {
           setMyRewards(responseData?.data?.redeem_logs || [])
         },
       }
     )
-  }, [consumeType, isLoading, isLoadingProfile, page, pageSize, profile, trigger])
+  }, [consumeType, page, pageSize, profile?.user_id])
+
+  useEffect(() => {
+    getMyRewards()
+  }, [getMyRewards])
 
   return {
     myRewards,

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

@@ -0,0 +1,36 @@
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
+import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../provider'
+
+type RedeemGoGiftResponse = {
+  data: {
+    id: string
+  }
+  msg: string // 报错信息
+  code: number // 报错码
+}
+
+export const useRedeemGoGift = (mutationOptions: UseMutationConfig<RedeemGoGiftResponse> = {}) => {
+  const { alpcBrand } = useCreditsContext()
+  const { locale, appName, brand: headlessBrand } = useHeadlessContext()
+  const brand = alpcBrand || headlessBrand
+
+  return useAlpcMutation<
+    RedeemGoGiftResponse,
+    {
+      user_id?: string
+      rule_id: number
+    }
+  >(
+    {
+      url: `/v1/credit/redeem/gogift`,
+      initData: {
+        brand,
+        country: ALPC_COUNTRY_MAP.get(locale) || locale,
+        app_name: appName,
+      },
+    },
+    mutationOptions
+  )
+}

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

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { useAlpcMutation } from './useAlpcFetch'
-import { ALPC_COUNTRY_MAP } from '../const'
+import { ALPC_COUNTRY_MAP, AlpcConsumeType } from '../const'
 import { useCreditsContext } from '../provider'
 import type { ConsumeCreditRuleResponse } from '../response'
 import { useHeadlessContext } from '@anker-in/lib'
 
-function useRedeemableList() {
+function useRedeemableList(props?: { consumeType: AlpcConsumeType }) {
   let locale = '' as string
   const { profile, isLoadingProfile, alpcBrand } = useCreditsContext()
   const { locale: contextLocale, brand: headlessBrand } = useHeadlessContext()
@@ -23,7 +23,7 @@ function useRedeemableList() {
     {
       data: { consume_credit_rules: ConsumeCreditRuleResponse[] }
     },
-    { user_id?: string }
+    { consume_type?: AlpcConsumeType, user_id?: string}
   >({
     url: `/v1/credit/consume_credit_rules`,
     initData: {
@@ -34,28 +34,22 @@ function useRedeemableList() {
     },
   })
 
-  const getRedeemableList = useCallback(() => {
+  const getRedeemableList = useCallback((props?: { consumeType?: AlpcConsumeType}) => {
     trigger(
       {
         user_id: profile?.user_id,
+        ...(props?.consumeType && {consume_type: props.consumeType})
       },
       {
         onSuccess(responseData) {
+          console.log('responseData', responseData)
           let list = responseData.data.consume_credit_rules || []
-          let cList = list.filter(i => i.consume_type == 1) || []
-          let pList = list.filter(i => i.consume_type == 2) || []
-          cList = cList.sort((prev, next) => prev.consume_credits - next.consume_credits)
-          pList = pList.sort((prev, next) => prev.consume_credits - next.consume_credits)
-          const resultList = cList.concat(pList)
-          setRedeemableList(resultList)
-
-          localStorage?.setItem(
-            `consume_credit_rules-${locale}`,
-            JSON.stringify({
-              expire: Date.now() + 10 * 60 * 1000,
-              consume_credit_rules: resultList,
-            })
-          )
+          // let cList = list.filter(i => i.consume_type == 1) || []
+          // let pList = list.filter(i => i.consume_type == 2) || []
+          // cList = cList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          // pList = pList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          // const resultList = cList.concat(pList)
+          setRedeemableList(list)
         },
       }
     )
@@ -63,7 +57,7 @@ function useRedeemableList() {
 
   useEffect(() => {
     if (!isLoadingProfile) {
-      getRedeemableList()
+      getRedeemableList({ consumeType: props?.consumeType })
     }
   }, [getRedeemableList, isLoadingProfile])
 

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

@@ -1,4 +1,4 @@
-import { createContext, PropsWithChildren, useContext } from 'react'
+import { createContext, PropsWithChildren, useContext, useState } from 'react'
 import type { DTC_TASK_TYPE } from './const'
 import type { CreditInfoResponse } from './response'
 import { CreditsPageCommon } from '../type'
@@ -33,6 +33,10 @@ type Context = {
       discountCodes?: string[]
     }) => void | Promise<any>
   }
+  openMyRewardsModal: boolean
+  setOpenMyRewardsModal: (open: boolean) => void
+  openActivitiesModal: boolean
+  setOpenActivitiesModal: (open: boolean) => void
 }
 
 export const CreditsContext = createContext<Context>({
@@ -53,6 +57,10 @@ export const CreditsContext = createContext<Context>({
   memberPriceDiscount: undefined,
   alpcBrand: undefined,
   cartConfig: undefined,
+  openMyRewardsModal: false,
+  setOpenMyRewardsModal: () => {},
+  openActivitiesModal: false,
+  setOpenActivitiesModal: () => {},
 })
 
 export function CreditsProvider({
@@ -72,7 +80,10 @@ export function CreditsProvider({
   memberPriceDiscount,
   alpcBrand,
   cartConfig,
-}: PropsWithChildren<Context>) {
+}: PropsWithChildren<Omit<Context, 'openMyRewardsModal' | 'setOpenMyRewardsModal' | 'openActivitiesModal' | 'setOpenActivitiesModal'>>) {
+  const [openMyRewardsModal, setOpenMyRewardsModal] = useState(false)
+  const [openActivitiesModal, setOpenActivitiesModal] = useState(false)
+
   return (
     <CreditsContext.Provider
       value={{
@@ -91,6 +102,10 @@ export function CreditsProvider({
         memberPriceDiscount,
         alpcBrand,
         cartConfig,
+        openMyRewardsModal,
+        setOpenMyRewardsModal,
+        openActivitiesModal,
+        setOpenActivitiesModal,
       }}
     >
       {children}

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

@@ -52,6 +52,7 @@ export interface RedeemLogResponse extends BaseResponse {
   approval_status: ApprovalStatus
   rule_id: number
   code_status: number
+  link?: string
 }
 
 export interface CreditTaskResponse extends Task {

package/src/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.tsx

@@ -7,8 +7,8 @@ import { useActions } from '../creditsWaysToGetCredits/useActions'
 import { useCreditsContext } from '../context/provider'
 import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
-import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
-import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { CreditsUploadReceiptModal } from '../modal/CreditsUploadReceiptModal'
+import { CreditsSubscribeModal } from '../modal/SubscribeModal'
 import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {

package/src/components/credits/creditsBanner/index.tsx

@@ -80,25 +80,25 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
           ></div>
         )}
 
-        <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
+        <Container className="l-tablet:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l-tablet:col-span-12 l-tablet:justify-start l-tablet:truncate l-tablet:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
-                className="text-[48px] font-bold xl-xxl:text-[40px] l:text-[32px]"
+                className="text-[48px] font-bold xl-xxl:text-[40px] l-tablet:text-[32px]"
                 html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
               ></Heading>
 
               <Text
                 size="3"
-                className="l:mt-[4px] l-xxl:text-[14px] mt-[16px]"
+                className="l-tablet:mt-[4px] l-xxl:text-[14px] mt-[16px]"
                 html={isLogin ? copy.login.description : copy.unLogin.description}
               ></Text>
 
               {!isLogin && (
                 <div
                   className={classNames(
-                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',
+                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l-tablet:mt-[24px]',
                     isLogin && 'hidden'
                   )}
                 >

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 
 import RedeemableItem from './RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
-import RulesModal from '../modal/rulesModal'
+import RulesModal from '../modal/RulesModal'
 import { useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
 import { CreditsCashCopy, RedeemItem } from './type'
 import { Product, classNames as cn } from '@anker-in/lib'