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

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Checkbox, Picture, 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 = {
+  onSuccess?: () => void
+  copy: SubscribeModalCopy
+  email?: string
+  hideForm: boolean
+  onHideForm: () => 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 ActivitiesSubscribeModal({
+  onSuccess,
+  copy,
+  email: initialEmail,
+  hideForm,
+  onHideForm,
+}: 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(() => {
+          onHideForm()
+          setSuccessMessage('')
+        }, 3000)
+      } else {
+        setErrorMessage(result.errors ?? 'Error occurred')
+      }
+    } catch {
+      setErrorMessage('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [email, policy, locale, storeDomain, copy, onSuccess, onHideForm])
+
+  return (
+    <div className="flex flex-col gap-[16px] text-center">
+      {!hideForm && (
+        <>
+          <Text className="text-[22px] font-bold" html={copy.title} />
+          {copy.desc && <Text className="text-left text-[16px] font-semibold text-[#1f2021]" html={copy.desc} />}
+
+          <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="border-[#1d1d1f]" />
+            <label
+              className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
+              dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
+            />
+          </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>
+
+          {errorMessage && (
+            <div className="text-left text-[16px] font-semibold text-[#f84d4f]">
+              <Text html={errorMessage} />
+            </div>
+          )}
+          <div className="text-left text-[16px] font-semibold text-[#52c41a]">
+            <Text html={successMessage} />
+          </div>
+        </>
+      )}
+
+      {copy.promo && (
+        <div className="flex flex-col text-left">
+          <div className="flex flex-col gap-[8px]">
+            {copy.promo?.title && (
+              <h3 className="text-[20px] font-[700] leading-[1.2] text-[#080a0f]">{copy.promo?.title}</h3>
+            )}
+            {copy.promo.description && (
+              <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.promo.description}</p>
+            )}
+            {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (
+              <a
+                href={copy.promo.learnMoreUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
+              >
+                {copy.promo.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.promo.image?.url && (
+            <Picture
+              source={copy.promo.image.url}
+              alt={copy.promo.image.alt ?? ''}
+              className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -14,6 +14,7 @@ type Props = {
   itemImage?: { url: string; alt?: string }
   itemValue?: string
   itemOff?: string
+  itemRules?: string[]
   redeemId: number
   userId?: string
   copy: RedeemCouponModalCopy
@@ -29,6 +30,7 @@ export default function RedeemCouponPanel({
   itemImage,
   itemValue,
   itemOff,
+  itemRules,
   redeemId,
   userId,
   copy,
@@ -80,38 +82,45 @@ export default function RedeemCouponPanel({
     setDisabled(false)
   }, [redeemId])
 
+  const rulesSection = itemRules && itemRules.length > 0 && (
+    <div className="w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+      <ul className="ml-4 grid grid-flow-row gap-[4px]">
+        {itemRules?.map((text, index) => (
+          <li className="list-disc" key={index}>
+            <Text html={text} className="font-bold" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+
   return (
-    <div className="flex flex-col gap-[16px]">
+    <div className="flex flex-col">
       {itemImage?.url && (
-        <div className={cn('relative overflow-hidden w-fit mx-auto', rounded ? 'rounded-[8px]' : 'rounded-none')}>
-          <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] object-contain" />
-          {itemValue && (
-            <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
-              {itemValue}
-              {itemOff ? ` ${itemOff}` : ''}
-            </div>
-          )}
+        <div className="relative w-full px-[24px]">
+          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] w-full object-cover" />
+            {itemValue && (
+              <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
+                {itemValue}
+                {itemOff ? ` ${itemOff}` : ''}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
-        {itemCredits} {pointUnit}
-      </p>
-
-      {!couponCode ? (
-        <div className="flex flex-col gap-[12px] text-center">
-          <Text className="block text-[20px] font-[700]" html={copy.confirmTitle} />
-          <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
-            disabled={disabled}
-            loading={loading}
-            onClick={handleConfirm}
-          >
-            {copy.confirmButton}
-          </Button>
+      {!couponCode && (
+        <div className="flex flex-col gap-[16px] px-[24px] py-[20px]">
+          <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
+            {itemCredits} {pointUnit}
+          </p>
+          {rulesSection}
         </div>
-      ) : (
-        <div className="flex flex-col gap-[12px] text-center">
+      )}
+
+      {couponCode && (
+        <div className="flex flex-col gap-[8px] text-center">
           <div className="flex items-center justify-center gap-[10px]">
             <span className="text-[24px] font-[700]">{couponCode}</span>
             <button
@@ -125,7 +134,10 @@ export default function RedeemCouponPanel({
           <Text className="text-[20px] font-[700]" html={copy.successTitle} />
           <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={copy.successDesc} />
           <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+            className={cn(
+              'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',
+              rounded ? 'rounded-[4px]' : 'rounded-none'
+            )}
             onClick={() => {
               if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
               onClose()
@@ -136,7 +148,28 @@ export default function RedeemCouponPanel({
         </div>
       )}
 
-      {errorInfo && <Text className="text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />}
+      {!couponCode && (
+        <div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
+          <div className="flex flex-col gap-[8px] text-center">
+            <Text className="block text-[16px] font-[700] leading-[1.3]" html={copy.confirmTitle} />
+            <Button
+              className={cn(
+                'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',
+                rounded ? 'rounded-[4px]' : 'rounded-none'
+              )}
+              disabled={disabled}
+              loading={loading}
+              onClick={handleConfirm}
+            >
+              {copy.confirmButton}
+            </Button>
+          </div>
+
+          {errorInfo && (
+            <Text className="mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />
+          )}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -56,10 +56,14 @@ function ConsumeCredits({ copy, onClose }: Props) {
 
         let product
         let variant
-        if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.product) {
+        if (
+          (item.type === ConsumeCreditsItemType.RedeemAndBuy ||
+            item.type === ConsumeCreditsItemType.Product) &&
+          item.product
+        ) {
           product = products?.find((p: any) => p.handle === item.product!.handle)
           variant = product?.variants?.find((v: any) => v.sku === item.product!.sku) ?? product?.variants?.[0]
-          if (!product || !variant) return null
+          if (item.type === ConsumeCreditsItemType.RedeemAndBuy && (!product || !variant)) return null
         }
 
         return { ...item, alpcData, insufficient, soldOut, product, variant }
@@ -74,6 +78,12 @@ function ConsumeCredits({ copy, onClose }: Props) {
   }
 
   function isDisabled(item: (typeof list)[number]) {
+    if (
+      item.type === ConsumeCreditsItemType.GiftCard ||
+      item.type === ConsumeCreditsItemType.Product
+    ) {
+      return item.insufficient
+    }
     return item.soldOut || item.insufficient
   }
 
@@ -82,6 +92,19 @@ function ConsumeCredits({ copy, onClose }: Props) {
       openSignUpPopup()
       return
     }
+    if (!profile?.activated) {
+      pushView({ type: MemberPopupPanelType.Activate })
+      return
+    }
+    if (
+      item.type === ConsumeCreditsItemType.GiftCard ||
+      item.type === ConsumeCreditsItemType.Product
+    ) {
+      if (copy.creditsPage?.url) {
+        window.open(copy.creditsPage.url, '_blank', 'noopener,noreferrer')
+      }
+      return
+    }
     if (item.type === ConsumeCreditsItemType.Coupon) {
       pushView({
         type: MemberPopupPanelType.RedeemCoupon,
@@ -93,6 +116,7 @@ function ConsumeCredits({ copy, onClose }: Props) {
             : item.image,
           itemValue: item.value,
           itemOff: copy.off,
+          itemRules: item.rules,
           redeemId: Number(item.redeemId),
           userId: profile?.user_id,
           alpcConfig,
@@ -136,17 +160,18 @@ function ConsumeCredits({ copy, onClose }: Props) {
           </div>
         ) : (
           <div className="flex flex-col">
-          {list.map((item, idx) => (
+          {list.map((item, idx) => {
+            const hasProduct = !!item.product
+            return (
             <div key={idx} className="relative py-[16px]">
               {idx > 0 && <div className="absolute inset-x-0 top-0 h-px bg-[#dadce0]" />}
               <div className="flex items-center gap-[12px]">
                 {(() => {
-                  const isRedeemAndBuy = item.type === ConsumeCreditsItemType.RedeemAndBuy
                   const mappedImgUrl = copy.imageMapping?.[item.type]?.url
-                  const imgUrl = isRedeemAndBuy
+                  const imgUrl = hasProduct
                     ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
                     : (mappedImgUrl ?? item.image?.url)
-                  const imgAlt = isRedeemAndBuy
+                  const imgAlt = hasProduct
                     ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')
                     : (item.image?.alt ?? '')
                   if (!imgUrl) return null
@@ -156,9 +181,9 @@ function ConsumeCredits({ copy, onClose }: Props) {
                         source={imgUrl}
                         alt={imgAlt}
                         className="flex size-full items-center justify-center"
-                        imgClassName={isRedeemAndBuy ? 'object-cover' : 'h-full w-auto object-contain'}
+                        imgClassName={hasProduct ? 'object-cover' : 'h-full w-auto object-contain'}
                       />
-                      {!isRedeemAndBuy && item.value && (
+                      {!hasProduct && item.value && (
                         <div className="absolute bottom-[20px] left-[4px] text-[14px] font-[800] leading-none text-white">
                           {item.value} {copy.off}
                         </div>
@@ -168,12 +193,12 @@ function ConsumeCredits({ copy, onClose }: Props) {
                 })()}
                 <div className="min-w-0 flex-1">
                   <div className="text-[16px] font-[700] text-[#1e2024] line-clamp-2">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && item.product?.title
+                    {hasProduct && item.product?.title
                       ? item.product.title
                       : item.title}
                   </div>
                   <div className="mt-[4px] text-[14px] text-[#666]">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price != null
+                    {hasProduct && item.price != null
                       ? `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''} + $${Number(item.price).toFixed(2)}`
                       : `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''}`}
                   </div>
@@ -188,17 +213,18 @@ function ConsumeCredits({ copy, onClose }: Props) {
                     {getButtonLabel(item)}
                   </Button>
                   {item.insufficient && (
-                    <div className="pointer-events-none absolute left-[48px] top-full mt-[10px] hidden -translate-x-1/2 group-hover:block">
-                      <div className="relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow md:px-[10px] md:py-[8px]">
+                    <div className="pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block">
+                      <div className="relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow">
                         <p className="text-pretty tracking-[-0.02em] text-[14px]">{copy.insufficientCredits}</p>
-                        <div className="absolute -top-[8px] left-[48px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]" />
+                        <div className="absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]" />
                       </div>
                     </div>
                   )}
                 </div>
               </div>
             </div>
-          ))}
+            )
+          })}
         </div>
         )}
 

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

@@ -48,66 +48,90 @@ function EarnCredits({
   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])
+  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] & {
+    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 +146,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 +166,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,9 +181,7 @@ 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) => (
@@ -177,7 +200,10 @@ function EarnCredits({
                     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'
+                    )}
                   >
                     {item.buttonLabel}
                   </a>
@@ -205,10 +231,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
   }
 }