@anker-in/campaign-ui 0.2.10-beta.28 → 0.2.10-beta.30

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

@@ -35,20 +35,6 @@ function useRedeemableList() {
   })
 
   const getRedeemableList = useCallback(() => {
-    const cacheName = `consume_credit_rules-${locale}`
-
-    const cacheStr = localStorage?.getItem(cacheName)
-    if (cacheStr) {
-      try {
-        const cache = JSON.parse(cacheStr)
-        if (cache.expire > Date.now() && cache.consume_credit_rules.length) {
-          // 缓存未过期
-          setRedeemableList(cache.consume_credit_rules)
-          return
-        }
-      } catch (e) {}
-      localStorage?.removeItem(cacheName)
-    }
     trigger(
       {
         user_id: profile?.user_id,

package/src/components/credits/creditsRedeemList/NonProductValue.tsx

@@ -0,0 +1,38 @@
+import { Text } from '@anker-in/headless-ui'
+import { RedeemableItem } from '../type'
+import { ConsumeType } from '../context/const'
+import { CreditsRedeemListCopy } from './type'
+
+export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  // shipping coupon 仅展示文案
+  if (item.config?.type === ConsumeType.ShippingCoupon) {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        <Text
+          className="text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]"
+          html={item.config?.value}
+          as="p"
+        />
+      </div>
+    )
+  } else {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        {item.config?.value ? (
+          <div className="flex items-end">
+            <Text
+              className="text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
+              html={item.config?.value.toString()}
+            />
+            <Text
+              className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
+              html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}
+            />
+          </div>
+        ) : (
+          <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
+        )}
+      </div>
+    )
+  }
+}

package/src/components/credits/creditsRedeemList/RedeemCouponModal.tsx

@@ -11,6 +11,7 @@ import { numberFormat } from '../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { useHeadlessContext } from '@anker-in/lib'
 import { CreditsRedeemListCopy } from './type'
+import { NoneProductValue } from './RedeemProductModal/NonProductValue'
 
 function RedeemCouponModal({
   item,
@@ -95,15 +96,12 @@ function RedeemCouponModal({
         )}
       >
         <div className="relative mx-auto h-[164px] w-[324px]">
-          {copy?.imageMapping?.coupon?.url && (
-            <Picture source={copy?.imageMapping?.coupon?.url} className="h-full [&_img]:h-full" />
+          {copy?.imageMapping[item.config?.type]?.url && (
+            <Picture source={copy.imageMapping[item.config.type].url} className="h-full [&_img]:h-full" />
           )}
           <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
             {item.config.value ? (
-              <div className="flex items-end gap-[4px]">
-                <Text className="text-[64px] font-bold leading-none" html={item.config.value.toString()} />
-                <Text className="text-[24px] font-bold leading-[2]" html={copy?.off} />
-              </div>
+              <NoneProductValue item={item} copy={copy} />
             ) : (
               <Text size={3} html={item.alpc?.title} />
             )}

package/src/components/credits/creditsRedeemList/RedeemProductModal/Init.tsx

@@ -5,6 +5,7 @@ import { numberFormat } from '../../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ConsumeType } from '../../context/const'
+import { NoneProductValue } from './NonProductValue'
 
 type InitProps = {
   copy: CreditsRedeemListCopy
@@ -23,7 +24,6 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
     return [...descriptions, ...(copy.redeemModal.product.rules || [])]
   }, [item.config.rules, item.config.desc, copy.redeemModal.product.rules])
 
-  console.log('item', item)
   return (
     <div className="flex flex-col">
       <div
@@ -43,15 +43,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
             ></Picture>
             {/* 礼品卡展示 */}
             <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
-              {item.config.value && (
-                <div className="flex items-end gap-[4px]">
-                  <Text className="text-[64px] font-bold leading-none" html={item.config.value.toString()} />
-                  <Text
-                    className="text-[24px] font-bold leading-[2]"
-                    html={item.config.type === ConsumeType.Coupon ? copy?.off : copy?.giftCardLabel}
-                  />
-                </div>
-              )}
+              {item.config.value && <NoneProductValue item={item} copy={copy} />}
             </div>
           </div>
           <div className="mt-[30px] md:mt-[18px]">

package/src/components/credits/creditsRedeemList/RedeemProductModal/NonProductValue.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@anker-in/headless-ui'
+import { RedeemableItem } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ConsumeType } from '../../context/const'
+
+export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  // shipping coupon 仅展示文案
+  if (item.config?.type === ConsumeType.ShippingCoupon) {
+    return <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.value} as="p" />
+  } else {
+    return item.config?.value ? (
+      <div className="flex items-end gap-[4px]">
+        <Text className="text-[64px] font-extrabold leading-none" html={item.config.value.toString()} />
+        <Text
+          className="text-[24px] font-bold leading-[2]"
+          html={item.config.type === ConsumeType.Coupon ? copy?.off : copy?.giftCardLabel}
+        />
+      </div>
+    ) : (
+      <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
+    )
+  }
+}

package/src/components/credits/creditsRedeemList/RedeemableItem.tsx

@@ -9,6 +9,7 @@ import { AlpcConsumeType, ConsumeType } from '../context/const'
 import { numberFormat } from '../context/utils'
 import type { CreditsRedeemListCopy } from './type'
 import { gaTrack } from '../../../helpers/track'
+import { NoneProductValue } from './NonProductValue'
 
 export function RedeemableItem({
   copy,
@@ -82,35 +83,21 @@ export function RedeemableItem({
         className
       )}
     >
-      {item.config?.type !== ConsumeType.Product ? (
-        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
+      {item.config?.type === ConsumeType.Product ? (
+        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
           <Picture
-            source={copy?.imageMapping[item.config?.type]?.url}
-            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
+            source={item.config?.image?.url || item.product.images?.[0]?.url}
           ></Picture>
-          <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white md:bottom-[2px] md:left-[5px]">
-            {item.config?.value ? (
-              <div className="flex items-end">
-                <Text
-                  className="text-[64px] font-bold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
-                  html={item.config?.value}
-                />
-                <Text
-                  className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
-                  html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}
-                />
-              </div>
-            ) : (
-              <Text size={3} html={item.config?.title || item.alpc?.title} />
-            )}
-          </div>
         </div>
       ) : (
-        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
+        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
           <Picture
-            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
-            source={item.config?.image?.url || item.product.images?.[0]?.url}
+            source={copy?.imageMapping[item.config?.type]?.url}
+            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
           ></Picture>
+
+          <NoneProductValue item={item} copy={copy} />
         </div>
       )}
       <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>

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

@@ -95,8 +95,6 @@ export function CreditsRedeemList({
     [getRedeemableList]
   )
 
-  console.log('popRedeemData', popRedeemData)
-
   return (
     <Container className={classNames('relative bg-[#F5F5F7]', className)}>
       {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}