@anker-in/campaign-ui 0.4.6 → 0.5.0-beta.1

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

@@ -0,0 +1,186 @@
+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 type { CompleteProfileCopy } from '../../type'
+import { useUpdateProfile } from './hooks/useUpdateProfile'
+import useCountries from '../../../credits/context/hooks/useCountries'
+import { useMemberPopupContext } from '../../context/provider'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSuccess?: () => void
+  copy: CompleteProfileCopy
+  shopifyStoreDomain?: string
+}
+
+export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {
+  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
+  const { locale } = alpcConfig
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [birthDay, setBirthDay] = useState('')
+  const [country, setCountry] = useState('')
+  const [firstNameError, setFirstNameError] = useState('')
+  const [lastNameError, setLastNameError] = useState('')
+
+  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
+  const { countries } = useCountries({ shopifyStoreDomain })
+
+  useEffect(() => {
+    if (profile) {
+      setFirstName(profile.first_name ?? '')
+      setLastName(profile.last_name ?? '')
+      setPhone(profile.phone_number ?? '')
+      setBirthDay(profile.dob ?? '')
+      setCountry(profile.country?.id ?? '')
+    }
+  }, [profile])
+
+  const validate = useCallback(() => {
+    let hasError = false
+    if (!firstName.trim()) {
+      setFirstNameError(copy.required)
+      hasError = true
+    } else {
+      setFirstNameError('')
+    }
+    if (!lastName.trim()) {
+      setLastNameError(copy.required)
+      hasError = true
+    } else {
+      setLastNameError('')
+    }
+    return hasError
+  }, [firstName, lastName, copy.required])
+
+  const handleSubmit = useCallback(async () => {
+    if (validate()) return
+    const success = await updateProfile({
+      first_name: firstName.trim(),
+      last_name: lastName.trim(),
+      phone_number: phone,
+      country,
+      dob: birthDay,
+    })
+    if (success) {
+      fetchCreditInfo(profile?.user_id)
+      onSuccess?.()
+      onClose()
+    }
+  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
+
+  return (
+    <CreditsModalContainer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={copy.title}
+      titleClassName="!h-auto !border-b-0 !pb-0"
+      className="w-[540px] md:h-auto"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+    >
+      <div className="flex flex-col gap-[20px]">
+        {copy.subtitle && (
+          <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
+        )}
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.email}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]"
+            value={profile?.email ?? ''}
+            disabled
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
+            {copy.firstName} <span className="text-[#f84d4f]">*</span>
+          </label>
+          <input
+            className={cn(
+              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
+              firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
+            )}
+            value={firstName}
+            onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
+          />
+          {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
+            {copy.lastName} <span className="text-[#f84d4f]">*</span>
+          </label>
+          <input
+            className={cn(
+              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
+              lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
+            )}
+            value={lastName}
+            onChange={e => { setLastName(e.target.value); setLastNameError('') }}
+          />
+          {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.birthday}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            type="date"
+            value={birthDay}
+            onChange={e => setBirthDay(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.phone}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            value={phone}
+            onChange={e => setPhone(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.country}</label>
+          <select
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            value={country}
+            onChange={e => setCountry(e.target.value)}
+          >
+            <option value="" />
+            {countries.map((c: { id: string; name: string }) => (
+              <option key={c.id} value={c.id}>{c.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex gap-[12px]">
+          <Button
+            variant="secondary"
+            size="lg"
+            className="flex-1"
+            onClick={onClose}
+            disabled={isLoading}
+          >
+            {copy.cancel}
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="flex-1"
+            loading={isLoading}
+            onClick={handleSubmit}
+          >
+            {copy.save}
+          </Button>
+        </div>
+      </div>
+    </CreditsModalContainer>
+  )
+}

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

@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import type { CompleteProfileCopy } from '../../type'
+import { useUpdateProfile } from './hooks/useUpdateProfile'
+import useCountries from '../../../credits/context/hooks/useCountries'
+import { useMemberPopupContext } from '../../context/provider'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  copy: CompleteProfileCopy
+  shopifyStoreDomain?: string
+  onClose: () => void
+  onSuccess?: () => void
+}
+
+export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', onClose, onSuccess }: Props) {
+  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
+  const { locale } = alpcConfig
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [birthDay, setBirthDay] = useState('')
+  const [country, setCountry] = useState('')
+  const [firstNameError, setFirstNameError] = useState('')
+  const [lastNameError, setLastNameError] = useState('')
+
+  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
+  const { countries } = useCountries({ shopifyStoreDomain })
+
+  useEffect(() => {
+    if (profile) {
+      setFirstName(profile.first_name ?? '')
+      setLastName(profile.last_name ?? '')
+      setPhone(profile.phone_number ?? '')
+      setBirthDay(profile.dob ?? '')
+      setCountry(profile.country?.id ?? '')
+    }
+  }, [profile])
+
+  const validate = useCallback(() => {
+    let hasError = false
+    if (!firstName.trim()) {
+      setFirstNameError(copy.required)
+      hasError = true
+    } else {
+      setFirstNameError('')
+    }
+    if (!lastName.trim()) {
+      setLastNameError(copy.required)
+      hasError = true
+    } else {
+      setLastNameError('')
+    }
+    return hasError
+  }, [firstName, lastName, copy.required])
+
+  const handleSubmit = useCallback(async () => {
+    if (validate()) return
+    const success = await updateProfile({
+      first_name: firstName.trim(),
+      last_name: lastName.trim(),
+      phone_number: phone,
+      country,
+      dob: birthDay,
+    })
+    if (success) {
+      fetchCreditInfo(profile?.user_id)
+      onSuccess?.()
+      onClose()
+    }
+  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
+
+  return (
+    <div className="flex flex-col gap-[20px]">
+      {copy.subtitle && (
+        <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
+      )}
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.email}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={profile?.email ?? ''}
+          disabled
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
+          {copy.firstName} <span className="text-[#f84d4f]">*</span>
+        </label>
+        <input
+          className={cn(
+            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
+            firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+          value={firstName}
+          onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
+        />
+        {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
+          {copy.lastName} <span className="text-[#f84d4f]">*</span>
+        </label>
+        <input
+          className={cn(
+            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
+            lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+          value={lastName}
+          onChange={e => { setLastName(e.target.value); setLastNameError('') }}
+        />
+        {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.birthday}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          type="date"
+          value={birthDay}
+          onChange={e => setBirthDay(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.phone}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={phone}
+          onChange={e => setPhone(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.country}</label>
+        <select
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={country}
+          onChange={e => setCountry(e.target.value)}
+        >
+          <option value="" />
+          {countries.map((c: { id: string; name: string }) => (
+            <option key={c.id} value={c.id}>{c.name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex gap-[12px]">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+          disabled={isLoading}
+        >
+          {copy.cancel}
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="flex-1"
+          loading={isLoading}
+          onClick={handleSubmit}
+        >
+          {copy.save}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,130 @@
+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,
+  }
+}
+
+export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose, onSuccess }: Props) {
+  const { alpcConfig } = useMemberPopupContext()
+  const { brand, locale } = alpcConfig
+  const { brand: headlessBrand } = 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()
+    try {
+      const response = await fetch('/api/multipass/subscribe/subscribe_emails', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'current-language': locale },
+        body: JSON.stringify({
+          email,
+          register_source,
+          brand,
+          deals_type: copy.dealsType ?? 'vip_subscribe',
+        }),
+      })
+      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, brand, 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>
+  )
+}

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

@@ -0,0 +1,144 @@
+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>
+  )
+}