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

package/src/components/credits/creditsGoGift/CreditsGoGift.tsx

@@ -0,0 +1,210 @@
+import { Container, Heading, Picture, Button, Text } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
+import { classNames as cn } from '@anker-in/lib'
+
+import RedeemVirtualProductModal from '../creditsRedeemList/RedeemVirtualProductModal'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import { useCreditsContext } from '../context/provider'
+import { ROUNDED_BRANDS } from '../../../constants'
+import { useHeadlessContext } from '@anker-in/lib'
+import { CreditsGoGiftCopy } from './type'
+import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
+import RulesModal from '../modal/RulesModal'
+import { useRegistration } from '../../../components/registration'
+
+export const CreditsGoGift = ({ copy, id }: { copy: CreditsGoGiftCopy; id?: string }) => {
+  const [showModal, setShowModal] = useState(false)
+  const [redeemError, setRedeemError] = useState<string>()
+  const [rules, setRules] = useState<string | string[]>()
+  const { redeemableList } = useRedeemableList({ consumeType: AlpcConsumeType.ExternalProduct })
+  const { pageCommon, profile, creditInfo, setOpenMyRewardsModal, openSignUpPopup } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const isLogin = Object.keys(profile || {}).length > 0
+
+  const redeemModalCopy = pageCommon?.redeemModal || ({} as any)
+
+  console.log('redeemableList', redeemableList)
+
+  const item = useMemo(() => {
+    // 根据 redeemId 查询 ExternalProduct 的 ALPC 数据
+    const alpcData = redeemableList.find(item => item.id?.toString() === copy?.redeemId?.toString())
+    if (!alpcData) return null
+
+    return {
+      alpc: {
+        id: alpcData.id.toString(),
+        consumeCredits: alpcData.consume_credits,
+        remainingInventory: alpcData.remaining_inventory,
+        isLimited: !!alpcData.is_limited,
+        consumeType: alpcData.consume_type,
+        showCredit: true,
+        title: alpcData.name,
+      },
+      config: {
+        title: copy.cardTitle,
+        desc: copy.cardDesc,
+        type: copy.type,
+        value: copy.value || '',
+        rules: copy.rules,
+        image: copy.cardImg,
+      },
+    }
+  }, [redeemableList, copy])
+
+  const handleRedeemError = (code: AlpcErrorCode) => {
+    const redeemModalCopy = pageCommon?.redeemModal
+    if (code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+      setRedeemError(redeemModalCopy?.redeemLimitError)
+    } else if (code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+      setRedeemError(redeemModalCopy?.inventoryNotEnough)
+    } else if (code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+      setRedeemError(redeemModalCopy?.creditsNotEnough)
+    } else if (code === AlpcErrorCode.CodeCrossSiteError) {
+      setRedeemError(redeemModalCopy?.crossSiteError)
+    } else {
+      setRedeemError(redeemModalCopy?.commonError)
+    }
+  }
+
+  const inSufficientCredit = useMemo(() => {
+    return (
+      profile?.activated && Number(item?.alpc?.consumeCredits) > Number(creditInfo?.available_credit || 0)
+    )
+  }, [profile?.activated, item?.alpc?.consumeCredits, creditInfo?.available_credit])
+
+  const soldOut = Number(item?.alpc.remainingInventory) <= 0
+
+  const redeemButtonText = useMemo(() => {
+    // 缺货文案
+    if (soldOut) {
+      return pageCommon?.soldOut || 'Sold Out'
+    } else if (!isLogin) {
+      return copy.unlockRewards
+    } else {
+      return copy.redeemBtn
+    }
+  }, [isLogin, soldOut, copy, pageCommon])
+
+  if (!item) return null
+
+  return (
+    <Container id={id}>
+      <Heading as="h2" size="4" html={copy.title} />
+      <div
+        className={cn(
+          'mt-[24px] flex h-fit w-full items-center bg-[#eaeaec] p-[24px]',
+          'l:flex-col l:gap-[12px] l:p-[12px]',
+          'min-l:flex-row min-l:gap-[64px]',
+          !rounded && 'rounded-none',
+          rounded && 'rounded-[12px]'
+        )}
+      >
+        {/* Card Image */}
+        <div className="relative flex h-[200px] w-[304px] shrink-0 items-center justify-center overflow-hidden l:h-auto l:aspect-h-[120] l:aspect-w-[304] l:w-full">
+          {copy.cardImg?.url && (
+            <Picture
+              className={cn('size-full', rounded && 'rounded-[12px]')}
+              source={copy.mCardImg?.url ? `${copy.cardImg.url},${copy.mCardImg.url} 1024` : copy.cardImg.url}
+            />
+          )}
+        </div>
+
+        {/* Content Section */}
+        <div className="flex w-full items-end justify-between l:flex-col l:items-start l:gap-[24px]">
+          {/* Text Content */}
+          <div className="flex flex-col gap-[20px] l:w-full l:gap-[12px]">
+            <div className="flex flex-col gap-[4px]">
+              <Text
+                html={copy.cardTitle}
+                className="text-[32px] font-bold leading-[1.2] text-[#1D1D1F] l:text-[18px]"
+              />
+              <Text
+                html={copy.cardDesc}
+                className="text-[18px] font-bold leading-[1.4] text-[#3D3D3F] l:text-[12px]"
+              />
+            </div>
+            <Text
+              html={copy.cardTip}
+              className="text-[18px] font-bold leading-[1.4] text-[#000] l:text-[12px]"
+            />
+          </div>
+
+          {/* Button and Links */}
+          <div className="flex shrink-0 flex-col items-end l:w-full l:items-start">
+            <Button
+              variant="primary"
+              disabled={inSufficientCredit || soldOut}
+              onClick={() => {
+                if (!isLogin) {
+                  openSignUpPopup()
+                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+                  authCodeActivate.open()
+                } else {
+                  setShowModal(true)
+                }
+              }}
+              title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
+            >
+              {redeemButtonText}
+            </Button>
+            {redeemError && (
+              <div className="mt-[8px] text-[14px] font-bold leading-[1.2] text-[#FFC24D] l:text-[12px]">
+                {redeemError}
+              </div>
+            )}
+            {(copy.viewRedeemHistory || copy.rulesLink) && (
+              <div className="mt-[18px] flex gap-[16px] text-[18px] font-bold leading-[1.4] l:mt-[12px] l:gap-0 l:text-[14px]">
+                {copy.viewRedeemHistory && (
+                  <Text
+                    html={copy.viewRedeemHistory}
+                    className="cursor-pointer text-[#4794EC] font-bold underline"
+                    onClick={() => setOpenMyRewardsModal(true)}
+                  />
+                )}
+                {pageCommon.ruleLabel && (
+                  <Text
+                    html={pageCommon.ruleLabel}
+                    className={cn(
+                      'cursor-pointer text-[#4794EC] font-bold underline',
+                      copy.viewRedeemHistory && 'l:ml-[16px]'
+                    )}
+                    onClick={() => setRules(copy.rules)}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showModal && item && (
+        <RedeemVirtualProductModal
+          copy={redeemModalCopy}
+          onClose={() => {
+            setShowModal(false)
+            setRedeemError(undefined)
+          }}
+          item={item}
+          onError={handleRedeemError}
+        />
+      )}
+
+      {rules && (
+        <RulesModal
+          overlayClassName="md:px-[16px] md:items-center"
+          className={cn('md:h-fit md:rounded-b-[16px]', !rounded && 'md:rounded-none')}
+          isOpen={rules.length > 0}
+          onClose={() => setRules(undefined)}
+          titleClassName="border-b-transparent h-[56px]"
+          rules={rules}
+          scrollClassName="md:mt-[8px] mt-[8px] md:mb-[24px] md:pt-0"
+          title={pageCommon?.ruleLabel}
+          ruleClassName="text-[#1d1d1f] font-bold"
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { CreditsGoGift } from './CreditsGoGift'
+export type { CreditsGoGiftCopy } from './type'

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

@@ -0,0 +1,23 @@
+import { ConsumeType } from '../context/const'
+
+export type CreditsGoGiftCopy = {
+  title: string
+  cardImg: {
+    url: string
+  }
+  mCardImg?: {
+    url: string
+  }
+  count?: string
+  cardTitle: string
+  cardDesc: string
+  cardTip: string
+  redeemBtn: string
+  unlockRewards: string
+  viewRedeemHistory?: string
+  rulesLink?: string
+  redeemId: string | number
+  type: ConsumeType
+  value?: string
+  rules: string[]
+}

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

@@ -3,8 +3,6 @@ import { Button, Container, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { useCreditsContext } from '../context/provider'
 import { numberFormat } from '../context/utils'
-import ActivitiesModal from '../modal/activitiesModal'
-import MyRewardsModal from '../modal/MyRewardsModal'
 import { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { ROUNDED_BRANDS } from '../../../constants'
 
@@ -20,10 +18,8 @@ export type CreditsInfoCardCopy = {
 }
 
 export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?: string }) {
-  const [openActivities, setOpenActivities] = useState(false)
-  const [openRewards, setOpenRewards] = useState(false)
   const [hover, setHover] = useState<boolean>(false)
-  const { creditInfo, pageCommon } = useCreditsContext()
+  const { creditInfo, pageCommon, setOpenMyRewardsModal, setOpenActivitiesModal } = useCreditsContext()
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
@@ -33,14 +29,14 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
     if (buttonConfig.type) {
       switch (buttonConfig.type) {
         case 'activities':
-          setOpenActivities(true)
+          setOpenActivitiesModal(true)
           break
         case 'rewards':
-          setOpenRewards(true)
+          setOpenMyRewardsModal(true)
           break
       }
     }
-  }, [])
+  }, [setOpenActivitiesModal, setOpenMyRewardsModal])
 
   return (
     <Container asChild id={id} className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
@@ -138,7 +134,7 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
         </div>
         <div
           className={cn(
-            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] gap-[16px]  l:pl-0 l:pl-[48px] md-l:grid-cols-2'
+            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] gap-[16px] l:pl-0 pl-[48px] md-l:grid-cols-2'
           )}
         >
           {copy.buttons?.map((item, index) => (
@@ -155,25 +151,6 @@ export function CreditsInfoCard({ copy, id }: { copy: CreditsInfoCardCopy; id?:
             </Button>
           ))}
         </div>
-
-        {pageCommon?.activitiesModal && (
-          <ActivitiesModal
-            isOpen={openActivities}
-            data={pageCommon?.activitiesModal}
-            onClose={() => {
-              setOpenActivities(false)
-            }}
-          />
-        )}
-        {pageCommon?.rewardsModal && (
-          <MyRewardsModal
-            isOpen={openRewards}
-            data={pageCommon?.rewardsModal}
-            onClose={() => {
-              setOpenRewards(false)
-            }}
-          ></MyRewardsModal>
-        )}
       </div>
       {hover && (
         <div

package/src/components/credits/creditsMemberPrice/CreditsMemberPrice.tsx

@@ -5,7 +5,7 @@ import Decimal from 'decimal.js'
 import MemberPriceItem from './MemberPriceItem'
 import RedeemableItem from '../creditsCash/RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
-import RulesModal from '../modal/rulesModal'
+import RulesModal from '../modal/RulesModal'
 import { Pagination } from './Pagination'
 import { useProductsByHandles, useHeadlessContext, gaTrack } from '@anker-in/lib'
 import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'

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

@@ -4,14 +4,15 @@ import { useCallback, useMemo, useState } from 'react'
 
 import RedeemCouponModal from './RedeemCouponModal'
 import RedeemProductModal from './RedeemProductModal'
+import RedeemVirtualProductModal from './RedeemVirtualProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
-import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
+import { AlpcConsumeType, AlpcErrorCode, ConsumeType } from '../context/const'
 import { useHeadlessContext, useProductsByHandles, gaTrack, classNames as cn } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
 import { ROUNDED_BRANDS } from '../../../constants'
-import RulesModal from '../modal/rulesModal'
+import RulesModal from '../modal/RulesModal'
 import { CreditsRedeemListCopy } from './type'
 import { useRegistration } from '../../../components/registration'
 import { numberFormat } from '../context/utils'
@@ -38,6 +39,14 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
 
   const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()
 
+  // 合并 redeemModal 文案，优先使用 copy.redeemModal，fallback 到 pageCommon.redeemModal
+  const redeemModalCopy = useMemo(() => {
+    return {
+      ...(pageCommon?.redeemModal || {}),
+      ...(copy.redeemModal || {}),
+    }
+  }, [copy.redeemModal, pageCommon?.redeemModal])
+
   const alpcList = useMemo(() => {
     return redeemableList.map(item => {
       return {
@@ -101,7 +110,7 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
                 className={cn(
                   'text-brand-color-0',
                   brand === 'ankersolix' &&
-                    'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'
+                  'bg-gradient-to-r from-[#2c7ed0] via-[#00a9e1] via-[43%] to-[#00db84] bg-clip-text text-transparent'
                 )}
               >
                 {numberFormat(creditInfo?.available_credit || 0).toString()}
@@ -164,28 +173,41 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
         </div>
       )}
 
-      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (
-        <RedeemCouponModal
-          isOpen={!!popRedeemData}
-          item={popRedeemData}
-          copy={copy}
-          onError={handleRedeemError}
-          onClose={() => {
-            setPopRedeemData(undefined)
-          }}
-        />
-      )}
-      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (
+      {(popRedeemData?.config?.type === ConsumeType.Coupon ||
+        popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&
+        redeemModalCopy?.coupon &&
+        popRedeemData && (
+          <RedeemCouponModal
+            item={popRedeemData}
+            copy={redeemModalCopy}
+            onError={handleRedeemError}
+            onClose={() => {
+              setPopRedeemData(undefined)
+            }}
+          />
+        )}
+      {popRedeemData?.config?.type === ConsumeType.Product && redeemModalCopy?.product && popRedeemData && (
         <RedeemProductModal
-          isOpen={!!popRedeemData}
           item={popRedeemData}
-          copy={copy}
+          copy={redeemModalCopy}
           onError={handleRedeemError}
           onClose={() => {
             setPopRedeemData(undefined)
           }}
         />
       )}
+      {(popRedeemData?.config?.type === ConsumeType.GiftCard || popRedeemData?.config?.type === ConsumeType.GoGift) &&
+        redeemModalCopy?.virtualProduct &&
+        popRedeemData && (
+          <RedeemVirtualProductModal
+            item={popRedeemData}
+            copy={redeemModalCopy}
+            onError={handleRedeemError}
+            onClose={() => {
+              setPopRedeemData(undefined)
+            }}
+          />
+        )}
       {rules && (
         <RulesModal
           overlayClassName="md:px-[16px] md:items-center"

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

@@ -0,0 +1,77 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { numberFormat } from '../../context/utils'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
+import { NoneProductValue } from '../RedeemProductModal/NonProductValue'
+import { useCreditsContext } from '../../context/provider'
+
+type CouponInitProps = {
+  item: RedeemableItemType
+  copy: RedeemModalCommon
+  loading: boolean
+  disabled: boolean
+  onConfirm: () => void
+}
+
+export const CouponInit = ({ item, copy, loading, disabled, onConfirm }: CouponInitProps) => {
+  const { pageCommon } = useCreditsContext()
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'
+        )}
+      >
+        <div className="relative mx-auto h-[164px] w-[324px]">
+          {pageCommon?.imageMapping?.[item.config?.type]?.url && (
+            <Picture source={pageCommon.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 ? (
+              <NoneProductValue item={item} />
+            ) : (
+              <Text size={3} html={item.alpc?.title} />
+            )}
+          </div>
+        </div>
+        <Text
+          as="p"
+          className={classNames(
+            'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'
+          )}
+        >
+          {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}
+        </Text>
+        {item.config?.rules?.length > 0 && (
+          <div className="mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+            <div className="mb-[4px]">{pageCommon?.ruleLabel}:</div>
+            <ul className="ml-4 grid grid-flow-row gap-[4px]">
+              {item.config?.rules?.map((text, index) => (
+                <li className="list-disc" key={index}>
+                  <Text html={text} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
+        <Text
+          className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
+          html={copy.confirmTitle}
+        ></Text>
+        <Button
+          loading={loading}
+          variant="primary"
+          size="lg"
+          className="mt-[16px] w-full"
+          onClick={onConfirm}
+          disabled={disabled}
+        >
+          {copy.confirmButton}
+        </Button>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,86 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import useCopy from '../../context/hooks/useCopy'
+import { useCreditsContext } from '../../context/provider'
+import { useHeadlessContext } from '@anker-in/lib'
+import type { RedeemModalCommon, RedeemableItem as RedeemableItemType } from '../../type'
+import { NoneProductValue } from '../RedeemProductModal/NonProductValue'
+
+type CouponSuccessProps = {
+  item: RedeemableItemType
+  copy: RedeemModalCommon
+  couponCode: string
+  disabled: boolean
+  onClose: () => void
+}
+
+export const CouponSuccess = ({ item, copy, couponCode, disabled, onClose }: CouponSuccessProps) => {
+  const { locale } = useHeadlessContext()
+  const { pageCommon } = useCreditsContext()
+  const { copy: copyText, copied: copiedStatus } = useCopy()
+  return (
+    <>
+      <div
+        className={classNames(
+          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'
+        )}
+      >
+        <div className="relative mx-auto h-[164px] w-[324px]">
+          {pageCommon?.imageMapping?.[item.config?.type]?.url && (
+            <Picture source={pageCommon.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 ? (
+              <NoneProductValue item={item} />
+            ) : (
+              <Text size={3} html={item.alpc?.title} />
+            )}
+          </div>
+        </div>
+        <div className="mt-[30px] flex items-center justify-center md:mt-[18px]">
+          <div className="mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]">{couponCode}</div>
+          <div
+            className={classNames(
+              'cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]',
+              copiedStatus ? 'pointer-events-none' : 'pointer-events-auto'
+            )}
+            onClick={() => copyText(couponCode)}
+            role="button"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {copiedStatus ? pageCommon?.copied : pageCommon?.copy}
+          </div>
+        </div>
+      </div>
+      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
+        <div className="flex flex-col">
+          <Text
+            className="mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]"
+            html={copy.coupon.successTitle}
+          ></Text>
+          <Text
+            className="text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]"
+            html={copy.coupon.successDesc}
+          ></Text>
+        </div>
+        <Button
+          variant="primary"
+          size="lg"
+          className="mt-[16px] w-full"
+          onClick={() => {
+            window.location.href = copy.coupon.successButtonUrl || `/${locale}`
+            onClose()
+          }}
+          disabled={disabled}
+        >
+          {copy.coupon.successButton}
+        </Button>
+      </div>
+    </>
+  )
+}