@anker-in/campaign-ui 0.5.0-beta.2 → 0.5.0-beta.21

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, 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'
@@ -9,15 +9,13 @@ 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()
+export default function CompleteProfilePanel({ copy, onClose }: Props) {
+  const { profile, fetchCreditInfo, alpcConfig, setIsProfileCompleteSuccess } = useMemberPopupContext()
   const { locale } = alpcConfig
-  const { brand } = useHeadlessContext()
+  const { brand, storeDomain } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [firstName, setFirstName] = useState('')
@@ -29,7 +27,7 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
   const [lastNameError, setLastNameError] = useState('')
 
   const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain })
+  const { countries } = useCountries({ shopifyStoreDomain: storeDomain })
 
   useEffect(() => {
     if (profile) {
@@ -41,6 +39,12 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
     }
   }, [profile])
 
+  useEffect(() => {
+    if (countries.length > 0 && !country) {
+      setCountry(countries[0].id)
+    }
+  }, [countries])
+
   const validate = useCallback(() => {
     let hasError = false
     if (!firstName.trim()) {
@@ -69,21 +73,43 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
     })
     if (success) {
       fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
+      setIsProfileCompleteSuccess(true)
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        event_parameters: {
+          position: 'earn_credits',
+          button_name: 'complete_profile_success',
+          info: 'Member Floating Window',
+        },
+      })
       onClose()
     }
-  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
+  }, [
+    validate,
+    updateProfile,
+    firstName,
+    lastName,
+    phone,
+    country,
+    birthDay,
+    fetchCreditInfo,
+    profile,
+    setIsProfileCompleteSuccess,
+    onClose,
+  ])
 
   return (
-    <div className="flex flex-col gap-[20px]">
-      {copy.subtitle && (
-        <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
-      )}
+    <div className="flex flex-col gap-[16px]">
+      {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')}
+          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
         />
@@ -100,7 +126,10 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
             rounded ? 'rounded-[4px]' : 'rounded-none'
           )}
           value={firstName}
-          onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
+          onChange={e => {
+            setFirstName(e.target.value)
+            setFirstNameError('')
+          }}
         />
         {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
       </div>
@@ -116,7 +145,10 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
             rounded ? 'rounded-[4px]' : 'rounded-none'
           )}
           value={lastName}
-          onChange={e => { setLastName(e.target.value); setLastNameError('') }}
+          onChange={e => {
+            setLastName(e.target.value)
+            setLastNameError('')
+          }}
         />
         {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
       </div>
@@ -124,7 +156,10 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
       <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')}
+          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)}
@@ -134,7 +169,10 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
       <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')}
+          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)}
         />
@@ -143,34 +181,26 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
       <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')}
+          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>
+            <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}
-        >
+        <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}
-        >
+        <Button variant="primary" size="lg" className="flex-1" loading={isLoading} onClick={handleSubmit}>
           {copy.save}
         </Button>
       </div>

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Checkbox, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import { emailValidate } from '../../../credits/context/utils'
@@ -12,7 +12,6 @@ type Props = {
   copy: SubscribeModalCopy
   email?: string
   onClose: () => void
-  onSuccess?: () => void
 }
 
 function getAdCookie() {
@@ -27,8 +26,8 @@ function getAdCookie() {
   }
 }
 
-export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose, onSuccess }: Props) {
-  const { alpcConfig } = useMemberPopupContext()
+export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose }: Props) {
+  const { alpcConfig, setIsSubscribeSuccess, fetchCreditInfo, profile } = useMemberPopupContext()
   const { brand, locale } = alpcConfig
   const { brand: headlessBrand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(headlessBrand)
@@ -64,7 +63,17 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
       const result = await response.json()
       if (!result.errors) {
         setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
-        onSuccess?.()
+        setIsSubscribeSuccess(true)
+        if (profile?.user_id) fetchCreditInfo(profile.user_id)
+        gaTrack({
+          event: 'ga4Event',
+          event_name: 'subscribe',
+          event_parameters: {
+            page_group: copy.dealsType ?? '',
+            position: 'sticky',
+            info: '',
+          },
+        })
         setTimeout(() => {
           setSuccessMessage('')
           onClose()
@@ -77,7 +86,7 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
     } finally {
       setLoading(false)
     }
-  }, [email, policy, locale, brand, copy, onClose, onSuccess])
+  }, [email, policy, locale, brand, copy, onClose, setIsSubscribeSuccess])
 
   return (
     <div className="flex flex-col gap-[12px]">

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useViewStack } from '../../context/viewStack'
 import { useSubscribed } from './hooks/useSubscribed'
