@anker-in/campaign-ui 0.2.10-beta.17 → 0.2.10-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.10-beta.17",
+  "version": "0.2.10-beta.19",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

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

@@ -56,7 +56,7 @@ export function CreditsBanner({ copy }: BannerProps) {
 
         <Container className="l: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:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
                 size="5"

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -24,7 +24,7 @@ const BenefitItem = ({
 }) => {
   return (
     <div
-      className="relative h-full rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      className="relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
       style={{
         background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
       }}

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

@@ -48,7 +48,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
   return (
     <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy?.title} />
-      <div className="mt-[24px] grid grid-cols-2 gap-[16px] l:hidden min-md:grid-cols-3 min-xl:grid-cols-4">
+      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
           <BenefitItem
             key={index}
@@ -74,7 +74,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
               slidesPerGroup: 3,
             },
           }}
-          wrapperClass="items-stretch"
+          wrapperClass="!items-stretch"
           modules={[Grid, Pagination]}
           pagination={{
             clickable: true,
@@ -86,7 +86,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
           }}
         >
           {copy.benefits.map((item, index) => (
-            <SwiperSlide key={index} className={cn('!h-auto', activeNoteIndex === index && '!z-[100]')}>
+            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>
               <BenefitItem
                 item={item}
                 handleClick={handleClick}

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

@@ -52,7 +52,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
       <div
         className={cn(
           'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
-          'l:flex-col',
+          'l:flex-col l:items-start',
           'min-l:px-[48px]',
           'min-xl:px-[100px]'
         )}
@@ -64,7 +64,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
       >
         <div
           className={cn(
-            'grid grid-cols-2 gap-[24px] font-bold md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
+            'grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
           )}
         >
           <div className="mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]">

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

@@ -42,7 +42,6 @@ interface MyRewardsModalProps extends ModalContainerProps {
 
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
-  console.log('data123', data)
 
   const [couponPage, setCouponPage] = useState(1)
   const [productPage, setProductPage] = useState(1)
@@ -210,17 +209,19 @@ 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"
@@ -239,77 +240,80 @@ 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]"
-              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>
-        )}
-        {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()
-                          }
-                        }}
+      {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="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">
+                      <div
+                        className={classNames(
+                          'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
+                          `text-[${ColorMap[item.type]}]`
+                        )}
                       >
-                        {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
-                      </span>
-                    )}
+                        <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 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 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

@@ -171,11 +171,11 @@ 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"
@@ -183,7 +183,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
           onValueChange={value => {
             setActiveTab(Number(value))
           }}
-          className="px-[24px] md:px-[16px]"
+          className=""
         >
           <TabsList>
             {tabs.map(tab => (
@@ -195,59 +195,62 @@ 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]"
-              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>
-        )}
-        {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="flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]"
                 >
-                  <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>
   )
 }

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

@@ -1,16 +1,18 @@
-import { cn } from '../../../helpers/utils'
+import classNames from 'classnames'
+import { FC } from 'react'
 
 interface LoadingProps {
   className?: string
 }
 
-function LoadingDots({ className }: LoadingProps) {
+const LoadingDots: FC<LoadingProps> = props => {
+  const { className } = props
   return (
-    <div className={cn(className)}>
-      <span className="dot" key={`dot_1`} />
-      <span className="dot" key={`dot_2`} />
-      <span className="dot" key={`dot_3`} />
-    </div>
+    <span className={classNames('inline-flex min-h-[19px] items-center text-center leading-7', className)}>
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current" key={`dot_1`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.2s]" key={`dot_2`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.4s]" key={`dot_3`} />
+    </span>
   )
 }
 

package/tailwind.config.ts

@@ -66,6 +66,16 @@ export default {
       letterSpacing: {
         DEFAULT: 'var(--letter-spacing-normal)',
       },
+      keyframes: {
+        blink: {
+          '0%': { opacity: '0.2' },
+          '20%': { opacity: '1' },
+          '100%': { opacity: '0.2' },
+        },
+      },
+      animation: {
+        blink: 'blink 1.6s infinite both',
+      },
     },
   },
   plugins: [],