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

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

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

package/src/components/memberPopup/panels/EarnCredits/hooks/useActivities.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react'
+import useSWRMutation from 'swr/mutation'
+import { getAlpcPath } from '../../../../credits/context/utils'
+import type { CreditLogResponse } from '../../../../credits/context/response'
+
+type UseActivitiesConfig = {
+  userId: string | undefined
+  brand: string
+  apiBaseUrl?: string
+  locale?: string
+}
+
+type Params = {
+  page: number
+  pageSize: number
+}
+
+function useActivities(
+  { userId, brand, apiBaseUrl, locale = '' }: UseActivitiesConfig,
+  { page, pageSize }: Params
+) {
+  const [activities, setActivities] = useState<CreditLogResponse[]>([])
+  const [total, setTotal] = useState(0)
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const { isMutating: isLoading, trigger } = useSWRMutation(
+    `/v1/credit/log`,
+    async (url: string, { arg }: { arg: Record<string, any> }) => {
+      const response = await fetch(getAlpcPath(locale, apiBaseUrl) + url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'current-language': locale },
+        body: JSON.stringify(arg),
+      })
+      return response.json()
+    }
+  )
+
+  const fetchActivities = useCallback(async () => {
+    await trigger(
+      { page, page_size: pageSize, user_id: userId, brand },
+      {
+        onSuccess(data) {
+          setCurrentPage(page)
+          setTotal(data?.data?.total ?? 0)
+          setActivities(prev => prev.concat(data?.data?.creditLogs ?? []))
+        },
+      }
+    )
+  }, [page, pageSize, userId, brand, trigger])
+
+  useEffect(() => {
+    if (!userId || !brand || isLoading || page === currentPage) return
+    fetchActivities()
+  }, [fetchActivities, userId, brand, page, currentPage, isLoading])
+
+  return {
+    activities,
+    isLoading,
+    total,
+    canNext: total > activities.length && !isLoading,
+  }
+}
+
+export default useActivities

package/src/components/memberPopup/panels/EarnCredits/hooks/useSubscribed.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { useSubscriptions } from '@anker-in/lib'
+import { TaskSubType } from '../../../../credits/context/const'
+import useActivities from './useActivities'
+
+type UseSubscribedConfig = {
+  userId: string | undefined
+  brand: string
+  email: string | undefined
+  locale?: string
+  apiBaseUrl?: string
+}
+
+export function useSubscribed({ userId, brand, email, locale = '', apiBaseUrl }: UseSubscribedConfig) {
+  const { activities } = useActivities(
+    { userId, brand, apiBaseUrl, locale },
+    { page: 1, pageSize: 50 }
+  )
+  const { data: subscription } = useSubscriptions({ email })
+  const subscriptionData = subscription?.data || subscription
+
+  return useMemo(() => {
+    if (!subscriptionData?.preference) {
+      return false
+    }
+    const subscribedByPreference = subscriptionData.preference.some(
+      (item: any) => item.brand === brand && item.subscribe
+    )
+    if (subscribedByPreference) return true
+    return activities?.some(item => item.task_sub_type === TaskSubType.Subscription)
+  }, [subscriptionData?.preference, activities, brand])
+}

package/src/components/memberPopup/panels/EarnCredits/hooks/useUpdateProfile.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react'
+
+type UseUpdateProfileConfig = {
+  locale?: string
+  appName?: string
+}
+
+type ProfileData = {
+  first_name?: string
+  last_name?: string
+  phone_number?: string
+  country?: string
+  dob?: string
+}
+
+export function useUpdateProfile({ locale = '', appName = '' }: UseUpdateProfileConfig = {}) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const updateProfile = useCallback(
+    async (data: ProfileData): Promise<boolean> => {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const response = await fetch('/api/multipass/account/users/update_profile', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'current-language': locale,
+          },
+          body: JSON.stringify({ app: appName, ...data }),
+        })
+        const result = await response.json()
+        if (response.ok && !result.error) {
+          return true
+        }
+        setError(result?.error?.message || result?.error || 'Update failed')
+        return false
+      } catch (e: any) {
+        setError(e?.message ?? 'Unknown error')
+        return false
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [locale, appName]
+  )
+
+  return { updateProfile, isLoading, error }
+}

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

