@anker-in/campaign-ui 0.5.0-beta.4 → 0.5.0-beta.6

package/src/components/memberPopup/panels/Referral/index.tsx

@@ -84,7 +84,7 @@ function Referral({ copy, onClose }: Props) {
         <Picture
           source={copy.image.url}
           alt={copy.image.alt ?? ''}
-          className={cn('h-[100px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+          className={cn('mt-[8px] h-[100px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
         />
       )}
 

package/src/components/memberPopup/type.ts

@@ -37,6 +37,8 @@ export enum EarnCreditsTaskType {
 export enum ConsumeCreditsItemType {
   Coupon = 'COUPON',
   RedeemAndBuy = 'REDEEM_AND_BUY',
+  GiftCard = 'GIFT_CARD',
+  Product = 'PRODUCT',
 }
 
 // ─── 通用 link（统一一种类型） ─────────────────────────
@@ -81,7 +83,7 @@ export type MemberPopupCopy = {
     shopLabel: string
     shopUrl?: string
   }
-  subscribe?: SubscribeModalCopy
+  activitiesSubscribe?: SubscribeModalCopy
   earnCredits?: EarnCreditsCopy
   consumeCredits?: ConsumeCreditsopy
   referral?: ReferralCopy
@@ -141,6 +143,13 @@ export type SubscribeModalCopy = {
   single_brand_subscribe?: boolean
   genre?: string
   sub_brand_type?: string
+  promo?: {
+    title?: string
+    description?: string
+    learnMoreLabel?: string
+    learnMoreUrl?: string
+    image?: { url: string; alt?: string }
+  }
 }
 
 // ─── ConsumeCredits Copy ────────────────────────────

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponModal.tsx

@@ -1,150 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import { AlpcErrorCode } from '../../../credits/context/const'
-import { useRedeemCoupon } from './hooks/useRedeemCoupon'
-import useCopy from '../../../credits/context/hooks/useCopy'
-import type { RedeemCouponModalCopy, AlpcConfig } from '../../type'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  itemTitle: string
-  itemCredits: number
-  itemImage?: { url: string; alt?: string }
-  redeemId: number
-  userId?: string
-  copy: RedeemCouponModalCopy
-  pointUnit?: string
-  alpcConfig: AlpcConfig
-  onError?: (code: number) => void
-}
-
-export function RedeemCouponModal({
-  isOpen,
-  onClose,
-  itemTitle,
-  itemCredits,
-  itemImage,
-  redeemId,
-  userId,
-  copy,
-  pointUnit = 'pts',
-  alpcConfig,
-  onError,
-}: Props) {
-  const [couponCode, setCouponCode] = useState<string>()
-  const [errorInfo, setErrorInfo] = useState('')
-  const [disabled, setDisabled] = useState(false)
-  const { copy: copyText, copied } = useCopy()
-
-  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)
-
-  const handleConfirm = useCallback(async () => {
-    setErrorInfo('')
-    const { data } = await trigger({ user_id: userId, rule_id: redeemId })
-    if (!data) {
-      setErrorInfo(copy.commonError)
-      return
-    }
-    if (data.data?.success) {
-      setCouponCode(data.data.coupon_code)
-    } else {
-      let msg = copy.commonError
-      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-        msg = copy.redeemLimitError
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-        msg = copy.inventoryNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-        msg = copy.creditsNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
-        msg = copy.crossSiteError
-        setDisabled(true)
-      }
-      setErrorInfo(msg)
-      onError?.(data.code)
-    }
-  }, [trigger, userId, redeemId, copy, onError])
-
-  useEffect(() => {
-    if (!isOpen) {
-      setCouponCode(undefined)
-      setErrorInfo('')
-      setDisabled(false)
-    }
-  }, [isOpen])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      className="w-[540px] md:h-auto"
-      scrollClassName="mb-[40px] px-0 min-l:px-0 md:mb-[24px]"
-      titleClassName="h-[56px] bg-[#f5f5f7]"
-    >
-      <div className="bg-[#f5f5f7] px-[48px] pb-[24px] md:px-[16px]">
-        {itemImage?.url && (
-          <div className="relative mx-auto h-[164px] w-[324px]">
-            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="h-full w-full object-cover" />
-          </div>
-        )}
-        <p className={cn('mt-[30px] text-center text-[24px] font-bold md:mt-[18px] md:text-[20px]')}>
-          {itemCredits} {pointUnit}
-        </p>
-      </div>
-
-      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
-        {!couponCode ? (
-          <>
-            <Text className="block text-[24px] font-bold md:text-[20px]" html={copy.confirmTitle} />
-            <Button
-              loading={loading}
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={handleConfirm}
-              disabled={disabled}
-            >
-              {copy.confirmButton}
-            </Button>
-          </>
-        ) : (
-          <>
-            <div className="flex items-center justify-center gap-[10px]">
-              <span className="text-[24px] font-bold">{couponCode}</span>
-              <button
-                className={cn('text-[16px] font-bold underline', copied && 'pointer-events-none')}
-                onClick={() => copyText(couponCode)}
-              >
-                {copied ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-            <Text className="mb-[4px] mt-[16px] text-[24px] font-bold md:text-[20px]" html={copy.successTitle} />
-            <Text className="text-[16px] font-bold text-[#6d6d6f] md:text-[14px]" html={copy.successDesc} />
-            <Button
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={() => {
-                if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
-                onClose()
-              }}
-            >
-              {copy.successButton}
-            </Button>
-          </>
-        )}
-      </div>
-
-      {errorInfo && (
-        <div className="bg-white px-[48px] py-[12px] text-center md:px-[16px]">
-          <Text className="text-[14px] font-semibold text-[#ff0000]" html={errorInfo} />
-        </div>
-      )}
-    </CreditsModalContainer>
-  )
-}

