@anker-in/campaign-ui 0.1.10 → 0.2.0-beta.1

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

@@ -0,0 +1,195 @@
+import classNames from 'classnames'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCreditsContext } from '../../context/provider'
+import useCountries from '../../context/hooks/useCountries'
+import { AlpcErrorCode } from '../../context/const'
+import { useAddressValidate } from '../../context/hooks/useAddressValidate'
+import { useRedeemProduct } from '../../context/hooks/useRedeemProduct'
+import type { ModalContainerProps } from '../../modal/modalContainer'
+import { CreditsModalContainer } from '../../modal/modalContainer'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { useHeadlessContext } from '@anker-in/lib'
+import { CreditsRedeemListCopy } from '../type'
+import { Error } from './Error'
+import { Success } from './Success'
+import { Address } from './Address'
+import { Init } from './Init'
+
+type RedeemProductModalProps = ModalContainerProps & {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+  onError: (code: AlpcErrorCode) => void
+}
+
+function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModalProps) {
+  const { fetchCreditInfo, profile } = useCreditsContext()
+  const { storeDomain, locale } = useHeadlessContext()
+
+  const { pageCommon } = useCreditsContext()
+  const { shippingAddress, shippingProduct } = copy.redeemModal.product
+
+  const [status, setStatus] = useState<'init' | 'address' | 'success' | 'error'>('init')
+  const [address, setAddress] = useState<any>()
+  const [errorInfo, setErrorInfo] = useState({
+    code: 0,
+    message: '',
+    imageUrl: '',
+  })
+  const [disabled, setDisabled] = useState(false)
+
+  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
+
+  const { isMutating: loading, trigger } = useRedeemProduct({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setStatus('error')
+        setErrorInfo({
+          code: 0,
+          imageUrl: copy.redeemModal.errorImageUrl || '',
+          message: copy.redeemModal.commonError || '',
+        })
+        return
+      }
+
+      if (responseData?.code === 0) {
+        fetchCreditInfo(profile?.user_id)
+        setStatus('success')
+      } else {
+        let errorMsg
+        let errorImage
+        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+          errorMsg = copy.redeemModal.redeemLimitError
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+          errorMsg = copy.redeemModal.inventoryNotEnough
+          setDisabled(true)
+          errorImage = copy.redeemModal.inventoryNotEnough
+        } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+          errorMsg = copy.redeemModal.creditsNotEnough
+          setDisabled(true)
+          fetchCreditInfo(profile?.user_id)
+        } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {
+          errorMsg = copy.redeemModal.crossSiteError
+          setDisabled(true)
+        }
+
+        setStatus('error')
+        setErrorInfo({
+          code: responseData.code,
+          imageUrl: errorImage || copy.redeemModal.errorImageUrl || '',
+          message: errorMsg || copy.redeemModal.commonError || '',
+        })
+        onError && onError(responseData.code)
+      }
+    },
+    onError(error) {
+      setStatus('error')
+      setErrorInfo({
+        code: 0,
+        imageUrl: copy.redeemModal.errorImageUrl || '',
+        message: copy.redeemModal.commonError || '',
+      })
+    },
+  })
+
+  const stateInputKey = useMemo(() => {
+    const stateInput = copy?.redeemModal.product.form?.flat().find(item => item.type === 'state')
+    return stateInput?.key
+  }, [copy?.redeemModal.product.form])
+
+  const { validate: validateAddress, errors: validateErrors } = useAddressValidate({
+    address: address,
+    validatorInfo: pageCommon?.validatorInfo,
+    formData: copy?.redeemModal.product.form?.flat() || [],
+    errorLabel: {
+      require: copy.redeemModal.product.required,
+      email: copy.redeemModal.product.invalidEmail,
+    },
+  })
+
+  const handlePayment = useCallback(async () => {
+    const ignoreKeys: string[] = []
+
+    if (stateInputKey) {
+      const provinces = countries.find(item => item.code === address.country)?.provinces || []
+
+      if (!provinces.length) {
+        ignoreKeys.push(stateInputKey as never)
+      }
+    }
+
+    if (
+      validateAddress({
+        force: true,
+        ignoreKeys,
+      })
+    ) {
+      // 地址校验错误
+      return
+    }
+    let requestAddress = { ...address }
+    if (requestAddress.name) {
+      delete requestAddress.name
+    }
+    if (requestAddress.country === 'UK') {
+      requestAddress.country = 'GB'
+    }
+    trigger({
+      address: btoa(JSON.stringify(requestAddress)),
+      rule_id: Number(item.alpc?.id),
+    })
+  }, [item, trigger, stateInputKey, validateAddress, address, countries])
+
+  useEffect(() => {
+    if (!props.isOpen) {
+      setDisabled(false)
+      setErrorInfo({ code: 0, message: '', imageUrl: '' })
+    }
+  }, [props.isOpen, locale])
+
+  return (
+    <CreditsModalContainer
+      {...props}
+      className={classNames(
+        'w-[540px] md:h-auto min-md:max-h-[calc(100vh-40px)]',
+        status !== 'init' && 'w-[740px] md:w-full'
+      )}
+      scrollClassName="mb-0 min-l:px-0 md:mb-0 px-0"
+      titleClassName={classNames('h-[56px]', status === 'init' && 'bg-[#F5F5F7]')}
+      title={status === 'address' ? 'Order Confirmation' : ''}
+    >
+      {status === 'error' && <Error errorInfo={errorInfo} />}
+      {status === 'success' && (
+        <Success
+          copy={copy}
+          shippingProduct={shippingProduct}
+          loading={loading}
+          address={address}
+          disabled={disabled}
+          onClose={props.onClose}
+          item={item}
+        />
+      )}
+      {status === 'address' && (
+        <Address
+          copy={copy}
+          shippingAddress={shippingAddress}
+          setAddress={setAddress}
+          validateAddress={validateAddress}
+          validateErrors={validateErrors}
+          shippingProduct={shippingProduct}
+          loading={loading}
+          address={address}
+          disabled={disabled}
+          handlePayment={handlePayment}
+          item={item}
+        />
+      )}
+      {status === 'init' && (
+        <Init item={item} copy={copy} loading={loading} disabled={disabled} setStatus={setStatus} />
+      )}
+    </CreditsModalContainer>
+  )
+}
+
+export default RedeemProductModal

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

