@anker-in/campaign-ui 0.2.10-beta.9 → 0.2.11-beta.3

package/src/components/credits/creditsWaysToGetCredits/{index.tsx → CreditsWaysToGetCredits.tsx}

@@ -6,21 +6,36 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { cn } from '../../../helpers/index'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useRegistration } from '../../registration'
+import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
+import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
-export const CreditsWaysToGetCredits = ({
-  copy,
-  activate,
-  subscribe,
-  uploadReceipt,
-  classNames,
-}: CreditsWaysToGetCreditsProps) => {
+export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const isLogin = !!profile
 
-  const { actions } = useActions({ copy, activate, subscribe, uploadReceipt })
+  const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)
+  const [isSubscribeModalOpen, setIsSubscribeModalOpen] = useState(false)
+  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
+  const [isUploadReceiptSuccess, setIsUploadReceiptSuccess] = useState(false)
 
+  const { actions } = useActions({
+    copy,
+    subscribe: {
+      openSubscribePopup: () => setIsSubscribeModalOpen(true),
+      isSuccess: isSubscribeSuccess,
+    },
+    uploadReceipt: {
+      openUploadReceiptPopup: () => setIsUploadReceiptModalOpen(true),
+      isSuccess: isUploadReceiptSuccess,
+    },
+  })
   const list = useMemo(() => {
     const list = copy.list
       .map(item => {
@@ -77,8 +92,13 @@ export const CreditsWaysToGetCredits = ({
   }, [actions, copy.list, isLogin])
 
   return (
-    <Container id="ways-to-get-credits" className=" bg-[#F5F5F7] [&>div]:l:!px-0">
-      <div className="rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]">
+    <Container id={id} className=" bg-[#F5F5F7] [&>div]:l:!px-0">
+      <div
+        className={cn(
+          'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',
+          !rounded && 'rounded-none'
+        )}
+      >
         <Heading as="h2" size={4} html={copy?.title} className="text-center l:pl-[16px] l:text-left" />
         <div className="mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]">
           <div className="pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]">
@@ -122,29 +142,41 @@ export const CreditsWaysToGetCredits = ({
             {list.map(item => (
               <div
                 key={item.id}
-                className="flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]"
+                className={cn(
+                  'flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]',
+                  !rounded && 'rounded-none'
+                )}
               >
                 <div>
-                  <Heading as="h4" html={item.title} size={2} className="text-pretty" />
+                  <Text
+                    as="p"
+                    html={item.title}
+                    size={2}
+                    className="text-pretty text-[24px] font-bold xl:text-[20px]"
+                  />
                   <div className="mt-[4px] flex items-center">
                     <Picture
                       className="size-[24px] xl:size-[18px] [&_path]:size-full"
                       source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
                     />
-                    <Text as="p" html={item.credits} size={2} className="ml-[4px] mt-[6px] lg-desktop:text-[18px]" />
+                    <Text
+                      as="p"
+                      html={item.credits}
+                      size={2}
+                      className="ml-[4px] mt-[6px] text-[18px] l:text-[14px]"
+                    />
                   </div>
                 </div>
 
                 {item.handleClick &&
-                !(item.id === TaskType.UploadReceipt && uploadReceipt.isSuccess) &&
-                !(item.id === TaskType.Activate && activate.isSuccess) &&
-                !(item.id === TaskType.Subscribe && subscribe.isSuccess) ? (
+                !(item.id === TaskType.UploadReceipt && isUploadReceiptSuccess) &&
+                !(item.id === TaskType.Activate && authCodeActivate.isActivateSuccess) &&
+                !(item.id === TaskType.Subscribe && isSubscribeSuccess) ? (
                   <Button
                     as={item.link ? 'a' : 'button'}
                     {...(item.link && { href: item.link })}
                     {...(item.handleClick && { onClick: item.handleClick })}
                     variant="primary"
-                    loading={item.id === TaskType.Activate && activate.isSendingActivateEmail}
                     size="lg"
                     className="mt-[24px] w-fit"
                   >
@@ -159,8 +191,8 @@ export const CreditsWaysToGetCredits = ({
             ))}
             {!showMore && (
               <div
-                className="absolute inset-0 min-md:hidden"
-                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%' }}
+                className="absolute inset-0 pointer-events-none min-md:hidden"
+                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}
               ></div>
             )}
           </motion.div>
@@ -184,6 +216,33 @@ export const CreditsWaysToGetCredits = ({
           )}
         </div>
       </div>
+      {copy.receipt && (
+        <CreditsUploadReceiptModal
+          isOpen={isUploadReceiptModalOpen}
+          onClose={() => {
+            setIsUploadReceiptModalOpen(false)
+          }}
+          copy={copy.receipt}
+          onSuccess={() => {
+            setIsUploadReceiptSuccess(true)
+          }}
+        />
+      )}
+      {copy.subscribe && (
+        <CreditsSubscribeModal
+          copy={copy.subscribe}
+          onSuccess={() => {
+            setIsSubscribeSuccess(true)
+            setTimeout(() => {
+              setIsSubscribeModalOpen(false)
+            }, 3000)
+          }}
+          isOpen={isSubscribeModalOpen}
+          onClose={() => {
+            setIsSubscribeModalOpen(false)
+          }}
+        />
+      )}
     </Container>
   )
 }

package/src/components/credits/creditsWaysToGetCredits/index.ts

@@ -0,0 +1,2 @@
+export * from './type'
+export * from './CreditsWaysToGetCredits'

package/src/components/credits/creditsWaysToGetCredits/type.ts

@@ -1,4 +1,5 @@
 import type { ReceiptCopy } from '../modal/creditsUploadReceiptModal'
+import type { CreditsSubscribeModalCopy } from '../modal/subscribeModal'
 
 export type BenefitItem = {
   title: string
@@ -6,7 +7,7 @@ export type BenefitItem = {
   id: string
 }
 
-export type WaysToGetCreditsCopy = {
+export type CreditsWaysToGetCreditsCopy = {
   title: string
   subtitle: string
   equalCredits: string
@@ -24,13 +25,14 @@ export type WaysToGetCreditsCopy = {
   goShopLink: string
   uploadReceipt: string
   shopNow: string
-  subscribe: string
+  subscribeLabel: string
   sendEmailSuccess: string
   creditsIcon: {
     url: string
     alt: string
   }
   receipt: ReceiptCopy
+  subscribe: CreditsSubscribeModalCopy
 }
 
 export enum TaskType {
@@ -43,22 +45,9 @@ export enum TaskType {
 }
 
 export type CreditsWaysToGetCreditsProps = {
-  copy: WaysToGetCreditsCopy
+  copy: CreditsWaysToGetCreditsCopy
   classNames?: {
     equalCreditsText?: string
     subtitle?: string
   }
-  activate: {
-    openAuthCodePopup: () => void
-    isSuccess: boolean
-    isSendingActivateEmail: boolean
-  }
-  subscribe: {
-    openSubscribePopup: () => void
-    isSuccess: boolean
-  }
-  uploadReceipt: {
-    openUploadReceiptPopup: () => void
-    isSuccess: boolean
-  }
 }

package/src/components/credits/creditsWaysToGetCredits/useActions.ts

@@ -1,29 +1,40 @@
+import { useHeadlessContext, gaTrack } from '@anker-in/lib'
+
 import { TaskType } from './type'
 import { useCreditsContext } from '../context/provider'
 import { useMemo } from 'react'
 import useReceiptUploaded from '../context/hooks/useReceiptUploaded'
 import { useFirstPurchaseFinished } from '../context/hooks/useFirstPurchaseFinished'
 import { useSubscribed } from '../context/hooks/useSubscribed'
-import type { CreditsWaysToGetCreditsProps } from './type'
-import { useShopifyContext } from '@anker-in/shopify'
-import { gaTrack } from '../../../helpers/track'
+import type { CreditsWaysToGetCreditsCopy } from './type'
+
+import { useRegistration } from '../../registration'
 
 export const useActions = ({
   copy,
   subscribe,
   uploadReceipt,
-  activate,
   gaParameters,
-}: CreditsWaysToGetCreditsProps & {
+}: {
+  copy: CreditsWaysToGetCreditsCopy
+  subscribe: {
+    openSubscribePopup: () => void
+    isSuccess: boolean
+  }
+  uploadReceipt: {
+    openUploadReceiptPopup: () => void
+    isSuccess: boolean
+  }
   gaParameters?: {
     position: string
   }
 }) => {
   const { openSignUpPopup, gtm, profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
   const isSubscribed = useSubscribed()
   const firstPurchaseFinished = useFirstPurchaseFinished()
   const uploadedReceipt = useReceiptUploaded()
-  const { appName } = useShopifyContext()
+  const { appName, passportUrl } = useHeadlessContext()
 
   const profileCompleted = useMemo(() => {
     return (profile?.first_name || profile?.last_name) && profile?.phone_number && profile?.dob
@@ -66,7 +77,10 @@ export const useActions = ({
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.activate,
-                callback: () => activate.openAuthCodePopup(),
+                callback: () => {
+                  authCodeActivate.setAutoSendEmail(true)
+                  authCodeActivate.open()
+                },
                 id: TaskType.Activate,
               }),
           },
@@ -82,10 +96,10 @@ export const useActions = ({
               handleClickWithTrack({ buttonName: copy?.joinNow, callback: openSignUpPopup, id: TaskType.Subscribe }),
           },
           notFinished: {
-            buttonLabel: copy?.subscribe,
+            buttonLabel: copy?.subscribeLabel,
             handleClick: () =>
               handleClickWithTrack({
-                buttonName: copy?.subscribe,
+                buttonName: copy?.subscribeLabel,
                 callback: () => subscribe.openSubscribePopup(),
                 id: TaskType.Subscribe,
               }),
@@ -107,7 +121,7 @@ export const useActions = ({
           },
           notFinished: {
             buttonLabel: copy?.completeProfile,
-            link: `/account/profile?app=${appName}`,
+            link: `${passportUrl}/account/profile?app=${appName}`,
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.completeProfile,

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

@@ -9,6 +9,8 @@ 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 { ROUNDED_BRANDS } from '../../../constants'
 
 export interface MyRewardsMetafields {
   title: string
@@ -26,12 +28,15 @@ export interface MyRewardsMetafields {
   pendingTip: string
   processingTip: string
   ShippedTip: string
-  emptyListImageUrl: string
   emptyListLabel: string
   pointUnit: string
   code: string
   copied: string
   copy: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
 }
 interface MyRewardsModalProps extends ModalContainerProps {
   data: MyRewardsMetafields
@@ -39,6 +44,8 @@ interface MyRewardsModalProps extends ModalContainerProps {
 
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   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)
@@ -206,20 +213,22 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
     }, 2000)
   }, [])
 
+  const isLoading = activeTab === AlpcConsumeType.Coupon ? couponIsLoading : productIsLoading
+
   return (
     <CreditsModalContainer
       title={data.title}
       className={classNames('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName="min-l:px-0 md:mb-0 md:px-0"
+      scrollClassName="md:mb-0"
       {...props}
       onScrollEnd={handleScrollEnd}
     >
-      <div className="px-[24px] md:px-[16px]">
+      <div className="">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
@@ -235,73 +244,85 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
         </Tabs>
       </div>
 
-      <div className="mt-[24px] overflow-auto overscroll-contain px-[24px] md:px-[16px]">
-        {!list.length && !couponIsLoading && !productIsLoading && (
-          <div className="flex h-full flex-col items-center justify-center">
-            <Picture className="mb-[12px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
-            <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
-          </div>
-        )}
-        {couponIsLoading ||
-          (productIsLoading && (
-            <div className="flex h-full flex-col items-center justify-center">
-              <LoadingDots />
-            </div>
-          ))}
-        <div className="grid gap-[18px] md:gap-[12px]">
-          {list.map((item, index) => (
-            <div key={index} className="grid gap-[8px]">
-              {item?.orderNumber && (
-                <div className="text-[15px] font-semibold leading-[1.4] text-[#777]">
-                  {data.orderNumberLabel}: {item.orderNumber}
-                </div>
-              )}
-              <div className="flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]">
-                <div className="grid gap-[4px]">
-                  <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {data.valueLabel}: {item.value} {data?.pointUnit}
-                  </div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
-                    {item?.couponCode && (
-                      <span
-                        className="cursor-pointer text-[14px] font-semibold text-brand underline"
-                        onClick={() => {
-                          handleCopy(item.couponCode, index)
-                        }}
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault()
-                          }
-                        }}
-                      >
-                        {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
-                      </span>
-                    )}
-                  </div>
-                </div>
-                <div className="grid gap-[4px] text-right">
+      {isLoading && (
+        <div className="flex h-full flex-col items-center justify-center">
+          <LoadingDots />
+        </div>
+      )}
+
+      {!isLoading && (
+        <div className="mt-[24px] overflow-auto overscroll-contain">
+          {list.length > 0 ? (
+            <div className="grid gap-[18px] md:gap-[12px]">
+              {list.map((item, index) => (
+                <div key={index} className="grid gap-[8px]">
+                  {item?.orderNumber && (
+                    <div className="text-[15px] font-semibold leading-[1.4] text-[#777]">
+                      {data.orderNumberLabel}: {item.orderNumber}
+                    </div>
+                  )}
                   <div
                     className={classNames(
-                      'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
-                      `text-[${ColorMap[item.type]}]`
+                      'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',
+                      !rounded && 'rounded-none'
                     )}
                   >
-                    <span>{TypeMap[item.type]}</span>
-                    {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}
-                  </div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                    <div className="grid gap-[4px]">
+                      <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {data.valueLabel}: {item.value} {data?.pointUnit}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
+                        {item?.couponCode && (
+                          <span
+                            className="cursor-pointer text-[14px] font-semibold text-brand underline"
+                            onClick={() => {
+                              handleCopy(item.couponCode, index)
+                            }}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault()
+                              }
+                            }}
+                          >
+                            {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="grid gap-[4px] text-right">
+                      <div
+                        className={classNames(
+                          'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
+                          `text-[${ColorMap[item.type]}]`
+                        )}
+                      >
+                        <span>{TypeMap[item.type]}</span>
+                        {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              ))}
+            </div>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center">
+              <Picture
+                className="mb-[12px] w-[160px]"
+                source={data?.emptyListImage?.url}
+                alt={data?.emptyListImage?.alt || 'empty list image'}
+              ></Picture>
+              <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
             </div>
-          ))}
+          )}
         </div>
-      </div>
+      )}
     </CreditsModalContainer>
   )
 }

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

@@ -4,10 +4,11 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
+import { ROUNDED_BRANDS } from '../../../constants'
 import dayjs from 'dayjs'
 
 export interface MyActivitiesMetafields {
@@ -30,7 +31,10 @@ export interface MyActivitiesMetafields {
   firstPurchaseTask: string
   uploadReceiptTask: string
   shoppingTask: string
-  emptyListImageUrl: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
   emptyListLabel: string
 }
 
@@ -41,6 +45,8 @@ interface ActivitiesModalProps extends ModalContainerProps {
 function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
   const [page, setPage] = useState(1)
   const { taskIdToTypeMapping } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const myActivitiesOptions = useMemo(() => {
     return {
@@ -168,19 +174,19 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       className={cn('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName="min-l:px-0 md:mb-0 md:px-0"
+      scrollClassName=""
       {...props}
       onScrollEnd={handleScrollEnd}
     >
-      <div className="w-full overflow-x-auto">
+      <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
           }}
-          className="px-[24px] md:px-[16px]"
+          className=""
         >
           <TabsList>
             {tabs.map(tab => (
@@ -192,55 +198,65 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         </Tabs>
       </div>
 
-      <div className="mt-[24px] grid gap-[18px] overflow-auto overscroll-contain px-[24px] md:gap-[12px] md:px-[16px]">
+      <div className="grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]">
         {isLoading && (
           <div className="flex h-full flex-col items-center justify-center">
             <LoadingDots />
           </div>
         )}
-        {!list.length && !isLoading && (
-          <div className="flex h-full flex-col items-center justify-center">
-            <Picture className="mb-[16px] h-[120px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
-            <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
-          </div>
-        )}
-        {list.map((item, index) => (
-          <div
-            key={index}
-            className="flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]"
-          >
-            <div className="grid gap-[6px]">
-              <div className="font-bold">{item.title}</div>
-              <div className="text-[14px] font-semibold text-[#999]">
-                {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
-              </div>
-              {!data.pendingTips && (
+
+        {!isLoading && (
+          <>
+            {list.length > 0 ? (
+              list.map((item, index) => (
                 <div
-                  className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                  key={index}
+                  className={cn(
+                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                    !rounded && 'rounded-none'
+                  )}
                 >
-                  <Text html={data.pendingTips} />
-                  <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
-                  {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                  <div className="grid gap-[6px]">
+                    <div className="font-bold">{item.title}</div>
+                    <div className="text-[14px] font-semibold text-[#999]">
+                      {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                    </div>
+                    {!data.pendingTips && (
+                      <div
+                        className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                      >
+                        <Text html={data.pendingTips} />
+                        <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
+                        {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                      </div>
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      'font-bold',
+                      item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
+                    )}
+                  >
+                    {item.value >= 0 && '+'}
+                    {item.value}
+                  </div>
                 </div>
-              )}
-            </div>
-            <div
-              className={cn(
-                'font-bold',
-                item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
-              )}
-            >
-              {item.value >= 0 && '+'}
-              {item.value}
-            </div>
-          </div>
-        ))}
+              ))
+            ) : (
+              <div className="flex h-full flex-col items-center justify-center">
+                <Picture
+                  className="mb-[16px] h-[120px] w-[160px]"
+                  source={data?.emptyListImage?.url}
+                  alt={data?.emptyListImage?.alt || 'empty list image'}
+                ></Picture>
+                <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
+              </div>
+            )}
+          </>
+        )}
       </div>
-      {!!list.length && (
-        <div className="mt-[12px] px-[24px] pb-[24px] text-[14px] font-semibold text-[#999] md:px-[16px]">
-          {data.tips}
-        </div>
-      )}
+      {/* 积分到账时间提醒 */}
+      {list.length > 0 && <div className="mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]">{data.tips}</div>}
     </CreditsModalContainer>
   )
 }