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

package/src/components/credits/modal/{MyRewardsModal.tsx → RewardsModal.tsx}

@@ -2,17 +2,17 @@ import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import clipboard from 'copy-to-clipboard'
 import dayjs from 'dayjs'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { ApprovalStatus, AlpcConsumeType, RewardType } from '../context/const'
-import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import Tip from './tip'
-import LoadingDots from './loadingDots'
+import { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'
+import Tip from './Tip'
+import LoadingDots from './LoadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
 import { useHeadlessContext } from '@anker-in/lib'
 import { ROUNDED_BRANDS } from '../../../constants'
 
-export interface MyRewardsMetafields {
+export interface RewardsCopy {
   title: string
   orderNumberLabel: string
   valueLabel: string
@@ -21,6 +21,7 @@ export interface MyRewardsMetafields {
   approveSuccessLabel: string
   couponTab: string
   productTab: string
+  externalProductTab?: string
   pendingLabel: string
   unfulfilledLabel: string
   fulfilledLabel: string
@@ -33,129 +34,144 @@ export interface MyRewardsMetafields {
   code: string
   copied: string
   copy: string
+  redeemLinkLabel?: string
+  goGiftStatus?: {
+    pending?: {
+      label: string
+      tip: string
+    }
+    approved?: {
+      label: string
+      tip: string
+    }
+    secondConfirm?: {
+      label: string
+      tip: string
+    }
+    rejected?: {
+      label: string
+      tip: string
+    }
+    callbackPending?: {
+      label: string
+      tip: string
+    }
+    callbackSuccess?: {
+      label: string
+      tip: string
+    }
+    callbackTimeout?: {
+      label: string
+      tip: string
+    }
+  }
   emptyListImage: {
     url: string
     alt?: string
   }
 }
-interface MyRewardsModalProps extends ModalContainerProps {
-  data: MyRewardsMetafields
+interface RewardsModalProps extends ModalContainerProps {
+  data: RewardsCopy
 }
 
-function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
+function RewardsModal({ data, ...props }: RewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
-  const [couponPage, setCouponPage] = useState(1)
-  const [productPage, setProductPage] = useState(1)
+  const [page, setPage] = useState(1)
   const [copied, setCopied] = useState(-1)
 
   const tabs = useMemo(() => {
-    const availableTabs: { title: string; type: number }[] = []
+    return [
+      { title: data.couponTab, type: AlpcConsumeType.Coupon },
+      { title: data.productTab, type: AlpcConsumeType.Product },
+      { title: data.externalProductTab, type: AlpcConsumeType.ExternalProduct },
+    ].filter((tab): tab is { title: string; type: number } => !!tab.title)
+  }, [data.couponTab, data.productTab, data.externalProductTab])
 
-    if (data.couponTab) {
-      availableTabs.push({
-        title: data.couponTab,
-        type: AlpcConsumeType.Coupon,
-      })
-    }
+  // Reset page when switching tabs
+  useEffect(() => {
+    setPage(1)
+  }, [activeTab])
 
-    if (data.productTab) {
-      availableTabs.push({
-        title: data.productTab,
-        type: AlpcConsumeType.Product,
-      })
-    }
+  const { myRewards = [], canNext, isLoading } = useMyRewards({
+    page,
+    pageSize: 1000,
+    consumeType: activeTab,
+  })
 
-    return availableTabs
-  }, [data.couponTab, data.productTab])
+  const getProductType = useCallback((item: any) => {
+    if (item.fulfillment_status && item.fulfillment_status !== 'null') {
+      return item.fulfillment_status === 'fulfilled' ? RewardType.Fulfilled : RewardType.Unfulfilled
+    }
 
-  const myProductRewardsOptions = useMemo(() => {
-    return {
-      page: props.isOpen ? productPage : 0,
-      pageSize: 1000,
-      consumeType: AlpcConsumeType.Product,
+    if (item.approval_status === ApprovalStatus.Success || item.approval_status === ApprovalStatus.DoubleConfirm) {
+      return RewardType.ApproveSuccess
     }
-  }, [props.isOpen, productPage])
-  const myCouponRewardsOptions = useMemo(() => {
-    return {
-      page: props.isOpen ? couponPage : 0,
-      pageSize: 1000,
-      consumeType: AlpcConsumeType.Coupon,
+
+    if (item.approval_status === ApprovalStatus.Failed) {
+      return RewardType.Failed
     }
-  }, [props.isOpen, couponPage])
 
-  const {
-    myRewards: myCouponRewards = [],
-    canNext: couponCanNext,
-    isLoading: couponIsLoading,
-  } = useMyRewards(myCouponRewardsOptions)
-  const {
-    myRewards: myProductRewards = [],
-    canNext: productCanNext,
-    isLoading: productIsLoading,
-  } = useMyRewards(myProductRewardsOptions)
+    return RewardType.Pending
+  }, [])
+
+  const getGoGiftType = useCallback((status?: number) => {
+    const statusMap: Record<number, RewardType> = {
+      0: RewardType.GogiftPending,
+      1: RewardType.GogiftApproved,
+      2: RewardType.GogiftSecondConfirm,
+      3: RewardType.GogiftRejected,
+      4: RewardType.GogiftCallbackPending,
+      5: RewardType.GogiftCallbackSuccess,
+      6: RewardType.GogiftCallbackTimeout,
+    }
+    return status !== undefined ? (statusMap[status] ?? RewardType.GogiftPending) : RewardType.GogiftPending
+  }, [])
 
   const list = useMemo(() => {
-    if (activeTab === AlpcConsumeType.Coupon) {
-      return myCouponRewards.map(item => ({
+    return myRewards.map(item => {
+      const base = {
         title: item.goods_title,
         value: item.consume_credits,
-        type: RewardType.Received,
         date: new Date(item.create_time * 1000),
-        couponCode: item.coupon_code,
-        orderNumber: '',
-      }))
-    }
-
-    if (activeTab === AlpcConsumeType.Product) {
-      return myProductRewards.map(item => {
-        let type = RewardType.Pending
+      }
 
-        if (item.fulfillment_status && item.fulfillment_status !== 'null') {
-          // 物流状态
-          if (item.fulfillment_status === 'fulfilled') {
-            type = RewardType.Fulfilled
-          } else {
-            type = RewardType.Unfulfilled
-          }
-        } else {
-          if (
-            item.approval_status === ApprovalStatus.Success ||
-            item.approval_status === ApprovalStatus.DoubleConfirm
-          ) {
-            type = RewardType.ApproveSuccess
-          } else if (item.approval_status === ApprovalStatus.Failed) {
-            type = RewardType.Failed
-          }
+      if (activeTab === AlpcConsumeType.Coupon) {
+        return {
+          ...base,
+          type: RewardType.Received,
+          couponCode: item.coupon_code,
+          orderNumber: '',
+          link: '',
         }
+      }
 
+      if (activeTab === AlpcConsumeType.Product) {
         return {
-          title: item.goods_title,
-          value: item.consume_credits,
-          type,
-          date: new Date(item.create_time * 1000),
+          ...base,
+          type: getProductType(item),
           orderNumber: item.order_number,
           couponCode: '',
+          link: '',
         }
-      })
-    }
+      }
 
-    return []
-  }, [activeTab, myProductRewards, myCouponRewards])
-
-  const canNext = useMemo(() => {
-    if (activeTab === AlpcConsumeType.Coupon) {
-      return couponCanNext
-    }
+      if (activeTab === AlpcConsumeType.ExternalProduct) {
+        return {
+          ...base,
+          type: getGoGiftType(item.approval_status),
+          orderNumber: '',
+          couponCode: '',
+          link: item.link || '',
+        }
+      }
 
-    if (activeTab === AlpcConsumeType.Product) {
-      return productCanNext
-    }
+      return { ...base, type: RewardType.Received, couponCode: '', orderNumber: '', link: '' }
+    })
+  }, [activeTab, myRewards, getProductType, getGoGiftType])
 
-    return false
-  }, [activeTab, couponCanNext, productCanNext])
 
   const TypeMap = useMemo(() => {
     return {
@@ -166,6 +182,13 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
       [RewardType.Unfulfilled]: data.unfulfilledLabel,
       [RewardType.Fulfilled]: data.fulfilledLabel,
       [RewardType.Failed]: data.failedLabel,
+      [RewardType.GogiftPending]: data.goGiftStatus?.pending?.label || data.pendingLabel,
+      [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.label || data.approveSuccessLabel,
+      [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.label || data.approveSuccessLabel,
+      [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.label || data.failedLabel,
+      [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.label || data.pendingLabel,
+      [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.label || data.receivedLabel,
+      [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.label || data.failedLabel,
     }
   }, [data])
 
@@ -178,6 +201,13 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
       [RewardType.Unfulfilled]: data.processingTip,
       [RewardType.Fulfilled]: data.ShippedTip,
       [RewardType.Failed]: '',
+      [RewardType.GogiftPending]: data.goGiftStatus?.pending?.tip || '',
+      [RewardType.GogiftApproved]: data.goGiftStatus?.approved?.tip || '',
+      [RewardType.GogiftSecondConfirm]: data.goGiftStatus?.secondConfirm?.tip || '',
+      [RewardType.GogiftRejected]: data.goGiftStatus?.rejected?.tip || '',
+      [RewardType.GogiftCallbackPending]: data.goGiftStatus?.callbackPending?.tip || '',
+      [RewardType.GogiftCallbackSuccess]: data.goGiftStatus?.callbackSuccess?.tip || '',
+      [RewardType.GogiftCallbackTimeout]: data.goGiftStatus?.callbackTimeout?.tip || '',
     }
   }, [data])
 
@@ -190,20 +220,21 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
       [RewardType.Unfulfilled]: '#999',
       [RewardType.Fulfilled]: '#999',
       [RewardType.Failed]: '#F84D4F',
+      [RewardType.GogiftPending]: '#999',
+      [RewardType.GogiftApproved]: '#999',
+      [RewardType.GogiftSecondConfirm]: '#999',
+      [RewardType.GogiftRejected]: '#F84D4F',
+      [RewardType.GogiftCallbackPending]: '#999',
+      [RewardType.GogiftCallbackSuccess]: '#52C41A',
+      [RewardType.GogiftCallbackTimeout]: '#F84D4F',
     }
   }, [])
 
   const handleScrollEnd = useCallback(() => {
-    if (!canNext) {
-      return
+    if (canNext) {
+      setPage(prev => prev + 1)
     }
-
-    if (activeTab === AlpcConsumeType.Coupon) {
-      setCouponPage(couponPage + 1)
-    } else if (activeTab === AlpcConsumeType.Product) {
-      setProductPage(productPage + 1)
-    }
-  }, [activeTab, productPage, couponPage, canNext])
+  }, [canNext])
 
   const handleCopy = useCallback((code: string, idx: number) => {
     setCopied(idx)
@@ -213,7 +244,6 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
     }, 2000)
   }, [])
 
-  const isLoading = activeTab === AlpcConsumeType.Coupon ? couponIsLoading : productIsLoading
 
   return (
     <CreditsModalContainer
@@ -292,6 +322,18 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
                           </span>
                         )}
                       </div>
+                      {item?.link && (
+                        <div className="text-[14px] font-semibold text-[#999]">
+                          <a
+                            href={item.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-brand underline"
+                          >
+                            {data?.redeemLinkLabel || 'Redeem Link'}
+                          </a>
+                        </div>
+                      )}
                     </div>
                     <div className="grid gap-[4px] text-right">
                       <div
@@ -327,4 +369,4 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   )
 }
 