package/src/components/memberPopup/panels/EarnCredits/SubscribeModal.tsx

@@ -1,144 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Checkbox, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import Cookies from 'js-cookie'
-import { parse } from 'query-string'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import { emailValidate } from '../../../credits/context/utils'
-import { useMemberPopupContext } from '../../context/provider'
-import type { SubscribeModalCopy } from '../../type'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  onSuccess?: () => void
-  copy: SubscribeModalCopy
-  email?: string
-}
-
-function getAdCookie() {
-  if (typeof window === 'undefined') return { register_source: '' }
-  const { search, href } = window.location
-  const query = parse(search)
-  return {
-    fbuy_ref_code: Cookies.get('fbuy_ref_code'),
-    ref: Cookies.get('ref_ads'),
-    inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),
-    register_source: query.redirect ?? Cookies.get('reg_source') ?? href,
-  }
-}
-
-async function getRecaptchaToken(sitekey: string): Promise<string> {
-  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''
-  if (!sitekey) return ''
-  try {
-    return await window.grecaptcha.execute(sitekey, { action: 'activity' })
-  } catch {
-    return ''
-  }
-}
-
-export function EarnCreditsSubscribeModal({ isOpen, onClose, onSuccess, copy, email: initialEmail }: Props) {
-  const { alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()
-  const rounded = ROUNDED_BRANDS.includes(headlessBrand)
-  const [policy, setPolicy] = useState(false)
-  const [email, setEmail] = useState(initialEmail ?? '')
-  const [errorMessage, setErrorMessage] = useState('')
-  const [successMessage, setSuccessMessage] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (initialEmail) setEmail(initialEmail)
-  }, [initialEmail])
-
-  const handleSubmit = useCallback(async () => {
-    setErrorMessage('')
-    if (!email) return setErrorMessage('Please fill in your email')
-    if (!emailValidate(email)) return setErrorMessage('Invalid email address')
-    if (!policy) return setErrorMessage('Please agree to the policy')
-
-    setLoading(true)
-    const { register_source } = getAdCookie()
-    const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')
-    try {
-      const response = await fetch('/api/multipass/rainbowbridge/activities', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'current-language': locale,
-          'X-Recaptcha-Token': recaptchaToken,
-        },
-        body: JSON.stringify({
-          email,
-          register_source,
-          shopify_domain: storeDomain,
-          single_brand_subscribe: copy.single_brand_subscribe ?? true,
-          genre: copy.genre ?? copy.dealsType ?? '',
-          sub_brand_type: copy.sub_brand_type ?? '',
-        }),
-      })
-      const result = await response.json()
-      if (!result.errors) {
-        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
-        onSuccess?.()
-        setTimeout(() => {
-          setSuccessMessage('')
-          onClose()
-        }, 3000)
-      } else {
-        setErrorMessage(result.errors ?? 'Error occurred')
-      }
-    } catch {
-      setErrorMessage('Network error')
-    } finally {
-      setLoading(false)
-    }
-  }, [email, policy, locale, storeDomain, copy, onSuccess, onClose])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      className="w-[540px] md:h-auto"
-      scrollClassName="mb-[40px] md:mb-[24px]"
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-    >
-      <div className="flex flex-col gap-[16px] text-center">
-        <Text className="text-[22px] font-bold" html={copy.title} />
-        {copy.desc && (
-          <Text className="text-left text-[16px] font-semibold text-[#1f2021]" html={copy.desc} />
-        )}
-        <div className={cn('flex h-[52px] w-full overflow-hidden md:flex-col md:h-auto md:gap-[16px]', rounded ? 'rounded-[2px]' : 'rounded-none')}>
-          <input
-            className={cn('h-full flex-1 border border-[#d8d8d8] px-[14px] text-[16px] outline-none placeholder:text-[#999] md:h-[52px]', rounded ? 'rounded-l-[2px] md:rounded-[2px]' : 'rounded-none')}
-            placeholder={copy.placeholder}
-            value={email}
-            onChange={e => { setErrorMessage(''); setEmail(e.target.value.trim()) }}
-          />
-          <Button
-            variant="primary"
-            loading={loading}
-            className={cn('!h-full !min-w-0 !px-[24px] md:!h-[46px]', rounded ? '!rounded-l-none !rounded-r-[2px] md:!rounded-[2px]' : '!rounded-none')}
-            onClick={handleSubmit}
-          >
-            {copy.buttonLabel ?? 'Subscribe'}
-          </Button>
-        </div>
-        <div className="flex w-full items-start gap-[8px]">
-          <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className="border-[#1d1d1f]" />
-          <label
-            className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
-            dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
-          />
-        </div>
-        <div className={cn('text-left text-[16px] font-semibold', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
-          <Text html={successMessage || errorMessage || ''} />
-        </div>
-      </div>
-    </CreditsModalContainer>
-  )
-}

