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

package/src/components/credits/creditsRedeemList/RedeemVirtualProductModal/VirtualProductInit.tsx

@@ -0,0 +1,101 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { Fragment } from 'react'
+import { numberFormat } from '../../context/utils'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
+import { NoneProductValue } from '../RedeemProductModal/NonProductValue'
+import { useCreditsContext } from '../../context/provider'
+
+type VirtualProductInitProps = {
+  item: RedeemableItemType
+  copy: RedeemModalCommon
+  loading: boolean
+  disabled: boolean
+  onConfirm: () => void
+}
+
+export const VirtualProductInit = ({ item, copy, loading, disabled, onConfirm }: VirtualProductInitProps) => {
+  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>
+        {copy?.virtualProduct?.steps && copy.virtualProduct.steps.length > 0 && (
+          <div className="mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]">
+            <div className="text-[16px] font-bold leading-[1.4]">{copy.virtualProduct.stepTitle}</div>
+            <div className="mt-[4px] flex items-center justify-center">
+              {copy.virtualProduct.steps.map((step, index) => (
+                <Fragment key={index}>
+                  <div className="flex w-[76px] flex-col items-center text-center md:h-[94px] min-l:w-[130px]">
+                    <Picture source={step.imageUrl} className="mb-[4px] h-[58px] w-[58px]"></Picture>
+                    <div className="min-h-[34px] text-[14px] font-bold text-[#777] md:min-h-[28px] md:text-[12px]">
+                      {step.title}
+                    </div>
+                  </div>
+                  {index !== copy.virtualProduct.steps!.length - 1 && (
+                    <Picture
+                      source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/step-arrow.png?v=1690458150"
+                      className="mb-[20px] h-[10px] w-[20px] md:mb-[30px] md:h-[5px] md:w-[12px]"
+                    ></Picture>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+          </div>
+        )}
+        {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/RedeemVirtualProductModal/VirtualProductSuccess.tsx

@@ -0,0 +1,65 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useHeadlessContext } from '@anker-in/lib'
+import type { RedeemModalCommon, RedeemableItem as RedeemableItemType } from '../../type'
+import { NoneProductValue } from '../RedeemProductModal/NonProductValue'
+import { useCreditsContext } from '../../context/provider'
+
+type VirtualProductSuccessProps = {
+  item: RedeemableItemType
+  copy: RedeemModalCommon
+  disabled: boolean
+  onClose: () => void
+}
+
+export const VirtualProductSuccess = ({ item, copy, disabled, onClose }: VirtualProductSuccessProps) => {
+  const { locale } = useHeadlessContext()
+  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>
+      </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.virtualProduct.successTitle}
+          ></Text>
+          <Text
+            className="text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]"
+            html={copy.virtualProduct.successDesc}
+          ></Text>
+        </div>
+        <Button
+          variant="primary"
+          size="lg"
+          className="mt-[16px] w-full"
+          onClick={() => {
+            window.location.href = copy.virtualProduct.successButtonUrl || `/${locale}`
+            onClose()
+          }}
+          disabled={disabled}
+        >
+          {copy.virtualProduct.successButton}
+        </Button>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,156 @@
+import { Text } from '@anker-in/headless-ui'
+import { useCallback, useEffect, useState } from 'react'
+import type { ModalContainerProps } from '../modal/ModalContainer'
+import { useCreditsContext } from '../context/provider'
+import { useRedeemGoGift } from '../context/hooks/useRedeemGoGift'
+import { useRedeemProduct } from '../context/hooks/useRedeemProduct'
+import { AlpcErrorCode, ConsumeType } from '../context/const'
+import { CreditsModalContainer } from '../modal/ModalContainer'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../type'
+import { useHeadlessContext } from '@anker-in/lib'
+import { VirtualProductInit } from './RedeemVirtualProductModal/VirtualProductInit'
+import { VirtualProductSuccess } from './RedeemVirtualProductModal/VirtualProductSuccess'
+
+function RedeemVirtualProductModal({
+  item,
+  copy,
+  onError,
+  ...props
+}: Omit<ModalContainerProps, 'isOpen'> & {
+  item: RedeemableItemType
+  copy: RedeemModalCommon
+  onError: (code: number) => void
+}) {
+  const [giftCardId, setGiftCardId] = useState<string>()
+  const [errorInfo, setErrorInfo] = useState<string>()
+
+  const [disabled, setDisabled] = useState(false)
+
+  const { profile, fetchCreditInfo } = useCreditsContext()
+
+  // 判断是 GoGift 还是 GiftCard 类型
+  const isGoGift = item.config?.type === ConsumeType.GoGift
+  const isGiftCard = item.config?.type === ConsumeType.GiftCard
+
+  // GoGift 使用专用接口
+  const { isMutating: goGiftLoading, trigger: triggerGoGift } = useRedeemGoGift({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setErrorInfo(copy?.commonError)
+        return
+      }
+
+      if (responseData?.data?.id) {
+        setGiftCardId(responseData.data.id)
+        fetchCreditInfo(profile?.user_id)
+      } else {
+        handleRedeemError(responseData.code)
+      }
+    },
+    onError(error) {
+      setErrorInfo(error.message || copy?.commonError)
+    },
+  })
+
+  // GiftCard 使用 Product 接口，但不需要地址
+  const { isMutating: productLoading, trigger: triggerProduct } = useRedeemProduct({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setErrorInfo(copy?.commonError)
+        return
+      }
+
+      if (responseData?.code === 0) {
+        setGiftCardId('success')
+        fetchCreditInfo(profile?.user_id)
+      } else {
+        handleRedeemError(responseData.code)
+      }
+    },
+    onError() {
+      setErrorInfo(copy?.commonError)
+    },
+  })
+
+  const loading = isGoGift ? goGiftLoading : productLoading
+
+  const handleRedeemError = (code: number) => {
+    let errorMsg: string | undefined
+    if (code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+      errorMsg = copy?.redeemLimitError
+      setDisabled(true)
+    } else if (code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+      errorMsg = copy?.inventoryNotEnough
+      setDisabled(true)
+    } else if (code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+      errorMsg = copy?.creditsNotEnough
+      setDisabled(true)
+      fetchCreditInfo(profile?.user_id)
+    } else if (code === AlpcErrorCode.CodeCrossSiteError) {
+      errorMsg = copy?.crossSiteError
+      setDisabled(true)
+    }
+
+    setErrorInfo(errorMsg || copy?.commonError || '')
+    onError && onError(code)
+  }
+
+  const handleConfirm = useCallback(async () => {
+    setErrorInfo('')
+
+    if (isGoGift) {
+      // GoGift 类型使用专用接口
+      triggerGoGift({
+        user_id: profile?.user_id,
+        rule_id: Number(item.alpc?.id),
+      })
+    } else if (isGiftCard) {
+      // GiftCard 类型使用 Product 接口，传递默认地址
+      const defaultAddress = {
+        email: profile?.email || '',
+        firstName: profile?.firstName || '',
+        lastName: profile?.lastName || '',
+        address1: 'Default Address',
+        city: 'Default City',
+        province: 'Default Province',
+        country: 'US',
+        zip: '00000',
+      }
+      triggerProduct({
+        address: btoa(JSON.stringify(defaultAddress)),
+        rule_id: Number(item.alpc?.id),
+      })
+    }
+  }, [item, profile, triggerGoGift, triggerProduct, isGoGift, isGiftCard])
+
+  useEffect(() => {
+    return () => {
+      setDisabled(false)
+      setErrorInfo('')
+      setGiftCardId(undefined)
+    }
+  }, [])
+
+  return (
+    <CreditsModalContainer
+      {...props}
+      isOpen={!!item}
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-0 md:mb-[24px] px-0"
+      titleClassName="h-[56px] bg-[#F5F5F7]"
+    >
+      {giftCardId && !loading ? (
+        <VirtualProductSuccess item={item} copy={copy} disabled={disabled} onClose={props.onClose} />
+      ) : (
+        <VirtualProductInit item={item} copy={copy} loading={loading} disabled={disabled} onConfirm={handleConfirm} />
+      )}
+      {errorInfo && (
+        <div className="mx-auto max-w-full bg-white px-[48px] py-[12px] text-center text-[#FF0000] md:px-[16px]">
+          <Text className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
+        </div>
+      )}
+    </CreditsModalContainer>
+  )
+}
+
+export default RedeemVirtualProductModal

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

@@ -105,7 +105,7 @@ export function RedeemableItem({
         >
           <Picture
             className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
-            source={item.config?.image?.url || item.product.images?.[0]?.url}
+            source={item.config?.image?.url || item.product?.images?.[0]?.url}
           ></Picture>
         </a>
       ) : (

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

@@ -27,6 +27,17 @@ export type CreditsRedeemListCopy = {
       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

package/src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.tsx

@@ -7,8 +7,8 @@ import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
 import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
-import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
-import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { CreditsUploadReceiptModal } from '../modal/CreditsUploadReceiptModal'
+import { CreditsSubscribeModal } from '../modal/SubscribeModal'
 import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {

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

@@ -1,5 +1,5 @@
-import type { ReceiptCopy } from '../modal/creditsUploadReceiptModal'
-import type { CreditsSubscribeModalCopy } from '../modal/subscribeModal'
+import type { ReceiptCopy } from '../modal/CreditsUploadReceiptModal'
+import type { CreditsSubscribeModalCopy } from '../modal/SubscribeModal'
 
 export type BenefitItem = {
   title: string

package/src/components/credits/index.ts

@@ -1,7 +1,7 @@
 export { CreditsProvider, useCreditsContext } from './context/provider'
 
 export { useUploadReceipt as useCreditsUploadReceipt } from './context/hooks/useUploadReceipt'
-export { CreditsUploadReceiptModal } from './modal/creditsUploadReceiptModal'
+export { CreditsUploadReceiptModal } from './modal/CreditsUploadReceiptModal'
 export { CreditsBanner } from './creditsBanner'
 export { CreditsBenefits } from './creditsBenefits'
 export { CreditsInfoCard } from './creditsInfoCard'
@@ -9,3 +9,4 @@ export { CreditsWaysToGetCredits } from './creditsWaysToGetCredits'
 export { CreditsFaq } from './creditsFaq'
 export { CreditsCash } from './creditsCash'
 export { CreditsRedeemList } from './creditsRedeemList'
+export { CreditsGoGift } from './creditsGoGift'

package/src/components/credits/modal/{activitiesModal.tsx → ActivitiesModal.tsx}

@@ -3,10 +3,10 @@ import { useCreditsContext } from '../context/provider'
 import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/const'
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
-import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'
 import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
-import LoadingDots from './loadingDots'
+import LoadingDots from './LoadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
 import { ROUNDED_BRANDS } from '../../../constants'
 import dayjs from 'dayjs'

package/src/components/credits/modal/{creditsUploadReceiptModal.tsx → CreditsUploadReceiptModal.tsx}

@@ -1,6 +1,6 @@
 import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
-import { CreditsModalContainer } from './modalContainer'
+import { CreditsModalContainer } from './ModalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
 import { useHeadlessContext } from '@anker-in/lib'
 import classNames from 'classnames'

package/src/components/credits/modal/{modalContainer.tsx → ModalContainer.tsx}

@@ -47,7 +47,7 @@ export const CreditsModalContainer = ({
 
   return (
     <ReactModal
-      isOpen={isOpen ?? false}
+      isOpen={isOpen}
       overlayClassName={cn(
         'fixed inset-0 z-[999] flex items-center justify-center bg-black/70 leading-[1.2] md:items-end',
         overlayClassName