@@ -0,0 +1,215 @@
+import { useMemo } from 'react'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useMemberPopupContext } from '../../context/provider'
+import { useViewStack } from '../../context/viewStack'
+import { useSubscribed } from './hooks/useSubscribed'
+import { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from '../../type'
+import { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'
+import { numberFormat } from '../../../credits/context/utils'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {
+  switch (id) {
+    case EarnCreditsTaskType.Activate:
+      return <IconLock className={className} />
+    case EarnCreditsTaskType.Subscribe:
+      return <IconSubscription className={className} />
+    case EarnCreditsTaskType.Shop:
+      return <IconBag className={className} />
+    case EarnCreditsTaskType.CompleteProfile:
+      return <IconOrders className={className} />
+  }
+}
+
+type Props = {
+  copy: EarnCreditsCopy
+  onClose: () => void
+  isSubscribeSuccess?: boolean
+  isActivateSuccess?: boolean
+  isProfileCompleteSuccess?: boolean
+  onSubscribeSuccess?: () => void
+  onActivateSuccess?: () => void
+  onProfileCompleteSuccess?: () => void
+}
+
+function EarnCredits({
+  copy,
+  onClose,
+  isSubscribeSuccess = false,
+  isActivateSuccess = false,
+  isProfileCompleteSuccess = false,
+  onSubscribeSuccess,
+  onActivateSuccess,
+  onProfileCompleteSuccess,
+}: Props) {
+  const { profile, openSignUpPopup, alpcConfig, creditInfo } = useMemberPopupContext()
+  const { pushView } = useViewStack()
+  const { locale } = alpcConfig
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const isLogin = !!profile
+
+  const isSubscribed = useSubscribed({
+    userId: profile?.user_id,
+    brand: alpcConfig.brand,
+    email: profile?.email,
+    locale,
+    apiBaseUrl: alpcConfig.apiBaseUrl,
+  })
+
+  const profileCompleted = useMemo(() => {
+    return isProfileCompleteSuccess || (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)
+  }, [profile, isProfileCompleteSuccess])
+
+  const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(() => ({
+    [EarnCreditsTaskType.Activate]: {
+      finished: !!profile?.activated || isActivateSuccess,
+      onClick: isLogin
+        ? () => pushView({
+            type: MemberPopupPanelType.Activate,
+            props: { onSuccess: onActivateSuccess },
+          })
+        : openSignUpPopup,
+    },
+    [EarnCreditsTaskType.CompleteProfile]: {
+      finished: profileCompleted,
+      onClick: isLogin
+        ? () => pushView({
+            type: MemberPopupPanelType.CompleteProfile,
+            props: { onSuccess: onProfileCompleteSuccess },
+          })
+        : openSignUpPopup,
+    },
+    [EarnCreditsTaskType.Subscribe]: {
+      finished: isSubscribed || isSubscribeSuccess,
+      onClick: isLogin
+        ? () => pushView({
+            type: MemberPopupPanelType.SubscribeEmail,
+            props: { onSuccess: onSubscribeSuccess },
+          })
+        : openSignUpPopup,
+    },
+    [EarnCreditsTaskType.Shop]: {
+      finished: false,
+      link: copy.goShopLink,
+      onClick: isLogin ? undefined : openSignUpPopup,
+    },
+  }), [profile, isLogin, isActivateSuccess, isProfileCompleteSuccess, profileCompleted, isSubscribed, isSubscribeSuccess, openSignUpPopup, pushView, copy.goShopLink])
+
+  const list = useMemo(() => {
+    return copy.list.map(item => {
+      const state = taskStates[item.id]
+      if (!state) return null
+      const buttonLabel = state.finished
+        ? copy.completed
+        : isLogin
+        ? getNotFinishedLabel(item.id, copy)
+        : copy.joinNow
+      return { ...item, ...state, buttonLabel }
+    }).filter(Boolean) as (typeof copy.list[number] & {
+      finished: boolean
+      onClick?: () => void
+      link?: string
+      buttonLabel: string
+    })[]
+  }, [copy, taskStates, isLogin])
+
+  return (
+    <div className="flex flex-col gap-[16px]">
+      <div className="flex flex-col gap-[16px]">
+        <div className="flex flex-col gap-[8px]">
+          {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
+        </div>
+
+        {isLogin && creditInfo && (
+          <div className={cn('flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+            <div className="flex flex-1 flex-col gap-[4px]">
+              <div className="text-[14px] font-[700] text-[#1e2024]">
+                {copy.balanceLabel ?? 'AnkerCredits Balance'}
+              </div>
+              <div className="flex items-end gap-[4px]">
+                <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+                  {numberFormat(creditInfo.available_credit)}
+                </span>
+                <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
+                  {copy.creditUnit ?? 'ankercredits'}
+                </span>
+              </div>
+            </div>
+            <div className="h-full w-px bg-[#dadce0]" />
+            <div className="flex flex-1 flex-col gap-[4px]">
+              <div className="text-[14px] font-[700] text-[#1e2024]">
+                {copy.comingSoonLabel ?? 'Coming Soon'}
+              </div>
+              <div className="flex items-end gap-[4px]">
+                <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+                  {numberFormat(creditInfo.pending_credit ?? 0)}
+                </span>
+                <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
+                  {copy.creditUnit ?? 'ankercredits'}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-[16px]">
+        {copy.subtitle && (
+          <p className="text-[16px] font-[700] text-[#1e2024]">{copy.subtitle}</p>
+        )}
+
+        <div className="flex flex-col">
+          {list.map((item, idx) => (
+            <div key={idx} className="relative py-[16px]">
+              {idx > 0 && <div className="absolute left-0 right-0 top-0 h-px bg-[#dadce0]" />}
+              <div className={cn('flex items-center gap-[12px]', item.finished && 'opacity-60')}>
+                <TaskIcon id={item.id} className="size-[24px] shrink-0" />
+                <div className="flex-1">
+                  <div className="text-[16px] font-[700] text-[#1e2024]">{item.title}</div>
+                  {item.description && (
+                    <div className="mt-[4px] text-[14px] font-[700] text-[#4a4c56]">{item.description}</div>
+                  )}
+                </div>
+                {!item.finished && item.link ? (
+                  <a
+                    href={item.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn('cursor-pointer bg-[#080a0f] min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white', rounded ? 'rounded-[4px]' : 'rounded-none')}
+                  >
+                    {item.buttonLabel}
+                  </a>
+                ) : (
+                  <button
+                    className={cn(
+                      'cursor-pointer min-w-[118px] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',
+                      item.finished ? 'bg-[#767880]' : 'bg-[#080a0f]',
+                      rounded ? 'rounded-[4px]' : 'rounded-none'
+                    )}
+                    disabled={item.finished}
+                    onClick={!item.finished ? item.onClick : undefined}
+                  >
+                    {item.buttonLabel}
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getNotFinishedLabel(id: EarnCreditsTaskType, copy: EarnCreditsCopy): string {
+  switch (id) {
+    case EarnCreditsTaskType.Activate: return copy.activate
+    case EarnCreditsTaskType.CompleteProfile: return copy.completeProfileLabel
+    case EarnCreditsTaskType.Subscribe: return copy.subscribeLabel
+    case EarnCreditsTaskType.Shop: return copy.shopNow
+  }
+}
+
+export default EarnCredits

package/src/components/memberPopup/panels/Referral/hooks/useReferralOverview.ts

@@ -0,0 +1,41 @@
+import useSWR from 'swr'
+import { useMemberPopupContext } from '../../../context/provider'
+
+export type ReferralRewardOverviewResponse = {
+  data: {
+    data: {
+      available: number
+      pending: number
+    }
+  }
+}
+
+export function useReferralOverview(): {
+  isLoading: boolean
+  data?: ReferralRewardOverviewResponse
+} {
+  const { profile, alpcConfig } = useMemberPopupContext()
+  const isLogin = !!profile
+
+  const swrKey = isLogin ? `/api/multipass/mktsrv/v1/referral/reward/overview/cash` : null
+
+  const swrFetcher = async (url: string) => {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'current-language': alpcConfig.locale,
+      },
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    return response.json()
+  }
+
+  const { data, isLoading } = useSWR<ReferralRewardOverviewResponse>(swrKey, swrFetcher, {
+    revalidateOnFocus: false,
+  })
+
+  return { isLoading, data }
+}

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

@@ -0,0 +1,108 @@
+import { Picture } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { useMemberPopupContext } from '../../context/provider'
+import { useReferralOverview } from './hooks/useReferralOverview'
+import { formatPrice } from '../../../credits/context/utils'
+
+import type { ReferralCopy } from '../../type'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  copy: ReferralCopy
+  onClose: () => void
+}
+
+function Referral({ copy, onClose }: Props) {
+  const { profile, alpcConfig } = useMemberPopupContext()
+  const isLogin = !!profile
+  const { brand, currencyCode = 'USD' as string } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const { data } = useReferralOverview()
+
+  const cashAvailable = data?.data?.data?.available ?? 0
+  const cashPending = data?.data?.data?.pending ?? 0
+
+  console.log('cashAvailable', cashAvailable)
+  console.log('cashPending', cashPending)
+  console.log('data', data)
+  console.log('data.data', data?.data)
+
+  return (
+    <div className="flex flex-col gap-[12px]">
+      {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
+
+      {isLogin && (
+        <div
+          className={cn(
+            'flex items-center gap-[12px] bg-[#f5f6f7] p-[16px]',
+            rounded ? 'rounded-[8px]' : 'rounded-none'
+          )}
+        >
+          <div className="flex flex-1 flex-col gap-[4px]">
+            <div className="text-[14px] font-[700] text-[#1e2024]">{copy.cashAvailableLabel}</div>
+            <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+              {formatPrice({ amount: cashAvailable, currencyCode, locale: alpcConfig.locale })}
+            </span>
+          </div>
+          <div className="h-full w-px self-stretch bg-[#dadce0]" />
+          <div className="flex flex-1 flex-col gap-[4px]">
+            <div className="text-[14px] font-[700] text-[#1e2024]">{copy.cashPendingLabel}</div>
+            <span className="text-[24px] font-[700] leading-[1.2] text-[#1e2024]">
+              {formatPrice({ amount: cashPending, currencyCode, locale: alpcConfig.locale })}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {(copy.howToTitle || copy.howToDescription) && (
+        <div className="flex flex-col gap-[8px]">
+          {copy.howToTitle && (
+            <h3 className="text-[20px] font-[700] leading-[1.2] text-[#080a0f]">{copy.howToTitle}</h3>
+          )}
+          {copy.howToDescription && <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.howToDescription}</p>}
+          {copy.learnMoreLabel && copy.learnMoreUrl && (
+            <a
+              href={copy.learnMoreUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
+            >
+              {copy.learnMoreLabel}
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z"
+                  fill="#080A0F"
+                />
+              </svg>
+            </a>
+          )}
+        </div>
+      )}
+
+      {copy.image?.url && (
+        <Picture
+          source={copy.image.url}
+          alt={copy.image.alt ?? ''}
+          className={cn('h-[100px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+        />
+      )}
+
+      {copy.ctaButton && (
+        <a
+          href={copy.ctaUrl ?? '#'}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(
+            'block w-full cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+        >
+          {copy.ctaButton}
+        </a>
+      )}
+    </div>
+  )
+}
+
+export default Referral