-export default MyRewardsModal
+export default RewardsModal

package/src/components/credits/modal/{rulesModal.tsx → RulesModal.tsx}

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

package/src/components/credits/modal/{subscribeModal.tsx → SubscribeModal.tsx}

@@ -8,7 +8,7 @@ import sha256 from 'crypto-js/sha256'
 import { useCreditsContext } from '../context/provider'
 import { ROUNDED_BRANDS } from '../../../constants'
 import { emailValidate } from '../context/utils'
-import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'
 
 export type CreditsSubscribeModalCopy = {
   title: string

package/src/components/credits/type.ts

@@ -1,7 +1,7 @@
 import type { Product, ProductVariant } from '@anker-in/lib'
 import type { AlpcConsumeType, ConsumeType } from './context/const'
-import { MyActivitiesMetafields } from './modal/activitiesModal'
-import { MyRewardsMetafields } from './modal/MyRewardsModal'
+import { MyActivitiesMetafields } from './modal/ActivitiesModal'
+import { RewardsCopy } from './modal/RewardsModal'
 
 export interface Subscription {
   preference: {
@@ -30,8 +30,8 @@ export type RedeemableItem = {
     showCredit: boolean
     title: string
   }
-  product: Product
-  variant: ProductVariant
+  product?: Product
+  variant?: ProductVariant
 }
 
 export interface ShippingCountry {
@@ -50,6 +50,67 @@ export interface ShippingZone {
   countries: ShippingCountry[]
 }
 
+export type RedeemModalCommon = {
+  confirmTitle: string
+  confirmButton: string
+  commonError: string
+  redeemLimitError: string
+  inventoryNotEnough: string
+  creditsNotEnough: string
+  crossSiteError: string
+  errorImageUrl: string
+  coupon: {
+    successDesc: string
+    successTitle: string
+    successButton: string
+    successButtonUrl: string
+  }
+  virtualProduct: {
+    successDesc: string
+    successTitle: string
+    successButton: string
+    successButtonUrl: string
+    stepTitle?: string
+    steps?: {
+      imageUrl: string
+      title: string
+    }[]
+  }
+  product: {
+    required: string
+    invalidEmail: string
+    shippingAddress: string
+    shippingProduct: string
+    addressForm: {
+      key: string
+      type: string
+      label: string
+      isSelect: boolean
+      required: boolean
+      placeholder: string
+    }[][]
+    form: {
+      key: string
+      type: string
+      isSelect: boolean
+      required: boolean
+      placeholder: string
+    }[][]
+    successDesc: string[]
+    rules: string[]
+    steps: {
+      imageUrl: string
+      title: string
+    }[]
+    quantityLabel: string
+    totalPriceLabel: string
+    variantLabel: string
+    shippingFeeLabel: string
+    paymentButton: string
+    stepTitle: string
+  }
+}
+
 export type CreditsPageCommon = {
   pointUnit?: string
   infoIcon?: string
@@ -59,13 +120,15 @@ export type CreditsPageCommon = {
   off?: string
   copy?: string
   giftCardLabel?: string
+  goGiftLabel?: string
   imageMapping?: {
     [key in ConsumeType]: {
       url: string
     }
   }
   activitiesModal?: MyActivitiesMetafields
-  rewardsModal?: MyRewardsMetafields
+  rewardsModal?: RewardsCopy
+  redeemModal?: RedeemModalCommon
   insufficientCredits?: string
   validatorInfo?: {
     addressInfo: {

package/src/stories/LiveChatWidget.stories.tsx

@@ -147,7 +147,7 @@ type Story = StoryObj<typeof LiveChatWidget>
 export const Default: Story = {
   args: {
     // 基础配置
-    loginUserId: 'test_test',
+    loginUserId: 'test_test1',
     apiBaseUrl: 'http://172.16.38.183:3003',
     site: 'beta.eufy.com',
     channelCode: 'dtc',
@@ -159,14 +159,7 @@ export const Default: Story = {
     position: { bottom: '24px', right: '30px' },
 
     // 欢迎消息
-    welcomeMessage: `Welcome to eufy AI Assistant!
-
-I can help you with:
-- Product recommendations
-- Order tracking
-- FAQs and support
-
-How can I assist you today?`,
+    welcomeMessage: '',
 
     // 快捷回复
     quickReplies: [
@@ -179,9 +172,11 @@ How can I assist you today?`,
     // 法规协议弹窗
     complianceConfig: {
       title: "Hi! I'm your eufy AI assistant.",
-      content: "AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data.",
-      checkboxText: 'By starting to use "Live Chat", you agree to Anker\'s <a href="https://www.anker.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">LIVE CHAT PRIVACY NOTICE</a>.',
-      agreeButtonText: "Agree"
+      content:
+        'AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data.',
+      checkboxText:
+        'By starting to use "Live Chat", you agree to Anker\'s <a href="https://www.anker.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">LIVE CHAT PRIVACY NOTICE</a>.',
+      agreeButtonText: 'Agree',
     },
 
     // reCAPTCHA 配置（取消注释以启用）

package/src/styles/livechat.css

@@ -144,6 +144,35 @@
   background: var(--livechat-text-secondary);
 }
 
+/* 回到底部按钮样式 */
+.livechat-scroll-to-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  transition: opacity 300ms ease-in-out;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.livechat-scroll-to-bottom.hidden {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.livechat-scroll-to-bottom.visible {
+  opacity: 1 !important;
+}
+
 /* 思考状态动画 */
 .livechat-thinking-dots {
   display: inline-flex;