package/src/components/memberPopup/panels/EarnCredits/SubscribePanel.tsx

@@ -1,147 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Checkbox, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import Cookies from 'js-cookie'
-import { parse } from 'query-string'
-import { emailValidate } from '../../../credits/context/utils'
-import { useMemberPopupContext } from '../../context/provider'
-import type { SubscribeModalCopy } from '../../type'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  copy: SubscribeModalCopy
-  email?: string
-  onClose: () => void
-  onSuccess?: () => void
-}
-
-function getAdCookie() {
-  if (typeof window === 'undefined') return { register_source: '' }
-  const { search, href } = window.location
-  const query = parse(search)
-  return {
-    fbuy_ref_code: Cookies.get('fbuy_ref_code'),
-    ref: Cookies.get('ref_ads'),
-    inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),
-    register_source: query.redirect ?? Cookies.get('reg_source') ?? href,
-  }
-}
-
-async function getRecaptchaToken(sitekey: string): Promise<string> {
-  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''
-  if (!sitekey) return ''
-  try {
-    return await window.grecaptcha.execute(sitekey, { action: 'activity' })
-  } catch {
-    return ''
-  }
-}
-
-export default function SubscribePanel({ copy, email: initialEmail, onClose, onSuccess }: Props) {
-  const { alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()
-  const rounded = ROUNDED_BRANDS.includes(headlessBrand)
-  const [policy, setPolicy] = useState(false)
-  const [email, setEmail] = useState(initialEmail ?? '')
-  const [errorMessage, setErrorMessage] = useState('')
-  const [successMessage, setSuccessMessage] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (initialEmail) setEmail(initialEmail)
-  }, [initialEmail])
-
-  const handleSubmit = useCallback(async () => {
-    setErrorMessage('')
-    if (!email) return setErrorMessage('Please fill in your email')
-    if (!emailValidate(email)) return setErrorMessage('Invalid email address')
-    if (!policy) return setErrorMessage('Please agree to the policy')
-
-    setLoading(true)
-    const { register_source } = getAdCookie()
-    const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')
-    try {
-      const response = await fetch('/api/multipass/rainbowbridge/activities', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'current-language': locale,
-          'X-Recaptcha-Token': recaptchaToken,
-        },
-        body: JSON.stringify({
-          email,
-          register_source,
-          shopify_domain: storeDomain,
-          single_brand_subscribe: copy.single_brand_subscribe ?? true,
-          genre: copy.genre ?? copy.dealsType ?? '',
-          sub_brand_type: copy.sub_brand_type ?? '',
-        }),
-      })
-      const result = await response.json()
-      if (!result.errors) {
-        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
-        onSuccess?.()
-        setTimeout(() => {
-          setSuccessMessage('')
-          onClose()
-        }, 3000)
-      } else {
-        setErrorMessage(result.errors ?? 'Error occurred')
-      }
-    } catch {
-      setErrorMessage('Network error')
-    } finally {
-      setLoading(false)
-    }
-  }, [email, policy, locale, storeDomain, copy, onClose, onSuccess])
-
-  return (
-    <div className="flex flex-col gap-[12px]">
-      <div className="flex flex-col gap-[8px]">
-        {copy.title && (
-          <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>
-        )}
-        {copy.desc && (
-          <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />
-        )}
-      </div>
-
-      <div className="flex flex-col gap-[16px]">
-        <input
-          className={cn(
-            'h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]',
-            errorMessage ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
-            rounded ? 'rounded-[4px]' : 'rounded-none'
-          )}
-          placeholder={copy.placeholder}
-          value={email}
-          onChange={e => { setErrorMessage(''); setEmail(e.target.value.trim()) }}
-        />
-
-        <div className="flex w-full items-start gap-[8px]">
-          <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className="mt-[2px] border-[#1d1d1f]" />
-          <label
-            className="cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline"
-            onClick={() => setPolicy(v => !v)}
-            dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
-          />
-        </div>
-
-        {(errorMessage || successMessage) && (
-          <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
-            <Text html={successMessage || errorMessage} />
-          </div>
-        )}
-
-        <button
-          className={cn('w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60', rounded ? 'rounded-[4px]' : 'rounded-none')}
-          disabled={loading}
-          onClick={handleSubmit}
-        >
-          {copy.buttonLabel ?? 'Subscribe'}
-        </button>
-      </div>
-    </div>
-  )
-}