@@ -23,91 +23,128 @@ function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: stri
 
 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()
+function EarnCredits({ copy }: Props) {
+  const {
+    profile,
+    openSignUpPopup,
+    alpcConfig,
+    creditInfo,
+    isSubscribeSuccess,
+    isActivateSuccess,
+    isProfileCompleteSuccess,
+  } = useMemberPopupContext()
   const { pushView } = useViewStack()
   const { locale } = alpcConfig
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
+  console.log('creditInfo', creditInfo)
+
   const isLogin = !!profile
 
   const isSubscribed = useSubscribed({
     userId: profile?.user_id,
-    brand: alpcConfig.brand,
+    brand: brand,
     email: profile?.email,
     locale,
     apiBaseUrl: alpcConfig.apiBaseUrl,
   })
 
   const profileCompleted = useMemo(() => {
-    return isProfileCompleteSuccess || (!!(profile?.first_name || profile?.last_name) && !!profile?.phone_number && !!profile?.dob)
+    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])
+  function trackTaskButton(taskId: EarnCreditsTaskType) {
+    const taskButtonNameMap: Record<EarnCreditsTaskType, string> = {
+      [EarnCreditsTaskType.Activate]: 'activate',
+      [EarnCreditsTaskType.CompleteProfile]: 'complete_profile',
+      [EarnCreditsTaskType.Subscribe]: 'subscribe',
+      [EarnCreditsTaskType.Shop]: 'shop',
+    }
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        position: 'earn_credits',
+        button_name: taskButtonNameMap[taskId],
+        info: 'Member Floating Window',
+      },
+    })
+  }
+
+  const taskStates: Record<EarnCreditsTaskType, { finished: boolean; onClick?: () => void; link?: string }> = useMemo(
+    () => ({
+      [EarnCreditsTaskType.Activate]: {
+        finished: !!profile?.activated || isActivateSuccess,
+        onClick: isLogin
+          ? () => {
+              trackTaskButton(EarnCreditsTaskType.Activate)
+              pushView({
+                type: MemberPopupPanelType.Activate,
+              })
+            }
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.CompleteProfile]: {
+        finished: profileCompleted,
+        onClick: isLogin
+          ? () => {
+              trackTaskButton(EarnCreditsTaskType.CompleteProfile)
+              pushView({
+                type: MemberPopupPanelType.CompleteProfile,
+              })
+            }
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.Subscribe]: {
+        finished: isSubscribed || isSubscribeSuccess,
+        onClick: isLogin
+          ? () => {
+              trackTaskButton(EarnCreditsTaskType.Subscribe)
+              pushView({
+                type: MemberPopupPanelType.SubscribeEmail,
+              })
+            }
+          : openSignUpPopup,
+      },
+      [EarnCreditsTaskType.Shop]: {
+        finished: false,
+        link: copy.goShopLink,
+        onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : 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] & {
+    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
@@ -122,15 +159,18 @@ function EarnCredits({
           {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')}>
+        {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.balanceLabel ?? 'AnkerCredits Balance'}
-              </div>
+              <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)}
+                  {numberFormat(creditInfo?.available_credit ?? 0)}
                 </span>
                 <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
                   {copy.creditUnit ?? 'ankercredits'}
@@ -139,12 +179,10 @@ function EarnCredits({
             </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="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)}
+                  {numberFormat(creditInfo?.pending_credit ?? 0)}
                 </span>
                 <span className="text-[14px] font-[700] leading-[1.4] text-[#1e2024]">
                   {copy.creditUnit ?? 'ankercredits'}
@@ -156,15 +194,13 @@ function EarnCredits({
       </div>
 
       <div className="flex flex-col gap-[16px]">
-        {copy.subtitle && (
-          <p className="text-[16px] font-[700] text-[#1e2024]">{copy.subtitle}</p>
-        )}
+        {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')}>
+              <div className={cn('flex items-center gap-[12px]')}>
                 <TaskIcon id={item.id} className="size-[24px] shrink-0" />
                 <div className="flex-1">
                   <div className="text-[16px] font-[700] text-[#1e2024]">{item.title}</div>
@@ -172,12 +208,16 @@ function EarnCredits({
                     <div className="mt-[4px] text-[14px] font-[700] text-[#4a4c56]">{item.description}</div>
                   )}
                 </div>
-                {!item.finished && item.link ? (
+                {!item.finished && item.link && isLogin ? (
                   <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')}
+                    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'
+                    )}
+                    onClick={() => trackTaskButton(item.id)}
                   >
                     {item.buttonLabel}
                   </a>
@@ -186,7 +226,8 @@ function EarnCredits({
                     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'
+                      rounded ? 'rounded-[4px]' : 'rounded-none',
+                      item.finished && 'opacity-60'
                     )}
                     disabled={item.finished}
                     onClick={!item.finished ? item.onClick : undefined}
@@ -205,10 +246,14 @@ function EarnCredits({
 
 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
+    case EarnCreditsTaskType.Activate:
+      return copy.activate
+    case EarnCreditsTaskType.CompleteProfile:
+      return copy.completeProfileLabel
+    case EarnCreditsTaskType.Subscribe:
+      return copy.subscribeLabel
+    case EarnCreditsTaskType.Shop:
+      return copy.shopNow
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { Picture } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useReferralOverview } from './hooks/useReferralOverview'
 import { formatPrice } from '../../../credits/context/utils'
@@ -13,7 +13,7 @@ type Props = {
 }
 
 function Referral({ copy, onClose }: Props) {
-  const { profile, alpcConfig } = useMemberPopupContext()
+  const { profile, alpcConfig, pageHandle } = useMemberPopupContext()
   const isLogin = !!profile
   const { brand, currencyCode = 'USD' as string } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
@@ -23,19 +23,37 @@ function Referral({ copy, onClose }: Props) {
   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)
+  function buildRefUrl(url: string) {
+    try {
+      if (!pageHandle) return url
+      const target = new URL(url, window.location.href)
+      target.searchParams.set('ref', `${pageHandle}_referral`)
+      return target.toString()
+    } catch {
+      return url
+    }
+  }
+
+  function trackReferralCta() {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        position: 'referral',
+        button_name: 'referral_cta',
+        info: 'Member Floating Window',
+      },
+    })
+  }
 
   return (
-    <div className="flex flex-col gap-[12px]">
+    <div className="flex flex-col">
       {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]',
+            'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',
             rounded ? 'rounded-[8px]' : 'rounded-none'
           )}
         >
@@ -56,14 +74,14 @@ function Referral({ copy, onClose }: Props) {
       )}
 
       {(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>
+        <div className="flex mt-[32px] flex-col gap-[8px]">
+          {copy.howToTitle && <h3 className="text-[20px] font-bold leading-[1.2] text-[#080a0f]">{copy.howToTitle}</h3>}
+          {copy.howToDescription && (
+            <p className="text-[14px] font-bold leading-[1.4] text-[#080A0F]">{copy.howToDescription}</p>
           )}
-          {copy.howToDescription && <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.howToDescription}</p>}
           {copy.learnMoreLabel && copy.learnMoreUrl && (
             <a
-              href={copy.learnMoreUrl}
+              href={buildRefUrl(copy.learnMoreUrl)}
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
@@ -84,19 +102,20 @@ 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] w-full', rounded ? 'rounded-[8px]' : 'rounded-none')}
         />
       )}
 
       {copy.ctaButton && (
         <a
-          href={copy.ctaUrl ?? '#'}
+          href={copy.ctaUrl ? buildRefUrl(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',
+            'block w-full mt-[16px] cursor-pointer bg-[#080a0f] py-[14px] text-center text-[14px] font-[700] text-white',
             rounded ? 'rounded-[4px]' : 'rounded-none'
           )}
+          onClick={trackReferralCta}
         >
           {copy.ctaButton}
         </a>