@anker-in/campaign-ui 0.5.0-beta.8 → 0.5.0

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) {
@@ -74,22 +72,44 @@ export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', on
       dob: birthDay,
     })
     if (success) {
-      fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
+      setTimeout(() => fetchCreditInfo(profile?.user_id), 3000)
+      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
         />
@@ -106,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>
@@ -122,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>
@@ -130,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)}
@@ -140,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)}
         />
@@ -149,33 +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)}
         >
           {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="base" 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="base" 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 { Button, Checkbox, Text } from '@anker-in/headless-ui'
+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,12 +26,12 @@ 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)
-  const [policy, setPolicy] = useState(false)
+  const [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)
   const [email, setEmail] = useState(initialEmail ?? '')
   const [errorMessage, setErrorMessage] = useState('')
   const [successMessage, setSuccessMessage] = useState('')
@@ -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) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)
+        gaTrack({
+          event: 'ga4Event',
+          event_name: 'subscribe',
+          event_parameters: {
+            page_group: copy.dealsType ?? '',
+            position: 'sticky',
+            info: '',
+          },
+        })
         setTimeout(() => {
           setSuccessMessage('')
           onClose()
@@ -77,17 +86,13 @@ 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]">
       <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} />
-        )}
+        {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]">
@@ -99,7 +104,10 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
           )}
           placeholder={copy.placeholder}
           value={email}
-          onChange={e => { setErrorMessage(''); setEmail(e.target.value.trim()) }}
+          onChange={e => {
+            setErrorMessage('')
+            setEmail(e.target.value.trim())
+          }}
         />
 
         <div className="flex w-full items-start gap-[8px]">
@@ -112,18 +120,20 @@ export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose
         </div>
 
         {(errorMessage || successMessage) && (
-          <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
+          <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}
-        >
+        <Button className="w-full" loading={loading} onClick={handleSubmit}>
           {copy.buttonLabel ?? 'Subscribe'}
-        </button>
+        </Button>
       </div>
     </div>
   )

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 { useEffect, useMemo } from 'react'
+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'
@@ -7,6 +7,7 @@ import { EarnCreditsTaskType, MemberPopupPanelType, type EarnCreditsCopy } from
 import { IconBag, IconLock, IconSubscription, IconOrders } from '../../icons'
 import { numberFormat } from '../../../credits/context/utils'
 import { ROUNDED_BRANDS } from '../../../../constants'
+import { Button } from '@anker-in/headless-ui'
 
 function TaskIcon({ id, className }: { id: EarnCreditsTaskType; className?: string }) {
   switch (id) {
@@ -23,32 +24,27 @@ 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,
+    fetchCreditInfo,
+    isSubscribeSuccess,
+    isActivateSuccess,
+    isProfileCompleteSuccess,
+  } = useMemberPopupContext()
   const { pushView } = useViewStack()
   const { locale } = alpcConfig
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
-  console.log('creditInfo', creditInfo)
+  useEffect(() => {
+    if (profile?.user_id) fetchCreditInfo(profile.user_id)
+  }, [])
 
   const isLogin = !!profile
 
@@ -67,42 +63,63 @@ function EarnCredits({
     )
   }, [profile, isProfileCompleteSuccess])
 
+  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,
-                props: { onSuccess: onActivateSuccess },
               })