@@ -0,0 +1,183 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+
+import { useMemo } from 'react'
+
+import classNames from 'classnames'
+import { useCreditsContext } from '../context/provider'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { AlpcConsumeType, ConsumeType } from '../context/const'
+import { numberFormat } from '../context/utils'
+import type { CreditsRedeemListCopy } from './type'
+import { gaTrack, useHeadlessContext } from '@anker-in/lib'
+import { NoneProductValue } from './NonProductValue'
+import { roundedBrands } from '../const'
+
+export function RedeemableItem({
+  copy,
+  className,
+  item,
+  onRulesOpen,
+  onRedeem,
+}: {
+  copy: CreditsRedeemListCopy
+  className?: string
+  item: RedeemableItemType
+  onRulesOpen: (rules: string[]) => void
+  onRedeem: (item: RedeemableItemType) => void
+}) {
+  const {
+    creditInfo,
+    profile,
+    gtm: { pageGroup },
+    pageCommon,
+  } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const isLogin = Object.keys(profile || {}).length > 0
+  const rounded = roundedBrands.includes(brand)
+
+  const isDisabled = useMemo(() => {
+    if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {
+      // 有库存限制
+      return true
+    }
+
+    if (item.alpc?.consumeType === AlpcConsumeType.Product) {
+      if (!item.variant?.availableForSale) {
+        return true
+      }
+    }
+    if (isLogin && profile?.activated && item.alpc?.consumeCredits > Number(creditInfo?.available_credit || 0)) {
+      return true
+    }
+    return false
+  }, [
+    item.alpc?.remainingInventory,
+    item.alpc?.isLimited,
+    item.alpc?.consumeType,
+    item.alpc?.consumeCredits,
+    isLogin,
+    profile?.activated,
+    creditInfo?.available_credit,
+    item.variant?.availableForSale,
+  ])
+
+  const redeemButtonText = useMemo(() => {
+    if (!isLogin) {
+      return copy.unlockRewards
+    }
+
+    // 缺货文案
+    if (item.alpc?.consumeType === AlpcConsumeType.Product) {
+      return item.variant?.availableForSale ? copy.btnRedeem : pageCommon?.soldOut || 'Sold Out'
+    }
+    return copy.btnRedeem
+  }, [
+    isLogin,
+    item.alpc?.consumeType,
+    item.variant?.availableForSale,
+    copy.btnRedeem,
+    copy.unlockRewards,
+    pageCommon?.soldOut,
+  ])
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        !rounded && 'rounded-none md:rounded-none',
+        className
+      )}
+    >
+      {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
+            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
+            source={item.config?.image?.url || item.product.images?.[0]?.url}
+          ></Picture>
+        </div>
+      ) : (
+        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
+          <Picture
+            source={pageCommon?.imageMapping?.[item.config?.type]?.url}
+            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+          ></Picture>
+
+          <NoneProductValue item={item} />
+        </div>
+      )}
+      <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>
+        <Text
+          html={item.config?.title || item.alpc?.title}
+          title={item.config?.title || item.alpc?.title}
+          size={2}
+          className="line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"
+        />
+        {item.config?.rules?.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              onRulesOpen(item.config?.rules || [])
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: pageCommon?.ruleLabel,
+                  info: item.alpc?.id?.toString(),
+                },
+              })
+            }}
+            className="mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {pageCommon?.ruleLabel}
+          </button>
+        )}
+        <div>
+          <div className="mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]">
+            <Picture
+              className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
+              source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
+            />
+            <Text
+              html={`${numberFormat(item.alpc?.consumeCredits)}`}
+              size={2}
+              as="p"
+              className="ml-[4px] text-[28px] font-bold mt-[4px] leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+            />
+          </div>
+
+          <Button
+            disabled={isDisabled}
+            variant="primary"
+            size="lg"
+            className="mt-[8px] md:px-[8px] l:w-full"
+            onClick={() => {
+              onRedeem(item)
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: redeemButtonText,
+                  info: item.alpc?.id?.toString(),
+                },
+              })
+            }}
+          >
+            {redeemButtonText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,63 @@
+export type CreditsRedeemListCopy = {
+  title: string
+  unlockRewards: string
+  btnRedeem: string
+  list: {
+    label: string
+    list: {
+      id: string
+      type: string
+      value: string
+      rules: string[]
+    }[]
+  }[]
+  redeemModal: {
+    confirmTitle: string
+    confirmButton: string
+    commonError: string
+    redeemLimitError: string
+    inventoryNotEnough: string
+    creditsNotEnough: string
+    crossSiteError: string
+    errorImageUrl: string
+    coupon: {
+      successDesc: string
+      successTitle: string
+      successButton: string
+      successButtonUrl: string
+    }
+    product: {
+      required: string
+      invalidEmail: string
+      shippingAddress: string
+      shippingProduct: string
+      addressForm: {
+        key: string
+        type: string
+        label: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      form: {
+        key: string
+        type: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      successDesc: string[]
+      rules: string[]
+      steps: {
+        imageUrl: string
+        title: string
+      }[]
+      quantityLabel: string
+      totalPriceLabel: string
+      variantLabel: string
+      shippingFeeLabel: string
+      paymentButton: string
+      stepTitle: string
+    }
+  }
+}

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

@@ -0,0 +1,235 @@
+import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import { motion } from 'framer-motion'
+import { useMemo, useState } from 'react'
+
+import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
+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 { roundedBrands } from '../const'
+
+export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
+  const [showMore, setShowMore] = useState(false)
+  const { profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = roundedBrands.includes(brand)
+  const isLogin = !!profile
+
+  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 => {
+        if (!actions[item.id as keyof typeof actions]) {
+          return undefined
+        }
+        const { finished, notLogin, notFinished, completed } = actions[item.id as keyof typeof actions]
+        let buttonLabel = ''
+        let handleClick = undefined
+        let link = undefined
+        if (!isLogin) {
+          buttonLabel = notLogin.buttonLabel
+          handleClick = notLogin.handleClick
+        } else if (finished) {
+          buttonLabel = completed.buttonLabel
+          handleClick = undefined
+        } else {
+          buttonLabel = notFinished.buttonLabel
+          handleClick = notFinished.handleClick
+          link = (notFinished as { link: string }).link
+        }
+        return {
+          ...item,
+          buttonLabel,
+          handleClick,
+          finished,
+          link,
+        }
+      })
+      .filter(Boolean) as {
+      title: string
+      credits: string
+      id: TaskType
+      buttonLabel: string
+      finished: boolean
+      link: string
+      handleClick: (() => void) | undefined
+    }[]
+
+    // 登录后，保留原顺序，将已完成的任务放在最后
+    if (isLogin) {
+      return list.sort((a, b) => {
+        if (a?.finished && !b?.finished) {
+          return 1 // a已完成，b未完成，a排在后面
+        }
+        if (!a?.finished && b?.finished) {
+          return -1 // a未完成，b已完成，a排在前面
+        }
+        return 0 // 都已完成或都未完成，保持原顺序
+      })
+    } else {
+      return list
+    }
+  }, [actions, copy.list, isLogin])
+
+  return (
+    <Container id="ways-to-get-credits" 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]">
+            <Heading size={3} as="h3" html={copy.subtitle} className={classNames?.subtitle} />
+            <div className="mt-[8px] flex items-center">
+              {copy.creditsIcon?.url && (
+                <Picture
+                  className="size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand"
+                  source={copy.creditsIcon.url}
+                  alt={copy.creditsIcon.alt || 'credits'}
+                />
+              )}
+              <Heading
+                html={copy.equalCredits}
+                size={4}
+                as="h3"
+                className={cn('mt-2 text-white md:text-[24px]', classNames?.equalCreditsText)}
+              />
+            </div>
+          </div>
+          <Picture className="w-full laptop:w-[50%]" source={copy.mainImage?.url} />
+        </div>
+
+        <div className="relative">
+          <motion.div
+            className={cn(
+              'relative mt-[64px] grid grid-cols-3 gap-[16px] overflow-hidden md:mt-[16px] md:grid-cols-1 l:gap-[12px]  min-md:!h-auto md-l:mt-[32px] md-l:grid-cols-2'
+            )}
+            initial={{ height: 512 }}
+            animate={{ height: showMore ? 'auto' : 512 }}
+            transition={{ duration: 0.3 }}
+            onAnimationComplete={() => {
+              if (!showMore && window.screen.width < 768) {
+                const section = document.getElementById('ways-to-get-credits')
+                if (section) {
+                  section.scrollIntoView({ behavior: 'smooth', block: 'end' })
+                }
+              }
+            }}
+          >
+            {list.map(item => (
+              <div
+                key={item.id}
+                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" />
+                  <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]" />
+                  </div>
+                </div>
+
+                {item.handleClick &&
+                !(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"
+                    size="lg"
+                    className="mt-[24px] w-fit"
+                  >
+                    {item.buttonLabel}
+                  </Button>
+                ) : (
+                  <Button variant="primary" size="lg" className="mt-[24px] w-fit" disabled>
+                    {item.buttonLabel}
+                  </Button>
+                )}
+              </div>
+            ))}
+            {!showMore && (
+              <div
+                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>
+          {showMore ? (
+            <button
+              className="mx-auto mt-[12px] block w-fit min-md:hidden"
+              onClick={() => {
+                setShowMore(false)
+              }}
+            >
+              <ChevronUpIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronUpIcon>
+            </button>
+          ) : (
+            <>
+              <div className="absolute bottom-0 flex w-full translate-y-1/2 justify-center min-md:hidden">
+                <button className="w-fit" onClick={() => setShowMore(!showMore)}>
+                  <ChevronDownIcon className="size-[40px] rounded-full bg-[#FFFFFF33] p-[8px]"></ChevronDownIcon>
+                </button>
+              </div>
+            </>
+          )}
+        </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)
+          }}
+          isOpen={isSubscribeModalOpen}
+          onClose={() => {
+            setIsSubscribeModalOpen(false)
+          }}
+        />
+      )}
+    </Container>
+  )
+}

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

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