+            }
           : openSignUpPopup,
       },
       [EarnCreditsTaskType.CompleteProfile]: {
         finished: profileCompleted,
         onClick: isLogin
-          ? () =>
+          ? () => {
+              trackTaskButton(EarnCreditsTaskType.CompleteProfile)
               pushView({
                 type: MemberPopupPanelType.CompleteProfile,
-                props: { onSuccess: onProfileCompleteSuccess },
               })
+            }
           : openSignUpPopup,
       },
       [EarnCreditsTaskType.Subscribe]: {
         finished: isSubscribed || isSubscribeSuccess,
         onClick: isLogin
-          ? () =>
+          ? () => {
+              trackTaskButton(EarnCreditsTaskType.Subscribe)
               pushView({
                 type: MemberPopupPanelType.SubscribeEmail,
-                props: { onSuccess: onSubscribeSuccess },
               })
+            }
           : openSignUpPopup,
       },
       [EarnCreditsTaskType.Shop]: {
         finished: false,
         link: copy.goShopLink,
-        onClick: isLogin ? undefined : openSignUpPopup,
+        onClick: isLogin ? () => trackTaskButton(EarnCreditsTaskType.Shop) : openSignUpPopup,
       },
     }),
     [
@@ -187,38 +204,28 @@ function EarnCredits({
           {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>
-                  {item.description && (
-                    <div className="mt-[4px] text-[14px] font-[700] text-[#4a4c56]">{item.description}</div>
-                  )}
+                  {item.credits && <div className="mt-[4px] text-[14px] font-bold text-[#4A4C56]">{item.credits}</div>}
                 </div>
-                {!item.finished && item.link ? (
-                  <a
+                {!item.finished && item.link && isLogin ? (
+                  <Button
+                    as="a"
+                    size="base"
                     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="min-w-[116px]"
+                    onClick={() => trackTaskButton(item.id)}
                   >
                     {item.buttonLabel}
-                  </a>
+                  </Button>
                 ) : (
-                  <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}
-                  >
+                  <Button size="base" disabled={item.finished} className="min-w-[116px]" onClick={item.onClick}>
                     {item.buttonLabel}
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>

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 { Button, Picture } from '@anker-in/headless-ui'
+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,22 +102,22 @@ function Referral({ copy, onClose }: Props) {
         <Picture
           source={copy.image.url}
           alt={copy.image.alt ?? ''}
-          className={cn('mt-[8px] 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 ?? '#'}
+        <Button
+          size="base"
+          as="a"
+          className="mt-[16px]"
+          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',
-            rounded ? 'rounded-[4px]' : 'rounded-none'
-          )}
+          onClick={trackReferralCta}
         >
           {copy.ctaButton}
-        </a>
+        </Button>
       )}
     </div>
   )

package/src/components/memberPopup/type.ts

@@ -108,7 +108,6 @@ export type EarnCreditsCopy = {
   list: {
     id: EarnCreditsTaskType
     title: string
-    description: string
     credits?: string
   }[]
   // 子弹窗文案
@@ -137,7 +136,9 @@ export type SubscribeModalCopy = {
   desc?: string
   placeholder: string
   policy?: string
+  policyDefaultChecked?: boolean
   successTips?: string
+  subscribedLabel?: string
   dealsType?: string
   buttonLabel?: string
   single_brand_subscribe?: boolean
@@ -160,14 +161,17 @@ export type ConsumeCreditsopy = {
   unlockRewards: string
   btnRedeem: string
   insufficientCredits?: string
-  pointUnit?: string
+  balanceLabel?: string
+  comingSoonLabel?: string
+  creditUnit?: string
   off?: string
+  giftCard?: string
   imageMapping?: {
     [key in ConsumeCreditsItemType]?: { url: string }
   }
   list: ConsumeCreditsItem[]
   redeemModal: RedeemCouponModalCopy
-  creditsPage?: { label: string; url: string }
+  creditsPage?: { label: string; url: string; redeemListSectionId?: string }
 }
 
 export type ConsumeCreditsItem = {
@@ -185,6 +189,7 @@ export type ConsumeCreditsItem = {
 export type RedeemCouponModalCopy = {
   confirmTitle: string
   confirmButton: string
+  off?: string
   commonError: string
   redeemLimitError: string
   inventoryNotEnough: string
@@ -194,6 +199,8 @@ export type RedeemCouponModalCopy = {
   successDesc: string
   successButton: string
   successButtonUrl?: string
+  copyLabel?: string
+  copiedLabel?: string
 }
 
 // ─── Referral Copy ───────────────────────────────────
@@ -236,4 +243,14 @@ export type MemberPopupContextValue = {
   openSignInPopup: () => void
   taskIdToTypeMapping?: Record<string, DTC_TASK_TYPE>
   alpcConfig: AlpcConfig
+  pageHandle?: string
+}
+
+export type MemberPopupInternalContextValue = MemberPopupContextValue & {
+  isSubscribeSuccess: boolean
+  setIsSubscribeSuccess: (v: boolean) => void
+  isActivateSuccess: boolean
+  setIsActivateSuccess: (v: boolean) => void
+  isProfileCompleteSuccess: boolean
+  setIsProfileCompleteSuccess: (v: boolean) => void
 }